From 5ed749a14173f6f209f761c2c23a2e77a0330ca6 Mon Sep 17 00:00:00 2001
From: Kevin Koech <kevinkoech@MacBook-Pro.local>
Date: Thu, 16 Jan 2025 11:57:51 +0300
Subject: [PATCH 1/6] Bump Material UI version from 5.16.6 => 6.4.0

---
 .../components/Accordion/Accordion.snap.js    | 372 +++++++-------
 .../src/components/Articles/Articles.snap.js  |  34 +-
 .../src/components/ComboBox/ComboBox.snap.js  |  31 +-
 .../CommunityPlatforms.snap.js                |  15 +-
 .../Consultations/Consultations.snap.js       |   4 +-
 .../ContributorCard/ContributorCard.snap.js   |  14 +-
 .../src/components/Dataset/Dataset.snap.js    |  43 +-
 .../DatasetCard/DatasetCard.snap.js           |  30 +-
 .../Datasets/DatasetFilterBar.snap.js         | 129 +++--
 .../src/components/Datasets/Datasets.snap.js  | 131 +++--
 .../DesktopNavBar/DesktopNavBar.snap.js       |  47 +-
 .../src/components/Document/Document.snap.js  |  19 +-
 .../DocumentCard/DocumentCard.snap.js         |  17 +-
 .../Documents/DocumentFilterBar.snap.js       |  51 +-
 .../components/Documents/Documents.snap.js    |  63 ++-
 .../DropdownMenu/DropdownMenu.snap.js         |   8 +-
 .../components/Ecosystem/Ecosystem.snap.js    |  88 ++--
 .../src/components/Entity/Entity.snap.js      | 163 +++---
 .../src/components/Error/Error.snap.js        |  13 +-
 .../components/ErrorPage/ErrorPage.snap.js    |  13 +-
 .../components/Explainers/Explainer.snap.js   |   8 +-
 .../components/Explainers/Explainers.snap.js  |  44 +-
 .../src/components/FAQ/FAQ.snap.js            | 376 +++++++-------
 .../FeaturedPostCard/FeaturedPostCard.snap.js |  24 +-
 .../FeaturedVideos/FeaturedVideo.snap.js      |  12 +-
 .../FeaturedVideos/FeaturedVideoCard.snap.js  |   6 +-
 .../FlourishChart/FlourishChart.snap.js       |   6 +-
 .../FocalCountries/FocalCountries.snap.js     |   6 +-
 .../src/components/Footer/Footer.snap.js      |  20 +-
 .../src/components/Grantees/Grantees.snap.js  | 486 ++++++++++--------
 .../GuidingPrinciples.snap.js                 | 376 +++++++-------
 .../src/components/Helpdesk/Helpdesk.snap.js  |  15 +-
 .../HelpdeskPageContent.snap.js               |   9 +-
 .../src/components/Hero/Hero.snap.js          |  31 +-
 .../components/Impressum/Impressum.snap.js    |  18 +-
 .../LanguageButton/LanguageButton.snap.js     |  11 +-
 .../src/components/Layout/Layout.snap.js      |  70 ++-
 .../src/components/LongForm/LongForm.snap.js  |   2 +-
 .../LongFormMediaBlock.snap.js                |   6 +-
 .../LongFormRichText/LongFormRichText.snap.js |   2 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   8 +-
 .../src/components/Mooc/Mooc.snap.js          |  10 +-
 .../src/components/NavBar/NavBar.snap.js      |  53 +-
 .../NavBarDropdown/NavBarDropdown.snap.js     |  10 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  38 +-
 .../NavBarNavMenu/NavBarNavMenu.snap.js       |  32 +-
 .../NextPrevPagination.snap.js                |   5 +-
 .../PaginationButton.snap.js                  |   3 +-
 .../OpenCloseIcon/OpenCloseIcon.snap.js       |   2 +-
 .../Opportunity/Opportunity.snap.js           |  19 +-
 .../OpportunityCard/OpportunityCard.snap.js   |  19 +-
 .../OpportunityCardGrid.snap.js               |  53 +-
 .../OpportunityCardHeader.snap.js             |   5 +-
 .../OpportunityCards/OpportunityCards.snap.js |  61 ++-
 .../OpportunityHeader.snap.js                 |   6 +-
 .../OpportunityPage/OpportunityPage.snap.js   |  97 ++--
 .../OrganisationCard/OrganisationCard.snap.js |  14 +-
 .../OrganisationImageLink.snap.js             |   9 +-
 .../PageDescription/PageDescription.snap.js   |   4 +-
 .../components/PageHeader/PageHeader.snap.js  |  10 +-
 .../src/components/PostCard/PostCard.snap.js  |  16 +-
 .../components/Repository/Repository.snap.js  |  16 +-
 .../components/Resources/Resources.snap.js    |  50 +-
 .../src/components/RichText/RichText.snap.js  |   8 +-
 .../SearchInput/SearchInput.snap.js           |  17 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   8 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SpotlightCard/SpotlightCard.snap.js       |   2 +-
 .../src/components/Switch/Switch.snap.js      |  10 +-
 .../src/components/Tool/Tool.snap.js          | 103 ++--
 .../src/components/ToolCard/ToolCard.snap.js  |  23 +-
 .../YoutubeVideoPlayer.snap.js                |   2 +-
 .../ArticleCard/ArticleCard.snap.js           |   2 +-
 .../ArticleCardContent.snap.js                |   2 +-
 .../ArticleCardMedia/ArticleCardMedia.snap.js |   2 +-
 .../ArticleGrid/ArticleGrid.snap.js           |   2 +-
 .../ArticleHeader/ArticleHeader.snap.js       |  10 +-
 .../ArticlePage/ArticlePage.snap.js           |  46 +-
 .../src/components/Articles/Articles.snap.js  |  82 +--
 .../src/components/Author/Author.snap.js      |   2 +-
 .../Breadcrumbs/Breadcrumbs.snap.js           |  10 +-
 .../components/CMSContent/CMSContent.snap.js  |  18 +-
 .../components/ChoiceChip/ChoiceChip.snap.js  |   4 +-
 .../ChoiceChipGroup/ChoiceChipGroup.snap.js   |   2 +-
 .../CustomPageHeader/CustomPageHeader.snap.js |   7 +-
 .../FeaturedArticle/FeaturedArticle.snap.js   |  26 +-
 .../components/FilterBar/FilterBar.snap.js    |  25 +-
 .../src/components/Footer/Footer.snap.js      |   2 +-
 .../src/components/Input/Input.snap.js        |  35 --
 .../LongFormExternalEmbed.snap.js             |   2 +-
 .../LongFormMedia/LongFormMedia.snap.js       |   4 +-
 .../LongFormRichText/LongFormRichText.snap.js |  10 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   2 +-
 .../src/components/NavBar/NavBar.snap.js      |   9 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  32 +-
 .../NewsletterSubscription.snap.js            |   2 +-
 .../PaginationButton.snap.js                  |   7 +-
 .../components/PageHeader/PageHeader.snap.js  |   6 +-
 .../RelatedStories/RelatedStories.snap.js     |  20 +-
 .../SearchInput/SearchInput.snap.js           |  19 +-
 .../SectionDivider/SectionDivider.snap.js     |   4 +-
 .../ShareButton/ShareButton.snap.js           |   6 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   6 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SocialMediaButton.snap.js                 |   4 +-
 .../TooltipButton/TooltipButton.snap.js       |   9 +-
 .../components/AboutTeam/AboutTeam.snap.js    |   4 +-
 .../src/components/Card/Card.snap.js          |   3 +-
 .../DataIndicators/DataIndicators.snap.js     |   7 +-
 .../DropdownSearch/DropdownSearch.snap.js     |  17 +-
 .../HURUmap/TreeView/TreeView.snap.js         |  22 +-
 .../src/components/Header/Header.snap.js      |   4 +-
 .../src/components/Hero/Hero.snap.js          |  25 +-
 .../src/components/PageHero/PageHero.snap.js  |  10 +-
 .../components/RichHeader/RichHeader.snap.js  |   6 +-
 .../src/components/Summary/Summary.snap.js    |  16 +-
 .../AboutChildPageHeader.snap.js              |   8 +-
 .../AboutPageEntity/AboutPageEntity.snap.js   |   2 +-
 .../AccoladeBadge/AccoladeBadge.snap.js       |   8 +-
 .../ArticleCard/ArticleCard.snap.js           |   2 +-
 .../ArticleCardContent.snap.js                |   2 +-
 .../ArticleCardMedia/ArticleCardMedia.snap.js |   2 +-
 .../ArticleGrid/ArticleGrid.snap.js           |   2 +-
 .../ArticleHeader/ArticleHeader.snap.js       |  10 +-
 .../ArticlePage/ArticlePage.snap.js           |  46 +-
 .../src/components/Articles/Articles.snap.js  |  82 +--
 .../src/components/Author/Author.snap.js      |   2 +-
 .../Breadcrumbs/Breadcrumbs.snap.js           |  10 +-
 .../components/CMSContent/CMSContent.snap.js  |  18 +-
 .../components/ChoiceChip/ChoiceChip.snap.js  |   4 +-
 .../ChoiceChipGroup/ChoiceChipGroup.snap.js   |   2 +-
 .../ContactForm/ContactForm.snap.js           |   4 +-
 .../CustomPageHeader/CustomPageHeader.snap.js |   7 +-
 .../components/ErrorHero/ErrorHero.snap.js    |   2 +-
 .../FeaturedArticle/FeaturedArticle.snap.js   |  26 +-
 .../components/FilterBar/FilterBar.snap.js    |  25 +-
 .../src/components/Footer/Footer.snap.js      |   2 +-
 .../components/GetInTouch/GetInTouch.snap.js  |  15 +-
 .../GetInvolved/GetInvolved.snap.js           |  22 +-
 .../GuidingPrinciplesCard.snap.js             |   7 +-
 .../src/components/Hero/Hero.snap.js          |   6 +-
 .../components/ImpactCard/ImpactCard.snap.js  |  15 +-
 .../ImpactCardList/ImpactCardList.snap.js     |  17 +-
 .../src/components/Input/Input.snap.js        |  35 --
 .../LongFormExternalEmbed.snap.js             |   2 +-
 .../LongFormMedia/LongFormMedia.snap.js       |   4 +-
 .../LongFormRichText/LongFormRichText.snap.js |  10 +-
 .../MeetOurTeam/MeetOurTeam.snap.js           |  13 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   2 +-
 .../src/components/NavBar/NavBar.snap.js      |   9 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  32 +-
 .../NewsAndStories/NewsAndStories.snap.js     |  35 +-
 .../NewsletterSubscription.snap.js            |   2 +-
 .../PaginationButton.snap.js                  |   7 +-
 .../Opportunities/Opportunities.snap.js       |  27 +-
 .../OpportunityCard/OpportunityCard.snap.js   |  22 +-
 .../OpportunityCardList.snap.js               |  22 +-
 .../components/OurMission/OurMission.snap.js  |  60 +--
 .../src/components/OurTeam/OurTeam.snap.js    |  23 +-
 .../components/PageHeader/PageHeader.snap.js  |   6 +-
 .../src/components/Project/Project.snap.js    |  66 +--
 .../ProjectCard/ProjectCard.snap.js           |  22 +-
 .../ProjectCardMedia/ProjectCardMedia.snap.js |   2 +-
 .../ProjectDetails/ProjectDescription.snap.js |   5 +-
 .../ProjectDescriptionButton.snap.js          |   3 +-
 .../ProjectDetails/ProjectDetails.snap.js     |  14 +-
 .../ProjectStakeholders.snap.js               |  16 +-
 .../ProjectPageHeader.snap.js                 |  44 +-
 .../ProjectTile/ProjectTile.snap.js           |  12 +-
 .../ProjectTileList/ProjectTileList.snap.js   |  14 +-
 .../src/components/Projects/Projects.snap.js  |  21 +-
 .../RelatedStories/RelatedStories.snap.js     |  20 +-
 .../src/components/RichText/RichText.snap.js  |   8 +-
 .../SearchInput/SearchInput.snap.js           |  19 +-
 .../SectionDivider/SectionDivider.snap.js     |   4 +-
 .../ShareButton/ShareButton.snap.js           |   6 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   6 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SocialMediaButton.snap.js                 |   4 +-
 .../TeamMemberCard/TeamMemberCard.snap.js     |  11 +-
 .../TooltipButton/TooltipButton.snap.js       |   9 +-
 .../MobileNavigation/NavigationList.js        |  14 +-
 .../src/Copyright/Copyright.snap.js           |   4 +-
 .../src/ImageButton/ImageButton.snap.js       |   5 +-
 .../commons-ui-core/src/NavBar/NavBar.snap.js |   7 +-
 .../src/QuickLinks/QuickLinks.snap.js         |   8 +-
 .../src/Section/Section.snap.js               |   2 +-
 .../SocialMediaIconLink.snap.js               |   4 +-
 .../src/StayInTouch/StayInTouch.snap.js       |   2 +-
 .../commons-ui-next/src/Figure/Figure.snap.js |   4 +-
 .../src/Link/PagesRouterLink.snap.js          |   2 +-
 .../src/Link/StyledLink.snap.js               |   2 +-
 .../src/RichText/RichText.snap.js             |   8 +-
 .../hurumap-core/src/Action/Action.snap.js    |   9 +-
 .../src/Download/Download.snap.js             |   6 +-
 .../src/IndicatorTitle/IndicatorTitle.snap.js |   2 +-
 .../src/Location/Location.snap.js             |   8 +-
 .../LocationHighlight.snap.js                 |   4 +-
 packages/hurumap-core/src/Share/Share.snap.js |  13 +-
 .../src/Share/ShareButton.snap.js             |   2 +-
 .../hurumap-next/src/Source/Source.snap.js    |   4 +-
 201 files changed, 2760 insertions(+), 2380 deletions(-)
 delete mode 100644 apps/civicsignalblog/src/components/Input/Input.snap.js
 delete mode 100644 apps/codeforafrica/src/components/Input/Input.snap.js

diff --git a/apps/charterafrica/src/components/Accordion/Accordion.snap.js b/apps/charterafrica/src/components/Accordion/Accordion.snap.js
index 1ce29ce71..133577fcf 100644
--- a/apps/charterafrica/src/components/Accordion/Accordion.snap.js
+++ b/apps/charterafrica/src/components/Accordion/Accordion.snap.js
@@ -3,71 +3,76 @@
 exports[`<Accordion /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-controls="panel-63f388c3ebe92a85650e8051-content"
-      aria-expanded="false"
-      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-      id="panel-63f388c3ebe92a85650e8051-header"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
     >
-      <div
-        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+      <button
+        aria-controls="panel-63f388c3ebe92a85650e8051-content"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+        id="panel-63f388c3ebe92a85650e8051-header"
+        tabindex="0"
+        type="button"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+        <span
+          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
           >
             <div
-              class="css-jijv3e"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
+                class="css-jijv3e"
+              >
+                <div
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                  focusable="false"
+                  viewbox="0 0 24 24"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-          >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
-                Open Source
+                <div
+                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                >
+                  Open Source
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </div>
-    </div>
+        </span>
+        <span
+          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+        >
+          <div
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+            focusable="false"
+            viewbox="0 0 24 24"
+          />
+        </span>
+      </button>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -76,14 +81,14 @@ exports[`<Accordion /> renders unchanged 1`] = `
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
               id="panel-63f388c3ebe92a85650e8051-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -96,71 +101,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-controls="panel-63f388e0ebe92a85650e8052-content"
-      aria-expanded="false"
-      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-      id="panel-63f388e0ebe92a85650e8052-header"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
     >
-      <div
-        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+      <button
+        aria-controls="panel-63f388e0ebe92a85650e8052-content"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+        id="panel-63f388e0ebe92a85650e8052-header"
+        tabindex="0"
+        type="button"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+        <span
+          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
           >
             <div
-              class="css-jijv3e"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
+                class="css-jijv3e"
+              >
+                <div
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                  focusable="false"
+                  viewbox="0 0 24 24"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-          >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
-                Teamwork
+                <div
+                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                >
+                  Teamwork
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </div>
-    </div>
+        </span>
+        <span
+          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+        >
+          <div
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+            focusable="false"
+            viewbox="0 0 24 24"
+          />
+        </span>
+      </button>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -169,14 +179,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
               id="panel-63f388e0ebe92a85650e8052-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -189,71 +199,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-controls="panel-63f388f9ebe92a85650e8053-content"
-      aria-expanded="false"
-      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-      id="panel-63f388f9ebe92a85650e8053-header"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
     >
-      <div
-        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+      <button
+        aria-controls="panel-63f388f9ebe92a85650e8053-content"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+        id="panel-63f388f9ebe92a85650e8053-header"
+        tabindex="0"
+        type="button"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+        <span
+          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
           >
             <div
-              class="css-jijv3e"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
+                class="css-jijv3e"
+              >
+                <div
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                  focusable="false"
+                  viewbox="0 0 24 24"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-          >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
-                Accountability
+                <div
+                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                >
+                  Accountability
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </div>
-    </div>
+        </span>
+        <span
+          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+        >
+          <div
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+            focusable="false"
+            viewbox="0 0 24 24"
+          />
+        </span>
+      </button>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -262,14 +277,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
               id="panel-63f388f9ebe92a85650e8053-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -282,71 +297,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-controls="panel-63f38902ebe92a85650e8054-content"
-      aria-expanded="false"
-      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-      id="panel-63f38902ebe92a85650e8054-header"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
     >
-      <div
-        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+      <button
+        aria-controls="panel-63f38902ebe92a85650e8054-content"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+        id="panel-63f38902ebe92a85650e8054-header"
+        tabindex="0"
+        type="button"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+        <span
+          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
           >
             <div
-              class="css-jijv3e"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
+                class="css-jijv3e"
+              >
+                <div
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                  focusable="false"
+                  viewbox="0 0 24 24"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-          >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
-                Impact
+                <div
+                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                >
+                  Impact
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </div>
-    </div>
+        </span>
+        <span
+          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+        >
+          <div
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+            focusable="false"
+            viewbox="0 0 24 24"
+          />
+        </span>
+      </button>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -355,14 +375,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
               id="panel-63f38902ebe92a85650e8054-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/Articles/Articles.snap.js b/apps/charterafrica/src/components/Articles/Articles.snap.js
index 7a832c4c1..655949c5b 100644
--- a/apps/charterafrica/src/components/Articles/Articles.snap.js
+++ b/apps/charterafrica/src/components/Articles/Articles.snap.js
@@ -9,7 +9,7 @@ exports[`<Articles /> renders unchanged 1`] = `
       class="MuiBox-root css-e2yz6z"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-dygcit-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1k9ut7q-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1bnx1lo-MuiGrid-root"
@@ -18,40 +18,44 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5 css-1lirkz0-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5 css-jx2mcl-MuiTypography-root"
             />
           </div>
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-xmiuqd-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-kevmqv-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
                 placeholder="Search"
                 type="search"
                 value=""
               />
               <button
                 aria-label="search"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+                id=":r0:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-yjsfm1"
+                  class="css-81qg8w"
                 >
                   <span>
                     Search
@@ -64,14 +68,13 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary css-a46zki-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiSelect-root css-1ex860j-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
-                aria-controls=":r0:"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-label="Without label"
-                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1mtwe1r-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1mfuego-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
                 role="combobox"
                 tabindex="0"
               >
@@ -80,13 +83,13 @@ exports[`<Articles /> renders unchanged 1`] = `
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
+                class="MuiSelect-nativeInput css-j0riat-MuiSelect-nativeInput"
                 tabindex="-1"
                 value="-publishedOn"
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-lohd6h-MuiSvgIcon-root-MuiSelect-icon"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -97,12 +100,13 @@ exports[`<Articles /> renders unchanged 1`] = `
               </svg>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
diff --git a/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js b/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
index 1a700c49b..837f26f07 100644
--- a/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
+++ b/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
@@ -3,13 +3,13 @@
 exports[`<ComboBox /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-cd7l2b-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
   >
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-cmpglg-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-autocomplete="list"
@@ -17,7 +17,7 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           aria-invalid="false"
           autocapitalize="none"
           autocomplete="off"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           role="combobox"
           spellcheck="false"
@@ -25,18 +25,22 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           value="Countries"
         />
         <div
-          class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+          class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
         >
           <button
             aria-label="Clear"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+            id=":r2:"
             tabindex="-1"
             title="Clear"
             type="button"
           >
+            <span
+              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+            />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
               data-testid="CloseIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -48,26 +52,31 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           </button>
           <button
             aria-label="Open"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+            id=":r3:"
             tabindex="-1"
             title="Open"
             type="button"
           >
+            <span
+              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
               focusable="false"
             />
           </button>
         </div>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-ihdtdm"
+            class="css-w4cd9x"
           >
             <span
+              aria-hidden="true"
               class="notranslate"
             >
               ​
diff --git a/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js b/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
index a313601d6..dccafd77e 100644
--- a/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
+++ b/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
@@ -15,11 +15,11 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
           class="MuiBox-root css-7ehmit"
         >
           <figure
-            class="MuiBox-root css-p826pz"
+            class="MuiBox-root css-10sllnv"
           >
             <img
               alt="Newsletter"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -34,11 +34,11 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="Newsletter"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -50,7 +50,7 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
               class="MuiBox-root css-y8s3qt"
             >
               <h3
-                class="MuiTypography-root MuiTypography-h3Small css-xeim5i-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h3Small css-n2yqz7-MuiTypography-root"
               >
                 Newsletter
               </h3>
@@ -58,15 +58,16 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
                 class="MuiBox-root css-c33e1h"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p3 css-1hy6kbg-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p3 css-1aj3ole-MuiTypography-root"
                 >
                   Receive updates on the Charter Project Africa
                 </p>
               </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary 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 css-druj3j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
+              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
diff --git a/apps/charterafrica/src/components/Consultations/Consultations.snap.js b/apps/charterafrica/src/components/Consultations/Consultations.snap.js
index 01833974f..dc53920ad 100644
--- a/apps/charterafrica/src/components/Consultations/Consultations.snap.js
+++ b/apps/charterafrica/src/components/Consultations/Consultations.snap.js
@@ -6,10 +6,10 @@ exports[`<Consultations /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-27tpcc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11jnlxf-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h2 css-yocep0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 css-1698jfb-MuiTypography-root"
       >
         Sample tiltle
       </div>
diff --git a/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js b/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
index 74ebf07eb..2747506c8 100644
--- a/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
+++ b/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
@@ -3,32 +3,32 @@
 exports[`<ContributorCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-10z892v-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zoydxh-MuiCardMedia-root"
       />
       <div
-        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
+        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-l2ultw-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1b7pqoa-MuiTypography-root"
         >
           Tool Name
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-zpa7jo-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1xge335-MuiTypography-root"
         >
           Sample description
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/Dataset/Dataset.snap.js b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
index 59a22f5c3..65d607154 100644
--- a/apps/charterafrica/src/components/Dataset/Dataset.snap.js
+++ b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
@@ -6,7 +6,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] css-o70cs7-MuiGrid-root"
@@ -15,20 +15,20 @@ exports[`<Dataset /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-ucdck3-MuiGrid-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-p1 css-i1xkt3-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1dr4mcp-MuiTypography-root"
           >
             Back to Datasets
           </a>
           <h2
-            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-1vv4c3h-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-xvgnvn-MuiTypography-root"
           >
             Document Title
           </h2>
           <p
-            class="MuiTypography-root MuiTypography-p1 css-l6prdf-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1mclz91-MuiTypography-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-inherit css-dhy9gx-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-inherit css-1wojwvd-MuiTypography-root"
             >
               Created January 1, 2021
             </span>
@@ -37,39 +37,40 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1phk7xb-MuiGrid-root"
           >
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1puf64w-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1bfmoy7-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
               >
                 CSV
               </span>
             </div>
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1g3w73k-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-7i6xv5-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
               >
                 PDF
               </span>
             </div>
           </div>
           <button
-            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"
+            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-cctx58-MuiButtonBase-root-MuiButton-root"
+            id=":r0:"
             tabindex="0"
             target="_blank"
             type="button"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-1xskro6-MuiButton-startIcon"
             >
               <div />
             </span>
             Open Dataset
           </button>
           <div
-            class="MuiTypography-root MuiTypography-p1 css-n4k5ds-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1nxupmx-MuiTypography-root"
           >
             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>
@@ -78,7 +79,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-[object Object] MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-kdi1tf-MuiGrid-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-p1 css-1w5j2yd-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1n0t3bi-MuiTypography-root"
           >
             Back to Datasets
           </a>
@@ -86,7 +87,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiStack-root css-1xe1uy8-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
             >
               Share Via
             </div>
@@ -100,7 +101,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -112,7 +113,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -124,7 +125,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -134,7 +135,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
         </div>
       </div>
       <a
-        class="MuiTypography-root MuiTypography-p1 css-1v10z4i-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p1 css-1wd86cb-MuiTypography-root"
       >
         Back to Datasets
       </a>
@@ -148,7 +149,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <h3
-              class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-11gtfkg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1k4ywuw-MuiTypography-root"
             >
               See more datasets
             </h3>
@@ -157,14 +158,14 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-p1 css-1wdkhl3-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-z9sjxm-MuiTypography-root"
             >
               See more datasets
             </a>
           </div>
         </div>
         <a
-          class="MuiTypography-root MuiTypography-p1 css-qnck1c-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-9llhji-MuiTypography-root"
         >
           Back to Datasets
         </a>
diff --git a/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js b/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
index 6214d2600..c0481d19d 100644
--- a/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
+++ b/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
@@ -3,29 +3,30 @@
 exports[`<DatasetCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-dzxyww-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-oclxzy-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <a
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       href="/resources/datasets"
       tabindex="0"
     >
       <div
-        class="MuiCardContent-root css-16iq3h-MuiCardContent-root"
+        class="MuiCardContent-root css-tem57g-MuiCardContent-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-[object Object] css-bkp0sa-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-[object Object] css-iewyyr-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SmallSemiBold css-17k81ph-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1trh6s6-MuiTypography-root"
             >
               Document Title
             </h5>
             <p
-              class="MuiTypography-root MuiTypography-p1 css-1pop01s-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-atoqz6-MuiTypography-root"
             >
                
               Created
@@ -33,7 +34,7 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
               January 1, 2021
             </p>
             <p
-              class="MuiTypography-root MuiTypography-p1SemiBold css-1egbhxv-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1SemiBold css-9djn7y-MuiTypography-root"
             >
               Author Name
             </p>
@@ -42,12 +43,13 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-ls0fcs-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-so49wn-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-x22hae-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-157zrhe-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
@@ -58,19 +60,19 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-6thyz8-MuiGrid-root"
           >
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1puf64w-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1bfmoy7-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
               >
                 CSV
               </span>
             </div>
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1g3w73k-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-7i6xv5-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
               >
                 PDF
               </span>
@@ -79,7 +81,7 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js b/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
index ce4bd935b..c9412787a 100644
--- a/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
+++ b/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
@@ -6,39 +6,43 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
     class="MuiBox-root css-1kgakwq"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-2 css-uzx68p-MuiGrid-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
             placeholder="Search"
             type="search"
             value=""
           />
           <button
             aria-label="search"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+            id=":r0:"
             tabindex="0"
             type="button"
           >
+            <span
+              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 16 16"
             />
           </button>
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-yjsfm1"
+              class="css-81qg8w"
             >
               <span>
                 Search
@@ -51,13 +55,13 @@ 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-cd7l2b-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
                 aria-autocomplete="list"
@@ -65,26 +69,30 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r0:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r1:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value="Sort"
               />
               <div
-                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  id=":r3:"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -96,26 +104,31 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  id=":r4:"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -130,16 +143,16 @@ 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-2uxksm-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-4u29cd-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
               >
                 2 Countries
               </p>
@@ -149,26 +162,30 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r2:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r5:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value=""
               />
               <div
-                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  id=":r7:"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -180,26 +197,31 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  id=":r8:"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -214,16 +236,16 @@ 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-2uxksm-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-4u29cd-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
               >
                 Agriculture
               </p>
@@ -233,26 +255,30 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r4:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r9:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value=""
               />
               <div
-                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  id=":rb:"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -264,26 +290,31 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  id=":rc:"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -298,22 +329,24 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-3 MuiGrid-grid-lg-3 css-10brl9b-MuiGrid-root"
       >
         <p
-          class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
         >
           Show
           :
         </p>
         <button
-          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"
+          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-zz8rc6-MuiButtonBase-root-MuiButton-root"
           disabled=""
+          id=":rd:"
           tabindex="-1"
           type="button"
         >
           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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-vjivbx-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
           href="/documents"
+          id=":re:"
           tabindex="0"
         >
           Documents
diff --git a/apps/charterafrica/src/components/Datasets/Datasets.snap.js b/apps/charterafrica/src/components/Datasets/Datasets.snap.js
index baa59398c..aa382328f 100644
--- a/apps/charterafrica/src/components/Datasets/Datasets.snap.js
+++ b/apps/charterafrica/src/components/Datasets/Datasets.snap.js
@@ -6,45 +6,49 @@ exports[`<Datasets /> renders unchanged 1`] = `
     class="MuiBox-root css-yr9t7q"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16qnzbm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vbgufp-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-1kgakwq"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-2 css-uzx68p-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
                 placeholder="Search"
                 type="search"
                 value=""
               />
               <button
                 aria-label="search"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+                id=":r0:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-yjsfm1"
+                  class="css-81qg8w"
                 >
                   <span>
                     Search
@@ -57,13 +61,13 @@ 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-cd7l2b-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <input
                     aria-autocomplete="list"
@@ -71,26 +75,30 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r0:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r1:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value="Sort"
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      id=":r3:"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -102,26 +110,31 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      id=":r4:"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-ihdtdm"
+                      class="css-w4cd9x"
                     >
                       <span
+                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -136,16 +149,16 @@ 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-2uxksm-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-4u29cd-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
                   >
                     Countries
                   </p>
@@ -155,26 +168,30 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r2:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r5:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      id=":r7:"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -186,26 +203,31 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      id=":r8:"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-ihdtdm"
+                      class="css-w4cd9x"
                     >
                       <span
+                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -220,16 +242,16 @@ 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-2uxksm-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-4u29cd-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
                   >
                     Tags
                   </p>
@@ -239,26 +261,30 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r4:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r9:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      id=":rb:"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -270,26 +296,31 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      id=":rc:"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-ihdtdm"
+                      class="css-w4cd9x"
                     >
                       <span
+                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -304,21 +335,23 @@ exports[`<Datasets /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-3 MuiGrid-grid-lg-3 css-10brl9b-MuiGrid-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
             >
               :
             </p>
             <button
-              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"
+              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-zz8rc6-MuiButtonBase-root-MuiButton-root"
               disabled=""
+              id=":rd:"
               tabindex="-1"
               type="button"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-vjivbx-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="/documents"
+              id=":re:"
               tabindex="0"
             >
               Documents
diff --git a/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js b/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
index 597780c2e..8f7e58bd3 100644
--- a/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
+++ b/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
@@ -9,7 +9,7 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-ethxoc-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-1lpbt8y-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
         href="/"
         tabindex="0"
       >
@@ -27,7 +27,7 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -36,67 +36,79 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
             class="css-xthg9g"
           >
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
               href="/resources"
             >
               Resources
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                id=":r0:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
               href="/knowledge"
             >
               Knowledge
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                id=":r1:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
               href="/opportunities"
             >
               Oppportunities
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                id=":r2:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
               href="/about"
             >
               About
@@ -107,27 +119,28 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-ny25p5-MuiButtonBase-root-MuiButton-root"
+            id=":r3:"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
             >
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 24 24"
               />
             </span>
             en
             <span
-              class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+              class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
             >
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
diff --git a/apps/charterafrica/src/components/Document/Document.snap.js b/apps/charterafrica/src/components/Document/Document.snap.js
index e004abca6..a9c95adad 100644
--- a/apps/charterafrica/src/components/Document/Document.snap.js
+++ b/apps/charterafrica/src/components/Document/Document.snap.js
@@ -6,16 +6,16 @@ exports[`<Document /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4 MuiGrid-direction-xs-[object Object] css-1gcb1z5-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4 MuiGrid-direction-xs-[object Object] css-wq27zs-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-fffmms-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-1vv4c3h-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-xvgnvn-MuiTypography-root"
           >
             Document Title
           </h2>
@@ -41,12 +41,13 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-wg2o4k-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
             href="/"
+            id=":r0:"
             tabindex="0"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
             >
               <div />
             </span>
@@ -59,7 +60,7 @@ exports[`<Document /> renders unchanged 1`] = `
               class="MuiStack-root css-plcmrn-MuiStack-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
               >
                 Share this document
               </div>
@@ -73,7 +74,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
@@ -85,7 +86,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
@@ -97,7 +98,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
diff --git a/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js b/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
index 4f71e72d7..fac562914 100644
--- a/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
+++ b/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
@@ -3,15 +3,16 @@
 exports[`<DocumentCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1wj4l1q-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-cob2z-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <a
-      class="MuiButtonBase-root MuiCardActionArea-root css-dvh6vf-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-1ts5io8-MuiButtonBase-root-MuiCardActionArea-root"
       href="url=https://dc.sourceafrica.net/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html&contrubutor=true&showNotes=true"
       tabindex="0"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-2r8llh-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1odrru0-MuiCardMedia-root"
         src="/images/hero-slide-1.jpg"
       />
       <div
@@ -24,7 +25,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-1w036fe-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-5hes4x-MuiTypography-root"
             >
               Document Title
             </div>
@@ -33,7 +34,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1qjtras-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-1du89xn-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1tcecrn-MuiTypography-root"
             >
               10 Pages
             </div>
@@ -43,7 +44,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
               .
             </span>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-dvnpys-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1khdwyg-MuiTypography-root"
             >
               Contributed by: Contributor
             </div>
@@ -52,7 +53,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-vscbyg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-igxqn7-MuiTypography-root"
             >
               September 1, 2021
             </div>
@@ -63,7 +64,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
         />
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js b/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
index d243fe0e7..756dac90f 100644
--- a/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
+++ b/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
@@ -6,39 +6,43 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
     class="MuiBox-root css-1kgakwq"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
             placeholder="Search"
             type="search"
             value=""
           />
           <button
             aria-label="search"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+            id=":r0:"
             tabindex="0"
             type="button"
           >
+            <span
+              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 16 16"
             />
           </button>
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-yjsfm1"
+              class="css-81qg8w"
             >
               <span>
                 Search
@@ -51,13 +55,13 @@ 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-cd7l2b-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
                 aria-autocomplete="list"
@@ -65,26 +69,30 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r0:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r1:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value="Sort"
               />
               <div
-                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  id=":r3:"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -96,26 +104,31 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  id=":r4:"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
diff --git a/apps/charterafrica/src/components/Documents/Documents.snap.js b/apps/charterafrica/src/components/Documents/Documents.snap.js
index 2cdcd0cb3..abee620d2 100644
--- a/apps/charterafrica/src/components/Documents/Documents.snap.js
+++ b/apps/charterafrica/src/components/Documents/Documents.snap.js
@@ -6,7 +6,7 @@ exports[`<Documents /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-27tpcc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11jnlxf-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-blp6vs"
@@ -15,39 +15,43 @@ exports[`<Documents /> renders unchanged 1`] = `
           class="MuiBox-root css-1kgakwq"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
                   placeholder="Search"
                   type="search"
                   value=""
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+                  id=":r0:"
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-yjsfm1"
+                    class="css-81qg8w"
                   >
                     <span>
                       Search
@@ -60,13 +64,13 @@ 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-cd7l2b-MuiAutocomplete-root"
+                class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
               >
                 <div
-                  class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
+                  class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
                 >
                   <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
                   >
                     <input
                       aria-autocomplete="list"
@@ -74,26 +78,30 @@ exports[`<Documents /> renders unchanged 1`] = `
                       aria-invalid="false"
                       autocapitalize="none"
                       autocomplete="off"
-                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
-                      id=":r0:"
+                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+                      id=":r1:"
                       role="combobox"
                       spellcheck="false"
                       type="text"
                       value="Sort"
                     />
                     <div
-                      class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                      class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                     >
                       <button
                         aria-label="Clear"
-                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                        id=":r3:"
                         tabindex="-1"
                         title="Clear"
                         type="button"
                       >
+                        <span
+                          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                        />
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                           data-testid="CloseIcon"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -105,26 +113,31 @@ exports[`<Documents /> renders unchanged 1`] = `
                       </button>
                       <button
                         aria-label="Open"
-                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                        id=":r4:"
                         tabindex="-1"
                         title="Open"
                         type="button"
                       >
+                        <span
+                          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                        />
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </button>
                     </div>
                     <fieldset
                       aria-hidden="true"
-                      class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                      class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="css-ihdtdm"
+                        class="css-w4cd9x"
                       >
                         <span
+                          aria-hidden="true"
                           class="notranslate"
                         >
                           ​
@@ -139,20 +152,22 @@ exports[`<Documents /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1ia2r28-MuiGrid-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
               >
                 :
               </p>
               <a
-                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"
+                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-d5yv8m-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="/datasets"
+                id=":r5:"
                 tabindex="0"
               >
                 Datasets
               </a>
               <button
-                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"
+                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-1imxd5l-MuiButtonBase-root-MuiButton-root"
                 disabled=""
+                id=":r6:"
                 tabindex="-1"
                 type="button"
               >
@@ -162,7 +177,7 @@ exports[`<Documents /> renders unchanged 1`] = `
           </div>
         </div>
         <hr
-          class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+          class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
         />
       </div>
     </div>
diff --git a/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js b/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
index 042bace3c..0b1982f77 100644
--- a/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
+++ b/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
@@ -3,26 +3,26 @@
 exports[`<DropdownMenu /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiList-root MuiList-padding css-1fv1une-MuiList-root"
+    class="MuiList-root MuiList-padding css-1mwqho1-MuiList-root"
     role="menu"
     tabindex="-1"
   >
     <a
-      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"
+      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiMenuItem-root"
       href="/resources/tools"
       tabindex="0"
     >
       Tools
     </a>
     <a
-      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"
+      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiMenuItem-root"
       href="/resources/data"
       tabindex="-1"
     >
       Data
     </a>
     <a
-      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"
+      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiMenuItem-root"
       href="/resources/people"
       tabindex="-1"
     >
diff --git a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
index ca89430f0..8cff14390 100644
--- a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
+++ b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
@@ -6,20 +6,20 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1vfict-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-mtt3i8-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h2Small css-13ipfz9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2Small css-1ipdkw2-MuiTypography-root"
       >
         Tools
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h2Small css-1fm4yxa-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2Small css-15klgrw-MuiTypography-root"
       >
         People
       </div>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3.75 css-1mmhzy4-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3.75 css-18yh1kh-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-auto css-1p4bcov-MuiGrid-root"
@@ -34,30 +34,30 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
             class="MuiBox-root css-kx5zyc"
           >
             <div
-              class="MuiTypography-root MuiTypography-p3SemiBold css-hlwom7-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold css-mxdw1y-MuiTypography-root"
             >
               Tools
             </div>
             <span
-              class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
+              class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
             >
               <span
-                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
+                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-MuiButtonBase-root-MuiSwitch-switchBase"
               >
                 <input
-                  class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+                  class="PrivateSwitchBase-input MuiSwitch-input css-j8yymo"
                   type="checkbox"
                 />
                 <span
-                  class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+                  class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
                 />
               </span>
               <span
-                class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+                class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
               />
             </span>
             <div
-              class="MuiTypography-root MuiTypography-p3SemiBold css-7sagb9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold css-1gw3mcu-MuiTypography-root"
             >
               People
             </div>
@@ -70,12 +70,12 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
             class="MuiBox-root css-13wj3xb"
           >
             <div
-              class="MuiTypography-root MuiTypography-h2Small css-f84vvj-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2Small css-1n5pg1q-MuiTypography-root"
             >
               Tools
             </div>
             <div
-              class="MuiTypography-root MuiTypography-h2Small css-100zm5k-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2Small css-13v8hm1-MuiTypography-root"
             >
               People
             </div>
@@ -83,30 +83,30 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-1k5ue6b"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-hlwom7-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-mxdw1y-MuiTypography-root"
               >
                 Tools
               </div>
               <span
-                class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
+                class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
               >
                 <span
-                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
+                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-MuiButtonBase-root-MuiSwitch-switchBase"
                 >
                   <input
-                    class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+                    class="PrivateSwitchBase-input MuiSwitch-input css-j8yymo"
                     type="checkbox"
                   />
                   <span
-                    class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+                    class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
                   />
                 </span>
                 <span
-                  class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+                  class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
                 />
               </span>
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-7sagb9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-1gw3mcu-MuiTypography-root"
               >
                 People
               </div>
@@ -115,7 +115,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-5i7ax1"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1SemiBold css-44vm40-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1SemiBold css-ueha9c-MuiTypography-root"
               >
                 Key
               </div>
@@ -129,7 +129,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-uzt8lc"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Elections
                   </div>
@@ -141,7 +141,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-bhlonb"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Rule of law
                   </div>
@@ -153,7 +153,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1e9tm9b"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Civic space
                   </div>
@@ -165,7 +165,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-ga3poe"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Media
                   </div>
@@ -177,7 +177,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1098gr8"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Civic values
                   </div>
@@ -189,7 +189,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1l9yb90"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Decentralisation
                   </div>
@@ -201,7 +201,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1gl40r4"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Multilateralism
                   </div>
@@ -213,7 +213,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1epexq2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Economic governance
                   </div>
@@ -225,7 +225,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tv8i5c"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Corporate governance
                   </div>
@@ -237,7 +237,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-m9kyz2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Gender equality
                   </div>
@@ -249,7 +249,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-10gsdz3"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Constitutional changes of government
                   </div>
@@ -260,7 +260,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-174du92"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1SemiBold css-44vm40-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1SemiBold css-ueha9c-MuiTypography-root"
               >
                 Key
               </div>
@@ -274,7 +274,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-uzt8lc"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Elections
                   </div>
@@ -286,7 +286,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-bhlonb"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Rule of law
                   </div>
@@ -298,7 +298,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1e9tm9b"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Civic space
                   </div>
@@ -310,7 +310,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-ga3poe"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Media
                   </div>
@@ -322,7 +322,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1098gr8"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Civic values
                   </div>
@@ -334,7 +334,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1l9yb90"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Decentralisation
                   </div>
@@ -346,7 +346,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1gl40r4"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Multilateralism
                   </div>
@@ -358,7 +358,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1epexq2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Economic governance
                   </div>
@@ -370,7 +370,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tv8i5c"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Corporate governance
                   </div>
@@ -382,7 +382,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-m9kyz2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Gender equality
                   </div>
@@ -394,7 +394,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-10gsdz3"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Constitutional changes of government
                   </div>
diff --git a/apps/charterafrica/src/components/Entity/Entity.snap.js b/apps/charterafrica/src/components/Entity/Entity.snap.js
index 96e0ea220..2e8f9f7cd 100644
--- a/apps/charterafrica/src/components/Entity/Entity.snap.js
+++ b/apps/charterafrica/src/components/Entity/Entity.snap.js
@@ -6,20 +6,20 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10h56vb-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x1dvlf-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-gqilsr-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-2miyha-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-db5opy"
+            class="MuiBox-root css-vutmxe"
           >
             <img
               alt="John Doe"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -35,45 +35,45 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-u4yv58-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h2 css-wx8luq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-wz0oyq-MuiTypography-root"
           >
             John Doe
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
           >
             Developer
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
           >
             Charter Africa
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
           >
             San Francisco, CA
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p1 css-pxso3q-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-uehaqk-MuiTypography-root"
           >
             Full-stack web developer with over 5 years of experience.
           </div>
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-auto css-3odm25-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-auto css-109lh6d-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-zo8y90-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-18imcs6-MuiTypography-root-MuiLink-root"
                 href="https://twitter.com/johndoe"
                 rel="noreferrer noopener"
                 target="_blank"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
@@ -82,14 +82,14 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-zo8y90-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-18imcs6-MuiTypography-root-MuiLink-root"
                 href="https://github.com/johndoe"
                 rel="noreferrer noopener"
                 target="_blank"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
@@ -98,19 +98,19 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-cp0dln-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ofcnda-MuiTypography-root-MuiLink-root"
                 href="maito:johndoe@example.com"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
             </div>
           </div>
           <div
-            class="MuiTypography-root MuiTypography-h3Small css-itrhit-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3Small css-d4pglc-MuiTypography-root"
           >
             Organisations
           </div>
@@ -121,8 +121,9 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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 css-1rha4ds-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
+                id=":r0:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -131,11 +132,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-1u82k0c"
+                    class="MuiBox-root css-6roq6o"
                   >
                     <img
                       alt="Organisation 0"
-                      class="css-1r7uxv0"
+                      class="css-1enhhhm"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -146,7 +147,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
                   >
                     Organisation 0
                   </div>
@@ -157,8 +158,9 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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 css-1rha4ds-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
+                id=":r1:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -167,11 +169,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-1u82k0c"
+                    class="MuiBox-root css-6roq6o"
                   >
                     <img
                       alt="Organisation 1"
-                      class="css-1r7uxv0"
+                      class="css-1enhhhm"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -182,7 +184,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
                   >
                     Organisation 1
                   </div>
@@ -193,8 +195,9 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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 css-1rha4ds-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
+                id=":r2:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -203,11 +206,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-1u82k0c"
+                    class="MuiBox-root css-6roq6o"
                   >
                     <img
                       alt="Organisation 2"
-                      class="css-1r7uxv0"
+                      class="css-1enhhhm"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -218,7 +221,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
                   >
                     Organisation 2
                   </div>
@@ -229,10 +232,10 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
         </div>
       </div>
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg css-1jzu7sv-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg css-ut8xii-MuiContainer-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3Small css-3xokdu-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3Small css-1943xhm-MuiTypography-root"
         >
           Repositories
         </div>
@@ -243,7 +246,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -255,22 +258,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
                   >
                     Repository 0
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -285,16 +288,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -307,7 +310,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -319,22 +322,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
                   >
                     Repository 1
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -349,16 +352,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -371,7 +374,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -383,22 +386,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
                   >
                     Repository 2
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -413,16 +416,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -434,21 +437,21 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
         </div>
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3Small css-3xokdu-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-1943xhm-MuiTypography-root"
       >
         Favorite Tools
       </div>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-hamzp9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-2l6o4x-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
           >
             <button
-              class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
               tabindex="0"
               type="button"
             >
@@ -459,7 +462,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-1j9yqi7-MuiGrid-root"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-pssmpe-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-u7nuca-MuiCardMedia-root"
                     src="/static/images/react.png"
                   />
                 </div>
@@ -467,18 +470,19 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-8 css-1u7cbv1-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+                    class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
                   >
                     <div
                       class="MuiBox-root css-gg4vpm"
                     >
                       <h5
-                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
                       >
                         React
                       </h5>
                       <button
-                        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"
+                        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-ffiew0-MuiButtonBase-root-MuiButton-root"
+                        id=":r3:"
                         tabindex="0"
                         type="button"
                       >
@@ -493,7 +497,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -502,7 +506,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -511,13 +515,13 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
                     </div>
                     <div
-                      class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
                     >
                       A JavaScript library for building user interfaces
                     </div>
@@ -525,7 +529,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
               />
             </button>
           </div>
@@ -534,10 +538,10 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
           >
             <button
-              class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
               tabindex="0"
               type="button"
             >
@@ -548,7 +552,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-1j9yqi7-MuiGrid-root"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-pssmpe-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-u7nuca-MuiCardMedia-root"
                     src="/static/images/nodejs.png"
                   />
                 </div>
@@ -556,18 +560,19 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-8 css-1u7cbv1-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+                    class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
                   >
                     <div
                       class="MuiBox-root css-gg4vpm"
                     >
                       <h5
-                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
                       >
                         Node.js
                       </h5>
                       <button
-                        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"
+                        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-ffiew0-MuiButtonBase-root-MuiButton-root"
+                        id=":r4:"
                         tabindex="0"
                         type="button"
                       >
@@ -582,7 +587,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -591,7 +596,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -600,13 +605,13 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
                     </div>
                     <div
-                      class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
                     >
                       A JavaScript runtime built on Chrome's V8 JavaScript engine.
                     </div>
@@ -614,7 +619,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
               />
             </button>
           </div>
diff --git a/apps/charterafrica/src/components/Error/Error.snap.js b/apps/charterafrica/src/components/Error/Error.snap.js
index eafce5cd3..a38584998 100644
--- a/apps/charterafrica/src/components/Error/Error.snap.js
+++ b/apps/charterafrica/src/components/Error/Error.snap.js
@@ -6,22 +6,22 @@ exports[`<Error /> renders unchanged 1`] = `
     class="MuiBox-root css-lfupbe"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1lmdmi3-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ezfg9w-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-1xpnus0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-cg2m9u-MuiTypography-root"
       >
         404
          - 
         NOT FOUND
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-19to4pe-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-f5me0o-MuiTypography-root"
       >
         404
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3 css-pawrpu-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-m8stqq-MuiTypography-root"
       >
         NOT FOUND
       </div>
@@ -29,14 +29,15 @@ exports[`<Error /> renders unchanged 1`] = `
         class="MuiBox-root css-dx31bc"
       >
         <p
-          class="MuiTypography-root MuiTypography-p3 css-1ullfhh-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p3 css-1p1zjna-MuiTypography-root"
         >
           Description Text
         </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary 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-16uizo2-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/"
+        id=":r0:"
         tabindex="0"
       >
         NOT FOUND
diff --git a/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js b/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
index 8f880e16b..e0c24ae1c 100644
--- a/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
+++ b/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
@@ -6,22 +6,22 @@ exports[`<ErrorPage /> renders unchanged 1`] = `
     class="MuiBox-root css-lfupbe"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1lmdmi3-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ezfg9w-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-1xpnus0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-cg2m9u-MuiTypography-root"
       >
         404
          - 
         NOT FOUND
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-19to4pe-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-f5me0o-MuiTypography-root"
       >
         404
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3 css-pawrpu-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-m8stqq-MuiTypography-root"
       >
         NOT FOUND
       </div>
@@ -29,14 +29,15 @@ exports[`<ErrorPage /> renders unchanged 1`] = `
         class="MuiBox-root css-dx31bc"
       >
         <p
-          class="MuiTypography-root MuiTypography-p3 css-1ullfhh-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p3 css-1p1zjna-MuiTypography-root"
         >
           Description Text
         </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary 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-16uizo2-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/"
+        id=":r0:"
         tabindex="0"
       >
         NOT FOUND
diff --git a/apps/charterafrica/src/components/Explainers/Explainer.snap.js b/apps/charterafrica/src/components/Explainers/Explainer.snap.js
index 1ee642e96..1731d7049 100644
--- a/apps/charterafrica/src/components/Explainers/Explainer.snap.js
+++ b/apps/charterafrica/src/components/Explainers/Explainer.snap.js
@@ -6,11 +6,11 @@ exports[`<Explainer /> renders unchanged 1`] = `
     class="MuiStack-root css-nen11g-MuiStack-root"
   >
     <figure
-      class="MuiBox-root css-db5opy"
+      class="MuiBox-root css-vutmxe"
     >
       <img
         alt="Event 1"
-        class="css-g98gbd"
+        class="css-qv2885"
         data-nimg="1"
         decoding="async"
         height="0"
@@ -22,7 +22,7 @@ exports[`<Explainer /> renders unchanged 1`] = `
       />
     </figure>
     <div
-      class="MuiTypography-root MuiTypography-h3SmallSemiBold css-12w5e8m-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h3SmallSemiBold css-7h25xh-MuiTypography-root"
     >
       Event title going on two or even three lines
     </div>
@@ -30,7 +30,7 @@ exports[`<Explainer /> renders unchanged 1`] = `
       class="MuiBox-root css-12mwhaj"
     >
       <p
-        class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
       >
         Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
       </p>
diff --git a/apps/charterafrica/src/components/Explainers/Explainers.snap.js b/apps/charterafrica/src/components/Explainers/Explainers.snap.js
index 4261f74e6..bfea98c1e 100644
--- a/apps/charterafrica/src/components/Explainers/Explainers.snap.js
+++ b/apps/charterafrica/src/components/Explainers/Explainers.snap.js
@@ -6,10 +6,10 @@ exports[`<Explainers /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-9gm53n-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xb6wsu-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-n55336-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-1sgmt5b-MuiTypography-root"
       >
         Explainers
       </div>
@@ -17,11 +17,11 @@ exports[`<Explainers /> renders unchanged 1`] = `
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 0"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -36,24 +36,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 1"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -68,24 +68,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 2"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -100,24 +100,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 3"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -132,24 +132,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 4"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -164,14 +164,14 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/FAQ/FAQ.snap.js b/apps/charterafrica/src/components/FAQ/FAQ.snap.js
index 07ce57c69..885875814 100644
--- a/apps/charterafrica/src/components/FAQ/FAQ.snap.js
+++ b/apps/charterafrica/src/components/FAQ/FAQ.snap.js
@@ -6,79 +6,84 @@ exports[`<FAQ /> renders unchanged 1`] = `
     class="MuiBox-root css-ow7qj4"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qbjolu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x30ed7-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h1Small css-kkm4ih-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1Small css-18mtumj-MuiTypography-root"
       >
         Frequently Asked Questions
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388c3ebe92a85650e8051-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388c3ebe92a85650e8051-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388c3ebe92a85650e8051-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388c3ebe92a85650e8051-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Open Source
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Open Source
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -87,14 +92,14 @@ exports[`<FAQ /> renders unchanged 1`] = `
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388c3ebe92a85650e8051-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -107,71 +112,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388e0ebe92a85650e8052-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388e0ebe92a85650e8052-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388e0ebe92a85650e8052-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388e0ebe92a85650e8052-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Teamwork
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Teamwork
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -180,14 +190,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388e0ebe92a85650e8052-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -200,71 +210,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388f9ebe92a85650e8053-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388f9ebe92a85650e8053-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388f9ebe92a85650e8053-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388f9ebe92a85650e8053-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Accountability
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Accountability
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -273,14 +288,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388f9ebe92a85650e8053-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -293,71 +308,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f38902ebe92a85650e8054-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f38902ebe92a85650e8054-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f38902ebe92a85650e8054-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f38902ebe92a85650e8054-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Impact
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Impact
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -366,14 +386,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f38902ebe92a85650e8054-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js b/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
index 970460569..087cbf808 100644
--- a/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
+++ b/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
@@ -6,24 +6,25 @@ exports[`FeaturedPostCard should render 1`] = `
     class="MuiBox-root css-1w0avnn"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-aezxtm-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1qilz93-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <img
           alt="Featured Post"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1mzr6lk-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1x5fzrj-MuiCardMedia-root"
           src="/images/featured_post.png"
         />
         <div
-          class="MuiCardContent-root css-cnb62q-MuiCardContent-root"
+          class="MuiCardContent-root css-eato5c-MuiCardContent-root"
         >
           <div
             class="MuiStack-root css-1nza621-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-h2SemiBold css-1urtb6r-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2SemiBold css-1sk5upv-MuiTypography-root"
             >
               News Story title goes here and spans over second line
             </div>
@@ -31,7 +32,7 @@ exports[`FeaturedPostCard should render 1`] = `
               class="MuiBox-root css-1kvdr3x"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subheading css-mze3vf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subheading css-15yy3mb-MuiTypography-root"
               >
                 Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur
               </h6>
@@ -40,23 +41,24 @@ exports[`FeaturedPostCard should render 1`] = `
               class="MuiStack-root css-1262us1-MuiStack-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1 css-1i5r2d9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-18fuvi2-MuiTypography-root"
               >
                 Author Name
               </div>
               <div
-                class="MuiTypography-root MuiTypography-p1 css-1rq3c06-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-cz5bl3-MuiTypography-root"
               >
                 2020-10-10 10:10:10
               </div>
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-ozhbbr-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-p3 MuiLink-root MuiLink-underlineAlways css-c45nw1-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3 MuiLink-root MuiLink-underlineAlways css-1fok47i-MuiTypography-root-MuiLink-root"
               href="/research/1"
+              style="--Link-underlineColor: rgba(62, 32, 44, 0.4);"
             >
               Read More
             </a>
@@ -64,7 +66,7 @@ exports[`FeaturedPostCard should render 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1c8vknm-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1sgddrj-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
index 473244440..cd950a38f 100644
--- a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
@@ -6,15 +6,15 @@ exports[`FeaturedVideos should render 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ydzulf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1r0pch9-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3Small css-1ru8fzi-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-j9k0gw-MuiTypography-root"
       >
         Featured Videos
       </h3>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-zow5z4-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-1qw2a80-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
@@ -23,7 +23,7 @@ exports[`FeaturedVideos should render 1`] = `
             class="MuiBox-root css-0"
           >
             <div
-              class="MuiBox-root css-s11qj8"
+              class="MuiBox-root css-f0o1et"
             >
               <div
                 aria-label="Video Player"
@@ -1213,12 +1213,12 @@ exports[`FeaturedVideos should render 1`] = `
               </div>
             </div>
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-1k5ns17-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-rp5pi0-MuiTypography-root"
             >
               Latest Release
             </h5>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-1m1ks3x-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-4jhbfx-MuiTypography-root"
             >
               Aired on
                
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
index 1af4f1d79..a27df7152 100644
--- a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
@@ -6,7 +6,7 @@ exports[`FeaturedVideoCard should render 1`] = `
     class="MuiBox-root css-0"
   >
     <div
-      class="MuiBox-root css-s11qj8"
+      class="MuiBox-root css-f0o1et"
     >
       <div
         aria-label="Video Player"
@@ -1196,12 +1196,12 @@ exports[`FeaturedVideoCard should render 1`] = `
       </div>
     </div>
     <h5
-      class="MuiTypography-root MuiTypography-h5SemiBold css-1k5ns17-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5SemiBold css-rp5pi0-MuiTypography-root"
     >
       Latest Release
     </h5>
     <div
-      class="MuiTypography-root MuiTypography-p1 css-1m1ks3x-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-4jhbfx-MuiTypography-root"
     >
       Aired on
        
diff --git a/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js b/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
index e023b702f..00b4f71d8 100644
--- a/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
+++ b/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
@@ -6,15 +6,15 @@ exports[`<FlourishChart /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-wxw7nq-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1op9dlc-MuiContainer-root"
     >
       <h5
-        class="MuiTypography-root MuiTypography-h5SemiBold css-5afmx9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5SemiBold css-1uucibd-MuiTypography-root"
       >
         Flourish Charts
       </h5>
       <div
-        class="MuiTypography-root MuiTypography-p1 css-1d485r-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p1 css-1bvmr11-MuiTypography-root"
       >
         Flourish Charts
       </div>
diff --git a/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js b/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
index a4f5b9bfd..27f94c0d0 100644
--- a/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
+++ b/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
@@ -7,7 +7,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
       class="MuiBox-root css-ow7qj4"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ly8805-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1nyzrlf-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-xdpkhm-MuiGrid-root"
@@ -19,7 +19,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
               class="MuiBox-root css-qupvse"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1Small css-umhov1-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1Small css-1glxybr-MuiTypography-root"
               >
                 Focal Countries
               </h1>
@@ -27,7 +27,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
                 class="MuiBox-root css-vrd2gm"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
                 >
                   The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
                 </p>
diff --git a/apps/charterafrica/src/components/Footer/Footer.snap.js b/apps/charterafrica/src/components/Footer/Footer.snap.js
index 89a9415a7..fb9dc257f 100644
--- a/apps/charterafrica/src/components/Footer/Footer.snap.js
+++ b/apps/charterafrica/src/components/Footer/Footer.snap.js
@@ -9,7 +9,7 @@ exports[`<Footer /> renders unchanged 1`] = `
       class="MuiBox-root css-1idzjj5"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-93fe3t-MuiGrid-root"
@@ -30,11 +30,11 @@ exports[`<Footer /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <figure
-                  class="MuiBox-root css-102aivi"
+                  class="MuiBox-root css-zxbr8s"
                 >
                   <img
                     alt="EU"
-                    class="css-6mvbnf"
+                    class="css-1vimlo0"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -51,7 +51,7 @@ exports[`<Footer /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 css-1pemd0m-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container css-uomglc-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container css-17wbwnu-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -60,7 +60,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiBox-root css-yho6nr"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2 css-1te4c5f-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2 css-sj0aus-MuiTypography-root"
                   >
                     This website was created and maintained with the financial support of the European Union. Its contents are the sole responsibility of the European Partnership for Democracy, Africtivistes, Code for Africa, ECPDM, and Goree Institute and do not necessarily reflect the views of the European Union.
                   </p>
@@ -76,7 +76,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiBox-root css-1s6v4an"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2SemiBold css-2li1iq-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2SemiBold css-f8lckj-MuiTypography-root"
                   >
                     Website designed and built by Code for Africa
                   </p>
@@ -89,7 +89,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-auto css-3fm92-MuiGrid-root"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-16az78j-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-vvqhkh-MuiTypography-root-MuiLink-root"
                     href="/"
                   >
                     Privacy Policy
@@ -99,7 +99,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-auto css-3fm92-MuiGrid-root"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-16az78j-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-vvqhkh-MuiTypography-root-MuiLink-root"
                     href="/"
                   >
                     Imprint
@@ -115,10 +115,10 @@ exports[`<Footer /> renders unchanged 1`] = `
       class="MuiBox-root css-onpmix"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-u81ong-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1v2h2lv-MuiContainer-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-p2SemiBold css-1h79qiy-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p2SemiBold css-dsh1b6-MuiTypography-root"
         >
           © 2022 European Partnership for Democracy (CC BY-NC 2.0)
         </div>
diff --git a/apps/charterafrica/src/components/Grantees/Grantees.snap.js b/apps/charterafrica/src/components/Grantees/Grantees.snap.js
index feddf8536..0cd1e15ea 100644
--- a/apps/charterafrica/src/components/Grantees/Grantees.snap.js
+++ b/apps/charterafrica/src/components/Grantees/Grantees.snap.js
@@ -6,34 +6,34 @@ exports[`<Grantees /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1kti42o-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1a3e8n3-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3Small css-1kwvb63-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-na0pej-MuiTypography-root"
       >
         Grantees
       </h3>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-1ld3b9g-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-z6icgh-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -41,7 +41,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -50,14 +50,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r0:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1:"
                     role="button"
                     tabindex="0"
                   >
@@ -72,20 +74,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -93,7 +95,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -102,14 +104,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r2:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r3:"
                     role="button"
                     tabindex="0"
                   >
@@ -124,20 +128,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -145,7 +149,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -154,14 +158,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r4:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r5:"
                     role="button"
                     tabindex="0"
                   >
@@ -176,20 +182,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -197,7 +203,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -206,14 +212,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r6:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r7:"
                     role="button"
                     tabindex="0"
                   >
@@ -228,20 +236,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -249,7 +257,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -258,14 +266,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r8:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r9:"
                     role="button"
                     tabindex="0"
                   >
@@ -280,20 +290,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -301,7 +311,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -310,14 +320,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":ra:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rb:"
                     role="button"
                     tabindex="0"
                   >
@@ -332,20 +344,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -353,7 +365,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -362,14 +374,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rc:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rd:"
                     role="button"
                     tabindex="0"
                   >
@@ -384,20 +398,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -405,7 +419,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -414,14 +428,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":re:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rf:"
                     role="button"
                     tabindex="0"
                   >
@@ -436,20 +452,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -457,7 +473,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -466,14 +482,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rg:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rh:"
                     role="button"
                     tabindex="0"
                   >
@@ -488,20 +506,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -509,7 +527,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -518,14 +536,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":ri:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rj:"
                     role="button"
                     tabindex="0"
                   >
@@ -540,20 +560,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -561,7 +581,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -570,14 +590,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rk:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rl:"
                     role="button"
                     tabindex="0"
                   >
@@ -592,20 +614,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -613,7 +635,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -622,14 +644,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rm:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rn:"
                     role="button"
                     tabindex="0"
                   >
@@ -644,20 +668,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -665,7 +689,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -674,14 +698,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":ro:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rp:"
                     role="button"
                     tabindex="0"
                   >
@@ -696,20 +722,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -717,7 +743,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -726,14 +752,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rq:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rr:"
                     role="button"
                     tabindex="0"
                   >
@@ -748,20 +776,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -769,7 +797,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -778,14 +806,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rs:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rt:"
                     role="button"
                     tabindex="0"
                   >
@@ -800,20 +830,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -821,7 +851,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -830,14 +860,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":ru:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rv:"
                     role="button"
                     tabindex="0"
                   >
@@ -852,20 +884,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -873,7 +905,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -882,14 +914,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r10:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r11:"
                     role="button"
                     tabindex="0"
                   >
@@ -904,20 +938,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -925,7 +959,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -934,14 +968,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r12:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r13:"
                     role="button"
                     tabindex="0"
                   >
@@ -956,20 +992,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -977,7 +1013,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -986,14 +1022,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r14:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r15:"
                     role="button"
                     tabindex="0"
                   >
@@ -1008,20 +1046,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1029,7 +1067,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1038,14 +1076,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r16:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r17:"
                     role="button"
                     tabindex="0"
                   >
@@ -1060,20 +1100,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1081,7 +1121,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1090,14 +1130,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r18:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r19:"
                     role="button"
                     tabindex="0"
                   >
@@ -1112,20 +1154,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1133,7 +1175,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1142,14 +1184,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1a:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1b:"
                     role="button"
                     tabindex="0"
                   >
@@ -1164,20 +1208,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1185,7 +1229,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1194,14 +1238,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1c:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1d:"
                     role="button"
                     tabindex="0"
                   >
@@ -1216,20 +1262,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1237,7 +1283,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1246,14 +1292,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1e:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1f:"
                     role="button"
                     tabindex="0"
                   >
@@ -1268,20 +1316,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1289,7 +1337,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1298,14 +1346,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1g:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1h:"
                     role="button"
                     tabindex="0"
                   >
@@ -1320,20 +1370,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1341,7 +1391,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1350,14 +1400,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1i:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1j:"
                     role="button"
                     tabindex="0"
                   >
@@ -1372,20 +1424,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1393,7 +1445,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1402,14 +1454,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1k:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1l:"
                     role="button"
                     tabindex="0"
                   >
@@ -1424,20 +1478,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1445,7 +1499,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1454,14 +1508,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1m:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1n:"
                     role="button"
                     tabindex="0"
                   >
@@ -1476,20 +1532,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1497,7 +1553,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1506,14 +1562,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1o:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1p:"
                     role="button"
                     tabindex="0"
                   >
@@ -1528,20 +1586,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1549,7 +1607,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1558,14 +1616,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1q:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1r:"
                     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 8fdde5b85..1958d3060 100644
--- a/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
+++ b/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
@@ -6,79 +6,84 @@ exports[`<GuidingPrinciples /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qbjolu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x30ed7-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h1Small css-kkm4ih-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1Small css-18mtumj-MuiTypography-root"
       >
         Guiding Principles
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388c3ebe92a85650e8051-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388c3ebe92a85650e8051-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388c3ebe92a85650e8051-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388c3ebe92a85650e8051-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Open Source
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Open Source
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -87,14 +92,14 @@ exports[`<GuidingPrinciples /> renders unchanged 1`] = `
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388c3ebe92a85650e8051-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -107,71 +112,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388e0ebe92a85650e8052-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388e0ebe92a85650e8052-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388e0ebe92a85650e8052-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388e0ebe92a85650e8052-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Teamwork
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Teamwork
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -180,14 +190,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388e0ebe92a85650e8052-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -200,71 +210,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388f9ebe92a85650e8053-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388f9ebe92a85650e8053-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388f9ebe92a85650e8053-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388f9ebe92a85650e8053-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Accountability
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Accountability
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -273,14 +288,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388f9ebe92a85650e8053-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -293,71 +308,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f38902ebe92a85650e8054-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f38902ebe92a85650e8054-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f38902ebe92a85650e8054-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f38902ebe92a85650e8054-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Impact
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Impact
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -366,14 +386,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f38902ebe92a85650e8054-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js b/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
index 09767fa81..9131413a8 100644
--- a/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
+++ b/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
@@ -6,17 +6,17 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
     class="MuiBox-root css-1n99d1h"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-9m637t"
       >
         <figure
-          class="MuiBox-root css-1lypdo1"
+          class="MuiBox-root css-q6ue4o"
         >
           <img
             alt="Democracy Support Helpdesk"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="fill"
             decoding="async"
             loading="lazy"
@@ -28,7 +28,7 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
           class="MuiBox-root css-j7qwjs"
         >
           <h1
-            class="MuiTypography-root MuiTypography-h1Small css-ek5pw1-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h1Small css-1gf7d1q-MuiTypography-root"
           >
             Democracy Support Helpdesk
           </h1>
@@ -36,19 +36,20 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
             class="MuiBox-root css-1jz2duz"
           >
             <p
-              class="MuiTypography-root MuiTypography-p3 css-1s69ce2-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-1aa3xuk-MuiTypography-root"
             >
               Need help connecting with experts?
             </p>
             <p
-              class="MuiTypography-root MuiTypography-p3 css-1s69ce2-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-1aa3xuk-MuiTypography-root"
             >
               
 We can help you find specialists or resources to improve the impact of your democracy project.
             </p>
           </div>
           <button
-            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"
+            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-1j3b0ra-MuiButtonBase-root-MuiButton-root"
+            id=":r0:"
             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 b0136f547..dcfe45a23 100644
--- a/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
+++ b/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
@@ -6,7 +6,7 @@ exports[`<HelpdeskPageContent /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-j7qwjs"
@@ -15,19 +15,20 @@ exports[`<HelpdeskPageContent /> renders unchanged 1`] = `
           class="MuiBox-root css-1r3trlq"
         >
           <p
-            class="MuiTypography-root MuiTypography-p3 css-1xflfon-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p3 css-1svdd3f-MuiTypography-root"
           >
             Need help connecting with experts?
           </p>
           <p
-            class="MuiTypography-root MuiTypography-p3 css-1xflfon-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p3 css-1svdd3f-MuiTypography-root"
           >
             
 We can help you find specialists or resources to improve the impact of your democracy project.
           </p>
         </div>
         <button
-          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"
+          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-dlqng1-MuiButtonBase-root-MuiButton-root"
+          id=":r0:"
           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 55374181e..e9df89de7 100644
--- a/apps/charterafrica/src/components/Hero/Hero.snap.js
+++ b/apps/charterafrica/src/components/Hero/Hero.snap.js
@@ -21,7 +21,7 @@ exports[`<Hero /> renders unchanged 1`] = `
             class="MuiBox-root css-1lerasb"
           >
             <div
-              class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1s39khq-MuiContainer-root"
+              class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-gww3xw-MuiContainer-root"
             >
               <div
                 class="MuiBox-root css-dvxtzn"
@@ -30,7 +30,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                   class="MuiBox-root css-jd4a7r"
                 >
                   <h1
-                    class="MuiTypography-root MuiTypography-h2Small css-1awbn21-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h2Small css-1afd4o7-MuiTypography-root"
                   >
                     Find Africa's best 
                     <em>
@@ -40,7 +40,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                   </h1>
                 </div>
                 <div
-                  class="MuiTypography-root MuiTypography-p1 css-15y612c-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-s9bs3i-MuiTypography-root"
                 >
                   Easy to use resources for democracy activists
                 </div>
@@ -48,19 +48,20 @@ 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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary 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-1yakt1o-MuiButtonBase-root-MuiButton-root"
+                    id=":r0:"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-1in3o51-MuiButton-startIcon"
                     >
                       <figure
-                        class="MuiBox-root css-zmiex6"
+                        class="MuiBox-root css-1qtc0jw"
                       >
                         <img
                           alt="Software"
-                          class="css-g98gbd"
+                          class="css-qv2885"
                           data-nimg="fill"
                           decoding="async"
                           loading="lazy"
@@ -72,19 +73,20 @@ exports[`<Hero /> renders unchanged 1`] = `
                     Explore software
                   </button>
                   <button
-                    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"
+                    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-1yakt1o-MuiButtonBase-root-MuiButton-root"
+                    id=":r1:"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-1in3o51-MuiButton-startIcon"
                     >
                       <figure
-                        class="MuiBox-root css-zmiex6"
+                        class="MuiBox-root css-1qtc0jw"
                       >
                         <img
                           alt="Database"
-                          class="css-g98gbd"
+                          class="css-qv2885"
                           data-nimg="fill"
                           decoding="async"
                           loading="lazy"
@@ -103,13 +105,14 @@ exports[`<Hero /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiMobileStepper-root MuiMobileStepper-positionStatic css-rddy23-MuiPaper-root-MuiMobileStepper-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiMobileStepper-root MuiMobileStepper-positionStatic css-kaa7ne-MuiPaper-root-MuiMobileStepper-root"
+      style="--Paper-shadow: none;"
     >
       <div
-        class="MuiMobileStepper-dots css-1384nzf-MuiMobileStepper-dots"
+        class="MuiMobileStepper-dots css-13wf08b-MuiMobileStepper-dots"
       >
         <div
-          class="MuiMobileStepper-dot MuiMobileStepper-dotActive css-1scj8vt-MuiMobileStepper-dot"
+          class="MuiMobileStepper-dot MuiMobileStepper-dotActive css-hkkix3-MuiMobileStepper-dot"
         />
       </div>
     </div>
diff --git a/apps/charterafrica/src/components/Impressum/Impressum.snap.js b/apps/charterafrica/src/components/Impressum/Impressum.snap.js
index 806ab2484..9f8490678 100644
--- a/apps/charterafrica/src/components/Impressum/Impressum.snap.js
+++ b/apps/charterafrica/src/components/Impressum/Impressum.snap.js
@@ -6,20 +6,20 @@ exports[`<Impressum /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-ae960m-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-1vm9ek7-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-4ah52f-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-1pgoklf"
+            class="MuiBox-root css-i8cjvb"
           >
             <img
               alt="S"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -41,25 +41,25 @@ exports[`<Impressum /> renders unchanged 1`] = `
               class="MuiBox-root css-12mwhaj"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               >
                 European Partnership for Democracy (EPD)
 Rue Froissart 123-133
 1040 Brussels, Belgium
               </p>
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               />
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               >
                 EPD is registered in Belgium (0648.708.779).
               </p>
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               />
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               >
                 You can contact EPD via email (info@epd.eu) or by phone (+32 2 733 2282).
               </p>
diff --git a/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js b/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
index cf4aa3e95..59ae98667 100644
--- a/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
+++ b/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
@@ -3,27 +3,28 @@
 exports[`<LanguageButton /> renders unchanged 1`] = `
 <div>
   <button
-    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"
+    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-ny25p5-MuiButtonBase-root-MuiButton-root"
+    id=":r0:"
     tabindex="0"
     type="button"
   >
     <span
-      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 24 24"
       />
     </span>
     en
     <span
-      class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+      class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
     >
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
diff --git a/apps/charterafrica/src/components/Layout/Layout.snap.js b/apps/charterafrica/src/components/Layout/Layout.snap.js
index e83582fd1..16b06eab2 100644
--- a/apps/charterafrica/src/components/Layout/Layout.snap.js
+++ b/apps/charterafrica/src/components/Layout/Layout.snap.js
@@ -3,13 +3,14 @@
 exports[`<Layout /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-bxh7mj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-n0kqde-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1gcfjze-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-lxmw82-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12jovna-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-rdfh4n-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -22,13 +23,17 @@ exports[`<Layout /> renders unchanged 1`] = `
           >
             <button
               aria-label="navigation"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 32 32"
               />
@@ -45,7 +50,7 @@ exports[`<Layout /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -54,67 +59,79 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="css-xthg9g"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/resources"
                   >
                     Resources
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r1:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/knowledge"
                   >
                     Knowledge
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r2:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/opportunities"
                   >
                     Oppportunities
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r3:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/about"
                   >
                     About
@@ -125,27 +142,28 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-ny25p5-MuiButtonBase-root-MuiButton-root"
+                  id=":r4:"
                   tabindex="0"
                   type="button"
                 >
                   <span
-                    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+                    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
                   >
                     <div
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
                       focusable="false"
                       viewbox="0 0 24 24"
                     />
                   </span>
                   en
                   <span
-                    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
                   >
                     <div
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
                       focusable="false"
                       viewbox="0 0 16 16"
                     />
@@ -165,7 +183,7 @@ exports[`<Layout /> renders unchanged 1`] = `
       class="MuiBox-root css-1idzjj5"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-93fe3t-MuiGrid-root"
@@ -191,7 +209,7 @@ exports[`<Layout /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 css-1pemd0m-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container css-uomglc-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container css-17wbwnu-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -200,7 +218,7 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="MuiBox-root css-yho6nr"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2 css-1te4c5f-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2 css-sj0aus-MuiTypography-root"
                   />
                 </div>
               </div>
@@ -214,7 +232,7 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="MuiBox-root css-1s6v4an"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2SemiBold css-2li1iq-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2SemiBold css-f8lckj-MuiTypography-root"
                   />
                 </div>
               </div>
@@ -227,7 +245,7 @@ exports[`<Layout /> renders unchanged 1`] = `
       class="MuiBox-root css-onpmix"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-u81ong-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1v2h2lv-MuiContainer-root"
       />
     </div>
   </footer>
diff --git a/apps/charterafrica/src/components/LongForm/LongForm.snap.js b/apps/charterafrica/src/components/LongForm/LongForm.snap.js
index 1f765e431..d89bc7dbb 100644
--- a/apps/charterafrica/src/components/LongForm/LongForm.snap.js
+++ b/apps/charterafrica/src/components/LongForm/LongForm.snap.js
@@ -6,7 +6,7 @@ exports[`<LongForm /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xmubp1-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11qhdim-MuiContainer-root"
     />
   </div>
 </div>
diff --git a/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js b/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
index 653d3c7cf..069c48e60 100644
--- a/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
+++ b/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
@@ -3,11 +3,11 @@
 exports[`<LongFormMediaBlock /> renders unchanged 1`] = `
 <div>
   <figure
-    class="MuiBox-root css-g1fxym"
+    class="MuiBox-root css-82o9x6"
   >
     <img
       alt="Featured Post"
-      class="css-g98gbd"
+      class="css-qv2885"
       data-nimg="1"
       decoding="async"
       height="0"
@@ -18,7 +18,7 @@ exports[`<LongFormMediaBlock /> renders unchanged 1`] = `
       width="0"
     />
     <figcaption
-      class="MuiTypography-root MuiTypography-caption css-fl2ocl-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-caption css-1uaaouy-MuiTypography-root"
     >
       Image caption.
     </figcaption>
diff --git a/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
index ba2c19ff9..ec66e5936 100644
--- a/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-142s5v6"
   >
     <p
-      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
     >
       We process and manage your personal data in compliance with the European Union’s General Data Protection Regulation (GDPR). The following information provides an overview of how we process and manage your personal data as well as of your rights as a visitor and user of this site.
 Who is responsible and who may you contact?
diff --git a/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
index f8de4a6a2..dadd5709b 100644
--- a/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -13,13 +13,17 @@ exports[`<MobileNavBar /> renders unchanged 1`] = `
     >
       <button
         aria-label="navigation"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
+        id=":r0:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 32 32"
         />
diff --git a/apps/charterafrica/src/components/Mooc/Mooc.snap.js b/apps/charterafrica/src/components/Mooc/Mooc.snap.js
index 51846aa06..30e8d84ed 100644
--- a/apps/charterafrica/src/components/Mooc/Mooc.snap.js
+++ b/apps/charterafrica/src/components/Mooc/Mooc.snap.js
@@ -6,13 +6,13 @@ exports[`<Mooc/> renders unchanged 1`] = `
     class="MuiBox-root css-l3bbx9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tgrrgk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ipyg2f-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-7yylxy-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1gkqic5-MuiGrid-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-rm5v4n-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-10xnvyd-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -22,11 +22,11 @@ exports[`<Mooc/> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-15gjm0g-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-jitnt0"
+            class="MuiBox-root css-1w3flzm"
           >
             <img
               alt="MOOC"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/charterafrica/src/components/NavBar/NavBar.snap.js b/apps/charterafrica/src/components/NavBar/NavBar.snap.js
index 5384036c4..2945c7e24 100644
--- a/apps/charterafrica/src/components/NavBar/NavBar.snap.js
+++ b/apps/charterafrica/src/components/NavBar/NavBar.snap.js
@@ -3,13 +3,14 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-bxh7mj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-n0kqde-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1gcfjze-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-lxmw82-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12jovna-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-rdfh4n-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -18,7 +19,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-13uxck9-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-geux3z-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
               href="/"
               tabindex="0"
             >
@@ -37,13 +38,17 @@ exports[`<NavBar /> renders unchanged 1`] = `
           >
             <button
               aria-label="navigation"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 32 32"
               />
@@ -57,7 +62,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-ethxoc-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-1lpbt8y-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
               href="/"
               tabindex="0"
             >
@@ -75,7 +80,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -84,67 +89,79 @@ exports[`<NavBar /> renders unchanged 1`] = `
                   class="css-xthg9g"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/resources"
                   >
                     Resources
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r1:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/knowledge"
                   >
                     Knowledge
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r2:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/opportunities"
                   >
                     Oppportunities
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r3:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/about"
                   >
                     About
diff --git a/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js b/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
index ee19441de..46d88e694 100644
--- a/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
+++ b/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
@@ -3,20 +3,24 @@
 exports[`<NavBarDropdown /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
     href="/resources"
   >
     Resources
     <button
       aria-haspopup="menu"
       aria-label="select merge strategy"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
+      <span
+        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+      />
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
diff --git a/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
index 26a0f585c..a671e642f 100644
--- a/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,30 +6,30 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="MuiBox-root css-12tykev"
   >
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/resources"
       >
         Resources
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/tools"
         tabindex="0"
       >
         Tools
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/data"
         tabindex="0"
       >
         Data
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/people"
         tabindex="0"
       >
@@ -37,37 +37,37 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/knowledge"
       >
         Knowledge
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/explainers"
         tabindex="0"
       >
         Explainers
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/news"
         tabindex="0"
       >
         News
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/research"
         tabindex="0"
       >
         Research
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/academy"
         tabindex="0"
       >
@@ -75,37 +75,37 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/opportunities"
       >
         Oppportunities
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/grants-and-fellowships"
         tabindex="0"
       >
         Grants and Fellowships
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/events"
         tabindex="0"
       >
         Events
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/community"
         tabindex="0"
       >
         Community
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/democracy-helpdesk"
         tabindex="0"
       >
@@ -113,10 +113,10 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/about"
       >
         About
diff --git a/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js b/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
index 974dbcc32..01e1265bf 100644
--- a/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
+++ b/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
@@ -6,67 +6,79 @@ exports[`<NavBarNavMenu /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
       href="/resources"
     >
       Resources
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+        id=":r0:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
       href="/knowledge"
     >
       Knowledge
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+        id=":r1:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
       href="/opportunities"
     >
       Oppportunities
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+        id=":r2:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
       href="/about"
     >
       About
diff --git a/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js b/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
index 134ec0fa4..78ddb8141 100644
--- a/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
+++ b/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
@@ -6,13 +6,14 @@ exports[`<NextPrevPagination /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <ul
-      class="css-1szo00h"
+      class="css-1u984he"
     >
       <li
         class="MuiBox-root css-0"
       >
         <button
-          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"
+          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-1ue9ibh-MuiButtonBase-root-MuiButton-root"
+          id=":r0:"
           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 d9ed37443..91325b180 100644
--- a/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
+++ b/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
@@ -6,7 +6,8 @@ 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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary 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-1ue9ibh-MuiButtonBase-root-MuiButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
diff --git a/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js b/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
index ea794983d..1f9ab605f 100644
--- a/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
+++ b/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
@@ -4,7 +4,7 @@ exports[`<OpenCloseIcon /> renders unchanged 1`] = `
 <div>
   <div
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ccdodd-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17poc4t-MuiSvgIcon-root"
     focusable="false"
     viewbox="0 0 16 16"
   />
diff --git a/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js b/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
index 25689bf3f..bac646422 100644
--- a/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
+++ b/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
@@ -6,10 +6,10 @@ exports[`<Opportunity /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-18qfgg5-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2u7biu-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-1b14d7z-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-4ef04g-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1g4nj95-MuiGrid-root"
@@ -18,11 +18,11 @@ exports[`<Opportunity /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <figure
-              class="MuiBox-root css-1nudpye"
+              class="MuiBox-root css-1h2h3lo"
             >
               <img
                 alt="Hero 1"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="1"
                 decoding="async"
                 height="0"
@@ -36,16 +36,16 @@ exports[`<Opportunity /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-1h2ytjv-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-frq7pl-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 css-15he5x-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 css-e2xkrp-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h3Small css-1jnbwjl-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h3Small css-1hity0z-MuiTypography-root"
               >
                 Opportunity title
               </div>
@@ -54,7 +54,7 @@ exports[`<Opportunity /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-subheading css-1okuc1l-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subheading css-i042z2-MuiTypography-root"
               >
                 DEADLINE: February 6, 2023 at 12:00:00 AM
               </div>
@@ -63,8 +63,9 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1o5bdc4-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="/opportunities/felloships/grants/research-title-goes-here-and-spans-over-second-line"
+                id=":r0:"
                 tabindex="0"
               >
                 Apply Now
diff --git a/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js b/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
index c2ef3f357..8a22a1f8b 100644
--- a/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
@@ -3,25 +3,26 @@
 exports[`<OpportunityCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root active css-1j8g7zj-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root active css-1sk9sjr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/"
       tabindex="0"
     >
       <img
         alt="Grant 1"
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
         height="187.26"
         src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
         width="270"
       />
       <div
-        class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+        class="MuiCardContent-root css-4k114w-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
         >
           Democratic Governance in Zambia
         </h5>
@@ -29,18 +30,18 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiBox-root css-1tdn91g"
         >
           <p
-            class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
           >
             This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
           </p>
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
     <div
-      class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+      class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -49,7 +50,7 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <span
-            class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
           >
             : undefined
           </span>
diff --git a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
index 3c24cc76b..7b8672846 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
@@ -9,25 +9,26 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 1"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
@@ -35,18 +36,18 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiBox-root css-1tdn91g"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
               >
                 This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
               </p>
             </div>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -55,7 +56,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
               >
                 : undefined
               </span>
@@ -68,35 +69,36 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 2"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -105,7 +107,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
               >
                 : undefined
               </span>
@@ -118,35 +120,36 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 3"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -155,7 +158,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
               >
                 : undefined
               </span>
diff --git a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
index 066d86f1d..5e97ddca6 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
@@ -9,7 +9,7 @@ exports[`<OpportunityCardHeader /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
     >
       <h5
-        class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
       >
         Grants
       </h5>
@@ -18,7 +18,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+        id=":r0:"
         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 21e4f221a..8677b8cef 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
@@ -12,7 +12,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
         >
           Grants
         </h5>
@@ -21,7 +21,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+          id=":r0:"
           tabindex="0"
           type="button"
         >
@@ -36,25 +37,26 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 1"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
@@ -62,18 +64,18 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiBox-root css-1tdn91g"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                 >
                   This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                 </p>
               </div>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -82,7 +84,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -95,35 +97,36 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 2"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -132,7 +135,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -145,35 +148,36 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 3"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -182,7 +186,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -193,7 +197,8 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
       </div>
     </div>
     <button
-      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"
+      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-1ul7yle-MuiButtonBase-root-MuiButton-root"
+      id=":r1:"
       tabindex="0"
       type="button"
     >
diff --git a/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js b/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
index b31a1cf73..43df7a079 100644
--- a/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
+++ b/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
@@ -6,15 +6,15 @@ exports[`<OpportunityHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3 css-1dbe021-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-gk3coa-MuiTypography-root"
       >
         Grants and Fellowships
       </h3>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-f8pbns-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-e230pt-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js b/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
index cfe7a4a86..c32461f06 100644
--- a/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
+++ b/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
@@ -10,23 +10,23 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
       class="MuiBox-root css-156ejva"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
       >
         <h3
-          class="MuiTypography-root MuiTypography-h3 css-1dbe021-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3 css-gk3coa-MuiTypography-root"
         >
           Fellowships
         </h3>
         <hr
-          class="MuiDivider-root MuiDivider-fullWidth css-f8pbns-MuiDivider-root"
+          class="MuiDivider-root MuiDivider-fullWidth css-e230pt-MuiDivider-root"
         />
       </div>
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xskjid-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ihbtgs-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3Small css-1g0ac4a-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-10gkr8y-MuiTypography-root"
       >
         Fellowships
       </div>
@@ -40,7 +40,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
             >
               open
             </h5>
@@ -49,7 +49,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
@@ -64,25 +65,26 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 1"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -90,18 +92,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -110,7 +112,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -121,7 +123,8 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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"
+          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
+          id=":r1:"
           tabindex="0"
           type="button"
         >
@@ -129,7 +132,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
       />
       <div
         class="MuiBox-root css-1bsmwc1"
@@ -141,7 +144,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
             >
               closed
             </h5>
@@ -150,7 +153,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+              id=":r2:"
               tabindex="0"
               type="button"
             >
@@ -165,25 +169,26 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 2"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -191,18 +196,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -211,7 +216,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -222,7 +227,8 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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"
+          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
+          id=":r3:"
           tabindex="0"
           type="button"
         >
@@ -230,7 +236,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
       />
       <div
         class="MuiBox-root css-1bsmwc1"
@@ -242,7 +248,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
             >
               upcoming
             </h5>
@@ -251,7 +257,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+              id=":r4:"
               tabindex="0"
               type="button"
             >
@@ -266,25 +273,26 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 3"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -292,18 +300,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -312,7 +320,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -323,7 +331,8 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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"
+          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
+          id=":r5:"
           tabindex="0"
           type="button"
         >
@@ -331,7 +340,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js b/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
index c18e31594..a1b67ad44 100644
--- a/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
+++ b/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
@@ -3,34 +3,34 @@
 exports[`<OrganisationCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <div
-        class="MuiCardMedia-root css-muxve-MuiCardMedia-root"
+        class="MuiCardMedia-root css-shxb4t-MuiCardMedia-root"
         role="img"
         style="background-image: url(/image.jpg);"
       />
       <div
-        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
+        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-nwrr25-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1r8vkhu-MuiTypography-root"
         >
           Tool Name
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
         >
           Sample description
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js b/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
index e4fddaae9..c08c0546c 100644
--- a/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
+++ b/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
@@ -3,8 +3,9 @@
 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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 css-1rha4ds-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
     href="https://charter.africa"
+    id=":r0:"
     rel="noreferrer noopener"
     tabindex="0"
     target="_blank"
@@ -13,11 +14,11 @@ exports[`<OrganisationImageCard /> renders unchanged 1`] = `
       class="MuiStack-root css-1l9qugs-MuiStack-root"
     >
       <figure
-        class="MuiBox-root css-1u82k0c"
+        class="MuiBox-root css-6roq6o"
       >
         <img
           alt="Organisation Name"
-          class="css-1r7uxv0"
+          class="css-1enhhhm"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -28,7 +29,7 @@ exports[`<OrganisationImageCard /> renders unchanged 1`] = `
         />
       </figure>
       <div
-        class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
       >
         Organisation Name
       </div>
diff --git a/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js b/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
index 74aac2e9a..31b04ebb1 100644
--- a/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
+++ b/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
@@ -6,13 +6,13 @@ exports[`<PageDescription/> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ydzulf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1r0pch9-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-3zjynb"
       >
         <p
-          class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
         >
           The largest digital database for 
           <strong>
diff --git a/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js b/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
index e79c3b884..65babe1b6 100644
--- a/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
@@ -9,17 +9,17 @@ exports[`<PageHeader/> renders unchanged 1`] = `
       class="MuiBox-root css-14gw6dj"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-u9nzae-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1qw5437-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-xwarr-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-17u5j6m"
+            class="MuiBox-root css-qe5rve"
           >
             <img
               alt="About"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -32,7 +32,7 @@ exports[`<PageHeader/> renders unchanged 1`] = `
           </figure>
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kqkv4f-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-ten9jr-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -41,7 +41,7 @@ exports[`<PageHeader/> renders unchanged 1`] = `
               class="MuiBox-root css-qhe18k"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1Small css-1k3x2yj-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1Small css-1a8ie7p-MuiTypography-root"
               >
                 The largest digital database for 
                 <strong>
diff --git a/apps/charterafrica/src/components/PostCard/PostCard.snap.js b/apps/charterafrica/src/components/PostCard/PostCard.snap.js
index 16a6cfd06..839c5709a 100644
--- a/apps/charterafrica/src/components/PostCard/PostCard.snap.js
+++ b/apps/charterafrica/src/components/PostCard/PostCard.snap.js
@@ -3,39 +3,39 @@
 exports[`<PostCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <div
-        class="MuiCardMedia-root css-muxve-MuiCardMedia-root"
+        class="MuiCardMedia-root css-shxb4t-MuiCardMedia-root"
         role="img"
         style="background-image: url(/image.jpg);"
       />
       <div
-        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
+        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-6z9xjs-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-fy2ogv-MuiTypography-root"
         >
           Some title
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-1tk9iea-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1epd9r5-MuiTypography-root"
         >
           Sakwa
         </div>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-1tk9iea-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1epd9r5-MuiTypography-root"
         >
           2023-09-01
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/Repository/Repository.snap.js b/apps/charterafrica/src/components/Repository/Repository.snap.js
index 5f86d64e1..1a66e1a94 100644
--- a/apps/charterafrica/src/components/Repository/Repository.snap.js
+++ b/apps/charterafrica/src/components/Repository/Repository.snap.js
@@ -3,7 +3,7 @@
 exports[`<Repository /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
     href="https://charter.africa"
     rel="noreferrer noopener"
     target="_blank"
@@ -15,22 +15,22 @@ exports[`<Repository /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
         >
           Repository 1
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
         >
           Charter Africa website
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
         >
           React, Next.js, TypeScript
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
         >
           October 1, 2021
         </div>
@@ -45,16 +45,16 @@ exports[`<Repository /> renders unchanged 1`] = `
             sx="[object Object]"
           />
           <div
-            class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
           >
             100
           </div>
         </div>
         <div
-          class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
+          class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
           >
             PUBLIC
           </span>
diff --git a/apps/charterafrica/src/components/Resources/Resources.snap.js b/apps/charterafrica/src/components/Resources/Resources.snap.js
index 8b6acc5e4..d14fed9a9 100644
--- a/apps/charterafrica/src/components/Resources/Resources.snap.js
+++ b/apps/charterafrica/src/components/Resources/Resources.snap.js
@@ -6,7 +6,7 @@ exports[`<Resources /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <h1
-      class="MuiTypography-root MuiTypography-h1Small css-1qj3dn7-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h1Small css-1h09don-MuiTypography-root"
     >
       Our Resources
     </h1>
@@ -20,11 +20,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-1rtaf4d"
+            class="MuiBox-root css-7lnogv"
           >
             <img
               alt="Tools"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -39,11 +39,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="Tools"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -55,12 +55,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
               >
                 Tools
               </h6>
@@ -75,11 +75,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-1laq4ye"
+            class="MuiBox-root css-3245q2"
           >
             <img
               alt="People"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -94,11 +94,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="People"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -110,12 +110,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
               >
                 People
               </h6>
@@ -130,11 +130,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-13llbsm"
+            class="MuiBox-root css-1ot2317"
           >
             <img
               alt="Organisations"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -149,11 +149,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="Organisations"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -165,12 +165,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
               >
                 Organisations
               </h6>
@@ -185,11 +185,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-16b4vs5"
+            class="MuiBox-root css-ms2f5w"
           >
             <img
               alt="Data"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -204,11 +204,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="Data"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -220,12 +220,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
               >
                 Data
               </h6>
diff --git a/apps/charterafrica/src/components/RichText/RichText.snap.js b/apps/charterafrica/src/components/RichText/RichText.snap.js
index b98f92b3c..2e6e895c1 100644
--- a/apps/charterafrica/src/components/RichText/RichText.snap.js
+++ b/apps/charterafrica/src/components/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-rl8zr9-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-1b0ebrt-MuiTypography-root-MuiLink-root"
         href="/"
       >
         here
diff --git a/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js b/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
index 8dd8dc131..5c5344fb4 100644
--- a/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
@@ -3,34 +3,39 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r8h7yy-MuiInputBase-root-MuiOutlinedInput-root"
+    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-icxi44-MuiInputBase-root-MuiOutlinedInput-root"
   >
     <input
-      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
       type="search"
       value=""
     />
     <button
       aria-label="search"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
+      <span
+        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+      />
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
     </button>
     <fieldset
       aria-hidden="true"
-      class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+      class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
     >
       <legend
-        class="css-ihdtdm"
+        class="css-w4cd9x"
       >
         <span
+          aria-hidden="true"
           class="notranslate"
         >
           ​
diff --git a/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
index b2abdcd04..d21752ad4 100644
--- a/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -6,7 +6,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
     class="MuiStack-root css-v2woy3-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
     >
       Sample Title
     </div>
@@ -20,7 +20,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -32,7 +32,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -44,7 +44,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
index 55b3f7a92..6745cffab 100644
--- a/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-v2woy3-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js b/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
index bb9dff915..ce29b5352 100644
--- a/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
+++ b/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<SpotlightCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-qb1xc-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-eleo5s-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/charterafrica/src/components/Switch/Switch.snap.js b/apps/charterafrica/src/components/Switch/Switch.snap.js
index 1343ea3d5..161533812 100644
--- a/apps/charterafrica/src/components/Switch/Switch.snap.js
+++ b/apps/charterafrica/src/components/Switch/Switch.snap.js
@@ -3,21 +3,21 @@
 exports[`<Switch /> renders unchanged 1`] = `
 <div>
   <span
-    class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
+    class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
   >
     <span
-      class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
+      class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-MuiButtonBase-root-MuiSwitch-switchBase"
     >
       <input
-        class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+        class="PrivateSwitchBase-input MuiSwitch-input css-j8yymo"
         type="checkbox"
       />
       <span
-        class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+        class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
       />
     </span>
     <span
-      class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+      class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
     />
   </span>
 </div>
diff --git a/apps/charterafrica/src/components/Tool/Tool.snap.js b/apps/charterafrica/src/components/Tool/Tool.snap.js
index 0a174d5a6..0fa38d022 100644
--- a/apps/charterafrica/src/components/Tool/Tool.snap.js
+++ b/apps/charterafrica/src/components/Tool/Tool.snap.js
@@ -6,7 +6,7 @@ exports[`<Tool /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ft7bnu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1twjo67-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-xgaee2-MuiGrid-root"
@@ -19,7 +19,7 @@ exports[`<Tool /> renders unchanged 1`] = `
           >
             <img
               alt="Tool Name"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-3fnss6-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1bh3fh5-MuiCardMedia-root"
               src="https://opengraph.githubassets.com/cdea3047f304ac30905b3f49eb4abdb00f2972aab918177244a0f111ea1348c7/CodeForAfrica/ui"
             />
           </div>
@@ -30,7 +30,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-kpcj8u"
             >
               <div
-                class="MuiTypography-root MuiTypography-h2SemiBold css-1cs3fm2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h2SemiBold css-17o5qlc-MuiTypography-root"
               >
                 Tool Name
               </div>
@@ -47,14 +47,14 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
                   class="MuiBox-root css-1isemmb"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-t7jmp9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-ikfbaa-MuiTypography-root"
                   >
                     30
                   </div>
@@ -65,14 +65,14 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
                   class="MuiBox-root css-1isemmb"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-t7jmp9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-ikfbaa-MuiTypography-root"
                   >
                     -
                   </div>
@@ -83,7 +83,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
@@ -95,7 +95,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
@@ -107,12 +107,12 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-485ol6"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1 css-2vraz5-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1wmw42j-MuiTypography-root"
               >
                 Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, urna enim nulla iaculis taciti semper parturient laoreet luctus, orci ac ornare senectus posuere nam libero. Imperdiet turpis tortor nu. Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, urna enim nulla iaculis taciti semper parturient laoreet luctus, orci ac ornare senectus posuere nam libero. Imperdiet turpis tortor nu.
               </div>
               <div
-                class="MuiTypography-root MuiTypography-captionCap css-k3l1ri-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-captionCap css-1ufzz7k-MuiTypography-root"
               >
                 undefined 6 Months ago
               </div>
@@ -123,7 +123,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   class="MuiStack-root css-82jnlo-MuiStack-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
                   >
                     Share via
                   </div>
@@ -137,7 +137,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -149,7 +149,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -161,7 +161,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -185,25 +185,26 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-19midj6"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-zw0u9l-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-67az7o-MuiTypography-root"
               >
                 Contributors
               </div>
               <div
-                class="MuiAvatarGroup-root css-1qcltu-MuiAvatarGroup-root"
+                class="MuiAvatarGroup-root css-p6rq2z-MuiAvatarGroup-root"
+                style="--AvatarGroup-spacing: -8px;"
               >
                 <div
-                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-x2fwd7-MuiAvatar-root"
+                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-oe639b-MuiAvatar-root"
                 >
                   +26
                 </div>
                 <a
-                  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"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1b5yuar-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -214,12 +215,12 @@ 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-1yxemuo-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-1b5yuar-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -230,12 +231,12 @@ 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-1yxemuo-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-1b5yuar-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -246,12 +247,12 @@ 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-1yxemuo-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-1b5yuar-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -270,21 +271,21 @@ exports[`<Tool /> renders unchanged 1`] = `
         class="MuiBox-root css-19midj6"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3Small css-tr3bum-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3Small css-fb0m73-MuiTypography-root"
         >
           More tools
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-hamzp9-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-2l6o4x-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
@@ -295,7 +296,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <img
-                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
+                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
                       src="/static/images/react.png"
                     />
                   </div>
@@ -303,13 +304,13 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+                      class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
                     >
                       <div
                         class="MuiBox-root css-gg4vpm"
                       >
                         <h5
-                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
                         >
                           React
                         </h5>
@@ -322,7 +323,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -331,7 +332,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -340,18 +341,19 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
                       </div>
                       <div
-                        class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
                       >
                         A JavaScript library for building user interfaces
                       </div>
                       <button
-                        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"
+                        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-1rpch82-MuiButtonBase-root-MuiButton-root"
+                        id=":r0:"
                         tabindex="0"
                         type="button"
                       />
@@ -359,7 +361,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
             </div>
@@ -368,10 +370,10 @@ exports[`<Tool /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
@@ -382,7 +384,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <img
-                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
+                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
                       src="/static/images/nodejs.png"
                     />
                   </div>
@@ -390,13 +392,13 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+                      class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
                     >
                       <div
                         class="MuiBox-root css-gg4vpm"
                       >
                         <h5
-                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
                         >
                           Node.js
                         </h5>
@@ -409,7 +411,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -418,7 +420,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -427,18 +429,19 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
                       </div>
                       <div
-                        class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1rpch82-MuiButtonBase-root-MuiButton-root"
+                        id=":r1:"
                         tabindex="0"
                         type="button"
                       />
@@ -446,7 +449,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
             </div>
diff --git a/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js b/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
index 0090243ed..4071ccaa1 100644
--- a/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
+++ b/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
@@ -3,10 +3,10 @@
 exports[`<ToolCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
@@ -17,7 +17,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
         >
           <img
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
             src="/image.jpg"
           />
         </div>
@@ -25,13 +25,13 @@ exports[`<ToolCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+            class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
           >
             <div
               class="MuiBox-root css-gg4vpm"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
               >
                 Tool Name
               </h5>
@@ -44,7 +44,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
@@ -53,7 +53,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
@@ -62,18 +62,19 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
             </div>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
             >
               Sample description
             </div>
             <button
-              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"
+              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-1rpch82-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             />
@@ -81,7 +82,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js b/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
index a64e9589b..4e022617f 100644
--- a/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
+++ b/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
@@ -3,7 +3,7 @@
 exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiBox-root css-s11qj8"
+    class="MuiBox-root css-f0o1et"
   >
     <div
       aria-label="Video Player"
diff --git a/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js b/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
index deb2b30fd..4fef7c2fe 100644
--- a/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1omx1yq-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-s4bhv7-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js b/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
index 14102b70a..a6c15c9ce 100644
--- a/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardContent /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js b/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
index ef6d13f74..888ea9e03 100644
--- a/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-dwzvxo-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1exhmjd-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js b/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
index 97818fb0d..ddcbe550e 100644
--- a/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleGrid /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
diff --git a/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js b/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
index 409c4f80c..a92fc827e 100644
--- a/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
@@ -3,13 +3,13 @@
 exports[`<ArticleHeader /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12qr4r4-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1acs8ar-MuiContainer-root"
   >
     <div
       class="MuiStack-root css-yhfzs2-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
       >
         Share This Article
       </div>
@@ -24,7 +24,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -37,7 +37,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -50,7 +50,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
index f8eca7cba..b5efc5ee4 100644
--- a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
+++ b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
@@ -6,11 +6,11 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <figure
-      class="MuiBox-root css-1ne42gc"
+      class="MuiBox-root css-ayi7je"
     >
       <img
         alt="Article"
-        class="css-45v618"
+        class="css-dqrju9"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
@@ -21,15 +21,15 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       />
     </figure>
     <header
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cnnhfl-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tqqwnc-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-body2 css-f7w8um-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body2 css-1iin45x-MuiTypography-root"
       >
         Sept 1, 2021
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-16gyjy8-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-1orudy1-MuiTypography-root"
       >
         Article
       </div>
@@ -37,7 +37,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-yhfzs2-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
         >
           Share This Article
         </div>
@@ -52,7 +52,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -65,7 +65,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -78,7 +78,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -87,16 +87,16 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </header>
     <section
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-z5w0rf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-333pmc-MuiContainer-root"
     />
     <address
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1o0bwi8-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1e1o0rh-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
         >
           Article by
         </div>
@@ -104,12 +104,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-1niho6o-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-9bszke-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-1vs3box-MuiTypography-root"
           >
             Author 1
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
           >
             Author 1 bio
           </div>
@@ -119,7 +119,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
         >
           Article by
         </div>
@@ -127,12 +127,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-1niho6o-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-9bszke-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-1vs3box-MuiTypography-root"
           >
             Author 2
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
           >
             Author 2 bio
           </div>
@@ -140,27 +140,27 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </address>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ke15ni-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16bepat-MuiContainer-root"
     >
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fwha7w-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-102tpll-MuiContainer-root"
     >
       <div
-        class="MuiToggleButtonGroup-root css-1ie26o5-MuiToggleButtonGroup-root"
+        class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-962wsk-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 css-1463e5x-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-p9r9ld-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
           href="/tag1?tag=tag2"
           tabindex="0"
           value="tag2"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
           >
             tag2
           </span>
diff --git a/apps/civicsignalblog/src/components/Articles/Articles.snap.js b/apps/civicsignalblog/src/components/Articles/Articles.snap.js
index 4e124e312..baa70df0a 100644
--- a/apps/civicsignalblog/src/components/Articles/Articles.snap.js
+++ b/apps/civicsignalblog/src/components/Articles/Articles.snap.js
@@ -4,7 +4,7 @@ exports[`<Articles /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
@@ -13,7 +13,7 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-17kpph-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h4 css-19yntcu-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-19d2xq6-MuiTypography-root"
           >
             Title
           </div>
@@ -21,14 +21,14 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiStack-root css-kbcct1-MuiStack-root"
           >
             <div
-              class="MuiFormControl-root MuiTextField-root css-1w88xu6-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiTextField-root css-zfsxrv-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wq2s8-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-py2cs6-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r0:"
                   placeholder="Search"
                   type="search"
@@ -36,25 +36,30 @@ exports[`<Articles /> renders unchanged 1`] = `
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+                  id=":r1:"
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-ihdtdm"
+                    class="css-w4cd9x"
                   >
                     <span
+                      aria-hidden="true"
                       class="notranslate"
                     >
                       ​
@@ -64,41 +69,41 @@ exports[`<Articles /> renders unchanged 1`] = `
               </div>
             </div>
             <div
-              class="MuiToggleButtonGroup-root css-14ffl62-MuiToggleButtonGroup-root"
+              class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1k5glp4-MuiToggleButtonGroup-root"
               role="group"
             >
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="All"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   All
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag1"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   tag1
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag2"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   tag2
                 </span>
@@ -110,10 +115,10 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-cy97kn-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-81wvh9-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1rzqy2p-MuiPaper-root-MuiCard-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1gjmvym-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ejc43j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
               href="/stories/article-1"
               tabindex="0"
             >
@@ -125,7 +130,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 >
                   <img
                     alt="Featured Article Image"
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14h10vz-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14iqzpr-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                 </div>
@@ -133,27 +138,28 @@ exports[`<Articles /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+                    class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </p>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
                     >
                       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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p3imlw-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-17irh2o-MuiButtonBase-root-MuiButton-root"
+                      id=":r2:"
                       tabindex="0"
                       type="button"
                     >
                       Read More
                     </button>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
@@ -166,15 +172,16 @@ exports[`<Articles /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+                      class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
                     >
                       <h1
-                        class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-4mulzs-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-rlqp7e-MuiButtonBase-root-MuiButton-root"
+                        id=":r3:"
                         tabindex="0"
                         type="button"
                       >
@@ -185,7 +192,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
               />
             </a>
           </div>
@@ -194,39 +201,39 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1nco2t7-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-mxdmwy-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-1t2i2wj-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
             >
               <div
-                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1u025w9-MuiPaper-root-MuiCard-root"
+                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-16ehw7m-MuiPaper-root-MuiCard-root"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1nkr5oe-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1w94mff-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
                   href="/stories/article-1"
                   tabindex="0"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qxudtl-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-r4yojg-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                   <div
-                    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+                    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
                   >
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </h6>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
                   </div>
                   <span
-                    class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                    class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                   />
                 </a>
               </div>
@@ -245,7 +252,8 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-s5eomh-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-arrnye-MuiButtonBase-root-MuiButton-root"
+            id=":r4:"
             tabindex="0"
             type="button"
           >
diff --git a/apps/civicsignalblog/src/components/Author/Author.snap.js b/apps/civicsignalblog/src/components/Author/Author.snap.js
index 04a4fc3d0..bd000becc 100644
--- a/apps/civicsignalblog/src/components/Author/Author.snap.js
+++ b/apps/civicsignalblog/src/components/Author/Author.snap.js
@@ -6,7 +6,7 @@ exports[`<Author /> renders unchanged 1`] = `
     class="MuiStack-root css-ty68jk-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
     >
       Article by
     </div>
diff --git a/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js b/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
index f45f1aa3c..0b291856c 100644
--- a/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
+++ b/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
@@ -3,16 +3,16 @@
 exports[`<Breadcrumbs /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1yleyq8-MuiTypography-root-MuiBreadcrumbs-root"
+    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-160nqft-MuiTypography-root-MuiBreadcrumbs-root"
   >
     <ol
-      class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+      class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
     >
       <li
         class="MuiBreadcrumbs-li"
       >
         <a
-          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
           href="/projects"
         >
           Our Work
@@ -20,7 +20,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+        class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
       >
         /
       </li>
@@ -28,7 +28,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
         class="MuiBreadcrumbs-li"
       >
         <div
-          class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
         >
           Initiatives
         </div>
diff --git a/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js b/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
index f60c64a80..b0437ea7c 100644
--- a/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
+++ b/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
@@ -3,17 +3,17 @@
 exports[`<CMSContent /> renders unchanged 1`] = `
 <div>
   <section
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-17be2kn"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-147dsfb-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-nzp4fb-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://whomakesthenews.org/gmmp-2020-final-reports/"
           rel="noreferrer noopener"
           target="_blank"
@@ -23,17 +23,17 @@ exports[`<CMSContent /> renders unchanged 1`] = `
          report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
       </p>
@@ -42,11 +42,11 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <figure
-        class="MuiBox-root css-datfzi"
+        class="MuiBox-root css-1ol0o2q"
       >
         <img
           alt="alt"
-          class="css-11xr7uw"
+          class="css-nkefi2"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -66,7 +66,7 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <div
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         <iframe
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js b/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
index d3eb6d4bb..bcf8012b2 100644
--- a/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
+++ b/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
@@ -3,12 +3,12 @@
 exports[`<ChoiceChip /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
     role="button"
     tabindex="0"
   >
     <span
-      class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+      class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
     />
   </div>
 </div>
diff --git a/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js b/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
index 6194c4217..e49403cdd 100644
--- a/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
+++ b/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
@@ -3,7 +3,7 @@
 exports[`<ChoiceChipGroup /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiToggleButtonGroup-root css-155203t-MuiToggleButtonGroup-root"
+    class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-t9hjzu-MuiToggleButtonGroup-root"
     role="group"
   />
 </div>
diff --git a/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js b/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
index b0c0657b4..298899b69 100644
--- a/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
+++ b/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
@@ -6,15 +6,16 @@ exports[`<CustomPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-lso55o"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-17rh705-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1jpj0cn-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-99nlzo-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-1k47aja-MuiTypography-root"
       >
         About Us
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-1ar65j8-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-ehpc6x-MuiTypography-root"
+        style="--Typography-textAlign: center;"
       >
         We are Africa’s largest network of civic technology and data journalism labs
       </h2>
diff --git a/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js b/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
index b72c6b33a..2cd3a56c8 100644
--- a/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
+++ b/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
@@ -3,10 +3,10 @@
 exports[`<FeaturedArticle /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-81wvh9-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1rzqy2p-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1gjmvym-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ejc43j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/stories/article-1"
       tabindex="0"
     >
@@ -18,7 +18,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         >
           <img
             alt="Featured Article Image"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14h10vz-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14iqzpr-MuiCardMedia-root"
             src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
           />
         </div>
@@ -26,27 +26,28 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+            class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
             >
               Battle for gender equality in African media continues
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p3imlw-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-17irh2o-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
               Read Story
             </button>
             <span
-              class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
             >
               Jan 6, 2022
             </span>
@@ -59,15 +60,16 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+              class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
               >
                 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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-4mulzs-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-rlqp7e-MuiButtonBase-root-MuiButton-root"
+                id=":r1:"
                 tabindex="0"
                 type="button"
               >
@@ -78,7 +80,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js b/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
index 1002271d6..5bde794f6 100644
--- a/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
+++ b/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
@@ -6,39 +6,44 @@ exports[`<FilterBar /> renders unchanged 1`] = `
     class="MuiStack-root css-7ziy04-MuiStack-root"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root css-1w88xu6-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-zfsxrv-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wq2s8-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-py2cs6-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           type="search"
           value=""
         />
         <button
           aria-label="search"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+          id=":r1:"
           tabindex="0"
           type="button"
         >
+          <span
+            class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+          />
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 16 16"
           />
         </button>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-ihdtdm"
+            class="css-w4cd9x"
           >
             <span
+              aria-hidden="true"
               class="notranslate"
             >
               ​
@@ -48,17 +53,17 @@ exports[`<FilterBar /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiToggleButtonGroup-root css-14ffl62-MuiToggleButtonGroup-root"
+      class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1k5glp4-MuiToggleButtonGroup-root"
       role="group"
     >
       <div
-        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
         role="button"
         tabindex="0"
         value="tag"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
         >
           tag
         </span>
diff --git a/apps/civicsignalblog/src/components/Footer/Footer.snap.js b/apps/civicsignalblog/src/components/Footer/Footer.snap.js
index d2e2211b9..bd649722a 100644
--- a/apps/civicsignalblog/src/components/Footer/Footer.snap.js
+++ b/apps/civicsignalblog/src/components/Footer/Footer.snap.js
@@ -6,7 +6,7 @@ exports[`<Footer /> renders unchanged 1`] = `
     class="MuiBox-root css-uokh7t"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
diff --git a/apps/civicsignalblog/src/components/Input/Input.snap.js b/apps/civicsignalblog/src/components/Input/Input.snap.js
deleted file mode 100644
index 8ab669270..000000000
--- a/apps/civicsignalblog/src/components/Input/Input.snap.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Input /> renders unchanged 1`] = `
-<div>
-  <div
-    class="MuiFormControl-root MuiTextField-root css-1vqv0ht-MuiFormControl-root-MuiTextField-root"
-  >
-    <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-1e9tdcl-MuiInputBase-root-MuiOutlinedInput-root"
-    >
-      <input
-        aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input css-s9ndwd-MuiInputBase-input-MuiOutlinedInput-input"
-        id=":r0:"
-        type="text"
-        value=""
-      />
-      <fieldset
-        aria-hidden="true"
-        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-      >
-        <legend
-          class="css-ihdtdm"
-        >
-          <span
-            class="notranslate"
-          >
-            ​
-          </span>
-        </legend>
-      </fieldset>
-    </div>
-  </div>
-</div>
-`;
diff --git a/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js b/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
index e66ca0117..80c5442a7 100644
--- a/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormExternalEmbed /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       <iframe
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js b/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
index 92e9b62d8..4e584c879 100644
--- a/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormMedia /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <figure
-      class="MuiBox-root css-datfzi"
+      class="MuiBox-root css-1ol0o2q"
     >
       <img
         alt="alt"
-        class="css-11xr7uw"
+        class="css-nkefi2"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
diff --git a/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
index 6a991478d..2f083ce12 100644
--- a/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-17be2kn"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-147dsfb-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-nzp4fb-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="https://whomakesthenews.org/gmmp-2020-final-reports/"
         rel="noreferrer noopener"
         target="_blank"
@@ -20,17 +20,17 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
        report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
     </p>
diff --git a/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
index 90da31bad..2dc2fadda 100644
--- a/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -12,7 +12,7 @@ exports[`<MobileNavigation /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <button
-        class="MuiButtonBase-root css-drm4qu-MuiButtonBase-root"
+        class="MuiButtonBase-root css-68ofh6-MuiButtonBase-root"
         tabindex="0"
         type="button"
       >
diff --git a/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js b/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
index 0f0419207..e27020759 100644
--- a/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
+++ b/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
@@ -3,13 +3,14 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1sr66oj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-8dwgit-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: none;"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-l73zrm-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-1twxsqv-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -21,7 +22,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-drm4qu-MuiButtonBase-root"
+              class="MuiButtonBase-root css-68ofh6-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
diff --git a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
index 58b692753..59a65636a 100644
--- a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,67 +6,67 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/our-work"
       >
         Our Work
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         About
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         Stories
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/opportunity"
       >
         Opportunity
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/contact"
       >
         Contact
       </a>
     </li>
     <li
-      class="css-o9b79t"
+      class="css-1gfen40"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mwhxb7-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1iki3ku-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -76,17 +76,17 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </li>
     <li
-      class="css-o9b79t"
+      class="css-1gfen40"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mwhxb7-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1iki3ku-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
diff --git a/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js b/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
index 0f36178b8..e1dc0c40e 100644
--- a/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
+++ b/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
@@ -6,7 +6,7 @@ exports[`<NewsletterSubscription /> renders unchanged 1`] = `
     class="MuiStack-root css-4qg6bb-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-16j77y-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-6c00cf-MuiTypography-root"
     >
       
           
diff --git a/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js b/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
index a75de14a9..652d13294 100644
--- a/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
+++ b/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
@@ -6,16 +6,17 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-s5eomh-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-arrnye-MuiButtonBase-root-MuiButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
       <span
-        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
           focusable="false"
           style="font-size: 16px;"
           viewbox="0 0 32 32"
diff --git a/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js b/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
index 2d3fcb5ea..e48e741ee 100644
--- a/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
@@ -6,10 +6,10 @@ exports[`<PageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-17eyxl5"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j4752t-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1h88o2a-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-pb7s0c-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-8lni03-MuiTypography-root"
       >
         Contact
       </h2>
@@ -17,7 +17,7 @@ exports[`<PageHeader /> renders unchanged 1`] = `
         class="MuiBox-root css-0"
       >
         <h2
-          class="MuiTypography-root MuiTypography-h2 css-vb0iat-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h2 css-1hmh46k-MuiTypography-root"
         >
           Let's
           <strong>
diff --git a/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js b/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
index 5490c4a9d..a7743b1fe 100644
--- a/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
+++ b/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
@@ -3,47 +3,47 @@
 exports[`<RelatedStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1pmgh96-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1j30eyg-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-13spjgy-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-es9ltw-MuiTypography-root"
     >
       Related Stories
     </div>
     <div
-      class="MuiGrid-root MuiGrid-container css-16q497u-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-9nfmm8-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1u025w9-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-16ehw7m-MuiPaper-root-MuiCard-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1nkr5oe-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1w94mff-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
             href="/stories/article-1"
             tabindex="0"
           >
             <img
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qxudtl-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-r4yojg-MuiCardMedia-root"
               src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
             />
             <div
-              class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+              class="MuiCardContent-root css-qkirah-MuiCardContent-root"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
               >
                 Battle for gender equality in African media continues
               </h6>
               <span
-                class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
               >
                 Jan 6, 2022
               </span>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </a>
         </div>
diff --git a/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js b/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
index 634729ac6..23e6fe76d 100644
--- a/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
@@ -3,39 +3,44 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiFormControl-root MuiTextField-root css-1vpmlj9-MuiFormControl-root-MuiTextField-root"
+    class="MuiFormControl-root MuiTextField-root css-14soxr1-MuiFormControl-root-MuiTextField-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-3h83u3-MuiInputBase-root-MuiOutlinedInput-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-irp64v-MuiInputBase-root-MuiOutlinedInput-root"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-krewe6-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-ucicrb-MuiInputBase-input-MuiOutlinedInput-input"
         id=":r0:"
         type="search"
         value=""
       />
       <button
         aria-label="search"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+        id=":r1:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
       <fieldset
         aria-hidden="true"
-        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
       >
         <legend
-          class="css-ihdtdm"
+          class="css-w4cd9x"
         >
           <span
+            aria-hidden="true"
             class="notranslate"
           >
             ​
diff --git a/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js b/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
index 5b9ff41ad..82909b898 100644
--- a/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
+++ b/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
@@ -3,10 +3,10 @@
 exports[`<SectionDivider /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
   >
     <hr
-      class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+      class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
     />
   </div>
 </div>
diff --git a/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js b/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
index 024d802f0..aa39e3e64 100644
--- a/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
+++ b/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
@@ -10,7 +10,7 @@ exports[`<FacebookShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -28,7 +28,7 @@ exports[`<LinkedinShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -46,7 +46,7 @@ exports[`<TwitterShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
index 65fa86dfe..9a120c537 100644
--- a/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -16,7 +16,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -29,7 +29,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -42,7 +42,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
index b7b1dac90..9dc375017 100644
--- a/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-1vlyie4-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js b/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
index bed729055..039eb8831 100644
--- a/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
+++ b/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
@@ -4,7 +4,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
 <div>
   <a
     aria-label="facebook"
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-qb5hih-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-1gfsfde-MuiTypography-root-MuiLink-root"
     data-mui-internal-clone-element="true"
     href="https://www.facebook.com/"
     rel="noreferrer noopener"
@@ -12,7 +12,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js b/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
index 2e650f842..d93995f3d 100644
--- a/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
+++ b/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
@@ -4,10 +4,15 @@ exports[`<TooltipButton /> renders unchanged 1`] = `
 <div>
   <button
     aria-label="Title"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-v34xym-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-1bkrgty-MuiButtonBase-root-MuiIconButton-root"
     data-mui-internal-clone-element="true"
+    id=":r1:"
     tabindex="0"
     type="button"
-  />
+  >
+    <span
+      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+    />
+  </button>
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
index dc2824203..d2aaa9a1b 100644
--- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
+++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
@@ -6,10 +6,10 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-1termwk"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1cxefnp-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
     >
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-7i7a1w-MuiTypography-root"
       >
         About Team
       </h4>
diff --git a/apps/climatemappedafrica/src/components/Card/Card.snap.js b/apps/climatemappedafrica/src/components/Card/Card.snap.js
index faa79b3df..64dae7242 100644
--- a/apps/climatemappedafrica/src/components/Card/Card.snap.js
+++ b/apps/climatemappedafrica/src/components/Card/Card.snap.js
@@ -3,7 +3,8 @@
 exports[`<Card /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-s2nibj-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1mxzk6x-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   />
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
index 630de530f..2a9fa2039 100644
--- a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
+++ b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
@@ -40,7 +40,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-18bgkre-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-72d9li-MuiButtonBase-root"
+              class="MuiButtonBase-root css-58ah25-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
@@ -55,13 +55,10 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
                 />
               </div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1eogcpa-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-1euzdtt-MuiTypography-root"
               >
                 Overview
               </p>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
index 55850b6f2..90818578b 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -7,35 +7,36 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
     id="location-search"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
     >
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-wn8n2y-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-19ymigm-MuiInputBase-root"
     >
       <input
         aria-label="search"
-        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
         placeholder="Search for a location"
         type="text"
         value=""
       />
       <button
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
+        id=":r0:"
         root="[object Object]"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
       </button>
     </div>
     <div
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
index 952ff48de..1eaabbed0 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
@@ -7,7 +7,7 @@ exports[`<TreeView /> renders unchanged 1`] = `
   >
     <ul
       aria-multiselectable="false"
-      class="MuiSimpleTreeView-root css-rejl51-MuiSimpleTreeView-root"
+      class="MuiSimpleTreeView-root css-1o8c9x7-MuiSimpleTreeView-root"
       id="mui-tree-view-1"
       role="tree"
       style="--TreeView-itemChildrenIndentation: 12px;"
@@ -15,25 +15,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-1uhp40g-MuiTreeItem2-root"
+        class="css-ezfdyn-MuiTreeItem2-root"
         id="mui-tree-view-1-annual-temperature"
         role="treeitem"
         tabindex="0"
       >
         <div
-          class="content css-tbaszv-MuiTreeItem2-content"
+          class="content css-df642v-MuiTreeItem2-content"
         >
           <div
-            class="css-d6m21r-MuiTreeItem2-label"
+            class="css-13p7y6r-MuiTreeItem2-label"
           >
             Annual Temperature
           </div>
           <div
-            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+            class="css-1qa0aux-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
@@ -42,25 +42,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-1uhp40g-MuiTreeItem2-root"
+        class="css-ezfdyn-MuiTreeItem2-root"
         id="mui-tree-view-1-temperature-variation"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="content css-tbaszv-MuiTreeItem2-content"
+          class="content css-df642v-MuiTreeItem2-content"
         >
           <div
-            class="css-d6m21r-MuiTreeItem2-label"
+            class="css-13p7y6r-MuiTreeItem2-label"
           >
             Temperature Variation
           </div>
           <div
-            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+            class="css-1qa0aux-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
diff --git a/apps/climatemappedafrica/src/components/Header/Header.snap.js b/apps/climatemappedafrica/src/components/Header/Header.snap.js
index 8c0b6f63c..af27261ed 100644
--- a/apps/climatemappedafrica/src/components/Header/Header.snap.js
+++ b/apps/climatemappedafrica/src/components/Header/Header.snap.js
@@ -7,12 +7,12 @@ exports[`<Header /> renders unchanged 1`] = `
     title="Title with <span class="highlight">Highlight</span>"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-2tpb9q-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-1qgi9z8-MuiTypography-root"
     >
       Overline
     </div>
     <div
-      class="MuiTypography-root MuiTypography-subtitle1 css-1ymhwmr-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-subtitle1 css-da6zqu-MuiTypography-root"
     >
       A short paragraph to describe what the header is all about.
     </div>
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index e224d01a1..25dfc1a73 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -17,10 +17,10 @@ exports[`<Hero /> renders unchanged 1`] = `
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qcxpxp-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hqp65g-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-ljvmaf-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-15wb4z1-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kvfo90-MuiGrid-root"
@@ -35,7 +35,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                 class="MuiBox-root css-b8dxf0"
               >
                 <h1
-                  class="MuiTypography-root MuiTypography-h1 css-51s2c1-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h1 css-gu7oov-MuiTypography-root"
                 >
                   Empowering action through climate data.
                 </h1>
@@ -44,7 +44,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                 class="MuiBox-root css-1733xbc"
               >
                 <h6
-                  class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
                 >
                   ClimateMapped.AFRICA helps explore, analyse, and use climate data to advocate for stronger, faster action on climate resilience and sustainability.
                 </h6>
@@ -62,35 +62,36 @@ exports[`<Hero /> renders unchanged 1`] = `
                 id="location-search"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
                 >
                   Search for a location
                 </p>
                 <div
-                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-14f5sin-MuiInputBase-root"
+                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1c0cgss-MuiInputBase-root"
                 >
                   <input
                     aria-label="search"
-                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
                     placeholder="Search for a location"
                     type="text"
                     value=""
                   />
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
+                    id=":r0:"
                     root="[object Object]"
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
                       focusable="false"
                       viewBox="0 0 48 48"
                     />
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </div>
                 <div
diff --git a/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js b/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
index 1ef5c8a97..efa32e753 100644
--- a/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
+++ b/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
@@ -6,7 +6,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
     class="MuiBox-root css-u361uw"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1l22h3t-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1q4btob-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
@@ -18,7 +18,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
             class="MuiBox-root css-0"
           >
             <div
-              class="MuiTypography-root MuiTypography-overline css-1hwczut-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-overline css-rqlamj-MuiTypography-root"
             >
               About
             </div>
@@ -26,7 +26,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
               class="MuiBox-root css-1ki7zn5"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-51s2c1-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-gu7oov-MuiTypography-root"
               >
                 Project  
                 <strong>
@@ -39,7 +39,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
               class="MuiBox-root css-1yyblq"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
               >
                 Learn more about 
                 <strong>
@@ -51,7 +51,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
                 </em>
                  and how you can help improve 
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1nejbix-MuiTypography-root-MuiLink-root-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1c4b5qt-MuiTypography-root-MuiLink-root-MuiTypography-root"
                   href="/"
                 >
                   ClimateMap
diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
index 32bfdc3b8..f55def9e2 100644
--- a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
+++ b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
@@ -7,7 +7,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
     title="[object Object]"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-1hwczut-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-rqlamj-MuiTypography-root"
     >
       About
     </div>
@@ -15,7 +15,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
       class="MuiBox-root css-1xaekgw"
     >
       <h6
-        class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
       >
         Learn more about 
         <strong>
@@ -27,7 +27,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
         </em>
          and how you can help improve 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1nejbix-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1c4b5qt-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="/"
         >
           ClimateMap
diff --git a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
index 2ee355342..723d10f14 100644
--- a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
+++ b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
@@ -6,7 +6,7 @@ exports[`<Summary /> renders unchanged 1`] = `
     class="MuiBox-root css-dx4cvz"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1cxefnp-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -15,12 +15,12 @@ exports[`<Summary /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-u2oqkr-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h2 css-yrv1vq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-1vtq9iq-MuiTypography-root"
           >
             History
           </h2>
           <h5
-            class="MuiTypography-root MuiTypography-h5 css-1fb4hg2-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5 css-z49wvx-MuiTypography-root"
           >
             The ClimateMapped.AFRICA project by the CfA Datalab team is a data storytelling initiative designed to make 120 years of climate sampling data accessible to experts, journalists, concerned citizens, and researchers. This project chronicles Africa's climate history, using data storytelling techniques to present temperature trends and analysis at both national and sub-national levels
           </h5>
@@ -32,23 +32,23 @@ exports[`<Summary /> renders unchanged 1`] = `
             class="MuiBox-root css-ge1eyg"
           >
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             >
               The project was focused on helping journalists at Kenyan community-based radio stations adopt data-driven digital journalism tools and techniques to improve their evidence-driven analysis and multimedia reporting on development issues. The data portal was built to help them explore, visualise and interpret development data that impacted their own communities.
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             />
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             >
               The initial project involved 14 community radio stations in eight Kenyan counties. The selected community radios are all an integral part of their local communities and broadcast not only in English and Kiswahili but also in various local languages (such as Kitaita, Borana, Samburu and Meru).
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             />
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             >
               Their listeners are mainly marginalised groups in Kenyan society and the poor rural population. The ‘Our County: Our Responsibility’ project was a partnership between 
               <strong>
diff --git a/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js b/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
index fcb1fa3f2..c8547587d 100644
--- a/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
@@ -6,10 +6,10 @@ exports[`<AboutChildPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-1dmumqp"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-h42qkr-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-b8di4k-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-1fyy4z-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-kgx5jm-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-l2rmlj-MuiGrid-root"
@@ -22,12 +22,12 @@ exports[`<AboutChildPageHeader /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-u2r8gx-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h1 css-1iw1m6a-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h1 css-1ivm86d-MuiTypography-root"
           >
             Jacobo Ottaviani
           </div>
           <div
-            class="MuiTypography-root MuiTypography-h3Light css-1wlmmn9-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3Light css-1tpi4ke-MuiTypography-root"
           >
             Chief Data Officer
           </div>
diff --git a/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js b/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
index 51ed4fcae..fd408c234 100644
--- a/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
+++ b/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
@@ -6,7 +6,7 @@ exports[`<AboutPageEntity /> renders unchanged 1`] = `
     class="MuiBox-root css-1gghq2r"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ilq66o-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-13wzzov-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-15sqwg8"
diff --git a/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js b/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
index eb3499f15..f8b159e3f 100644
--- a/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
+++ b/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
@@ -13,7 +13,7 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1u8nxw3-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-4xeugy-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 64 64"
         />
@@ -25,13 +25,13 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
           class="MuiBox-root css-1htlurg"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-zgmcj5-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-1l1ocre-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-body1 css-cx4ow6-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-xa0rza-MuiTypography-root"
               >
                 Award Name
               </p>
@@ -40,7 +40,7 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-1nn8juq-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-184b5ev-MuiTypography-root"
               >
                 Month 2021
               </span>
diff --git a/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js b/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
index 751e21364..dcb63dd95 100644
--- a/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-xy1jw4-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1afl0o2-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js b/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
index 14102b70a..a6c15c9ce 100644
--- a/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardContent /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js b/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
index 0095b6a94..250c858f5 100644
--- a/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-w63bgl-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-8kfifd-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
index 97818fb0d..ddcbe550e 100644
--- a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
+++ b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleGrid /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js b/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
index 50233aceb..9f9af557b 100644
--- a/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
+++ b/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
@@ -3,13 +3,13 @@
 exports[`<ArticleHeader /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12qr4r4-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1acs8ar-MuiContainer-root"
   >
     <div
       class="MuiStack-root css-yhfzs2-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
       >
         Share This Article
       </div>
@@ -24,7 +24,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -37,7 +37,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -50,7 +50,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
index e3ac4f60d..f5b5307eb 100644
--- a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
+++ b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
@@ -6,11 +6,11 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <figure
-      class="MuiBox-root css-nxzwqu"
+      class="MuiBox-root css-11cyhif"
     >
       <img
         alt="Article"
-        class="css-45v618"
+        class="css-dqrju9"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
@@ -21,15 +21,15 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       />
     </figure>
     <header
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cnnhfl-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tqqwnc-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-body2 css-3nqud1-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body2 css-1evzhmm-MuiTypography-root"
       >
         Sept 1, 2021
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-3hsw5e-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-1xqv05z-MuiTypography-root"
       >
         Article
       </div>
@@ -37,7 +37,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-yhfzs2-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
         >
           Share This Article
         </div>
@@ -52,7 +52,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -65,7 +65,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -78,7 +78,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -87,16 +87,16 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </header>
     <section
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-z5w0rf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-333pmc-MuiContainer-root"
     />
     <address
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1o0bwi8-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1e1o0rh-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
         >
           Article by
         </div>
@@ -104,12 +104,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-3oepjh-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-1n8elks-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-5bq78h-MuiTypography-root"
           >
             Author 1
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
           >
             Author 1 bio
           </div>
@@ -119,7 +119,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
         >
           Article by
         </div>
@@ -127,12 +127,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-3oepjh-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-1n8elks-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-5bq78h-MuiTypography-root"
           >
             Author 2
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
           >
             Author 2 bio
           </div>
@@ -140,27 +140,27 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </address>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ke15ni-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16bepat-MuiContainer-root"
     >
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fwha7w-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-102tpll-MuiContainer-root"
     >
       <div
-        class="MuiToggleButtonGroup-root css-h89xvq-MuiToggleButtonGroup-root"
+        class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1t1qg9b-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 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-up37a5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
           href="/tag1?tag=tag2"
           tabindex="0"
           value="tag2"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
           >
             tag2
           </span>
diff --git a/apps/codeforafrica/src/components/Articles/Articles.snap.js b/apps/codeforafrica/src/components/Articles/Articles.snap.js
index 615375841..ec009a8d2 100644
--- a/apps/codeforafrica/src/components/Articles/Articles.snap.js
+++ b/apps/codeforafrica/src/components/Articles/Articles.snap.js
@@ -4,7 +4,7 @@ exports[`<Articles /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
@@ -13,7 +13,7 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-17kpph-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h4 css-iht8qd-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-10rydhy-MuiTypography-root"
           >
             Title
           </div>
@@ -21,14 +21,14 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiStack-root css-kbcct1-MuiStack-root"
           >
             <div
-              class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r0:"
                   placeholder="Search"
                   type="search"
@@ -36,25 +36,30 @@ exports[`<Articles /> renders unchanged 1`] = `
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+                  id=":r1:"
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-ihdtdm"
+                    class="css-w4cd9x"
                   >
                     <span
+                      aria-hidden="true"
                       class="notranslate"
                     >
                       ​
@@ -64,41 +69,41 @@ exports[`<Articles /> renders unchanged 1`] = `
               </div>
             </div>
             <div
-              class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
+              class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
               role="group"
             >
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="All"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   All
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag1"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   tag1
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag2"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   tag2
                 </span>
@@ -110,10 +115,10 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-cy97kn-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-ern672-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1j78d08-MuiPaper-root-MuiCard-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
               href="/stories/article-1"
               tabindex="0"
             >
@@ -125,7 +130,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 >
                   <img
                     alt="Featured Article Image"
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-6crdfp-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-i04c02-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                 </div>
@@ -133,27 +138,28 @@ exports[`<Articles /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+                    class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </p>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
                     >
                       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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1k0wfhb-MuiButtonBase-root-MuiButton-root"
+                      id=":r2:"
                       tabindex="0"
                       type="button"
                     >
                       Read More
                     </button>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
@@ -166,15 +172,16 @@ exports[`<Articles /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+                      class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
                     >
                       <h1
-                        class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-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-vwpt7m-MuiButtonBase-root-MuiButton-root"
+                        id=":r3:"
                         tabindex="0"
                         type="button"
                       >
@@ -185,7 +192,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
               />
             </a>
           </div>
@@ -194,39 +201,39 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1nco2t7-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-mxdmwy-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-1t2i2wj-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
             >
               <div
-                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1dxfqf3-MuiPaper-root-MuiCard-root"
+                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-5tgk1w-MuiPaper-root-MuiCard-root"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
                   href="/stories/article-1"
                   tabindex="0"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-gzk243-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1u60xul-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                   <div
-                    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+                    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
                   >
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </h6>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
                   </div>
                   <span
-                    class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                    class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                   />
                 </a>
               </div>
@@ -245,7 +252,8 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-ubz8n1-MuiButtonBase-root-MuiButton-root"
+            id=":r4:"
             tabindex="0"
             type="button"
           >
diff --git a/apps/codeforafrica/src/components/Author/Author.snap.js b/apps/codeforafrica/src/components/Author/Author.snap.js
index 0181b8f07..db4858082 100644
--- a/apps/codeforafrica/src/components/Author/Author.snap.js
+++ b/apps/codeforafrica/src/components/Author/Author.snap.js
@@ -6,7 +6,7 @@ exports[`<Author /> renders unchanged 1`] = `
     class="MuiStack-root css-ty68jk-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
     >
       Article by
     </div>
diff --git a/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js b/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
index ed7b7c3ca..360d17351 100644
--- a/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
+++ b/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
@@ -3,16 +3,16 @@
 exports[`<Breadcrumbs /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1yleyq8-MuiTypography-root-MuiBreadcrumbs-root"
+    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-160nqft-MuiTypography-root-MuiBreadcrumbs-root"
   >
     <ol
-      class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+      class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
     >
       <li
         class="MuiBreadcrumbs-li"
       >
         <a
-          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
           href="/projects"
         >
           Our Work
@@ -20,7 +20,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+        class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
       >
         /
       </li>
@@ -28,7 +28,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
         class="MuiBreadcrumbs-li"
       >
         <div
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           Initiatives
         </div>
diff --git a/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js b/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
index 1e1be4d66..1473b1ae0 100644
--- a/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
+++ b/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
@@ -3,17 +3,17 @@
 exports[`<CMSContent /> renders unchanged 1`] = `
 <div>
   <section
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-6cogad"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://whomakesthenews.org/gmmp-2020-final-reports/"
           rel="noreferrer noopener"
           target="_blank"
@@ -23,17 +23,17 @@ exports[`<CMSContent /> renders unchanged 1`] = `
          report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
       </p>
@@ -42,11 +42,11 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <figure
-        class="MuiBox-root css-datfzi"
+        class="MuiBox-root css-1ol0o2q"
       >
         <img
           alt="alt"
-          class="css-11xr7uw"
+          class="css-nkefi2"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -66,7 +66,7 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <div
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         <iframe
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js b/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
index b142ce849..f8648fa7b 100644
--- a/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
+++ b/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
@@ -3,12 +3,12 @@
 exports[`<ChoiceChip /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
     role="button"
     tabindex="0"
   >
     <span
-      class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+      class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js b/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
index 1f9631e54..e7710b280 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-vw6mhb-MuiToggleButtonGroup-root"
+    class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-13g1sjm-MuiToggleButtonGroup-root"
     role="group"
   />
 </div>
diff --git a/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js b/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
index 083ccaf7e..254069966 100644
--- a/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
+++ b/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
@@ -3,10 +3,10 @@
 exports[`<ContactForm /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-7u83cd-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-142h6kb-MuiTypography-root"
     >
       
     
diff --git a/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js b/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
index 6f63e3a76..6ecb6529c 100644
--- a/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
@@ -6,15 +6,16 @@ exports[`<CustomPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-g6ohb3"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-17rh705-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1jpj0cn-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-wy10c9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-1wffq7f-MuiTypography-root"
       >
         About Us
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-3preu5-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-wqof5o-MuiTypography-root"
+        style="--Typography-textAlign: center;"
       >
         We are Africa’s largest network of civic technology and data journalism labs
       </h2>
diff --git a/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js b/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
index 06e8232f1..86825eb67 100644
--- a/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
+++ b/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
@@ -6,7 +6,7 @@ exports[`<ErrorHero /> renders unchanged 1`] = `
     class="MuiBox-root css-f0vcxq"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x9ncny-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-184q5a6-MuiContainer-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
index 9e149e7f3..83d9ccb83 100644
--- a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
+++ b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
@@ -3,10 +3,10 @@
 exports[`<FeaturedArticle /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-ern672-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1j78d08-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/stories/article-1"
       tabindex="0"
     >
@@ -18,7 +18,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         >
           <img
             alt="Featured Article Image"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-6crdfp-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-i04c02-MuiCardMedia-root"
             src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
           />
         </div>
@@ -26,27 +26,28 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+            class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
             >
               Battle for gender equality in African media continues
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1k0wfhb-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
               Read Story
             </button>
             <span
-              class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
             >
               Jan 6, 2022
             </span>
@@ -59,15 +60,16 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+              class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
               >
                 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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-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-vwpt7m-MuiButtonBase-root-MuiButton-root"
+                id=":r1:"
                 tabindex="0"
                 type="button"
               >
@@ -78,7 +80,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js b/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
index 5a42ea103..e47911d52 100644
--- a/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
+++ b/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
@@ -6,39 +6,44 @@ exports[`<FilterBar /> renders unchanged 1`] = `
     class="MuiStack-root css-7ziy04-MuiStack-root"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           type="search"
           value=""
         />
         <button
           aria-label="search"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+          id=":r1:"
           tabindex="0"
           type="button"
         >
+          <span
+            class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+          />
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 16 16"
           />
         </button>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-ihdtdm"
+            class="css-w4cd9x"
           >
             <span
+              aria-hidden="true"
               class="notranslate"
             >
               ​
@@ -48,17 +53,17 @@ exports[`<FilterBar /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
+      class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
       role="group"
     >
       <div
-        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
         role="button"
         tabindex="0"
         value="tag"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
         >
           tag
         </span>
diff --git a/apps/codeforafrica/src/components/Footer/Footer.snap.js b/apps/codeforafrica/src/components/Footer/Footer.snap.js
index b34476984..47b010068 100644
--- a/apps/codeforafrica/src/components/Footer/Footer.snap.js
+++ b/apps/codeforafrica/src/components/Footer/Footer.snap.js
@@ -6,7 +6,7 @@ exports[`<Footer /> renders unchanged 1`] = `
     class="MuiBox-root css-iaw44m"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
index 322b9ab75..b1c6adf13 100644
--- a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
+++ b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
@@ -6,32 +6,35 @@ exports[`<GetInTouch /> renders unchanged 1`] = `
     class="MuiBox-root css-xvn5y9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-163ljxj-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-1s1x4el-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-oz8nnx-MuiTypography-root"
+          style="--Typography-textAlign: center;"
         >
           Are you looking to start a new project?
         </div>
         <div
-          class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-djznl0-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-p4ptdx-MuiTypography-root"
+          style="--Typography-textAlign: center;"
         >
           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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary 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-ay9u4j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
           href="/contact"
+          id=":r0:"
           tabindex="0"
         >
           <span
-            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
+            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-1xskro6-MuiButton-startIcon"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
index 87f4be844..0b43cf462 100644
--- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
+++ b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
@@ -6,29 +6,30 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
     class="MuiBox-root css-tm3fmn"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ftddi4-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-uuq4mx-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-7mi0ln-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-15pqvda-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
+            style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
           >
             <div
-              class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+              class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
             >
               <div
                 class="MuiBox-root css-17pohca"
               >
                 <figure
-                  class="MuiBox-root css-1lb2pcr"
+                  class="MuiBox-root css-3k1316"
                 >
                   <img
                     alt="Beneficiaries trained"
-                    class="css-g98gbd"
+                    class="css-qv2885"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -37,13 +38,13 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
                   />
                 </figure>
                 <div
-                  class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
                 >
                   Beneficiaries trained
                 </div>
               </div>
               <div
-                class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
               >
                 15000
               </div>
@@ -51,7 +52,7 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
                 class="MuiBox-root css-2ligbh"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
                 >
                   Our team makes an impact in more than 20 countries where members are present.
                 </span>
@@ -61,8 +62,9 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1ecuhjn-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/contact"
+        id=":r0:"
         tabindex="0"
       >
         Get Involved
diff --git a/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js b/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
index 175d55cd2..e91b51ff8 100644
--- a/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
+++ b/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
@@ -3,14 +3,15 @@
 exports[`<GuidingPrinciplesCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-mf2jkh-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1kcakmx-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <img
       alt=""
-      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-duozqf-MuiCardMedia-root"
+      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qz2jhi-MuiCardMedia-root"
     />
     <div
-      class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+      class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/Hero/Hero.snap.js b/apps/codeforafrica/src/components/Hero/Hero.snap.js
index ad54cac88..88896827e 100644
--- a/apps/codeforafrica/src/components/Hero/Hero.snap.js
+++ b/apps/codeforafrica/src/components/Hero/Hero.snap.js
@@ -6,7 +6,7 @@ exports[`<Hero /> renders unchanged 1`] = `
     class="MuiBox-root css-1jyu2xp"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1oukqxz-MuiGrid-root"
@@ -18,11 +18,11 @@ exports[`<Hero /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-3zt5io"
+            class="MuiBox-root css-1fk4bve"
           >
             <img
               alt="Civic tech and open data labs"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
index f90973dbf..5451f8bc5 100644
--- a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
+++ b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
@@ -3,20 +3,21 @@
 exports[`<ImpactCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+      class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
     >
       <div
         class="MuiBox-root css-17pohca"
       >
         <figure
-          class="MuiBox-root css-1lb2pcr"
+          class="MuiBox-root css-3k1316"
         >
           <img
             alt="Beneficiaries trained"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="fill"
             decoding="async"
             loading="lazy"
@@ -25,13 +26,13 @@ exports[`<ImpactCard /> renders unchanged 1`] = `
           />
         </figure>
         <div
-          class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
         >
           Beneficiaries trained
         </div>
       </div>
       <div
-        class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
       >
         15000
       </div>
@@ -39,7 +40,7 @@ exports[`<ImpactCard /> renders unchanged 1`] = `
         class="MuiBox-root css-2ligbh"
       >
         <span
-          class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
         >
           Our team makes an impact in more than 20 countries where members are present.
         </span>
diff --git a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
index 118766189..610eadcd5 100644
--- a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
+++ b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
@@ -3,26 +3,27 @@
 exports[`<ImpactCardList /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-7mi0ln-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-15pqvda-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <div
-          class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+          class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
         >
           <div
             class="MuiBox-root css-17pohca"
           >
             <figure
-              class="MuiBox-root css-1lb2pcr"
+              class="MuiBox-root css-3k1316"
             >
               <img
                 alt="Beneficiaries trained"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -31,13 +32,13 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
               />
             </figure>
             <div
-              class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
             >
               Beneficiaries trained
             </div>
           </div>
           <div
-            class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
           >
             15000
           </div>
@@ -45,7 +46,7 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
             class="MuiBox-root css-2ligbh"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
             >
               Our team makes an impact in more than 20 countries where members are present.
             </span>
diff --git a/apps/codeforafrica/src/components/Input/Input.snap.js b/apps/codeforafrica/src/components/Input/Input.snap.js
deleted file mode 100644
index 8ab669270..000000000
--- a/apps/codeforafrica/src/components/Input/Input.snap.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Input /> renders unchanged 1`] = `
-<div>
-  <div
-    class="MuiFormControl-root MuiTextField-root css-1vqv0ht-MuiFormControl-root-MuiTextField-root"
-  >
-    <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-1e9tdcl-MuiInputBase-root-MuiOutlinedInput-root"
-    >
-      <input
-        aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input css-s9ndwd-MuiInputBase-input-MuiOutlinedInput-input"
-        id=":r0:"
-        type="text"
-        value=""
-      />
-      <fieldset
-        aria-hidden="true"
-        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-      >
-        <legend
-          class="css-ihdtdm"
-        >
-          <span
-            class="notranslate"
-          >
-            ​
-          </span>
-        </legend>
-      </fieldset>
-    </div>
-  </div>
-</div>
-`;
diff --git a/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js b/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
index a679e1fe2..a2e2abd91 100644
--- a/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
+++ b/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormExternalEmbed /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       <iframe
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js b/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
index 92e9b62d8..4e584c879 100644
--- a/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
+++ b/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormMedia /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <figure
-      class="MuiBox-root css-datfzi"
+      class="MuiBox-root css-1ol0o2q"
     >
       <img
         alt="alt"
-        class="css-11xr7uw"
+        class="css-nkefi2"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
diff --git a/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
index 6a2b574e7..07ed453c8 100644
--- a/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-6cogad"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="https://whomakesthenews.org/gmmp-2020-final-reports/"
         rel="noreferrer noopener"
         target="_blank"
@@ -20,17 +20,17 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
        report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
     </p>
diff --git a/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js b/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
index 7d3cb0203..659cf4342 100644
--- a/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
+++ b/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
@@ -6,7 +6,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-1mkqfm9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-wo9xbb-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-14agrwc-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
@@ -15,7 +15,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-qq6rd1-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h2 css-1j82ixe-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-vk3q8d-MuiTypography-root"
           >
             title
           </div>
@@ -23,7 +23,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
             class="MuiBox-root css-pxpt32"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
             >
               <strong>
                 Africa's
@@ -32,8 +32,9 @@ 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-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"
+            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-1ctsdn-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
             href="/about#our-team"
+            id=":r0:"
             tabindex="0"
           >
             Meet our team
@@ -43,11 +44,11 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1912ugn-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-97qtcq"
+            class="MuiBox-root css-1xjnpxv"
           >
             <img
               alt="Our offices across africa"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
index e4075436f..e66d86452 100644
--- a/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -12,7 +12,7 @@ exports[`<MobileNavigation /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <button
-        class="MuiButtonBase-root css-r1bof9-MuiButtonBase-root"
+        class="MuiButtonBase-root css-qtrzli-MuiButtonBase-root"
         tabindex="0"
         type="button"
       >
diff --git a/apps/codeforafrica/src/components/NavBar/NavBar.snap.js b/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
index dbf1f8339..27a2b1e19 100644
--- a/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
+++ b/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
@@ -3,13 +3,14 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-vckksl-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1ehuqn3-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-l73zrm-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-1twxsqv-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -21,7 +22,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-r1bof9-MuiButtonBase-root"
+              class="MuiButtonBase-root css-qtrzli-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
diff --git a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
index 23ab46426..5ecbaef99 100644
--- a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,67 +6,67 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/our-work"
       >
         Our Work
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         About
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         Stories
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/opportunity"
       >
         Opportunity
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/contact"
       >
         Contact
       </a>
     </li>
     <li
-      class="css-o9b79t"
+      class="css-1gfen40"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-181jv7l-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-k5xgb-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -76,17 +76,17 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </li>
     <li
-      class="css-o9b79t"
+      class="css-1gfen40"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-181jv7l-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-k5xgb-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
diff --git a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
index 3379eee88..9399892c8 100644
--- a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
+++ b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
@@ -3,21 +3,21 @@
 exports[`<NewsAndStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-zy2rzy-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-6miz6g-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-dvxtzn"
     >
       <div
-        class="MuiTypography-root MuiTypography-h4 css-304hzg-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-3r90ab-MuiTypography-root"
       >
         News and Stories
       </div>
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1486ctq-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-outlined MuiCard-root css-wvkjen-MuiPaper-root-MuiCard-root"
       >
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
           href="/stories/article-1"
           tabindex="0"
         >
@@ -29,7 +29,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
             >
               <img
                 alt="Featured Article Image"
-                class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1hjwis2-MuiCardMedia-root"
+                class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-kitp2x-MuiCardMedia-root"
                 src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
               />
             </div>
@@ -37,27 +37,28 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-p8r8tv-MuiGrid-root"
             >
               <div
-                class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+                class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
                 >
                   Battle for gender equality in African media continues
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
                 >
                   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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1k0wfhb-MuiButtonBase-root-MuiButton-root"
+                  id=":r0:"
                   tabindex="0"
                   type="button"
                 >
                   Read Story
                 </button>
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
                 >
                   Jan 6, 2022
                 </span>
@@ -70,15 +71,16 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <div
-                  class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+                  class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
                 >
                   <h1
-                    class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
                   >
                     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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-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-vwpt7m-MuiButtonBase-root-MuiButton-root"
+                    id=":r1:"
                     tabindex="0"
                     type="button"
                   >
@@ -89,13 +91,14 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
             </div>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
           />
         </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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-12l5fu5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/stories"
+        id=":r2:"
         tabindex="0"
       >
         Read Stories
@@ -103,7 +106,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
     </div>
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth css-92tnng-MuiDivider-root"
+    class="MuiDivider-root MuiDivider-fullWidth css-1oifqm7-MuiDivider-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
index cd23fd4a0..112a497b1 100644
--- a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
+++ b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
@@ -6,7 +6,7 @@ exports[`<NewsletterSubscription /> renders unchanged 1`] = `
     class="MuiStack-root css-4qg6bb-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-2lzuww-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1uz1t14-MuiTypography-root"
     >
       
           
diff --git a/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js b/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
index 047f7aa53..2158eb318 100644
--- a/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
+++ b/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
@@ -6,16 +6,17 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-ubz8n1-MuiButtonBase-root-MuiButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
       <span
-        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
           focusable="false"
           style="font-size: 16px;"
           viewbox="0 0 32 32"
diff --git a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
index 9c399b87e..97d348911 100644
--- a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
+++ b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
@@ -4,20 +4,20 @@ exports[`<Opportunities /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1an3gwn-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1uesgbp-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-7ziy04-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search"
               type="search"
@@ -25,25 +25,30 @@ exports[`<Opportunities /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+              id=":r1:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-ihdtdm"
+                class="css-w4cd9x"
               >
                 <span
+                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
@@ -53,17 +58,17 @@ exports[`<Opportunities /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
+          class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
           role="group"
         >
           <div
-            class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+            class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
             role="button"
             tabindex="0"
             value="All"
           >
             <span
-              class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+              class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
             >
               All
             </span>
diff --git a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
index 4d340f6ae..211ccd851 100644
--- a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
+++ b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
@@ -3,23 +3,24 @@
 exports[`<OpportunityCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-19gv4rl-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l5d74p-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/opportunities/1"
       tabindex="0"
     >
       <img
         alt="Deputy Investigative Manager"
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1kuwa16-MuiCardMedia-root"
         src="https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg"
       />
       <div
-        class="MuiCardContent-root css-1i9wt8r-MuiCardContent-root"
+        class="MuiCardContent-root css-127evc8-MuiCardContent-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3 css-15dwhyt-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3 css-dvuf73-MuiTypography-root"
         >
           DEPUTY INVESTIGATIVE MANAGER: Support the fight against disinformation and transnational organised crime
         </div>
@@ -27,22 +28,23 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiBox-root css-k008qs"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1 css-1kqg5wv-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-uzezo2-MuiTypography-root"
           >
             Data Journalism
           </div>
         </div>
         <section
-          class="MuiTypography-root MuiTypography-body2 css-uf7njh-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-vao4z2-MuiTypography-root"
         >
           Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...
         </section>
       </div>
       <div
-        class="MuiCardActions-root MuiCardActions-spacing css-1u29npa-MuiCardActions-root"
+        class="MuiCardActions-root MuiCardActions-spacing css-1dirygt-MuiCardActions-root"
       >
         <div
-          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"
+          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-1d7udnj-MuiButtonBase-root-MuiButton-root"
+          id=":r0:"
           role="button"
           tabindex="0"
         >
@@ -50,7 +52,7 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
index 25fb9daeb..f37ba4d6a 100644
--- a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
+++ b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
@@ -6,23 +6,24 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
     class="MuiStack-root css-112qvrx-MuiStack-root"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-19gv4rl-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l5d74p-MuiPaper-root-MuiCard-root"
+      style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
         href="/opportunities/1"
         tabindex="0"
       >
         <img
           alt="Deputy Investigative Manager"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1kuwa16-MuiCardMedia-root"
           src="https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg"
         />
         <div
-          class="MuiCardContent-root css-1i9wt8r-MuiCardContent-root"
+          class="MuiCardContent-root css-127evc8-MuiCardContent-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h3 css-15dwhyt-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3 css-dvuf73-MuiTypography-root"
           >
             DEPUTY INVESTIGATIVE MANAGER: Support the fight against disinformation and transnational organised crime
           </div>
@@ -30,28 +31,29 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
             class="MuiBox-root css-k008qs"
           >
             <div
-              class="MuiTypography-root MuiTypography-body1 css-1kqg5wv-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-uzezo2-MuiTypography-root"
             >
               Data Journalism
             </div>
           </div>
           <section
-            class="MuiTypography-root MuiTypography-body2 css-uf7njh-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-vao4z2-MuiTypography-root"
           >
             Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...
           </section>
         </div>
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-1u29npa-MuiCardActions-root"
+          class="MuiCardActions-root MuiCardActions-spacing css-1dirygt-MuiCardActions-root"
         >
           <div
-            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"
+            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-1d7udnj-MuiButtonBase-root-MuiButton-root"
+            id=":r0:"
             role="button"
             tabindex="0"
           />
         </div>
         <span
-          class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+          class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
         />
       </a>
     </div>
diff --git a/apps/codeforafrica/src/components/OurMission/OurMission.snap.js b/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
index db8bae978..d4791a029 100644
--- a/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
+++ b/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
@@ -3,15 +3,15 @@
 exports[`<OurMission /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ur5qos-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-15bs9il-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h4 css-8s6c84-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h4 css-6pic6-MuiTypography-root"
     >
       Our mission
     </div>
     <div
-      class="MuiTypography-root MuiTypography-h4 css-1m4iaew-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h4 css-b3usaa-MuiTypography-root"
     >
       Our mission subtitle
     </div>
@@ -19,11 +19,11 @@ exports[`<OurMission /> renders unchanged 1`] = `
       class="MuiBox-root css-ak74op"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA builds digital democracy solutions that give citizens unfettered access to actionable information that empowers them to make informed decisions, which strengthens civic engagement for improved public governance and accountability. This includes building infrastructures like the continent’s largest open data portals at 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://openafrica.net/"
           rel="noreferrer noopener"
           target="_blank"
@@ -32,7 +32,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          and 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://sourceafrica.net/"
           rel="noreferrer noopener"
           target="_blank"
@@ -41,7 +41,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         . CfA incubates initiatives as diverse as the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://africandrone.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -50,7 +50,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          network, the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://pesacheck.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -59,7 +59,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          fact-checking initiative and the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://sensors.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -69,11 +69,11 @@ exports[`<OurMission /> renders unchanged 1`] = `
          air quality sensor network.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA manages the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://investigate.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -82,7 +82,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          (ANCIR), which gives the continent’s top muckraking newsrooms the best possible 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://data.investigate.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -91,7 +91,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         , 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://getoutline.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -100,7 +100,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          and 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://afrileaks.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -109,7 +109,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          to help improve their ability to tackle crooked politicians, organised crime and predatory big business. CfA runs 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://academy.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -118,7 +118,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         , one of the continent’s largest 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://courses.academy.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -127,7 +127,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          initiatives for digital journalists, and seed funds cross-border collaboration. CfA’s research and analysis programme 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://civicsignal.africa/#/home"
           rel="noreferrer noopener"
           target="_blank"
@@ -137,40 +137,40 @@ exports[`<OurMission /> renders unchanged 1`] = `
          offers actionable insights to help navigate Africa’s media ecosystem and emerging civic technology sector using machine learning tools and ‘big data’ resources.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA is non-partisan and does not support or oppose any political party or candidate. We do not undertake any advocacy work either for ourselves or on behalf of others.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA is registered as a non-profit organisation in South Africa, registration number 168–092, and in Kenya with registration number CPR/2016/220101.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         <strong>
           Partnering for excellence
         </strong>
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         Collaborations and partnerships are at the heart of our work. To build digital democracies, we partner with organisations aligned with CfA values, acting as a catalyst for new initiatives and strengthening the local ecosystem by investing in and working through these partnerships.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         <strong>
           Guiding Principles
         </strong>
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA shares a covenant with the rest of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://codeforall.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -180,30 +180,30 @@ exports[`<OurMission /> renders unchanged 1`] = `
          federation, based on the following guiding principles:
       </p>
       <ol
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We show what’s possible. CfA seeks to be a catalyst by lowering the political risk of experimentation through creating successful proofs of concept for liberating civic data, for building enabling technologies and for pioneering sustainable revenue models. The organisation also endeavours to lower the financial costs for technology experimentation by creating and managing ‘shared’ backbone civic technology, and availing resources for rapid innovation.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We empower citizens. Empowering citizens is central to CfA’s theory of change. Strong democracies rely on engaged citizens who have actionable information and easy-to-use channels for making their will known. CfA works primarily with citizen organisations and civic watchdogs, including the media and also supports government and social enterprises in developing their capacity to respond meaningfully to citizens and to collaborate effectively with them.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We are action-oriented. African societies are asymmetric: the balance of power rests with governments and corporate institutions, at the expense of citizens who are treated as passive recipients of consultation or services. CfA seeks to change this by focusing on actionable data and action-oriented tools that give agency to citizens.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We operate in public. CfA promotes openness in our operations and in the work of our partners. All digital tools utilised are open source, and the organisation’s information is open data. CfA actively encourages documentation, sharing and collaboration, in addition to reuse of our own tools, programmes and processes, as well as those of our partners.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We help build ecosystems. CfA actively marshals resources to support the growth of a pan-African ecosystem of civic technologists. Whenever possible, this means reusing existing tools, standards and platforms, encouraging integration and extension. CfA operates as a pan-African federation of organisations who are active members of a global community, leveraging each other’s knowledge and resources.
         </li>
diff --git a/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js b/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
index aaba0e48f..6b44d9fd5 100644
--- a/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
+++ b/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
@@ -6,10 +6,10 @@ exports[`<OurTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-y4gfvb"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1clvkda-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-kwletu-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h5Small css-1sc3pwv-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5Small css-1f1z9uq-MuiTypography-root"
       >
         Our team
       </div>
@@ -17,14 +17,14 @@ exports[`<OurTeam /> renders unchanged 1`] = `
         class="MuiStack-root css-1vi1n47-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-112en4k-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-1dem73f-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search"
               type="search"
@@ -32,25 +32,30 @@ exports[`<OurTeam /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+              id=":r1:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-ihdtdm"
+                class="css-w4cd9x"
               >
                 <span
+                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
diff --git a/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js b/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
index 4be05b1cd..3a160e55b 100644
--- a/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
@@ -6,15 +6,15 @@ exports[`<PageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-1mt7k12"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j4752t-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1h88o2a-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-88sweq-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-179juyi-MuiTypography-root"
       >
         Contact
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 css-128vzxr-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 css-16ynaea-MuiTypography-root"
       >
         Let’s start something together!
       </h2>
diff --git a/apps/codeforafrica/src/components/Project/Project.snap.js b/apps/codeforafrica/src/components/Project/Project.snap.js
index 5b917f81f..0a7b63373 100644
--- a/apps/codeforafrica/src/components/Project/Project.snap.js
+++ b/apps/codeforafrica/src/components/Project/Project.snap.js
@@ -6,22 +6,23 @@ exports[`<Project /> renders unchanged 1`] = `
     class="MuiBox-root css-h16mw8"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-znh1og-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-a0mq7k-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: none;"
       >
         <nav
-          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-19xgsyh-MuiTypography-root-MuiBreadcrumbs-root"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1fdeege-MuiTypography-root-MuiBreadcrumbs-root"
         >
           <ol
-            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
           >
             <li
               class="MuiBreadcrumbs-li"
             >
               <a
-                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
                 href="/projects"
               >
                 Our Work
@@ -29,7 +30,7 @@ exports[`<Project /> renders unchanged 1`] = `
             </li>
             <li
               aria-hidden="true"
-              class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+              class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
             >
               /
             </li>
@@ -37,7 +38,7 @@ exports[`<Project /> renders unchanged 1`] = `
               class="MuiBreadcrumbs-li"
             >
               <div
-                class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
               >
                 Knowedge
               </div>
@@ -46,23 +47,23 @@ exports[`<Project /> renders unchanged 1`] = `
         </nav>
         <img
           alt="knowledgeAFRICA"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
           src="https://res.cloudinary.com/code-for-africa/image/upload/v1652705959/codeforafrica/images/Property_1_PesaCheck_iahlrh.jpg"
         />
         <div
           class="MuiBox-root css-1ntmuzk"
         >
           <nav
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1y4hekn-MuiTypography-root-MuiBreadcrumbs-root"
+            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-niza22-MuiTypography-root-MuiBreadcrumbs-root"
           >
             <ol
-              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+              class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
             >
               <li
                 class="MuiBreadcrumbs-li"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
                   href="/projects"
                 >
                   Our Work
@@ -70,7 +71,7 @@ exports[`<Project /> renders unchanged 1`] = `
               </li>
               <li
                 aria-hidden="true"
-                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+                class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
               >
                 /
               </li>
@@ -78,7 +79,7 @@ exports[`<Project /> renders unchanged 1`] = `
                 class="MuiBreadcrumbs-li"
               >
                 <div
-                  class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
                 >
                   Knowedge
                 </div>
@@ -86,20 +87,20 @@ exports[`<Project /> renders unchanged 1`] = `
             </ol>
           </nav>
           <div
-            class="MuiCardContent-root css-nvlyan-MuiCardContent-root"
+            class="MuiCardContent-root css-t0p48k-MuiCardContent-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+              class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
             >
               <div
                 class="MuiBox-root css-uq7i85"
               >
                 <figure
-                  class="MuiBox-root css-f1ltsh"
+                  class="MuiBox-root css-1kpvnft"
                 >
                   <img
                     alt="knowledgeAFRICA"
-                    class="css-g98gbd"
+                    class="css-qv2885"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -108,7 +109,7 @@ exports[`<Project /> renders unchanged 1`] = `
                   />
                 </figure>
                 <h4
-                  class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
                 >
                   knowledgeAFRICA
                 </h4>
@@ -116,12 +117,12 @@ exports[`<Project /> renders unchanged 1`] = `
                   class="MuiStack-root css-1v20l1v-MuiStack-root"
                 >
                   <span
-                    class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
                   >
                     knowledgeAFRICA
                   </span>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
                   >
                     Knowledge tag line
                   </div>
@@ -140,22 +141,23 @@ exports[`<Project /> renders unchanged 1`] = `
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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 css-roxh35-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
+              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
             >
               Launch Project
               <span
-                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -167,10 +169,10 @@ exports[`<Project /> renders unchanged 1`] = `
     </div>
   </div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1mtya01-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-k1mu3d-MuiContainer-root"
   />
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1rw4djt-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ntmmg2-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
@@ -182,7 +184,7 @@ exports[`<Project /> renders unchanged 1`] = `
           class="MuiStack-root css-1b1mat0-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
           >
             Details
           </div>
@@ -190,7 +192,7 @@ exports[`<Project /> renders unchanged 1`] = `
             class="MuiStack-root css-7d4qva-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
             >
               Share This Project
             </div>
@@ -205,7 +207,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -218,7 +220,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -231,7 +233,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -241,7 +243,7 @@ exports[`<Project /> renders unchanged 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-11319uf-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-1o055zn-MuiDivider-root"
       />
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-17q9xai-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js b/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
index 577eaf383..89434ac6c 100644
--- a/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
+++ b/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
@@ -3,10 +3,11 @@
 exports[`<ProjectCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1lxhh98-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-bl0cqu-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-1f2y1bk-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-n8bttj-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
@@ -14,39 +15,40 @@ exports[`<ProjectCard /> renders unchanged 1`] = `
         class="MuiBox-root css-0"
       >
         <img
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
         />
       </div>
       <div
         class="MuiBox-root css-zg1vud"
       >
         <div
-          class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+          class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
           >
             <div
               class="MuiBox-root css-uq7i85"
             >
               <h4
-                class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
               />
               <div
                 class="MuiStack-root css-1v20l1v-MuiStack-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
                 />
               </div>
             </div>
           </div>
         </div>
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
+          class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-MuiCardActions-root"
         >
           <div
-            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"
+            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-11lybd0-MuiButtonBase-root-MuiButton-root"
+            id=":r0:"
             role="button"
             tabindex="0"
           >
@@ -55,7 +57,7 @@ exports[`<ProjectCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js b/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
index 8aa6c7131..ddf638b3a 100644
--- a/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
+++ b/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ProjectCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
index beaaa7681..5699cf1ec 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
@@ -6,7 +6,7 @@ exports[`<ProjectDescription /> renders unchanged 1`] = `
     class="MuiStack-root css-4ktc6n-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5 css-d1o0u3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5 css-t2zx3t-MuiTypography-root"
     >
       Description
     </div>
@@ -14,8 +14,9 @@ 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-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary 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-889a7d-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="https://github.com/CodeForAfrica"
+        id=":r0:"
         rel="noreferrer noopener"
         tabindex="0"
         target="_blank"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
index 745054de5..29487369f 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
@@ -3,9 +3,10 @@
 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-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary 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-889a7d-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
     content="Github"
     href="https://github.com/CodeForAfrica"
+    id=":r0:"
     rel="noreferrer noopener"
     tabindex="0"
     target="_blank"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
index 2cbc85ec7..91ce15cc8 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
@@ -3,7 +3,7 @@
 exports[`<ProjectDetails /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
@@ -15,7 +15,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
           class="MuiStack-root css-1b1mat0-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
           >
             Details
           </div>
@@ -23,7 +23,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
             class="MuiStack-root css-7d4qva-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
             >
               Share This Project
             </div>
@@ -38,7 +38,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -51,7 +51,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -64,7 +64,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -74,7 +74,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-11319uf-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-1o055zn-MuiDivider-root"
       />
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-17q9xai-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
index e9fb87e7c..49c41d368 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
@@ -6,12 +6,12 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
     class="MuiStack-root css-1b1mat0-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
     >
       Details
     </div>
     <div
-      class="MuiTypography-root MuiTypography-captionCap css-1pz3l8n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-captionCap css-1y9353b-MuiTypography-root"
     >
       Donors
     </div>
@@ -19,10 +19,10 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
       class="MuiStack-root css-1y69rbp-MuiStack-root"
     >
       <div
-        class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1xpc6d0-MuiChip-root"
+        class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-991qnp-MuiChip-root"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
         >
           World Bank
         </span>
@@ -32,7 +32,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
       class="MuiStack-root css-7d4qva-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
       >
         Share This Project
       </div>
@@ -47,7 +47,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -60,7 +60,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -73,7 +73,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
index 7573610fa..d3d914c4c 100644
--- a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
@@ -6,22 +6,23 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-h16mw8"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-znh1og-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-a0mq7k-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: none;"
       >
         <nav
-          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-19xgsyh-MuiTypography-root-MuiBreadcrumbs-root"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1fdeege-MuiTypography-root-MuiBreadcrumbs-root"
         >
           <ol
-            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
           >
             <li
               class="MuiBreadcrumbs-li"
             >
               <a
-                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
                 href="/projects"
               >
                 Our Work
@@ -29,7 +30,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
             </li>
             <li
               aria-hidden="true"
-              class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+              class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
             >
               /
             </li>
@@ -37,7 +38,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
               class="MuiBreadcrumbs-li"
             >
               <div
-                class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
               >
                 Iniatives
               </div>
@@ -45,22 +46,22 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
           </ol>
         </nav>
         <img
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
         />
         <div
           class="MuiBox-root css-1ntmuzk"
         >
           <nav
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1y4hekn-MuiTypography-root-MuiBreadcrumbs-root"
+            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-niza22-MuiTypography-root-MuiBreadcrumbs-root"
           >
             <ol
-              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+              class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
             >
               <li
                 class="MuiBreadcrumbs-li"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
                   href="/projects"
                 >
                   Our Work
@@ -68,7 +69,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
               </li>
               <li
                 aria-hidden="true"
-                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+                class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
               >
                 /
               </li>
@@ -76,7 +77,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
                 class="MuiBreadcrumbs-li"
               >
                 <div
-                  class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
                 >
                   Iniatives
                 </div>
@@ -84,44 +85,45 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
             </ol>
           </nav>
           <div
-            class="MuiCardContent-root css-nvlyan-MuiCardContent-root"
+            class="MuiCardContent-root css-t0p48k-MuiCardContent-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+              class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
             >
               <div
                 class="MuiBox-root css-uq7i85"
               >
                 <h4
-                  class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
                 />
                 <div
                   class="MuiStack-root css-1v20l1v-MuiStack-root"
                 >
                   <span
-                    class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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 css-roxh35-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
+              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
             >
               Launch Project
               <span
-                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
diff --git a/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js b/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
index 1abea106d..b216066c9 100644
--- a/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
+++ b/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
@@ -3,17 +3,17 @@
 exports[`<ProjectTile /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+    class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
   >
     <div
       class="MuiBox-root css-uq7i85"
     >
       <figure
-        class="MuiBox-root css-f1ltsh"
+        class="MuiBox-root css-1kpvnft"
       >
         <img
           alt="africanDRONE"
-          class="css-g98gbd"
+          class="css-qv2885"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -22,7 +22,7 @@ exports[`<ProjectTile /> renders unchanged 1`] = `
         />
       </figure>
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
       >
         africanDRONE
       </h4>
@@ -30,12 +30,12 @@ exports[`<ProjectTile /> renders unchanged 1`] = `
         class="MuiStack-root css-1v20l1v-MuiStack-root"
       >
         <span
-          class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
         >
           africanDRONE
         </span>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
         >
           Drones for good
         </div>
diff --git a/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js b/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
index c4ac6a063..1dd6b224a 100644
--- a/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
+++ b/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
@@ -3,23 +3,23 @@
 exports[`<ProjectTileList /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-1vcxjca-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-itewyf-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-outlined css-1w24b7k-MuiPaper-root"
+        class="MuiPaper-root MuiPaper-outlined css-g7jrtq-MuiPaper-root"
       >
         <div
           class="MuiBox-root css-uq7i85"
         >
           <figure
-            class="MuiBox-root css-f1ltsh"
+            class="MuiBox-root css-1kpvnft"
           >
             <img
               alt="africanDRONE"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -28,7 +28,7 @@ exports[`<ProjectTileList /> renders unchanged 1`] = `
             />
           </figure>
           <h4
-            class="MuiTypography-root MuiTypography-h4 css-60qtjo-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-1fjnnz-MuiTypography-root"
           >
             africanDRONE
           </h4>
@@ -36,12 +36,12 @@ exports[`<ProjectTileList /> renders unchanged 1`] = `
             class="MuiStack-root css-fbzq2r-MuiStack-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
             >
               africanDRONE
             </span>
             <div
-              class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
             >
               Drones for good
             </div>
diff --git a/apps/codeforafrica/src/components/Projects/Projects.snap.js b/apps/codeforafrica/src/components/Projects/Projects.snap.js
index 002ba73cf..dcd128d5e 100644
--- a/apps/codeforafrica/src/components/Projects/Projects.snap.js
+++ b/apps/codeforafrica/src/components/Projects/Projects.snap.js
@@ -4,20 +4,20 @@ exports[`<Projects /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hxthm7-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1w8a3sk-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-7ziy04-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search projects"
               type="search"
@@ -25,25 +25,30 @@ exports[`<Projects /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+              id=":r1:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-ihdtdm"
+                class="css-w4cd9x"
               >
                 <span
+                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
diff --git a/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js b/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
index e3d5e2fcd..b2aa4bc64 100644
--- a/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
+++ b/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
@@ -3,47 +3,47 @@
 exports[`<RelatedStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1pmgh96-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1j30eyg-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-11m9a1j-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-108ogmb-MuiTypography-root"
     >
       Related Stories
     </div>
     <div
-      class="MuiGrid-root MuiGrid-container css-16q497u-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-9nfmm8-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1dxfqf3-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-5tgk1w-MuiPaper-root-MuiCard-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
             href="/stories/article-1"
             tabindex="0"
           >
             <img
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-gzk243-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1u60xul-MuiCardMedia-root"
               src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
             />
             <div
-              class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+              class="MuiCardContent-root css-qkirah-MuiCardContent-root"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
               >
                 Battle for gender equality in African media continues
               </h6>
               <span
-                class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
               >
                 Jan 6, 2022
               </span>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </a>
         </div>
diff --git a/apps/codeforafrica/src/components/RichText/RichText.snap.js b/apps/codeforafrica/src/components/RichText/RichText.snap.js
index 093b1b240..c0dabe006 100644
--- a/apps/codeforafrica/src/components/RichText/RichText.snap.js
+++ b/apps/codeforafrica/src/components/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-26k9w6-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-ll6ja1-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="/"
       >
         here
diff --git a/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js b/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
index 2f01b5e1d..824c748c3 100644
--- a/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
@@ -3,39 +3,44 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiFormControl-root MuiTextField-root css-1vqv0ht-MuiFormControl-root-MuiTextField-root"
+    class="MuiFormControl-root MuiTextField-root css-1af1cxr-MuiFormControl-root-MuiTextField-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-j0rfn6-MuiInputBase-root-MuiOutlinedInput-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-1eahq4f-MuiInputBase-root-MuiOutlinedInput-root"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-krewe6-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-ucicrb-MuiInputBase-input-MuiOutlinedInput-input"
         id=":r0:"
         type="search"
         value=""
       />
       <button
         aria-label="search"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+        id=":r1:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
       <fieldset
         aria-hidden="true"
-        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
       >
         <legend
-          class="css-ihdtdm"
+          class="css-w4cd9x"
         >
           <span
+            aria-hidden="true"
             class="notranslate"
           >
             ​
diff --git a/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js b/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
index 5b9ff41ad..82909b898 100644
--- a/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
+++ b/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
@@ -3,10 +3,10 @@
 exports[`<SectionDivider /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
   >
     <hr
-      class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+      class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js b/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
index 024d802f0..aa39e3e64 100644
--- a/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
+++ b/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
@@ -10,7 +10,7 @@ exports[`<FacebookShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -28,7 +28,7 @@ exports[`<LinkedinShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -46,7 +46,7 @@ exports[`<TwitterShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
index 65fa86dfe..9a120c537 100644
--- a/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -16,7 +16,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -29,7 +29,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -42,7 +42,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
index c086f20f2..474034b8e 100644
--- a/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-1vlyie4-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js b/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
index 6f859b8f6..ef760acb7 100644
--- a/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
+++ b/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
@@ -4,7 +4,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
 <div>
   <a
     aria-label="facebook"
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-1wukk74-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-x0889r-MuiTypography-root-MuiLink-root"
     data-mui-internal-clone-element="true"
     href="https://www.facebook.com/"
     rel="noreferrer noopener"
@@ -12,7 +12,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js b/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
index f7aff74c5..70c5f3f91 100644
--- a/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
+++ b/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
@@ -3,21 +3,22 @@
 exports[`<TeamMemberCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-wixki0-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-mdnsl9-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-18mm84o-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-1mxjrd2-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-ys68yq-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-184g7z0-MuiCardMedia-root"
       />
       <div
-        class="MuiCardContent-root css-1bqtlyx-MuiCardContent-root"
+        class="MuiCardContent-root css-3u5n2m-MuiCardContent-root"
       />
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js b/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
index 2e650f842..d93995f3d 100644
--- a/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
+++ b/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
@@ -4,10 +4,15 @@ exports[`<TooltipButton /> renders unchanged 1`] = `
 <div>
   <button
     aria-label="Title"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-v34xym-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-1bkrgty-MuiButtonBase-root-MuiIconButton-root"
     data-mui-internal-clone-element="true"
+    id=":r1:"
     tabindex="0"
     type="button"
-  />
+  >
+    <span
+      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+    />
+  </button>
 </div>
 `;
diff --git a/apps/promisetracker/src/components/Navigation/MobileNavigation/NavigationList.js b/apps/promisetracker/src/components/Navigation/MobileNavigation/NavigationList.js
index 5a871d1b3..5ba092364 100644
--- a/apps/promisetracker/src/components/Navigation/MobileNavigation/NavigationList.js
+++ b/apps/promisetracker/src/components/Navigation/MobileNavigation/NavigationList.js
@@ -1,5 +1,12 @@
 import { Link } from "@commons-ui/next";
-import { Grid, List, ListItem, Collapse, Typography } from "@mui/material";
+import {
+  Grid,
+  ListItemButton,
+  List,
+  ListItem,
+  Collapse,
+  Typography,
+} from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
@@ -102,9 +109,8 @@ function NavigationList({ onNavigate, open: openProp, navigation, ...props }) {
 
         {analysisMenuNavigation?.length > 0 ? (
           <>
-            <ListItem
+            <ListItemButton
               autoFocus={false}
-              button
               onClick={handleClick}
               className={classes.listItem}
             >
@@ -114,7 +120,7 @@ function NavigationList({ onNavigate, open: openProp, navigation, ...props }) {
               >
                 {analysisMenu.title}
               </Typography>
-            </ListItem>
+            </ListItemButton>
 
             <Collapse in={open} timeout="auto">
               <List component="nav" className={classes.collapse}>
diff --git a/packages/commons-ui-core/src/Copyright/Copyright.snap.js b/packages/commons-ui-core/src/Copyright/Copyright.snap.js
index 72290025f..7a579a5c0 100644
--- a/packages/commons-ui-core/src/Copyright/Copyright.snap.js
+++ b/packages/commons-ui-core/src/Copyright/Copyright.snap.js
@@ -6,12 +6,12 @@ exports[`<Copyright /> renders inchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       Code for Africa
     </div>
     <div
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       2024
     </div>
diff --git a/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js b/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
index 5a512f347..3ddadda9c 100644
--- a/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
+++ b/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
@@ -3,16 +3,13 @@
 exports[`ImageButton renders unchanged 1`] = `
 <div>
   <button
-    class="MuiButtonBase-root css-1spa9k-MuiButtonBase-root"
+    class="MuiButtonBase-root css-gks9my-MuiButtonBase-root"
     tabindex="0"
     type="button"
   >
     <span
       class="css-1qzaqu2"
     />
-    <span
-      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-    />
   </button>
 </div>
 `;
diff --git a/packages/commons-ui-core/src/NavBar/NavBar.snap.js b/packages/commons-ui-core/src/NavBar/NavBar.snap.js
index ac3c3c51d..310a2ad50 100644
--- a/packages/commons-ui-core/src/NavBar/NavBar.snap.js
+++ b/packages/commons-ui-core/src/NavBar/NavBar.snap.js
@@ -3,13 +3,14 @@
 exports[`NavBar renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1fg40jf-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-18zgm56-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-r6ewbb-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-1u9o2lj-MuiToolbar-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h6 css-hnscw4-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h6 css-1r1spq9-MuiTypography-root"
       >
         LOGO
       </div>
diff --git a/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js b/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
index fb8c1b560..1069c12a5 100644
--- a/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
+++ b/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
@@ -6,16 +6,16 @@ exports[`<QuickLinks /> renders inchanged 1`] = `
     class="MuiBox-root css-ufz638"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-rizt0-MuiTypography-root"
     >
       Quick Links
     </p>
     <ul
-      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-rizt0-MuiTypography-root"
     >
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-r74m4g-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-18rqtra-MuiTypography-root-MuiLink-root"
           href="/"
         >
           Home
@@ -23,7 +23,7 @@ exports[`<QuickLinks /> renders inchanged 1`] = `
       </li>
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-r74m4g-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-18rqtra-MuiTypography-root-MuiLink-root"
           href="/about"
         >
           About
diff --git a/packages/commons-ui-core/src/Section/Section.snap.js b/packages/commons-ui-core/src/Section/Section.snap.js
index 383bd2191..48d659686 100644
--- a/packages/commons-ui-core/src/Section/Section.snap.js
+++ b/packages/commons-ui-core/src/Section/Section.snap.js
@@ -4,7 +4,7 @@ exports[`<Section /> prop fixed=true (default) renders unchanged 1`] = `
 <div>
   <section
     aria-label="section"
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cyvr0l-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1dl39i7-MuiContainer-root"
   >
     <h2>
       Section heading
diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
index bd2b0480c..c75ba348d 100644
--- a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
+++ b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
@@ -3,12 +3,12 @@
 exports[`<SocialMediaIconLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mtm6uj-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1qgi5s6-MuiTypography-root-MuiLink-root"
     href="https://github.com/CodeForAfrica"
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewBox="0 0 24 24"
     >
diff --git a/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js b/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
index 3503e2641..0cc3e608a 100644
--- a/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
+++ b/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
@@ -6,7 +6,7 @@ exports[`<StayInTouch /> renders unchanged 1`] = `
     class="MuiStack-root css-upk803-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-1g4ok2n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-2turhu-MuiTypography-root"
     >
       Stay in Touch:
     </div>
diff --git a/packages/commons-ui-next/src/Figure/Figure.snap.js b/packages/commons-ui-next/src/Figure/Figure.snap.js
index 2e8633315..8016a3df8 100644
--- a/packages/commons-ui-next/src/Figure/Figure.snap.js
+++ b/packages/commons-ui-next/src/Figure/Figure.snap.js
@@ -3,11 +3,11 @@
 exports[`<Figure /> renders unchanged 1`] = `
 <div>
   <figure
-    class="MuiBox-root css-db5opy"
+    class="MuiBox-root css-vutmxe"
   >
     <img
       alt="Image"
-      class="css-g98gbd"
+      class="css-qv2885"
       data-nimg="fill"
       decoding="async"
       loading="lazy"
diff --git a/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js b/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
index b793a3a41..6af95dde5 100644
--- a/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
+++ b/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
@@ -3,7 +3,7 @@
 exports[`<PagesRouterLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-dr1pfv-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-1mtkv63-MuiTypography-root-MuiLink-root"
     href="/"
   >
     Home
diff --git a/packages/commons-ui-next/src/Link/StyledLink.snap.js b/packages/commons-ui-next/src/Link/StyledLink.snap.js
index db0e8ddea..56de0a824 100644
--- a/packages/commons-ui-next/src/Link/StyledLink.snap.js
+++ b/packages/commons-ui-next/src/Link/StyledLink.snap.js
@@ -3,7 +3,7 @@
 exports[`<StyledLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-dr1pfv-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mtkv63-MuiTypography-root-MuiLink-root"
     href="/"
   >
     Home
diff --git a/packages/commons-ui-payload/src/RichText/RichText.snap.js b/packages/commons-ui-payload/src/RichText/RichText.snap.js
index b1ebb135f..fc2b01701 100644
--- a/packages/commons-ui-payload/src/RichText/RichText.snap.js
+++ b/packages/commons-ui-payload/src/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-1ukerl5-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-1dw4g7j-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="/"
       >
         here
diff --git a/packages/hurumap-core/src/Action/Action.snap.js b/packages/hurumap-core/src/Action/Action.snap.js
index fc1f6bf63..18bbb7f58 100644
--- a/packages/hurumap-core/src/Action/Action.snap.js
+++ b/packages/hurumap-core/src/Action/Action.snap.js
@@ -7,11 +7,15 @@ exports[`Action renders unchanged 1`] = `
   >
     <button
       aria-label="Action"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-16rd89w-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1dl7lzd-MuiButtonBase-root-MuiIconButton-root"
       data-mui-internal-clone-element="true"
+      id=":r1:"
       tabindex="0"
       type="button"
     >
+      <span
+        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+      />
       <svg
         height="100"
         width="100"
@@ -25,9 +29,6 @@ exports[`Action renders unchanged 1`] = `
           stroke-width="3"
         />
       </svg>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
     </button>
   </div>
 </div>
diff --git a/packages/hurumap-core/src/Download/Download.snap.js b/packages/hurumap-core/src/Download/Download.snap.js
index d554592a9..b856eab90 100644
--- a/packages/hurumap-core/src/Download/Download.snap.js
+++ b/packages/hurumap-core/src/Download/Download.snap.js
@@ -12,7 +12,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1gfrinl-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
       >
         Download chart as:
       </p>
@@ -24,7 +24,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
       >
         Layout option:
       </p>
@@ -36,7 +36,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1gfrinl-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
       >
         Download data as:
       </p>
diff --git a/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js b/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
index 21bb81802..dbd530b96 100644
--- a/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
+++ b/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
@@ -12,7 +12,7 @@ exports[`IndicatorTitle renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-9drkqd-MuiGrid-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h6 css-134eivx-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h6 css-wxg01y-MuiTypography-root"
         >
           <div>
             Children
diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js
index c0848f77a..cb2d5ddf5 100644
--- a/packages/hurumap-core/src/Location/Location.snap.js
+++ b/packages/hurumap-core/src/Location/Location.snap.js
@@ -57,12 +57,12 @@ exports[`Location renders unchanged 1`] = `
           class="MuiBox-root css-w6ptp5"
         >
           <h6
-            class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
           >
             Population
           </h6>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
           >
             10,000,000
           </p>
@@ -71,12 +71,12 @@ exports[`Location renders unchanged 1`] = `
           class="MuiBox-root css-w6ptp5"
         >
           <h6
-            class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
           >
             GDP
           </h6>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
           >
             10,000,000
           </p>
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
index c92cf918e..a38a66782 100644
--- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
@@ -6,12 +6,12 @@ exports[`LocationHighlight renders unchanged 1`] = `
     class="MuiBox-root css-1s0xv82"
   >
     <h6
-      class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
     >
       Population
     </h6>
     <p
-      class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
     >
       1,000,000
     </p>
diff --git a/packages/hurumap-core/src/Share/Share.snap.js b/packages/hurumap-core/src/Share/Share.snap.js
index ec7e33dd2..75a6cef9c 100644
--- a/packages/hurumap-core/src/Share/Share.snap.js
+++ b/packages/hurumap-core/src/Share/Share.snap.js
@@ -9,7 +9,7 @@ exports[`Share renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <span
-        class="MuiTypography-root MuiTypography-caption css-l67hkg-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-caption css-1n9vc5u-MuiTypography-root"
       >
         Embed on your website:
       </span>
@@ -18,15 +18,15 @@ exports[`Share renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <div
-        class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-cmpglg-MuiFormControl-root-MuiTextField-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall css-1blp12k-MuiInputBase-root-MuiOutlinedInput-root"
           style="background: rgb(255, 255, 255); font-size: 0.6875rem; line-height: 1.5454545454545454; color: rgb(102, 102, 102);"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1n4twyu-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1pzfmz2-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r0:"
             type="text"
             value="
@@ -70,12 +70,13 @@ exports[`Share renders unchanged 1`] = `
           />
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-ihdtdm"
+              class="css-w4cd9x"
             >
               <span
+                aria-hidden="true"
                 class="notranslate"
               >
                 ​
diff --git a/packages/hurumap-core/src/Share/ShareButton.snap.js b/packages/hurumap-core/src/Share/ShareButton.snap.js
index ec804119d..81ca8a5e0 100644
--- a/packages/hurumap-core/src/Share/ShareButton.snap.js
+++ b/packages/hurumap-core/src/Share/ShareButton.snap.js
@@ -11,7 +11,7 @@ exports[`ShareButton renders unchanged 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-wsb35j-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1psi471-MuiSvgIcon-root"
         focusable="false"
         viewBox="0 0 24 24"
       />
diff --git a/packages/hurumap-next/src/Source/Source.snap.js b/packages/hurumap-next/src/Source/Source.snap.js
index b54076180..b3e37c00c 100644
--- a/packages/hurumap-next/src/Source/Source.snap.js
+++ b/packages/hurumap-next/src/Source/Source.snap.js
@@ -4,13 +4,13 @@ exports[`Source renders unchanged 1`] = `
 <div>
   <div>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1u2wb76-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1xlq4xj-MuiTypography-root"
     >
       Source
       : 
     </p>
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1jglad5-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-uszb9u-MuiTypography-root-MuiLink-root"
       href="https://example.com"
       rel="noreferrer noopener"
       target="_blank"

From 69a158d5bf073921da013f8460bd4d358b757eb4 Mon Sep 17 00:00:00 2001
From: Kevin Koech <kevinkoech@MacBook-Pro.local>
Date: Fri, 17 Jan 2025 09:08:44 +0300
Subject: [PATCH 2/6] Update Snapshots

---
 .../components/Accordion/Accordion.snap.js    | 372 +++++++-------
 .../src/components/Articles/Articles.snap.js  |  34 +-
 .../src/components/ComboBox/ComboBox.snap.js  |  31 +-
 .../CommunityPlatforms.snap.js                |  15 +-
 .../Consultations/Consultations.snap.js       |   4 +-
 .../ContributorCard/ContributorCard.snap.js   |  14 +-
 .../src/components/Dataset/Dataset.snap.js    |  43 +-
 .../DatasetCard/DatasetCard.snap.js           |  30 +-
 .../Datasets/DatasetFilterBar.snap.js         | 129 ++---
 .../src/components/Datasets/Datasets.snap.js  | 131 ++---
 .../DesktopNavBar/DesktopNavBar.snap.js       |  47 +-
 .../src/components/Document/Document.snap.js  |  19 +-
 .../DocumentCard/DocumentCard.snap.js         |  17 +-
 .../Documents/DocumentFilterBar.snap.js       |  51 +-
 .../components/Documents/Documents.snap.js    |  63 +--
 .../DropdownMenu/DropdownMenu.snap.js         |   8 +-
 .../components/Ecosystem/Ecosystem.snap.js    |  88 ++--
 .../src/components/Entity/Entity.snap.js      | 163 +++---
 .../src/components/Error/Error.snap.js        |  13 +-
 .../components/ErrorPage/ErrorPage.snap.js    |  13 +-
 .../components/Explainers/Explainer.snap.js   |   8 +-
 .../components/Explainers/Explainers.snap.js  |  44 +-
 .../src/components/FAQ/FAQ.snap.js            | 376 +++++++-------
 .../FeaturedPostCard/FeaturedPostCard.snap.js |  24 +-
 .../FeaturedVideos/FeaturedVideo.snap.js      |  12 +-
 .../FeaturedVideos/FeaturedVideoCard.snap.js  |   6 +-
 .../FlourishChart/FlourishChart.snap.js       |   6 +-
 .../FocalCountries/FocalCountries.snap.js     |   6 +-
 .../src/components/Footer/Footer.snap.js      |  20 +-
 .../src/components/Grantees/Grantees.snap.js  | 486 ++++++++----------
 .../GuidingPrinciples.snap.js                 | 376 +++++++-------
 .../src/components/Helpdesk/Helpdesk.snap.js  |  15 +-
 .../HelpdeskPageContent.snap.js               |   9 +-
 .../src/components/Hero/Hero.snap.js          |  31 +-
 .../components/Impressum/Impressum.snap.js    |  18 +-
 .../LanguageButton/LanguageButton.snap.js     |  11 +-
 .../src/components/Layout/Layout.snap.js      |  70 +--
 .../src/components/LongForm/LongForm.snap.js  |   2 +-
 .../LongFormMediaBlock.snap.js                |   6 +-
 .../LongFormRichText/LongFormRichText.snap.js |   2 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   8 +-
 .../src/components/Mooc/Mooc.snap.js          |  10 +-
 .../src/components/NavBar/NavBar.snap.js      |  53 +-
 .../NavBarDropdown/NavBarDropdown.snap.js     |  10 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  38 +-
 .../NavBarNavMenu/NavBarNavMenu.snap.js       |  32 +-
 .../NextPrevPagination.snap.js                |   5 +-
 .../PaginationButton.snap.js                  |   3 +-
 .../OpenCloseIcon/OpenCloseIcon.snap.js       |   2 +-
 .../Opportunity/Opportunity.snap.js           |  19 +-
 .../OpportunityCard/OpportunityCard.snap.js   |  19 +-
 .../OpportunityCardGrid.snap.js               |  53 +-
 .../OpportunityCardHeader.snap.js             |   5 +-
 .../OpportunityCards/OpportunityCards.snap.js |  61 +--
 .../OpportunityHeader.snap.js                 |   6 +-
 .../OpportunityPage/OpportunityPage.snap.js   |  97 ++--
 .../OrganisationCard/OrganisationCard.snap.js |  14 +-
 .../OrganisationImageLink.snap.js             |   9 +-
 .../PageDescription/PageDescription.snap.js   |   4 +-
 .../components/PageHeader/PageHeader.snap.js  |  10 +-
 .../src/components/PostCard/PostCard.snap.js  |  16 +-
 .../components/Repository/Repository.snap.js  |  16 +-
 .../components/Resources/Resources.snap.js    |  50 +-
 .../src/components/RichText/RichText.snap.js  |   8 +-
 .../SearchInput/SearchInput.snap.js           |  17 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   8 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SpotlightCard/SpotlightCard.snap.js       |   2 +-
 .../src/components/Switch/Switch.snap.js      |  10 +-
 .../src/components/Tool/Tool.snap.js          | 103 ++--
 .../src/components/ToolCard/ToolCard.snap.js  |  23 +-
 .../YoutubeVideoPlayer.snap.js                |   2 +-
 .../ArticleCard/ArticleCard.snap.js           |   2 +-
 .../ArticleCardContent.snap.js                |   2 +-
 .../ArticleCardMedia/ArticleCardMedia.snap.js |   2 +-
 .../ArticleGrid/ArticleGrid.snap.js           |   2 +-
 .../ArticleHeader/ArticleHeader.snap.js       |  10 +-
 .../ArticlePage/ArticlePage.snap.js           |  46 +-
 .../src/components/Articles/Articles.snap.js  |  82 ++-
 .../src/components/Author/Author.snap.js      |   2 +-
 .../Breadcrumbs/Breadcrumbs.snap.js           |  10 +-
 .../components/CMSContent/CMSContent.snap.js  |  18 +-
 .../components/ChoiceChip/ChoiceChip.snap.js  |   4 +-
 .../ChoiceChipGroup/ChoiceChipGroup.snap.js   |   2 +-
 .../CustomPageHeader/CustomPageHeader.snap.js |   7 +-
 .../FeaturedArticle/FeaturedArticle.snap.js   |  26 +-
 .../components/FilterBar/FilterBar.snap.js    |  25 +-
 .../src/components/Footer/Footer.snap.js      |   2 +-
 .../LongFormExternalEmbed.snap.js             |   2 +-
 .../LongFormMedia/LongFormMedia.snap.js       |   4 +-
 .../LongFormRichText/LongFormRichText.snap.js |  10 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   2 +-
 .../src/components/NavBar/NavBar.snap.js      |   9 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  32 +-
 .../NewsletterSubscription.snap.js            |   2 +-
 .../PaginationButton.snap.js                  |   7 +-
 .../components/PageHeader/PageHeader.snap.js  |   6 +-
 .../RelatedStories/RelatedStories.snap.js     |  20 +-
 .../SearchInput/SearchInput.snap.js           |  19 +-
 .../SectionDivider/SectionDivider.snap.js     |   4 +-
 .../ShareButton/ShareButton.snap.js           |   6 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   6 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SocialMediaButton.snap.js                 |   4 +-
 .../TooltipButton/TooltipButton.snap.js       |   9 +-
 .../components/AboutTeam/AboutTeam.snap.js    |   4 +-
 .../src/components/Card/Card.snap.js          |   3 +-
 .../DataIndicators/DataIndicators.snap.js     |   7 +-
 .../DropdownSearch/DropdownSearch.snap.js     |  17 +-
 .../HURUmap/TreeView/TreeView.snap.js         |  22 +-
 .../src/components/Header/Header.snap.js      |   4 +-
 .../src/components/Hero/Hero.snap.js          |  25 +-
 .../src/components/PageHero/PageHero.snap.js  |  10 +-
 .../components/RichHeader/RichHeader.snap.js  |   6 +-
 .../src/components/Summary/Summary.snap.js    |  16 +-
 .../AboutChildPageHeader.snap.js              |   8 +-
 .../AboutPageEntity/AboutPageEntity.snap.js   |   2 +-
 .../AccoladeBadge/AccoladeBadge.snap.js       |   8 +-
 .../ArticleCard/ArticleCard.snap.js           |   2 +-
 .../ArticleCardContent.snap.js                |   2 +-
 .../ArticleCardMedia/ArticleCardMedia.snap.js |   2 +-
 .../ArticleGrid/ArticleGrid.snap.js           |   2 +-
 .../ArticleHeader/ArticleHeader.snap.js       |  10 +-
 .../ArticlePage/ArticlePage.snap.js           |  46 +-
 .../src/components/Articles/Articles.snap.js  |  82 ++-
 .../src/components/Author/Author.snap.js      |   2 +-
 .../Breadcrumbs/Breadcrumbs.snap.js           |  10 +-
 .../components/CMSContent/CMSContent.snap.js  |  18 +-
 .../components/ChoiceChip/ChoiceChip.snap.js  |   4 +-
 .../ChoiceChipGroup/ChoiceChipGroup.snap.js   |   2 +-
 .../ContactForm/ContactForm.snap.js           |   4 +-
 .../CustomPageHeader/CustomPageHeader.snap.js |   7 +-
 .../components/ErrorHero/ErrorHero.snap.js    |   2 +-
 .../FeaturedArticle/FeaturedArticle.snap.js   |  26 +-
 .../components/FilterBar/FilterBar.snap.js    |  25 +-
 .../src/components/Footer/Footer.snap.js      |   2 +-
 .../components/GetInTouch/GetInTouch.snap.js  |  15 +-
 .../GetInvolved/GetInvolved.snap.js           |  22 +-
 .../GuidingPrinciplesCard.snap.js             |   7 +-
 .../src/components/Hero/Hero.snap.js          |   6 +-
 .../components/ImpactCard/ImpactCard.snap.js  |  15 +-
 .../ImpactCardList/ImpactCardList.snap.js     |  17 +-
 .../LongFormExternalEmbed.snap.js             |   2 +-
 .../LongFormMedia/LongFormMedia.snap.js       |   4 +-
 .../LongFormRichText/LongFormRichText.snap.js |  10 +-
 .../MeetOurTeam/MeetOurTeam.snap.js           |  13 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   2 +-
 .../src/components/NavBar/NavBar.snap.js      |   9 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  32 +-
 .../NewsAndStories/NewsAndStories.snap.js     |  35 +-
 .../NewsletterSubscription.snap.js            |   2 +-
 .../PaginationButton.snap.js                  |   7 +-
 .../Opportunities/Opportunities.snap.js       |  27 +-
 .../OpportunityCard/OpportunityCard.snap.js   |  22 +-
 .../OpportunityCardList.snap.js               |  22 +-
 .../components/OurMission/OurMission.snap.js  |  60 +--
 .../src/components/OurTeam/OurTeam.snap.js    |  23 +-
 .../components/PageHeader/PageHeader.snap.js  |   6 +-
 .../src/components/Project/Project.snap.js    |  66 ++-
 .../ProjectCard/ProjectCard.snap.js           |  22 +-
 .../ProjectCardMedia/ProjectCardMedia.snap.js |   2 +-
 .../ProjectDetails/ProjectDescription.snap.js |   5 +-
 .../ProjectDescriptionButton.snap.js          |   3 +-
 .../ProjectDetails/ProjectDetails.snap.js     |  14 +-
 .../ProjectStakeholders.snap.js               |  16 +-
 .../ProjectPageHeader.snap.js                 |  44 +-
 .../ProjectTile/ProjectTile.snap.js           |  12 +-
 .../ProjectTileList/ProjectTileList.snap.js   |  14 +-
 .../src/components/Projects/Projects.snap.js  |  21 +-
 .../RelatedStories/RelatedStories.snap.js     |  20 +-
 .../src/components/RichText/RichText.snap.js  |   8 +-
 .../SearchInput/SearchInput.snap.js           |  19 +-
 .../SectionDivider/SectionDivider.snap.js     |   4 +-
 .../ShareButton/ShareButton.snap.js           |   6 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   6 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SocialMediaButton.snap.js                 |   4 +-
 .../TeamMemberCard/TeamMemberCard.snap.js     |  11 +-
 .../TooltipButton/TooltipButton.snap.js       |   9 +-
 .../src/Copyright/Copyright.snap.js           |   4 +-
 .../src/ImageButton/ImageButton.snap.js       |   5 +-
 .../commons-ui-core/src/NavBar/NavBar.snap.js |   7 +-
 .../src/QuickLinks/QuickLinks.snap.js         |   8 +-
 .../src/Section/Section.snap.js               |   2 +-
 .../SocialMediaIconLink.snap.js               |   4 +-
 .../src/StayInTouch/StayInTouch.snap.js       |   2 +-
 .../commons-ui-next/src/Figure/Figure.snap.js |   4 +-
 .../src/Link/PagesRouterLink.snap.js          |   2 +-
 .../src/Link/StyledLink.snap.js               |   2 +-
 .../src/RichText/RichText.snap.js             |   8 +-
 .../hurumap-core/src/Action/Action.snap.js    |   9 +-
 .../src/Download/Download.snap.js             |   6 +-
 .../src/IndicatorTitle/IndicatorTitle.snap.js |   2 +-
 .../src/Location/Location.snap.js             |   8 +-
 .../LocationHighlight.snap.js                 |   4 +-
 packages/hurumap-core/src/Share/Share.snap.js |  13 +-
 .../src/Share/ShareButton.snap.js             |   2 +-
 .../hurumap-next/src/Source/Source.snap.js    |   4 +-
 198 files changed, 2306 insertions(+), 2750 deletions(-)

diff --git a/apps/charterafrica/src/components/Accordion/Accordion.snap.js b/apps/charterafrica/src/components/Accordion/Accordion.snap.js
index 133577fcf..1ce29ce71 100644
--- a/apps/charterafrica/src/components/Accordion/Accordion.snap.js
+++ b/apps/charterafrica/src/components/Accordion/Accordion.snap.js
@@ -3,76 +3,71 @@
 exports[`<Accordion /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
   >
-    <h3
-      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+    <div
+      aria-controls="panel-63f388c3ebe92a85650e8051-content"
+      aria-expanded="false"
+      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+      id="panel-63f388c3ebe92a85650e8051-header"
+      role="button"
+      tabindex="0"
     >
-      <button
-        aria-controls="panel-63f388c3ebe92a85650e8051-content"
-        aria-expanded="false"
-        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-        id="panel-63f388c3ebe92a85650e8051-header"
-        tabindex="0"
-        type="button"
+      <div
+        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
       >
-        <span
-          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+        <div
+          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="css-jijv3e"
             >
               <div
-                class="css-jijv3e"
-              >
-                <div
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                  focusable="false"
-                  viewbox="0 0 24 24"
-                />
-              </div>
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
             </div>
+          </div>
+          <div
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+          >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
               >
-                <div
-                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                >
-                  Open Source
-                </div>
+                Open Source
               </div>
             </div>
           </div>
-        </span>
-        <span
-          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-        >
-          <div
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-            focusable="false"
-            viewbox="0 0 24 24"
-          />
-        </span>
-      </button>
-    </h3>
+        </div>
+      </div>
+      <div
+        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+      >
+        <div
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+          focusable="false"
+          viewbox="0 0 24 24"
+        />
+      </div>
+    </div>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -81,14 +76,14 @@ exports[`<Accordion /> renders unchanged 1`] = `
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
               id="panel-63f388c3ebe92a85650e8051-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -101,76 +96,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
   >
-    <h3
-      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+    <div
+      aria-controls="panel-63f388e0ebe92a85650e8052-content"
+      aria-expanded="false"
+      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+      id="panel-63f388e0ebe92a85650e8052-header"
+      role="button"
+      tabindex="0"
     >
-      <button
-        aria-controls="panel-63f388e0ebe92a85650e8052-content"
-        aria-expanded="false"
-        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-        id="panel-63f388e0ebe92a85650e8052-header"
-        tabindex="0"
-        type="button"
+      <div
+        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
       >
-        <span
-          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+        <div
+          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="css-jijv3e"
             >
               <div
-                class="css-jijv3e"
-              >
-                <div
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                  focusable="false"
-                  viewbox="0 0 24 24"
-                />
-              </div>
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
             </div>
+          </div>
+          <div
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+          >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
               >
-                <div
-                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                >
-                  Teamwork
-                </div>
+                Teamwork
               </div>
             </div>
           </div>
-        </span>
-        <span
-          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-        >
-          <div
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-            focusable="false"
-            viewbox="0 0 24 24"
-          />
-        </span>
-      </button>
-    </h3>
+        </div>
+      </div>
+      <div
+        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+      >
+        <div
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+          focusable="false"
+          viewbox="0 0 24 24"
+        />
+      </div>
+    </div>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -179,14 +169,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
               id="panel-63f388e0ebe92a85650e8052-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -199,76 +189,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
   >
-    <h3
-      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+    <div
+      aria-controls="panel-63f388f9ebe92a85650e8053-content"
+      aria-expanded="false"
+      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+      id="panel-63f388f9ebe92a85650e8053-header"
+      role="button"
+      tabindex="0"
     >
-      <button
-        aria-controls="panel-63f388f9ebe92a85650e8053-content"
-        aria-expanded="false"
-        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-        id="panel-63f388f9ebe92a85650e8053-header"
-        tabindex="0"
-        type="button"
+      <div
+        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
       >
-        <span
-          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+        <div
+          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="css-jijv3e"
             >
               <div
-                class="css-jijv3e"
-              >
-                <div
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                  focusable="false"
-                  viewbox="0 0 24 24"
-                />
-              </div>
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
             </div>
+          </div>
+          <div
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+          >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
               >
-                <div
-                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                >
-                  Accountability
-                </div>
+                Accountability
               </div>
             </div>
           </div>
-        </span>
-        <span
-          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-        >
-          <div
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-            focusable="false"
-            viewbox="0 0 24 24"
-          />
-        </span>
-      </button>
-    </h3>
+        </div>
+      </div>
+      <div
+        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+      >
+        <div
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+          focusable="false"
+          viewbox="0 0 24 24"
+        />
+      </div>
+    </div>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -277,14 +262,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
               id="panel-63f388f9ebe92a85650e8053-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -297,76 +282,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
   >
-    <h3
-      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+    <div
+      aria-controls="panel-63f38902ebe92a85650e8054-content"
+      aria-expanded="false"
+      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+      id="panel-63f38902ebe92a85650e8054-header"
+      role="button"
+      tabindex="0"
     >
-      <button
-        aria-controls="panel-63f38902ebe92a85650e8054-content"
-        aria-expanded="false"
-        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-        id="panel-63f38902ebe92a85650e8054-header"
-        tabindex="0"
-        type="button"
+      <div
+        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
       >
-        <span
-          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+        <div
+          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="css-jijv3e"
             >
               <div
-                class="css-jijv3e"
-              >
-                <div
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                  focusable="false"
-                  viewbox="0 0 24 24"
-                />
-              </div>
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
             </div>
+          </div>
+          <div
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+          >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
               >
-                <div
-                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                >
-                  Impact
-                </div>
+                Impact
               </div>
             </div>
           </div>
-        </span>
-        <span
-          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-        >
-          <div
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-            focusable="false"
-            viewbox="0 0 24 24"
-          />
-        </span>
-      </button>
-    </h3>
+        </div>
+      </div>
+      <div
+        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+      >
+        <div
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+          focusable="false"
+          viewbox="0 0 24 24"
+        />
+      </div>
+    </div>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -375,14 +355,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
               id="panel-63f38902ebe92a85650e8054-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/Articles/Articles.snap.js b/apps/charterafrica/src/components/Articles/Articles.snap.js
index 655949c5b..7a832c4c1 100644
--- a/apps/charterafrica/src/components/Articles/Articles.snap.js
+++ b/apps/charterafrica/src/components/Articles/Articles.snap.js
@@ -9,7 +9,7 @@ exports[`<Articles /> renders unchanged 1`] = `
       class="MuiBox-root css-e2yz6z"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1k9ut7q-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-dygcit-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1bnx1lo-MuiGrid-root"
@@ -18,44 +18,40 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5 css-jx2mcl-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5 css-1lirkz0-MuiTypography-root"
             />
           </div>
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-kevmqv-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-xmiuqd-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
                 placeholder="Search"
                 type="search"
                 value=""
               />
               <button
                 aria-label="search"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
-                id=":r0:"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
                 tabindex="0"
                 type="button"
               >
-                <span
-                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-81qg8w"
+                  class="css-yjsfm1"
                 >
                   <span>
                     Search
@@ -68,13 +64,14 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiSelect-root css-1ex860j-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary css-a46zki-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
+                aria-controls=":r0:"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-label="Without label"
-                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1mfuego-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1mtwe1r-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
                 role="combobox"
                 tabindex="0"
               >
@@ -83,13 +80,13 @@ exports[`<Articles /> renders unchanged 1`] = `
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput css-j0riat-MuiSelect-nativeInput"
+                class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
                 tabindex="-1"
                 value="-publishedOn"
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-lohd6h-MuiSvgIcon-root-MuiSelect-icon"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -100,13 +97,12 @@ exports[`<Articles /> renders unchanged 1`] = `
               </svg>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-w4cd9x"
+                  class="css-ihdtdm"
                 >
                   <span
-                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
diff --git a/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js b/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
index 837f26f07..1a700c49b 100644
--- a/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
+++ b/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
@@ -3,13 +3,13 @@
 exports[`<ComboBox /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-cd7l2b-MuiAutocomplete-root"
   >
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-cmpglg-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-autocomplete="list"
@@ -17,7 +17,7 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           aria-invalid="false"
           autocapitalize="none"
           autocomplete="off"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           role="combobox"
           spellcheck="false"
@@ -25,22 +25,18 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           value="Countries"
         />
         <div
-          class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+          class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
         >
           <button
             aria-label="Clear"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-            id=":r2:"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
             tabindex="-1"
             title="Clear"
             type="button"
           >
-            <span
-              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-            />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
               data-testid="CloseIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -52,31 +48,26 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           </button>
           <button
             aria-label="Open"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-            id=":r3:"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
             tabindex="-1"
             title="Open"
             type="button"
           >
-            <span
-              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
               focusable="false"
             />
           </button>
         </div>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-w4cd9x"
+            class="css-ihdtdm"
           >
             <span
-              aria-hidden="true"
               class="notranslate"
             >
               ​
diff --git a/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js b/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
index dccafd77e..a313601d6 100644
--- a/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
+++ b/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
@@ -15,11 +15,11 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
           class="MuiBox-root css-7ehmit"
         >
           <figure
-            class="MuiBox-root css-10sllnv"
+            class="MuiBox-root css-p826pz"
           >
             <img
               alt="Newsletter"
-              class="css-cawze6"
+              class="css-1pkrzn9"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -34,11 +34,11 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1kn3429"
+              class="MuiBox-root css-1upx2vz"
             >
               <img
                 alt="Newsletter"
-                class="css-qv2885"
+                class="css-g98gbd"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -50,7 +50,7 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
               class="MuiBox-root css-y8s3qt"
             >
               <h3
-                class="MuiTypography-root MuiTypography-h3Small css-n2yqz7-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h3Small css-xeim5i-MuiTypography-root"
               >
                 Newsletter
               </h3>
@@ -58,16 +58,15 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
                 class="MuiBox-root css-c33e1h"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p3 css-1aj3ole-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p3 css-1hy6kbg-MuiTypography-root"
                 >
                   Receive updates on the Charter Project Africa
                 </p>
               </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary css-druj3j-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 css-1mu9r82-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
-              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
diff --git a/apps/charterafrica/src/components/Consultations/Consultations.snap.js b/apps/charterafrica/src/components/Consultations/Consultations.snap.js
index dc53920ad..01833974f 100644
--- a/apps/charterafrica/src/components/Consultations/Consultations.snap.js
+++ b/apps/charterafrica/src/components/Consultations/Consultations.snap.js
@@ -6,10 +6,10 @@ exports[`<Consultations /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11jnlxf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-27tpcc-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h2 css-1698jfb-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 css-yocep0-MuiTypography-root"
       >
         Sample tiltle
       </div>
diff --git a/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js b/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
index 2747506c8..74ebf07eb 100644
--- a/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
+++ b/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
@@ -3,32 +3,32 @@
 exports[`<ContributorCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zoydxh-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-10z892v-MuiCardMedia-root"
       />
       <div
-        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
+        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1b7pqoa-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-l2ultw-MuiTypography-root"
         >
           Tool Name
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-1xge335-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-zpa7jo-MuiTypography-root"
         >
           Sample description
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/Dataset/Dataset.snap.js b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
index 65d607154..59a22f5c3 100644
--- a/apps/charterafrica/src/components/Dataset/Dataset.snap.js
+++ b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
@@ -6,7 +6,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] css-o70cs7-MuiGrid-root"
@@ -15,20 +15,20 @@ exports[`<Dataset /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-ucdck3-MuiGrid-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-p1 css-1dr4mcp-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-i1xkt3-MuiTypography-root"
           >
             Back to Datasets
           </a>
           <h2
-            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-xvgnvn-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-1vv4c3h-MuiTypography-root"
           >
             Document Title
           </h2>
           <p
-            class="MuiTypography-root MuiTypography-p1 css-1mclz91-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-l6prdf-MuiTypography-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-inherit css-1wojwvd-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-inherit css-dhy9gx-MuiTypography-root"
             >
               Created January 1, 2021
             </span>
@@ -37,40 +37,39 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1phk7xb-MuiGrid-root"
           >
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1bfmoy7-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1puf64w-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
               >
                 CSV
               </span>
             </div>
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-7i6xv5-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1g3w73k-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
               >
                 PDF
               </span>
             </div>
           </div>
           <button
-            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-cctx58-MuiButtonBase-root-MuiButton-root"
-            id=":r0:"
+            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-icon MuiButton-startIcon MuiButton-iconSizeLarge css-1xskro6-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
             >
               <div />
             </span>
             Open Dataset
           </button>
           <div
-            class="MuiTypography-root MuiTypography-p1 css-1nxupmx-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-n4k5ds-MuiTypography-root"
           >
             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>
@@ -79,7 +78,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-[object Object] MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-kdi1tf-MuiGrid-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-p1 css-1n0t3bi-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1w5j2yd-MuiTypography-root"
           >
             Back to Datasets
           </a>
@@ -87,7 +86,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiStack-root css-1xe1uy8-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
             >
               Share Via
             </div>
@@ -101,7 +100,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -113,7 +112,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -125,7 +124,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -135,7 +134,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
         </div>
       </div>
       <a
-        class="MuiTypography-root MuiTypography-p1 css-1wd86cb-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p1 css-1v10z4i-MuiTypography-root"
       >
         Back to Datasets
       </a>
@@ -149,7 +148,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <h3
-              class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1k4ywuw-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-11gtfkg-MuiTypography-root"
             >
               See more datasets
             </h3>
@@ -158,14 +157,14 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-p1 css-z9sjxm-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1wdkhl3-MuiTypography-root"
             >
               See more datasets
             </a>
           </div>
         </div>
         <a
-          class="MuiTypography-root MuiTypography-p1 css-9llhji-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-qnck1c-MuiTypography-root"
         >
           Back to Datasets
         </a>
diff --git a/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js b/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
index c0481d19d..6214d2600 100644
--- a/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
+++ b/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
@@ -3,30 +3,29 @@
 exports[`<DatasetCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-oclxzy-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-dzxyww-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
       href="/resources/datasets"
       tabindex="0"
     >
       <div
-        class="MuiCardContent-root css-tem57g-MuiCardContent-root"
+        class="MuiCardContent-root css-16iq3h-MuiCardContent-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-[object Object] css-iewyyr-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-[object Object] css-bkp0sa-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1trh6s6-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SmallSemiBold css-17k81ph-MuiTypography-root"
             >
               Document Title
             </h5>
             <p
-              class="MuiTypography-root MuiTypography-p1 css-atoqz6-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1pop01s-MuiTypography-root"
             >
                
               Created
@@ -34,7 +33,7 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
               January 1, 2021
             </p>
             <p
-              class="MuiTypography-root MuiTypography-p1SemiBold css-9djn7y-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1SemiBold css-1egbhxv-MuiTypography-root"
             >
               Author Name
             </p>
@@ -43,13 +42,12 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-ls0fcs-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-x22hae-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-so49wn-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-157zrhe-MuiButtonBase-root-MuiButton-root"
-              id=":r0:"
+              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"
             >
@@ -60,19 +58,19 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-6thyz8-MuiGrid-root"
           >
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1bfmoy7-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1puf64w-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
               >
                 CSV
               </span>
             </div>
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-7i6xv5-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1g3w73k-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
               >
                 PDF
               </span>
@@ -81,7 +79,7 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js b/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
index c9412787a..ce4bd935b 100644
--- a/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
+++ b/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
@@ -6,43 +6,39 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
     class="MuiBox-root css-1kgakwq"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-2 css-uzx68p-MuiGrid-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
             placeholder="Search"
             type="search"
             value=""
           />
           <button
             aria-label="search"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
-            id=":r0:"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
-            <span
-              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 16 16"
             />
           </button>
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-81qg8w"
+              class="css-yjsfm1"
             >
               <span>
                 Search
@@ -55,13 +51,13 @@ 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-b4rh0e-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-cd7l2b-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
                 aria-autocomplete="list"
@@ -69,30 +65,26 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r1:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r0:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value="Sort"
               />
               <div
-                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-                  id=":r3:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -104,31 +96,26 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-                  id=":r4:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-w4cd9x"
+                  class="css-ihdtdm"
                 >
                   <span
-                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -143,16 +130,16 @@ 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-4u29cd-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-2uxksm-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
               >
                 2 Countries
               </p>
@@ -162,30 +149,26 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r5:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r2:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value=""
               />
               <div
-                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-                  id=":r7:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -197,31 +180,26 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-                  id=":r8:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-w4cd9x"
+                  class="css-ihdtdm"
                 >
                   <span
-                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -236,16 +214,16 @@ 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-4u29cd-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-2uxksm-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
               >
                 Agriculture
               </p>
@@ -255,30 +233,26 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r9:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r4:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value=""
               />
               <div
-                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-                  id=":rb:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -290,31 +264,26 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-                  id=":rc:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-w4cd9x"
+                  class="css-ihdtdm"
                 >
                   <span
-                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -329,24 +298,22 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-3 MuiGrid-grid-lg-3 css-10brl9b-MuiGrid-root"
       >
         <p
-          class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
         >
           Show
           :
         </p>
         <button
-          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-zz8rc6-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=""
-          id=":rd:"
           tabindex="-1"
           type="button"
         >
           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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-vjivbx-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"
-          id=":re:"
           tabindex="0"
         >
           Documents
diff --git a/apps/charterafrica/src/components/Datasets/Datasets.snap.js b/apps/charterafrica/src/components/Datasets/Datasets.snap.js
index aa382328f..baa59398c 100644
--- a/apps/charterafrica/src/components/Datasets/Datasets.snap.js
+++ b/apps/charterafrica/src/components/Datasets/Datasets.snap.js
@@ -6,49 +6,45 @@ exports[`<Datasets /> renders unchanged 1`] = `
     class="MuiBox-root css-yr9t7q"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vbgufp-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16qnzbm-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-1kgakwq"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-2 css-uzx68p-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
                 placeholder="Search"
                 type="search"
                 value=""
               />
               <button
                 aria-label="search"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
-                id=":r0:"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
                 tabindex="0"
                 type="button"
               >
-                <span
-                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-81qg8w"
+                  class="css-yjsfm1"
                 >
                   <span>
                     Search
@@ -61,13 +57,13 @@ 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-b4rh0e-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-cd7l2b-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <input
                     aria-autocomplete="list"
@@ -75,30 +71,26 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r1:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r0:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value="Sort"
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-                      id=":r3:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -110,31 +102,26 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-                      id=":r4:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-w4cd9x"
+                      class="css-ihdtdm"
                     >
                       <span
-                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -149,16 +136,16 @@ 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-4u29cd-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-2uxksm-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
                   >
                     Countries
                   </p>
@@ -168,30 +155,26 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r5:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r2:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-                      id=":r7:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -203,31 +186,26 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-                      id=":r8:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-w4cd9x"
+                      class="css-ihdtdm"
                     >
                       <span
-                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -242,16 +220,16 @@ 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-4u29cd-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-2uxksm-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
                   >
                     Tags
                   </p>
@@ -261,30 +239,26 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r9:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r4:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-                      id=":rb:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -296,31 +270,26 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-                      id=":rc:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-w4cd9x"
+                      class="css-ihdtdm"
                     >
                       <span
-                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -335,23 +304,21 @@ exports[`<Datasets /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-3 MuiGrid-grid-lg-3 css-10brl9b-MuiGrid-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
             >
               :
             </p>
             <button
-              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-zz8rc6-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=""
-              id=":rd:"
               tabindex="-1"
               type="button"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-vjivbx-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"
-              id=":re:"
               tabindex="0"
             >
               Documents
diff --git a/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js b/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
index 8f7e58bd3..597780c2e 100644
--- a/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
+++ b/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
@@ -9,7 +9,7 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-1lpbt8y-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-ethxoc-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
         href="/"
         tabindex="0"
       >
@@ -27,7 +27,7 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -36,79 +36,67 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
             class="css-xthg9g"
           >
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
               href="/resources"
             >
               Resources
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                id=":r0:"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                 tabindex="0"
                 type="button"
               >
-                <span
-                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
               href="/knowledge"
             >
               Knowledge
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                id=":r1:"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                 tabindex="0"
                 type="button"
               >
-                <span
-                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
               href="/opportunities"
             >
               Oppportunities
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                id=":r2:"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                 tabindex="0"
                 type="button"
               >
-                <span
-                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
               href="/about"
             >
               About
@@ -119,28 +107,27 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-ny25p5-MuiButtonBase-root-MuiButton-root"
-            id=":r3:"
+            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-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
             >
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 24 24"
               />
             </span>
             en
             <span
-              class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
+              class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
             >
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
diff --git a/apps/charterafrica/src/components/Document/Document.snap.js b/apps/charterafrica/src/components/Document/Document.snap.js
index a9c95adad..e004abca6 100644
--- a/apps/charterafrica/src/components/Document/Document.snap.js
+++ b/apps/charterafrica/src/components/Document/Document.snap.js
@@ -6,16 +6,16 @@ exports[`<Document /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4 MuiGrid-direction-xs-[object Object] css-wq27zs-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4 MuiGrid-direction-xs-[object Object] css-1gcb1z5-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-fffmms-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-xvgnvn-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-1vv4c3h-MuiTypography-root"
           >
             Document Title
           </h2>
@@ -41,13 +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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary active css-wg2o4k-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="/"
-            id=":r0:"
             tabindex="0"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
             >
               <div />
             </span>
@@ -60,7 +59,7 @@ exports[`<Document /> renders unchanged 1`] = `
               class="MuiStack-root css-plcmrn-MuiStack-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
               >
                 Share this document
               </div>
@@ -74,7 +73,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
@@ -86,7 +85,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
@@ -98,7 +97,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
diff --git a/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js b/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
index fac562914..4f71e72d7 100644
--- a/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
+++ b/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
@@ -3,16 +3,15 @@
 exports[`<DocumentCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-cob2z-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1wj4l1q-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiButtonBase-root MuiCardActionArea-root css-1ts5io8-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-dvh6vf-MuiButtonBase-root-MuiCardActionArea-root"
       href="url=https://dc.sourceafrica.net/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html&contrubutor=true&showNotes=true"
       tabindex="0"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1odrru0-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-2r8llh-MuiCardMedia-root"
         src="/images/hero-slide-1.jpg"
       />
       <div
@@ -25,7 +24,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-5hes4x-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1w036fe-MuiTypography-root"
             >
               Document Title
             </div>
@@ -34,7 +33,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1qjtras-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-1tcecrn-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1du89xn-MuiTypography-root"
             >
               10 Pages
             </div>
@@ -44,7 +43,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
               .
             </span>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-1khdwyg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-dvnpys-MuiTypography-root"
             >
               Contributed by: Contributor
             </div>
@@ -53,7 +52,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-igxqn7-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-vscbyg-MuiTypography-root"
             >
               September 1, 2021
             </div>
@@ -64,7 +63,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
         />
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js b/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
index 756dac90f..d243fe0e7 100644
--- a/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
+++ b/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
@@ -6,43 +6,39 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
     class="MuiBox-root css-1kgakwq"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
             placeholder="Search"
             type="search"
             value=""
           />
           <button
             aria-label="search"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
-            id=":r0:"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
-            <span
-              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 16 16"
             />
           </button>
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-81qg8w"
+              class="css-yjsfm1"
             >
               <span>
                 Search
@@ -55,13 +51,13 @@ 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-b4rh0e-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-cd7l2b-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
                 aria-autocomplete="list"
@@ -69,30 +65,26 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r1:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r0:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value="Sort"
               />
               <div
-                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-                  id=":r3:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -104,31 +96,26 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-                  id=":r4:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-w4cd9x"
+                  class="css-ihdtdm"
                 >
                   <span
-                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
diff --git a/apps/charterafrica/src/components/Documents/Documents.snap.js b/apps/charterafrica/src/components/Documents/Documents.snap.js
index abee620d2..2cdcd0cb3 100644
--- a/apps/charterafrica/src/components/Documents/Documents.snap.js
+++ b/apps/charterafrica/src/components/Documents/Documents.snap.js
@@ -6,7 +6,7 @@ exports[`<Documents /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11jnlxf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-27tpcc-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-blp6vs"
@@ -15,43 +15,39 @@ exports[`<Documents /> renders unchanged 1`] = `
           class="MuiBox-root css-1kgakwq"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
                   placeholder="Search"
                   type="search"
                   value=""
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
-                  id=":r0:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-81qg8w"
+                    class="css-yjsfm1"
                   >
                     <span>
                       Search
@@ -64,13 +60,13 @@ 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-b4rh0e-MuiAutocomplete-root"
+                class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-cd7l2b-MuiAutocomplete-root"
               >
                 <div
-                  class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
+                  class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
                 >
                   <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
                   >
                     <input
                       aria-autocomplete="list"
@@ -78,30 +74,26 @@ exports[`<Documents /> renders unchanged 1`] = `
                       aria-invalid="false"
                       autocapitalize="none"
                       autocomplete="off"
-                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
-                      id=":r1:"
+                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
+                      id=":r0:"
                       role="combobox"
                       spellcheck="false"
                       type="text"
                       value="Sort"
                     />
                     <div
-                      class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
+                      class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                     >
                       <button
                         aria-label="Clear"
-                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
-                        id=":r3:"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                         tabindex="-1"
                         title="Clear"
                         type="button"
                       >
-                        <span
-                          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                        />
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
                           data-testid="CloseIcon"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -113,31 +105,26 @@ exports[`<Documents /> renders unchanged 1`] = `
                       </button>
                       <button
                         aria-label="Open"
-                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
-                        id=":r4:"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                         tabindex="-1"
                         title="Open"
                         type="button"
                       >
-                        <span
-                          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                        />
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </button>
                     </div>
                     <fieldset
                       aria-hidden="true"
-                      class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+                      class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="css-w4cd9x"
+                        class="css-ihdtdm"
                       >
                         <span
-                          aria-hidden="true"
                           class="notranslate"
                         >
                           ​
@@ -152,22 +139,20 @@ exports[`<Documents /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1ia2r28-MuiGrid-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
               >
                 :
               </p>
               <a
-                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-d5yv8m-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"
-                id=":r5:"
                 tabindex="0"
               >
                 Datasets
               </a>
               <button
-                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-1imxd5l-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=""
-                id=":r6:"
                 tabindex="-1"
                 type="button"
               >
@@ -177,7 +162,7 @@ exports[`<Documents /> renders unchanged 1`] = `
           </div>
         </div>
         <hr
-          class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
+          class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
         />
       </div>
     </div>
diff --git a/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js b/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
index 0b1982f77..042bace3c 100644
--- a/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
+++ b/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
@@ -3,26 +3,26 @@
 exports[`<DropdownMenu /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiList-root MuiList-padding css-1mwqho1-MuiList-root"
+    class="MuiList-root MuiList-padding css-1fv1une-MuiList-root"
     role="menu"
     tabindex="-1"
   >
     <a
-      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-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"
     >
       Tools
     </a>
     <a
-      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-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/data"
       tabindex="-1"
     >
       Data
     </a>
     <a
-      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-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/people"
       tabindex="-1"
     >
diff --git a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
index 8cff14390..ca89430f0 100644
--- a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
+++ b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
@@ -6,20 +6,20 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-mtt3i8-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1vfict-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h2Small css-1ipdkw2-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2Small css-13ipfz9-MuiTypography-root"
       >
         Tools
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h2Small css-15klgrw-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2Small css-1fm4yxa-MuiTypography-root"
       >
         People
       </div>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3.75 css-18yh1kh-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3.75 css-1mmhzy4-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-auto css-1p4bcov-MuiGrid-root"
@@ -34,30 +34,30 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
             class="MuiBox-root css-kx5zyc"
           >
             <div
-              class="MuiTypography-root MuiTypography-p3SemiBold css-mxdw1y-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold css-hlwom7-MuiTypography-root"
             >
               Tools
             </div>
             <span
-              class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
+              class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
             >
               <span
-                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-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-j8yymo"
+                  class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
                   type="checkbox"
                 />
                 <span
-                  class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
+                  class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
                 />
               </span>
               <span
-                class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
+                class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
               />
             </span>
             <div
-              class="MuiTypography-root MuiTypography-p3SemiBold css-1gw3mcu-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold css-7sagb9-MuiTypography-root"
             >
               People
             </div>
@@ -70,12 +70,12 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
             class="MuiBox-root css-13wj3xb"
           >
             <div
-              class="MuiTypography-root MuiTypography-h2Small css-1n5pg1q-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2Small css-f84vvj-MuiTypography-root"
             >
               Tools
             </div>
             <div
-              class="MuiTypography-root MuiTypography-h2Small css-13v8hm1-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2Small css-100zm5k-MuiTypography-root"
             >
               People
             </div>
@@ -83,30 +83,30 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-1k5ue6b"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-mxdw1y-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-hlwom7-MuiTypography-root"
               >
                 Tools
               </div>
               <span
-                class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
+                class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
               >
                 <span
-                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-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-j8yymo"
+                    class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
                     type="checkbox"
                   />
                   <span
-                    class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
+                    class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
                   />
                 </span>
                 <span
-                  class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
+                  class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
                 />
               </span>
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-1gw3mcu-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-7sagb9-MuiTypography-root"
               >
                 People
               </div>
@@ -115,7 +115,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-5i7ax1"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1SemiBold css-ueha9c-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1SemiBold css-44vm40-MuiTypography-root"
               >
                 Key
               </div>
@@ -129,7 +129,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-uzt8lc"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Elections
                   </div>
@@ -141,7 +141,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-bhlonb"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Rule of law
                   </div>
@@ -153,7 +153,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1e9tm9b"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Civic space
                   </div>
@@ -165,7 +165,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-ga3poe"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Media
                   </div>
@@ -177,7 +177,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1098gr8"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Civic values
                   </div>
@@ -189,7 +189,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1l9yb90"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Decentralisation
                   </div>
@@ -201,7 +201,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1gl40r4"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Multilateralism
                   </div>
@@ -213,7 +213,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1epexq2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Economic governance
                   </div>
@@ -225,7 +225,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tv8i5c"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Corporate governance
                   </div>
@@ -237,7 +237,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-m9kyz2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Gender equality
                   </div>
@@ -249,7 +249,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-10gsdz3"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Constitutional changes of government
                   </div>
@@ -260,7 +260,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-174du92"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1SemiBold css-ueha9c-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1SemiBold css-44vm40-MuiTypography-root"
               >
                 Key
               </div>
@@ -274,7 +274,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-uzt8lc"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Elections
                   </div>
@@ -286,7 +286,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-bhlonb"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Rule of law
                   </div>
@@ -298,7 +298,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1e9tm9b"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Civic space
                   </div>
@@ -310,7 +310,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-ga3poe"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Media
                   </div>
@@ -322,7 +322,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1098gr8"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Civic values
                   </div>
@@ -334,7 +334,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1l9yb90"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Decentralisation
                   </div>
@@ -346,7 +346,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1gl40r4"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Multilateralism
                   </div>
@@ -358,7 +358,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1epexq2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Economic governance
                   </div>
@@ -370,7 +370,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tv8i5c"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Corporate governance
                   </div>
@@ -382,7 +382,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-m9kyz2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Gender equality
                   </div>
@@ -394,7 +394,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-10gsdz3"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
                   >
                     Constitutional changes of government
                   </div>
diff --git a/apps/charterafrica/src/components/Entity/Entity.snap.js b/apps/charterafrica/src/components/Entity/Entity.snap.js
index 2e8f9f7cd..96e0ea220 100644
--- a/apps/charterafrica/src/components/Entity/Entity.snap.js
+++ b/apps/charterafrica/src/components/Entity/Entity.snap.js
@@ -6,20 +6,20 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x1dvlf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10h56vb-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-2miyha-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-gqilsr-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-vutmxe"
+            class="MuiBox-root css-db5opy"
           >
             <img
               alt="John Doe"
-              class="css-qv2885"
+              class="css-g98gbd"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -35,45 +35,45 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-u4yv58-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h2 css-wz0oyq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-wx8luq-MuiTypography-root"
           >
             John Doe
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
           >
             Developer
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
           >
             Charter Africa
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
           >
             San Francisco, CA
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p1 css-uehaqk-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-pxso3q-MuiTypography-root"
           >
             Full-stack web developer with over 5 years of experience.
           </div>
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-auto css-109lh6d-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-auto css-3odm25-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-18imcs6-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-zo8y90-MuiTypography-root-MuiLink-root"
                 href="https://twitter.com/johndoe"
                 rel="noreferrer noopener"
                 target="_blank"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
@@ -82,14 +82,14 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-18imcs6-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-zo8y90-MuiTypography-root-MuiLink-root"
                 href="https://github.com/johndoe"
                 rel="noreferrer noopener"
                 target="_blank"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
@@ -98,19 +98,19 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ofcnda-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-cp0dln-MuiTypography-root-MuiLink-root"
                 href="maito:johndoe@example.com"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
             </div>
           </div>
           <div
-            class="MuiTypography-root MuiTypography-h3Small css-d4pglc-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3Small css-itrhit-MuiTypography-root"
           >
             Organisations
           </div>
@@ -121,9 +121,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1rha4ds-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 css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
-                id=":r0:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -132,11 +131,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-6roq6o"
+                    class="MuiBox-root css-1u82k0c"
                   >
                     <img
                       alt="Organisation 0"
-                      class="css-1enhhhm"
+                      class="css-1r7uxv0"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -147,7 +146,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
                   >
                     Organisation 0
                   </div>
@@ -158,9 +157,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1rha4ds-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 css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
-                id=":r1:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -169,11 +167,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-6roq6o"
+                    class="MuiBox-root css-1u82k0c"
                   >
                     <img
                       alt="Organisation 1"
-                      class="css-1enhhhm"
+                      class="css-1r7uxv0"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -184,7 +182,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
                   >
                     Organisation 1
                   </div>
@@ -195,9 +193,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1rha4ds-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 css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
-                id=":r2:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -206,11 +203,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-6roq6o"
+                    class="MuiBox-root css-1u82k0c"
                   >
                     <img
                       alt="Organisation 2"
-                      class="css-1enhhhm"
+                      class="css-1r7uxv0"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -221,7 +218,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
                   >
                     Organisation 2
                   </div>
@@ -232,10 +229,10 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
         </div>
       </div>
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg css-ut8xii-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg css-1jzu7sv-MuiContainer-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3Small css-1943xhm-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3Small css-3xokdu-MuiTypography-root"
         >
           Repositories
         </div>
@@ -246,7 +243,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -258,22 +255,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
                   >
                     Repository 0
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -288,16 +285,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -310,7 +307,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -322,22 +319,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
                   >
                     Repository 1
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -352,16 +349,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -374,7 +371,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -386,22 +383,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
                   >
                     Repository 2
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -416,16 +413,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -437,21 +434,21 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
         </div>
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3Small css-1943xhm-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-3xokdu-MuiTypography-root"
       >
         Favorite Tools
       </div>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-2l6o4x-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-hamzp9-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
           >
             <button
-              class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
               tabindex="0"
               type="button"
             >
@@ -462,7 +459,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-1j9yqi7-MuiGrid-root"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-u7nuca-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-pssmpe-MuiCardMedia-root"
                     src="/static/images/react.png"
                   />
                 </div>
@@ -470,19 +467,18 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-8 css-1u7cbv1-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
+                    class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
                   >
                     <div
                       class="MuiBox-root css-gg4vpm"
                     >
                       <h5
-                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
                       >
                         React
                       </h5>
                       <button
-                        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-ffiew0-MuiButtonBase-root-MuiButton-root"
-                        id=":r3:"
+                        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"
                       >
@@ -497,7 +493,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -506,7 +502,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -515,13 +511,13 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
                     </div>
                     <div
-                      class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
                     >
                       A JavaScript library for building user interfaces
                     </div>
@@ -529,7 +525,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
               />
             </button>
           </div>
@@ -538,10 +534,10 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
           >
             <button
-              class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
               tabindex="0"
               type="button"
             >
@@ -552,7 +548,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-1j9yqi7-MuiGrid-root"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-u7nuca-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-pssmpe-MuiCardMedia-root"
                     src="/static/images/nodejs.png"
                   />
                 </div>
@@ -560,19 +556,18 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-8 css-1u7cbv1-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
+                    class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
                   >
                     <div
                       class="MuiBox-root css-gg4vpm"
                     >
                       <h5
-                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
                       >
                         Node.js
                       </h5>
                       <button
-                        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-ffiew0-MuiButtonBase-root-MuiButton-root"
-                        id=":r4:"
+                        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"
                       >
@@ -587,7 +582,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -596,7 +591,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -605,13 +600,13 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
                     </div>
                     <div
-                      class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
                     >
                       A JavaScript runtime built on Chrome's V8 JavaScript engine.
                     </div>
@@ -619,7 +614,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
               />
             </button>
           </div>
diff --git a/apps/charterafrica/src/components/Error/Error.snap.js b/apps/charterafrica/src/components/Error/Error.snap.js
index a38584998..eafce5cd3 100644
--- a/apps/charterafrica/src/components/Error/Error.snap.js
+++ b/apps/charterafrica/src/components/Error/Error.snap.js
@@ -6,22 +6,22 @@ exports[`<Error /> renders unchanged 1`] = `
     class="MuiBox-root css-lfupbe"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ezfg9w-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1lmdmi3-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-cg2m9u-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-1xpnus0-MuiTypography-root"
       >
         404
          - 
         NOT FOUND
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-f5me0o-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-19to4pe-MuiTypography-root"
       >
         404
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3 css-m8stqq-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-pawrpu-MuiTypography-root"
       >
         NOT FOUND
       </div>
@@ -29,15 +29,14 @@ exports[`<Error /> renders unchanged 1`] = `
         class="MuiBox-root css-dx31bc"
       >
         <p
-          class="MuiTypography-root MuiTypography-p3 css-1p1zjna-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p3 css-1ullfhh-MuiTypography-root"
         >
           Description Text
         </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary active css-16uizo2-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="/"
-        id=":r0:"
         tabindex="0"
       >
         NOT FOUND
diff --git a/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js b/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
index e0c24ae1c..8f880e16b 100644
--- a/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
+++ b/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
@@ -6,22 +6,22 @@ exports[`<ErrorPage /> renders unchanged 1`] = `
     class="MuiBox-root css-lfupbe"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ezfg9w-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1lmdmi3-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-cg2m9u-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-1xpnus0-MuiTypography-root"
       >
         404
          - 
         NOT FOUND
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-f5me0o-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-19to4pe-MuiTypography-root"
       >
         404
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3 css-m8stqq-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-pawrpu-MuiTypography-root"
       >
         NOT FOUND
       </div>
@@ -29,15 +29,14 @@ exports[`<ErrorPage /> renders unchanged 1`] = `
         class="MuiBox-root css-dx31bc"
       >
         <p
-          class="MuiTypography-root MuiTypography-p3 css-1p1zjna-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p3 css-1ullfhh-MuiTypography-root"
         >
           Description Text
         </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary active css-16uizo2-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="/"
-        id=":r0:"
         tabindex="0"
       >
         NOT FOUND
diff --git a/apps/charterafrica/src/components/Explainers/Explainer.snap.js b/apps/charterafrica/src/components/Explainers/Explainer.snap.js
index 1731d7049..1ee642e96 100644
--- a/apps/charterafrica/src/components/Explainers/Explainer.snap.js
+++ b/apps/charterafrica/src/components/Explainers/Explainer.snap.js
@@ -6,11 +6,11 @@ exports[`<Explainer /> renders unchanged 1`] = `
     class="MuiStack-root css-nen11g-MuiStack-root"
   >
     <figure
-      class="MuiBox-root css-vutmxe"
+      class="MuiBox-root css-db5opy"
     >
       <img
         alt="Event 1"
-        class="css-qv2885"
+        class="css-g98gbd"
         data-nimg="1"
         decoding="async"
         height="0"
@@ -22,7 +22,7 @@ exports[`<Explainer /> renders unchanged 1`] = `
       />
     </figure>
     <div
-      class="MuiTypography-root MuiTypography-h3SmallSemiBold css-7h25xh-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h3SmallSemiBold css-12w5e8m-MuiTypography-root"
     >
       Event title going on two or even three lines
     </div>
@@ -30,7 +30,7 @@ exports[`<Explainer /> renders unchanged 1`] = `
       class="MuiBox-root css-12mwhaj"
     >
       <p
-        class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
       >
         Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
       </p>
diff --git a/apps/charterafrica/src/components/Explainers/Explainers.snap.js b/apps/charterafrica/src/components/Explainers/Explainers.snap.js
index bfea98c1e..4261f74e6 100644
--- a/apps/charterafrica/src/components/Explainers/Explainers.snap.js
+++ b/apps/charterafrica/src/components/Explainers/Explainers.snap.js
@@ -6,10 +6,10 @@ exports[`<Explainers /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xb6wsu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-9gm53n-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-1sgmt5b-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-n55336-MuiTypography-root"
       >
         Explainers
       </div>
@@ -17,11 +17,11 @@ exports[`<Explainers /> renders unchanged 1`] = `
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-vutmxe"
+          class="MuiBox-root css-db5opy"
         >
           <img
             alt="Event 0"
-            class="css-qv2885"
+            class="css-g98gbd"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -36,24 +36,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-vutmxe"
+          class="MuiBox-root css-db5opy"
         >
           <img
             alt="Event 1"
-            class="css-qv2885"
+            class="css-g98gbd"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -68,24 +68,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-vutmxe"
+          class="MuiBox-root css-db5opy"
         >
           <img
             alt="Event 2"
-            class="css-qv2885"
+            class="css-g98gbd"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -100,24 +100,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-vutmxe"
+          class="MuiBox-root css-db5opy"
         >
           <img
             alt="Event 3"
-            class="css-qv2885"
+            class="css-g98gbd"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -132,24 +132,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-vutmxe"
+          class="MuiBox-root css-db5opy"
         >
           <img
             alt="Event 4"
-            class="css-qv2885"
+            class="css-g98gbd"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -164,14 +164,14 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/FAQ/FAQ.snap.js b/apps/charterafrica/src/components/FAQ/FAQ.snap.js
index 885875814..07ce57c69 100644
--- a/apps/charterafrica/src/components/FAQ/FAQ.snap.js
+++ b/apps/charterafrica/src/components/FAQ/FAQ.snap.js
@@ -6,84 +6,79 @@ exports[`<FAQ /> renders unchanged 1`] = `
     class="MuiBox-root css-ow7qj4"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x30ed7-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qbjolu-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h1Small css-18mtumj-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1Small css-kkm4ih-MuiTypography-root"
       >
         Frequently Asked Questions
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
-        <h3
-          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+        <div
+          aria-controls="panel-63f388c3ebe92a85650e8051-content"
+          aria-expanded="false"
+          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+          id="panel-63f388c3ebe92a85650e8051-header"
+          role="button"
+          tabindex="0"
         >
-          <button
-            aria-controls="panel-63f388c3ebe92a85650e8051-content"
-            aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-            id="panel-63f388c3ebe92a85650e8051-header"
-            tabindex="0"
-            type="button"
+          <div
+            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
           >
-            <span
-              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+            <div
+              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="css-jijv3e"
                 >
                   <div
-                    class="css-jijv3e"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                      focusable="false"
-                      viewbox="0 0 24 24"
-                    />
-                  </div>
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
                 </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
                   >
-                    <div
-                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                    >
-                      Open Source
-                    </div>
+                    Open Source
                   </div>
                 </div>
               </div>
-            </span>
-            <span
-              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-            </span>
-          </button>
-        </h3>
+            </div>
+          </div>
+          <div
+            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+              focusable="false"
+              viewbox="0 0 24 24"
+            />
+          </div>
+        </div>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -92,14 +87,14 @@ exports[`<FAQ /> renders unchanged 1`] = `
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
                   id="panel-63f388c3ebe92a85650e8051-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -112,76 +107,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
-        <h3
-          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+        <div
+          aria-controls="panel-63f388e0ebe92a85650e8052-content"
+          aria-expanded="false"
+          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+          id="panel-63f388e0ebe92a85650e8052-header"
+          role="button"
+          tabindex="0"
         >
-          <button
-            aria-controls="panel-63f388e0ebe92a85650e8052-content"
-            aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-            id="panel-63f388e0ebe92a85650e8052-header"
-            tabindex="0"
-            type="button"
+          <div
+            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
           >
-            <span
-              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+            <div
+              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="css-jijv3e"
                 >
                   <div
-                    class="css-jijv3e"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                      focusable="false"
-                      viewbox="0 0 24 24"
-                    />
-                  </div>
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
                 </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
                   >
-                    <div
-                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                    >
-                      Teamwork
-                    </div>
+                    Teamwork
                   </div>
                 </div>
               </div>
-            </span>
-            <span
-              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-            </span>
-          </button>
-        </h3>
+            </div>
+          </div>
+          <div
+            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+              focusable="false"
+              viewbox="0 0 24 24"
+            />
+          </div>
+        </div>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -190,14 +180,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
                   id="panel-63f388e0ebe92a85650e8052-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -210,76 +200,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
-        <h3
-          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+        <div
+          aria-controls="panel-63f388f9ebe92a85650e8053-content"
+          aria-expanded="false"
+          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+          id="panel-63f388f9ebe92a85650e8053-header"
+          role="button"
+          tabindex="0"
         >
-          <button
-            aria-controls="panel-63f388f9ebe92a85650e8053-content"
-            aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-            id="panel-63f388f9ebe92a85650e8053-header"
-            tabindex="0"
-            type="button"
+          <div
+            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
           >
-            <span
-              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+            <div
+              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="css-jijv3e"
                 >
                   <div
-                    class="css-jijv3e"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                      focusable="false"
-                      viewbox="0 0 24 24"
-                    />
-                  </div>
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
                 </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
                   >
-                    <div
-                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                    >
-                      Accountability
-                    </div>
+                    Accountability
                   </div>
                 </div>
               </div>
-            </span>
-            <span
-              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-            </span>
-          </button>
-        </h3>
+            </div>
+          </div>
+          <div
+            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+              focusable="false"
+              viewbox="0 0 24 24"
+            />
+          </div>
+        </div>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -288,14 +273,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
                   id="panel-63f388f9ebe92a85650e8053-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -308,76 +293,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
-        <h3
-          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+        <div
+          aria-controls="panel-63f38902ebe92a85650e8054-content"
+          aria-expanded="false"
+          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+          id="panel-63f38902ebe92a85650e8054-header"
+          role="button"
+          tabindex="0"
         >
-          <button
-            aria-controls="panel-63f38902ebe92a85650e8054-content"
-            aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-            id="panel-63f38902ebe92a85650e8054-header"
-            tabindex="0"
-            type="button"
+          <div
+            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
           >
-            <span
-              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+            <div
+              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="css-jijv3e"
                 >
                   <div
-                    class="css-jijv3e"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                      focusable="false"
-                      viewbox="0 0 24 24"
-                    />
-                  </div>
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
                 </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
                   >
-                    <div
-                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                    >
-                      Impact
-                    </div>
+                    Impact
                   </div>
                 </div>
               </div>
-            </span>
-            <span
-              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-            </span>
-          </button>
-        </h3>
+            </div>
+          </div>
+          <div
+            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+              focusable="false"
+              viewbox="0 0 24 24"
+            />
+          </div>
+        </div>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -386,14 +366,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
                   id="panel-63f38902ebe92a85650e8054-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js b/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
index 087cbf808..970460569 100644
--- a/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
+++ b/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
@@ -6,25 +6,24 @@ exports[`FeaturedPostCard should render 1`] = `
     class="MuiBox-root css-1w0avnn"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1qilz93-MuiPaper-root-MuiCard-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-aezxtm-MuiPaper-root-MuiCard-root"
       >
         <img
           alt="Featured Post"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1x5fzrj-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1mzr6lk-MuiCardMedia-root"
           src="/images/featured_post.png"
         />
         <div
-          class="MuiCardContent-root css-eato5c-MuiCardContent-root"
+          class="MuiCardContent-root css-cnb62q-MuiCardContent-root"
         >
           <div
             class="MuiStack-root css-1nza621-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-h2SemiBold css-1sk5upv-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2SemiBold css-1urtb6r-MuiTypography-root"
             >
               News Story title goes here and spans over second line
             </div>
@@ -32,7 +31,7 @@ exports[`FeaturedPostCard should render 1`] = `
               class="MuiBox-root css-1kvdr3x"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subheading css-15yy3mb-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subheading css-mze3vf-MuiTypography-root"
               >
                 Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur
               </h6>
@@ -41,24 +40,23 @@ exports[`FeaturedPostCard should render 1`] = `
               class="MuiStack-root css-1262us1-MuiStack-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1 css-18fuvi2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1i5r2d9-MuiTypography-root"
               >
                 Author Name
               </div>
               <div
-                class="MuiTypography-root MuiTypography-p1 css-cz5bl3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1rq3c06-MuiTypography-root"
               >
                 2020-10-10 10:10:10
               </div>
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-ozhbbr-MuiCardActions-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-p3 MuiLink-root MuiLink-underlineAlways css-1fok47i-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3 MuiLink-root MuiLink-underlineAlways css-c45nw1-MuiTypography-root-MuiLink-root"
               href="/research/1"
-              style="--Link-underlineColor: rgba(62, 32, 44, 0.4);"
             >
               Read More
             </a>
@@ -66,7 +64,7 @@ exports[`FeaturedPostCard should render 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1sgddrj-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1c8vknm-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
index cd950a38f..473244440 100644
--- a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
@@ -6,15 +6,15 @@ exports[`FeaturedVideos should render 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1r0pch9-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ydzulf-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3Small css-j9k0gw-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-1ru8fzi-MuiTypography-root"
       >
         Featured Videos
       </h3>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-1qw2a80-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-zow5z4-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
@@ -23,7 +23,7 @@ exports[`FeaturedVideos should render 1`] = `
             class="MuiBox-root css-0"
           >
             <div
-              class="MuiBox-root css-f0o1et"
+              class="MuiBox-root css-s11qj8"
             >
               <div
                 aria-label="Video Player"
@@ -1213,12 +1213,12 @@ exports[`FeaturedVideos should render 1`] = `
               </div>
             </div>
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-rp5pi0-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1k5ns17-MuiTypography-root"
             >
               Latest Release
             </h5>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-4jhbfx-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1m1ks3x-MuiTypography-root"
             >
               Aired on
                
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
index a27df7152..1af4f1d79 100644
--- a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
@@ -6,7 +6,7 @@ exports[`FeaturedVideoCard should render 1`] = `
     class="MuiBox-root css-0"
   >
     <div
-      class="MuiBox-root css-f0o1et"
+      class="MuiBox-root css-s11qj8"
     >
       <div
         aria-label="Video Player"
@@ -1196,12 +1196,12 @@ exports[`FeaturedVideoCard should render 1`] = `
       </div>
     </div>
     <h5
-      class="MuiTypography-root MuiTypography-h5SemiBold css-rp5pi0-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5SemiBold css-1k5ns17-MuiTypography-root"
     >
       Latest Release
     </h5>
     <div
-      class="MuiTypography-root MuiTypography-p1 css-4jhbfx-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1m1ks3x-MuiTypography-root"
     >
       Aired on
        
diff --git a/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js b/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
index 00b4f71d8..e023b702f 100644
--- a/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
+++ b/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
@@ -6,15 +6,15 @@ exports[`<FlourishChart /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1op9dlc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-wxw7nq-MuiContainer-root"
     >
       <h5
-        class="MuiTypography-root MuiTypography-h5SemiBold css-1uucibd-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5SemiBold css-5afmx9-MuiTypography-root"
       >
         Flourish Charts
       </h5>
       <div
-        class="MuiTypography-root MuiTypography-p1 css-1bvmr11-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p1 css-1d485r-MuiTypography-root"
       >
         Flourish Charts
       </div>
diff --git a/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js b/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
index 27f94c0d0..a4f5b9bfd 100644
--- a/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
+++ b/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
@@ -7,7 +7,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
       class="MuiBox-root css-ow7qj4"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1nyzrlf-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ly8805-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-xdpkhm-MuiGrid-root"
@@ -19,7 +19,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
               class="MuiBox-root css-qupvse"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1Small css-1glxybr-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1Small css-umhov1-MuiTypography-root"
               >
                 Focal Countries
               </h1>
@@ -27,7 +27,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
                 class="MuiBox-root css-vrd2gm"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
                 >
                   The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
                 </p>
diff --git a/apps/charterafrica/src/components/Footer/Footer.snap.js b/apps/charterafrica/src/components/Footer/Footer.snap.js
index fb9dc257f..89a9415a7 100644
--- a/apps/charterafrica/src/components/Footer/Footer.snap.js
+++ b/apps/charterafrica/src/components/Footer/Footer.snap.js
@@ -9,7 +9,7 @@ exports[`<Footer /> renders unchanged 1`] = `
       class="MuiBox-root css-1idzjj5"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-93fe3t-MuiGrid-root"
@@ -30,11 +30,11 @@ exports[`<Footer /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <figure
-                  class="MuiBox-root css-zxbr8s"
+                  class="MuiBox-root css-102aivi"
                 >
                   <img
                     alt="EU"
-                    class="css-1vimlo0"
+                    class="css-6mvbnf"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -51,7 +51,7 @@ exports[`<Footer /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 css-1pemd0m-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container css-17wbwnu-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container css-uomglc-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -60,7 +60,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiBox-root css-yho6nr"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2 css-sj0aus-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2 css-1te4c5f-MuiTypography-root"
                   >
                     This website was created and maintained with the financial support of the European Union. Its contents are the sole responsibility of the European Partnership for Democracy, Africtivistes, Code for Africa, ECPDM, and Goree Institute and do not necessarily reflect the views of the European Union.
                   </p>
@@ -76,7 +76,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiBox-root css-1s6v4an"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2SemiBold css-f8lckj-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2SemiBold css-2li1iq-MuiTypography-root"
                   >
                     Website designed and built by Code for Africa
                   </p>
@@ -89,7 +89,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-auto css-3fm92-MuiGrid-root"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-vvqhkh-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-16az78j-MuiTypography-root-MuiLink-root"
                     href="/"
                   >
                     Privacy Policy
@@ -99,7 +99,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-auto css-3fm92-MuiGrid-root"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-vvqhkh-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-16az78j-MuiTypography-root-MuiLink-root"
                     href="/"
                   >
                     Imprint
@@ -115,10 +115,10 @@ exports[`<Footer /> renders unchanged 1`] = `
       class="MuiBox-root css-onpmix"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1v2h2lv-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-u81ong-MuiContainer-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-p2SemiBold css-dsh1b6-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p2SemiBold css-1h79qiy-MuiTypography-root"
         >
           © 2022 European Partnership for Democracy (CC BY-NC 2.0)
         </div>
diff --git a/apps/charterafrica/src/components/Grantees/Grantees.snap.js b/apps/charterafrica/src/components/Grantees/Grantees.snap.js
index 0cd1e15ea..feddf8536 100644
--- a/apps/charterafrica/src/components/Grantees/Grantees.snap.js
+++ b/apps/charterafrica/src/components/Grantees/Grantees.snap.js
@@ -6,34 +6,34 @@ exports[`<Grantees /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1a3e8n3-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1kti42o-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3Small css-na0pej-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-1kwvb63-MuiTypography-root"
       >
         Grantees
       </h3>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-z6icgh-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-1ld3b9g-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -41,7 +41,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -50,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r0:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1:"
+                    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"
                   >
@@ -74,20 +72,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -95,7 +93,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -104,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r2:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r3:"
+                    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"
                   >
@@ -128,20 +124,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -149,7 +145,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -158,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r4:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r5:"
+                    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"
                   >
@@ -182,20 +176,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -203,7 +197,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -212,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r6:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r7:"
+                    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"
                   >
@@ -236,20 +228,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -257,7 +249,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -266,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r8:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r9:"
+                    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"
                   >
@@ -290,20 +280,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -311,7 +301,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -320,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":ra:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rb:"
+                    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"
                   >
@@ -344,20 +332,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -365,7 +353,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -374,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":rc:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rd:"
+                    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"
                   >
@@ -398,20 +384,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -419,7 +405,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -428,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":re:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rf:"
+                    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"
                   >
@@ -452,20 +436,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -473,7 +457,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -482,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":rg:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rh:"
+                    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"
                   >
@@ -506,20 +488,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -527,7 +509,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -536,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":ri:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rj:"
+                    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"
                   >
@@ -560,20 +540,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -581,7 +561,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -590,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":rk:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rl:"
+                    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"
                   >
@@ -614,20 +592,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -635,7 +613,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -644,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":rm:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rn:"
+                    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"
                   >
@@ -668,20 +644,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -689,7 +665,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -698,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":ro:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rp:"
+                    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"
                   >
@@ -722,20 +696,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -743,7 +717,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -752,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":rq:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rr:"
+                    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"
                   >
@@ -776,20 +748,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -797,7 +769,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -806,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":rs:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rt:"
+                    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,20 +800,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -851,7 +821,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -860,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":ru:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":rv:"
+                    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"
                   >
@@ -884,20 +852,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -905,7 +873,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -914,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r10:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r11:"
+                    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"
                   >
@@ -938,20 +904,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -959,7 +925,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -968,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r12:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r13:"
+                    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"
                   >
@@ -992,20 +956,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1013,7 +977,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1022,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r14:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r15:"
+                    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"
                   >
@@ -1046,20 +1008,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1067,7 +1029,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1076,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r16:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r17:"
+                    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"
                   >
@@ -1100,20 +1060,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1121,7 +1081,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1130,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r18:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r19:"
+                    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"
                   >
@@ -1154,20 +1112,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1175,7 +1133,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1184,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1a:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1b:"
+                    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"
                   >
@@ -1208,20 +1164,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1229,7 +1185,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1238,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1c:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1d:"
+                    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"
                   >
@@ -1262,20 +1216,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1283,7 +1237,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1292,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1e:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1f:"
+                    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"
                   >
@@ -1316,20 +1268,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1337,7 +1289,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1346,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1g:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1h:"
+                    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"
                   >
@@ -1370,20 +1320,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1391,7 +1341,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1400,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1i:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1j:"
+                    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"
                   >
@@ -1424,20 +1372,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1445,7 +1393,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1454,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1k:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1l:"
+                    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"
                   >
@@ -1478,20 +1424,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1499,7 +1445,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1508,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1m:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1n:"
+                    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"
                   >
@@ -1532,20 +1476,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1553,7 +1497,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1562,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1o:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1p:"
+                    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"
                   >
@@ -1586,20 +1528,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
+                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
+                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1607,7 +1549,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1616,16 +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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1jd7qrn-MuiButtonBase-root-MuiButton-root"
-                    id=":r1q:"
+                    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-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-h3eb70-MuiButtonBase-root-MuiButton-root"
-                    id=":r1r:"
+                    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 1958d3060..8fdde5b85 100644
--- a/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
+++ b/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
@@ -6,84 +6,79 @@ exports[`<GuidingPrinciples /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x30ed7-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qbjolu-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h1Small css-18mtumj-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1Small css-kkm4ih-MuiTypography-root"
       >
         Guiding Principles
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
-        <h3
-          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+        <div
+          aria-controls="panel-63f388c3ebe92a85650e8051-content"
+          aria-expanded="false"
+          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+          id="panel-63f388c3ebe92a85650e8051-header"
+          role="button"
+          tabindex="0"
         >
-          <button
-            aria-controls="panel-63f388c3ebe92a85650e8051-content"
-            aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-            id="panel-63f388c3ebe92a85650e8051-header"
-            tabindex="0"
-            type="button"
+          <div
+            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
           >
-            <span
-              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+            <div
+              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="css-jijv3e"
                 >
                   <div
-                    class="css-jijv3e"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                      focusable="false"
-                      viewbox="0 0 24 24"
-                    />
-                  </div>
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
                 </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
                   >
-                    <div
-                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                    >
-                      Open Source
-                    </div>
+                    Open Source
                   </div>
                 </div>
               </div>
-            </span>
-            <span
-              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-            </span>
-          </button>
-        </h3>
+            </div>
+          </div>
+          <div
+            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+              focusable="false"
+              viewbox="0 0 24 24"
+            />
+          </div>
+        </div>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -92,14 +87,14 @@ exports[`<GuidingPrinciples /> renders unchanged 1`] = `
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
                   id="panel-63f388c3ebe92a85650e8051-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -112,76 +107,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
-        <h3
-          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+        <div
+          aria-controls="panel-63f388e0ebe92a85650e8052-content"
+          aria-expanded="false"
+          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+          id="panel-63f388e0ebe92a85650e8052-header"
+          role="button"
+          tabindex="0"
         >
-          <button
-            aria-controls="panel-63f388e0ebe92a85650e8052-content"
-            aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-            id="panel-63f388e0ebe92a85650e8052-header"
-            tabindex="0"
-            type="button"
+          <div
+            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
           >
-            <span
-              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+            <div
+              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="css-jijv3e"
                 >
                   <div
-                    class="css-jijv3e"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                      focusable="false"
-                      viewbox="0 0 24 24"
-                    />
-                  </div>
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
                 </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
                   >
-                    <div
-                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                    >
-                      Teamwork
-                    </div>
+                    Teamwork
                   </div>
                 </div>
               </div>
-            </span>
-            <span
-              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-            </span>
-          </button>
-        </h3>
+            </div>
+          </div>
+          <div
+            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+              focusable="false"
+              viewbox="0 0 24 24"
+            />
+          </div>
+        </div>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -190,14 +180,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
                   id="panel-63f388e0ebe92a85650e8052-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -210,76 +200,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
-        <h3
-          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+        <div
+          aria-controls="panel-63f388f9ebe92a85650e8053-content"
+          aria-expanded="false"
+          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+          id="panel-63f388f9ebe92a85650e8053-header"
+          role="button"
+          tabindex="0"
         >
-          <button
-            aria-controls="panel-63f388f9ebe92a85650e8053-content"
-            aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-            id="panel-63f388f9ebe92a85650e8053-header"
-            tabindex="0"
-            type="button"
+          <div
+            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
           >
-            <span
-              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+            <div
+              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="css-jijv3e"
                 >
                   <div
-                    class="css-jijv3e"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                      focusable="false"
-                      viewbox="0 0 24 24"
-                    />
-                  </div>
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
                 </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
                   >
-                    <div
-                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                    >
-                      Accountability
-                    </div>
+                    Accountability
                   </div>
                 </div>
               </div>
-            </span>
-            <span
-              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-            </span>
-          </button>
-        </h3>
+            </div>
+          </div>
+          <div
+            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+              focusable="false"
+              viewbox="0 0 24 24"
+            />
+          </div>
+        </div>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -288,14 +273,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
                   id="panel-63f388f9ebe92a85650e8053-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -308,76 +293,71 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
-        <h3
-          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
+        <div
+          aria-controls="panel-63f38902ebe92a85650e8054-content"
+          aria-expanded="false"
+          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
+          id="panel-63f38902ebe92a85650e8054-header"
+          role="button"
+          tabindex="0"
         >
-          <button
-            aria-controls="panel-63f38902ebe92a85650e8054-content"
-            aria-expanded="false"
-            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
-            id="panel-63f38902ebe92a85650e8054-header"
-            tabindex="0"
-            type="button"
+          <div
+            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
           >
-            <span
-              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
+            <div
+              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
             >
               <div
-                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="css-jijv3e"
                 >
                   <div
-                    class="css-jijv3e"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                      focusable="false"
-                      viewbox="0 0 24 24"
-                    />
-                  </div>
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
                 </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+              >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
                   >
-                    <div
-                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
-                    >
-                      Impact
-                    </div>
+                    Impact
                   </div>
                 </div>
               </div>
-            </span>
-            <span
-              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-            </span>
-          </button>
-        </h3>
+            </div>
+          </div>
+          <div
+            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
+          >
+            <div
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
+              focusable="false"
+              viewbox="0 0 24 24"
+            />
+          </div>
+        </div>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -386,14 +366,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
                   id="panel-63f38902ebe92a85650e8054-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js b/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
index 9131413a8..09767fa81 100644
--- a/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
+++ b/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
@@ -6,17 +6,17 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
     class="MuiBox-root css-1n99d1h"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-9m637t"
       >
         <figure
-          class="MuiBox-root css-q6ue4o"
+          class="MuiBox-root css-1lypdo1"
         >
           <img
             alt="Democracy Support Helpdesk"
-            class="css-qv2885"
+            class="css-g98gbd"
             data-nimg="fill"
             decoding="async"
             loading="lazy"
@@ -28,7 +28,7 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
           class="MuiBox-root css-j7qwjs"
         >
           <h1
-            class="MuiTypography-root MuiTypography-h1Small css-1gf7d1q-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h1Small css-ek5pw1-MuiTypography-root"
           >
             Democracy Support Helpdesk
           </h1>
@@ -36,20 +36,19 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
             class="MuiBox-root css-1jz2duz"
           >
             <p
-              class="MuiTypography-root MuiTypography-p3 css-1aa3xuk-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-1s69ce2-MuiTypography-root"
             >
               Need help connecting with experts?
             </p>
             <p
-              class="MuiTypography-root MuiTypography-p3 css-1aa3xuk-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-1s69ce2-MuiTypography-root"
             >
               
 We can help you find specialists or resources to improve the impact of your democracy project.
             </p>
           </div>
           <button
-            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-1j3b0ra-MuiButtonBase-root-MuiButton-root"
-            id=":r0:"
+            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 dcfe45a23..b0136f547 100644
--- a/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
+++ b/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
@@ -6,7 +6,7 @@ exports[`<HelpdeskPageContent /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-j7qwjs"
@@ -15,20 +15,19 @@ exports[`<HelpdeskPageContent /> renders unchanged 1`] = `
           class="MuiBox-root css-1r3trlq"
         >
           <p
-            class="MuiTypography-root MuiTypography-p3 css-1svdd3f-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p3 css-1xflfon-MuiTypography-root"
           >
             Need help connecting with experts?
           </p>
           <p
-            class="MuiTypography-root MuiTypography-p3 css-1svdd3f-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p3 css-1xflfon-MuiTypography-root"
           >
             
 We can help you find specialists or resources to improve the impact of your democracy project.
           </p>
         </div>
         <button
-          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-dlqng1-MuiButtonBase-root-MuiButton-root"
-          id=":r0:"
+          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 e9df89de7..55374181e 100644
--- a/apps/charterafrica/src/components/Hero/Hero.snap.js
+++ b/apps/charterafrica/src/components/Hero/Hero.snap.js
@@ -21,7 +21,7 @@ exports[`<Hero /> renders unchanged 1`] = `
             class="MuiBox-root css-1lerasb"
           >
             <div
-              class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-gww3xw-MuiContainer-root"
+              class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1s39khq-MuiContainer-root"
             >
               <div
                 class="MuiBox-root css-dvxtzn"
@@ -30,7 +30,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                   class="MuiBox-root css-jd4a7r"
                 >
                   <h1
-                    class="MuiTypography-root MuiTypography-h2Small css-1afd4o7-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h2Small css-1awbn21-MuiTypography-root"
                   >
                     Find Africa's best 
                     <em>
@@ -40,7 +40,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                   </h1>
                 </div>
                 <div
-                  class="MuiTypography-root MuiTypography-p1 css-s9bs3i-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-15y612c-MuiTypography-root"
                 >
                   Easy to use resources for democracy activists
                 </div>
@@ -48,20 +48,19 @@ 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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary css-1yakt1o-MuiButtonBase-root-MuiButton-root"
-                    id=":r0:"
+                    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-icon MuiButton-startIcon MuiButton-iconSizeSmall css-1in3o51-MuiButton-startIcon"
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
                     >
                       <figure
-                        class="MuiBox-root css-1qtc0jw"
+                        class="MuiBox-root css-zmiex6"
                       >
                         <img
                           alt="Software"
-                          class="css-qv2885"
+                          class="css-g98gbd"
                           data-nimg="fill"
                           decoding="async"
                           loading="lazy"
@@ -73,20 +72,19 @@ exports[`<Hero /> renders unchanged 1`] = `
                     Explore software
                   </button>
                   <button
-                    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-1yakt1o-MuiButtonBase-root-MuiButton-root"
-                    id=":r1:"
+                    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-icon MuiButton-startIcon MuiButton-iconSizeSmall css-1in3o51-MuiButton-startIcon"
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
                     >
                       <figure
-                        class="MuiBox-root css-1qtc0jw"
+                        class="MuiBox-root css-zmiex6"
                       >
                         <img
                           alt="Database"
-                          class="css-qv2885"
+                          class="css-g98gbd"
                           data-nimg="fill"
                           decoding="async"
                           loading="lazy"
@@ -105,14 +103,13 @@ exports[`<Hero /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiMobileStepper-root MuiMobileStepper-positionStatic css-kaa7ne-MuiPaper-root-MuiMobileStepper-root"
-      style="--Paper-shadow: none;"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiMobileStepper-root MuiMobileStepper-positionStatic css-rddy23-MuiPaper-root-MuiMobileStepper-root"
     >
       <div
-        class="MuiMobileStepper-dots css-13wf08b-MuiMobileStepper-dots"
+        class="MuiMobileStepper-dots css-1384nzf-MuiMobileStepper-dots"
       >
         <div
-          class="MuiMobileStepper-dot MuiMobileStepper-dotActive css-hkkix3-MuiMobileStepper-dot"
+          class="MuiMobileStepper-dot MuiMobileStepper-dotActive css-1scj8vt-MuiMobileStepper-dot"
         />
       </div>
     </div>
diff --git a/apps/charterafrica/src/components/Impressum/Impressum.snap.js b/apps/charterafrica/src/components/Impressum/Impressum.snap.js
index 9f8490678..806ab2484 100644
--- a/apps/charterafrica/src/components/Impressum/Impressum.snap.js
+++ b/apps/charterafrica/src/components/Impressum/Impressum.snap.js
@@ -6,20 +6,20 @@ exports[`<Impressum /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-1vm9ek7-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-ae960m-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-4ah52f-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-i8cjvb"
+            class="MuiBox-root css-1pgoklf"
           >
             <img
               alt="S"
-              class="css-qv2885"
+              class="css-g98gbd"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -41,25 +41,25 @@ exports[`<Impressum /> renders unchanged 1`] = `
               class="MuiBox-root css-12mwhaj"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
               >
                 European Partnership for Democracy (EPD)
 Rue Froissart 123-133
 1040 Brussels, Belgium
               </p>
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
               />
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
               >
                 EPD is registered in Belgium (0648.708.779).
               </p>
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
               />
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
               >
                 You can contact EPD via email (info@epd.eu) or by phone (+32 2 733 2282).
               </p>
diff --git a/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js b/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
index 59ae98667..cf4aa3e95 100644
--- a/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
+++ b/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
@@ -3,28 +3,27 @@
 exports[`<LanguageButton /> renders unchanged 1`] = `
 <div>
   <button
-    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-ny25p5-MuiButtonBase-root-MuiButton-root"
-    id=":r0:"
+    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-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
+      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
     >
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 24 24"
       />
     </span>
     en
     <span
-      class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
+      class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
     >
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
diff --git a/apps/charterafrica/src/components/Layout/Layout.snap.js b/apps/charterafrica/src/components/Layout/Layout.snap.js
index 16b06eab2..e83582fd1 100644
--- a/apps/charterafrica/src/components/Layout/Layout.snap.js
+++ b/apps/charterafrica/src/components/Layout/Layout.snap.js
@@ -3,14 +3,13 @@
 exports[`<Layout /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-n0kqde-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
-    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-bxh7mj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-lxmw82-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-1gcfjze-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-rdfh4n-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12jovna-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -23,17 +22,13 @@ exports[`<Layout /> renders unchanged 1`] = `
           >
             <button
               aria-label="navigation"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
-              id=":r0:"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
-              <span
-                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 32 32"
               />
@@ -50,7 +45,7 @@ exports[`<Layout /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -59,79 +54,67 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="css-xthg9g"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
                     href="/resources"
                   >
                     Resources
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                      id=":r1:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
                     href="/knowledge"
                   >
                     Knowledge
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                      id=":r2:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
                     href="/opportunities"
                   >
                     Oppportunities
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                      id=":r3:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
                     href="/about"
                   >
                     About
@@ -142,28 +125,27 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-ny25p5-MuiButtonBase-root-MuiButton-root"
-                  id=":r4:"
+                  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-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
+                    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
                   >
                     <div
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
                       focusable="false"
                       viewbox="0 0 24 24"
                     />
                   </span>
                   en
                   <span
-                    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
+                    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
                   >
                     <div
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
                       focusable="false"
                       viewbox="0 0 16 16"
                     />
@@ -183,7 +165,7 @@ exports[`<Layout /> renders unchanged 1`] = `
       class="MuiBox-root css-1idzjj5"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-93fe3t-MuiGrid-root"
@@ -209,7 +191,7 @@ exports[`<Layout /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 css-1pemd0m-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container css-17wbwnu-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container css-uomglc-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -218,7 +200,7 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="MuiBox-root css-yho6nr"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2 css-sj0aus-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2 css-1te4c5f-MuiTypography-root"
                   />
                 </div>
               </div>
@@ -232,7 +214,7 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="MuiBox-root css-1s6v4an"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2SemiBold css-f8lckj-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2SemiBold css-2li1iq-MuiTypography-root"
                   />
                 </div>
               </div>
@@ -245,7 +227,7 @@ exports[`<Layout /> renders unchanged 1`] = `
       class="MuiBox-root css-onpmix"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1v2h2lv-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-u81ong-MuiContainer-root"
       />
     </div>
   </footer>
diff --git a/apps/charterafrica/src/components/LongForm/LongForm.snap.js b/apps/charterafrica/src/components/LongForm/LongForm.snap.js
index d89bc7dbb..1f765e431 100644
--- a/apps/charterafrica/src/components/LongForm/LongForm.snap.js
+++ b/apps/charterafrica/src/components/LongForm/LongForm.snap.js
@@ -6,7 +6,7 @@ exports[`<LongForm /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11qhdim-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xmubp1-MuiContainer-root"
     />
   </div>
 </div>
diff --git a/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js b/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
index 069c48e60..653d3c7cf 100644
--- a/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
+++ b/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
@@ -3,11 +3,11 @@
 exports[`<LongFormMediaBlock /> renders unchanged 1`] = `
 <div>
   <figure
-    class="MuiBox-root css-82o9x6"
+    class="MuiBox-root css-g1fxym"
   >
     <img
       alt="Featured Post"
-      class="css-qv2885"
+      class="css-g98gbd"
       data-nimg="1"
       decoding="async"
       height="0"
@@ -18,7 +18,7 @@ exports[`<LongFormMediaBlock /> renders unchanged 1`] = `
       width="0"
     />
     <figcaption
-      class="MuiTypography-root MuiTypography-caption css-1uaaouy-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-caption css-fl2ocl-MuiTypography-root"
     >
       Image caption.
     </figcaption>
diff --git a/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
index ec66e5936..ba2c19ff9 100644
--- a/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-142s5v6"
   >
     <p
-      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
     >
       We process and manage your personal data in compliance with the European Union’s General Data Protection Regulation (GDPR). The following information provides an overview of how we process and manage your personal data as well as of your rights as a visitor and user of this site.
 Who is responsible and who may you contact?
diff --git a/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
index dadd5709b..f8de4a6a2 100644
--- a/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -13,17 +13,13 @@ exports[`<MobileNavBar /> renders unchanged 1`] = `
     >
       <button
         aria-label="navigation"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
-        id=":r0:"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 32 32"
         />
diff --git a/apps/charterafrica/src/components/Mooc/Mooc.snap.js b/apps/charterafrica/src/components/Mooc/Mooc.snap.js
index 30e8d84ed..51846aa06 100644
--- a/apps/charterafrica/src/components/Mooc/Mooc.snap.js
+++ b/apps/charterafrica/src/components/Mooc/Mooc.snap.js
@@ -6,13 +6,13 @@ exports[`<Mooc/> renders unchanged 1`] = `
     class="MuiBox-root css-l3bbx9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ipyg2f-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tgrrgk-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1gkqic5-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-7yylxy-MuiGrid-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-10xnvyd-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-rm5v4n-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -22,11 +22,11 @@ exports[`<Mooc/> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-15gjm0g-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-1w3flzm"
+            class="MuiBox-root css-jitnt0"
           >
             <img
               alt="MOOC"
-              class="css-qv2885"
+              class="css-g98gbd"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/charterafrica/src/components/NavBar/NavBar.snap.js b/apps/charterafrica/src/components/NavBar/NavBar.snap.js
index 2945c7e24..5384036c4 100644
--- a/apps/charterafrica/src/components/NavBar/NavBar.snap.js
+++ b/apps/charterafrica/src/components/NavBar/NavBar.snap.js
@@ -3,14 +3,13 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-n0kqde-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
-    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-bxh7mj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-lxmw82-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-1gcfjze-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-rdfh4n-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12jovna-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -19,7 +18,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-geux3z-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-13uxck9-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
               href="/"
               tabindex="0"
             >
@@ -38,17 +37,13 @@ exports[`<NavBar /> renders unchanged 1`] = `
           >
             <button
               aria-label="navigation"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
-              id=":r0:"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
-              <span
-                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 32 32"
               />
@@ -62,7 +57,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-1lpbt8y-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-ethxoc-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
               href="/"
               tabindex="0"
             >
@@ -80,7 +75,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -89,79 +84,67 @@ exports[`<NavBar /> renders unchanged 1`] = `
                   class="css-xthg9g"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
                     href="/resources"
                   >
                     Resources
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                      id=":r1:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
                     href="/knowledge"
                   >
                     Knowledge
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                      id=":r2:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
                     href="/opportunities"
                   >
                     Oppportunities
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-                      id=":r3:"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
                       tabindex="0"
                       type="button"
                     >
-                      <span
-                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
                     href="/about"
                   >
                     About
diff --git a/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js b/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
index 46d88e694..ee19441de 100644
--- a/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
+++ b/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
@@ -3,24 +3,20 @@
 exports[`<NavBarDropdown /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
     href="/resources"
   >
     Resources
     <button
       aria-haspopup="menu"
       aria-label="select merge strategy"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-      id=":r0:"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-      />
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
diff --git a/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
index a671e642f..26a0f585c 100644
--- a/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,30 +6,30 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="MuiBox-root css-12tykev"
   >
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/resources"
       >
         Resources
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/tools"
         tabindex="0"
       >
         Tools
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/data"
         tabindex="0"
       >
         Data
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/people"
         tabindex="0"
       >
@@ -37,37 +37,37 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/knowledge"
       >
         Knowledge
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/explainers"
         tabindex="0"
       >
         Explainers
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/news"
         tabindex="0"
       >
         News
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/research"
         tabindex="0"
       >
         Research
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/academy"
         tabindex="0"
       >
@@ -75,37 +75,37 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/opportunities"
       >
         Oppportunities
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/grants-and-fellowships"
         tabindex="0"
       >
         Grants and Fellowships
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/events"
         tabindex="0"
       >
         Events
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/community"
         tabindex="0"
       >
         Community
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/democracy-helpdesk"
         tabindex="0"
       >
@@ -113,10 +113,10 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/about"
       >
         About
diff --git a/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js b/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
index 01e1265bf..974dbcc32 100644
--- a/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
+++ b/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
@@ -6,79 +6,67 @@ exports[`<NavBarNavMenu /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
       href="/resources"
     >
       Resources
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-        id=":r0:"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
       href="/knowledge"
     >
       Knowledge
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-        id=":r1:"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
       href="/opportunities"
     >
       Oppportunities
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
-        id=":r2:"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
       href="/about"
     >
       About
diff --git a/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js b/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
index 78ddb8141..134ec0fa4 100644
--- a/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
+++ b/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
@@ -6,14 +6,13 @@ exports[`<NextPrevPagination /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <ul
-      class="css-1u984he"
+      class="css-1szo00h"
     >
       <li
         class="MuiBox-root css-0"
       >
         <button
-          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-1ue9ibh-MuiButtonBase-root-MuiButton-root"
-          id=":r0:"
+          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 91325b180..d9ed37443 100644
--- a/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
+++ b/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
@@ -6,8 +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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary css-1ue9ibh-MuiButtonBase-root-MuiButton-root"
-      id=":r0:"
+      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/OpenCloseIcon/OpenCloseIcon.snap.js b/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
index 1f9ab605f..ea794983d 100644
--- a/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
+++ b/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
@@ -4,7 +4,7 @@ exports[`<OpenCloseIcon /> renders unchanged 1`] = `
 <div>
   <div
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17poc4t-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ccdodd-MuiSvgIcon-root"
     focusable="false"
     viewbox="0 0 16 16"
   />
diff --git a/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js b/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
index bac646422..25689bf3f 100644
--- a/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
+++ b/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
@@ -6,10 +6,10 @@ exports[`<Opportunity /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2u7biu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-18qfgg5-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-4ef04g-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-1b14d7z-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1g4nj95-MuiGrid-root"
@@ -18,11 +18,11 @@ exports[`<Opportunity /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <figure
-              class="MuiBox-root css-1h2h3lo"
+              class="MuiBox-root css-1nudpye"
             >
               <img
                 alt="Hero 1"
-                class="css-qv2885"
+                class="css-g98gbd"
                 data-nimg="1"
                 decoding="async"
                 height="0"
@@ -36,16 +36,16 @@ exports[`<Opportunity /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-frq7pl-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-1h2ytjv-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 css-e2xkrp-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 css-15he5x-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h3Small css-1hity0z-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h3Small css-1jnbwjl-MuiTypography-root"
               >
                 Opportunity title
               </div>
@@ -54,7 +54,7 @@ exports[`<Opportunity /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-subheading css-i042z2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subheading css-1okuc1l-MuiTypography-root"
               >
                 DEADLINE: February 6, 2023 at 12:00:00 AM
               </div>
@@ -63,9 +63,8 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1o5bdc4-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"
-                id=":r0:"
                 tabindex="0"
               >
                 Apply Now
diff --git a/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js b/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
index 8a22a1f8b..c2ef3f357 100644
--- a/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
@@ -3,26 +3,25 @@
 exports[`<OpportunityCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root active css-1sk9sjr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root active css-1j8g7zj-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/"
       tabindex="0"
     >
       <img
         alt="Grant 1"
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
         height="187.26"
         src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
         width="270"
       />
       <div
-        class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+        class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
         >
           Democratic Governance in Zambia
         </h5>
@@ -30,18 +29,18 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiBox-root css-1tdn91g"
         >
           <p
-            class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
           >
             This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
           </p>
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </a>
     <div
-      class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+      class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -50,7 +49,7 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <span
-            class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
           >
             : undefined
           </span>
diff --git a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
index 7b8672846..3c24cc76b 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
@@ -9,26 +9,25 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 1"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
@@ -36,18 +35,18 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiBox-root css-1tdn91g"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
               >
                 This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
               </p>
             </div>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -56,7 +55,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
               >
                 : undefined
               </span>
@@ -69,36 +68,35 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 2"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -107,7 +105,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
               >
                 : undefined
               </span>
@@ -120,36 +118,35 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 3"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -158,7 +155,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
               >
                 : undefined
               </span>
diff --git a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
index 5e97ddca6..066d86f1d 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
@@ -9,7 +9,7 @@ exports[`<OpportunityCardHeader /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
     >
       <h5
-        class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
       >
         Grants
       </h5>
@@ -18,8 +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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-10qc60x-MuiButtonBase-root-MuiButton-root"
-        id=":r0:"
+        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 8677b8cef..21e4f221a 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
@@ -12,7 +12,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
         >
           Grants
         </h5>
@@ -21,8 +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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-10qc60x-MuiButtonBase-root-MuiButton-root"
-          id=":r0:"
+          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"
         >
@@ -37,26 +36,25 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 1"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
@@ -64,18 +62,18 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiBox-root css-1tdn91g"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                 >
                   This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                 </p>
               </div>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -84,7 +82,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -97,36 +95,35 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 2"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -135,7 +132,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -148,36 +145,35 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 3"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -186,7 +182,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -197,8 +193,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
       </div>
     </div>
     <button
-      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-1ul7yle-MuiButtonBase-root-MuiButton-root"
-      id=":r1:"
+      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/OpportunityHeader/OpportunityHeader.snap.js b/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
index 43df7a079..b31a1cf73 100644
--- a/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
+++ b/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
@@ -6,15 +6,15 @@ exports[`<OpportunityHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3 css-gk3coa-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-1dbe021-MuiTypography-root"
       >
         Grants and Fellowships
       </h3>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-e230pt-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-f8pbns-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js b/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
index c32461f06..cfe7a4a86 100644
--- a/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
+++ b/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
@@ -10,23 +10,23 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
       class="MuiBox-root css-156ejva"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
       >
         <h3
-          class="MuiTypography-root MuiTypography-h3 css-gk3coa-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3 css-1dbe021-MuiTypography-root"
         >
           Fellowships
         </h3>
         <hr
-          class="MuiDivider-root MuiDivider-fullWidth css-e230pt-MuiDivider-root"
+          class="MuiDivider-root MuiDivider-fullWidth css-f8pbns-MuiDivider-root"
         />
       </div>
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ihbtgs-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xskjid-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3Small css-10gkr8y-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-1g0ac4a-MuiTypography-root"
       >
         Fellowships
       </div>
@@ -40,7 +40,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
             >
               open
             </h5>
@@ -49,8 +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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-10qc60x-MuiButtonBase-root-MuiButton-root"
-              id=":r0:"
+              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"
             >
@@ -65,26 +64,25 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 1"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -92,18 +90,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -112,7 +110,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -123,8 +121,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
-          id=":r1:"
+          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"
         >
@@ -132,7 +129,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
       />
       <div
         class="MuiBox-root css-1bsmwc1"
@@ -144,7 +141,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
             >
               closed
             </h5>
@@ -153,8 +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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-10qc60x-MuiButtonBase-root-MuiButton-root"
-              id=":r2:"
+              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"
             >
@@ -169,26 +165,25 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 2"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -196,18 +191,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -216,7 +211,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -227,8 +222,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
-          id=":r3:"
+          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"
         >
@@ -236,7 +230,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
       />
       <div
         class="MuiBox-root css-1bsmwc1"
@@ -248,7 +242,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
             >
               upcoming
             </h5>
@@ -257,8 +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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-10qc60x-MuiButtonBase-root-MuiButton-root"
-              id=":r4:"
+              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"
             >
@@ -273,26 +266,25 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
-              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 3"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
+                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -300,18 +292,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
+                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -320,7 +312,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -331,8 +323,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
-          id=":r5:"
+          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"
         >
@@ -340,7 +331,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js b/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
index a1b67ad44..c18e31594 100644
--- a/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
+++ b/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
@@ -3,34 +3,34 @@
 exports[`<OrganisationCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <div
-        class="MuiCardMedia-root css-shxb4t-MuiCardMedia-root"
+        class="MuiCardMedia-root css-muxve-MuiCardMedia-root"
         role="img"
         style="background-image: url(/image.jpg);"
       />
       <div
-        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
+        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1r8vkhu-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-nwrr25-MuiTypography-root"
         >
           Tool Name
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
         >
           Sample description
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js b/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
index c08c0546c..e4fddaae9 100644
--- a/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
+++ b/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
@@ -3,9 +3,8 @@
 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1rha4ds-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 css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
     href="https://charter.africa"
-    id=":r0:"
     rel="noreferrer noopener"
     tabindex="0"
     target="_blank"
@@ -14,11 +13,11 @@ exports[`<OrganisationImageCard /> renders unchanged 1`] = `
       class="MuiStack-root css-1l9qugs-MuiStack-root"
     >
       <figure
-        class="MuiBox-root css-6roq6o"
+        class="MuiBox-root css-1u82k0c"
       >
         <img
           alt="Organisation Name"
-          class="css-1enhhhm"
+          class="css-1r7uxv0"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -29,7 +28,7 @@ exports[`<OrganisationImageCard /> renders unchanged 1`] = `
         />
       </figure>
       <div
-        class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
       >
         Organisation Name
       </div>
diff --git a/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js b/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
index 31b04ebb1..74aac2e9a 100644
--- a/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
+++ b/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
@@ -6,13 +6,13 @@ exports[`<PageDescription/> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1r0pch9-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ydzulf-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-3zjynb"
       >
         <p
-          class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
         >
           The largest digital database for 
           <strong>
diff --git a/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js b/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
index 65babe1b6..e79c3b884 100644
--- a/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
@@ -9,17 +9,17 @@ exports[`<PageHeader/> renders unchanged 1`] = `
       class="MuiBox-root css-14gw6dj"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1qw5437-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-u9nzae-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-xwarr-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-qe5rve"
+            class="MuiBox-root css-17u5j6m"
           >
             <img
               alt="About"
-              class="css-qv2885"
+              class="css-g98gbd"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -32,7 +32,7 @@ exports[`<PageHeader/> renders unchanged 1`] = `
           </figure>
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-ten9jr-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kqkv4f-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -41,7 +41,7 @@ exports[`<PageHeader/> renders unchanged 1`] = `
               class="MuiBox-root css-qhe18k"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1Small css-1a8ie7p-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1Small css-1k3x2yj-MuiTypography-root"
               >
                 The largest digital database for 
                 <strong>
diff --git a/apps/charterafrica/src/components/PostCard/PostCard.snap.js b/apps/charterafrica/src/components/PostCard/PostCard.snap.js
index 839c5709a..16a6cfd06 100644
--- a/apps/charterafrica/src/components/PostCard/PostCard.snap.js
+++ b/apps/charterafrica/src/components/PostCard/PostCard.snap.js
@@ -3,39 +3,39 @@
 exports[`<PostCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <div
-        class="MuiCardMedia-root css-shxb4t-MuiCardMedia-root"
+        class="MuiCardMedia-root css-muxve-MuiCardMedia-root"
         role="img"
         style="background-image: url(/image.jpg);"
       />
       <div
-        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
+        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-fy2ogv-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-6z9xjs-MuiTypography-root"
         >
           Some title
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-1epd9r5-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1tk9iea-MuiTypography-root"
         >
           Sakwa
         </div>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-1epd9r5-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1tk9iea-MuiTypography-root"
         >
           2023-09-01
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/Repository/Repository.snap.js b/apps/charterafrica/src/components/Repository/Repository.snap.js
index 1a66e1a94..5f86d64e1 100644
--- a/apps/charterafrica/src/components/Repository/Repository.snap.js
+++ b/apps/charterafrica/src/components/Repository/Repository.snap.js
@@ -3,7 +3,7 @@
 exports[`<Repository /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
     href="https://charter.africa"
     rel="noreferrer noopener"
     target="_blank"
@@ -15,22 +15,22 @@ exports[`<Repository /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
         >
           Repository 1
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
         >
           Charter Africa website
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
         >
           React, Next.js, TypeScript
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
         >
           October 1, 2021
         </div>
@@ -45,16 +45,16 @@ exports[`<Repository /> renders unchanged 1`] = `
             sx="[object Object]"
           />
           <div
-            class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
           >
             100
           </div>
         </div>
         <div
-          class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
+          class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
           >
             PUBLIC
           </span>
diff --git a/apps/charterafrica/src/components/Resources/Resources.snap.js b/apps/charterafrica/src/components/Resources/Resources.snap.js
index d14fed9a9..8b6acc5e4 100644
--- a/apps/charterafrica/src/components/Resources/Resources.snap.js
+++ b/apps/charterafrica/src/components/Resources/Resources.snap.js
@@ -6,7 +6,7 @@ exports[`<Resources /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <h1
-      class="MuiTypography-root MuiTypography-h1Small css-1h09don-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h1Small css-1qj3dn7-MuiTypography-root"
     >
       Our Resources
     </h1>
@@ -20,11 +20,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-7lnogv"
+            class="MuiBox-root css-1rtaf4d"
           >
             <img
               alt="Tools"
-              class="css-cawze6"
+              class="css-1pkrzn9"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -39,11 +39,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1kn3429"
+              class="MuiBox-root css-1upx2vz"
             >
               <img
                 alt="Tools"
-                class="css-qv2885"
+                class="css-g98gbd"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -55,12 +55,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
               >
                 Tools
               </h6>
@@ -75,11 +75,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-3245q2"
+            class="MuiBox-root css-1laq4ye"
           >
             <img
               alt="People"
-              class="css-cawze6"
+              class="css-1pkrzn9"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -94,11 +94,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1kn3429"
+              class="MuiBox-root css-1upx2vz"
             >
               <img
                 alt="People"
-                class="css-qv2885"
+                class="css-g98gbd"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -110,12 +110,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
               >
                 People
               </h6>
@@ -130,11 +130,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-1ot2317"
+            class="MuiBox-root css-13llbsm"
           >
             <img
               alt="Organisations"
-              class="css-cawze6"
+              class="css-1pkrzn9"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -149,11 +149,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1kn3429"
+              class="MuiBox-root css-1upx2vz"
             >
               <img
                 alt="Organisations"
-                class="css-qv2885"
+                class="css-g98gbd"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -165,12 +165,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
               >
                 Organisations
               </h6>
@@ -185,11 +185,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-ms2f5w"
+            class="MuiBox-root css-16b4vs5"
           >
             <img
               alt="Data"
-              class="css-cawze6"
+              class="css-1pkrzn9"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -204,11 +204,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1kn3429"
+              class="MuiBox-root css-1upx2vz"
             >
               <img
                 alt="Data"
-                class="css-qv2885"
+                class="css-g98gbd"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -220,12 +220,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
               >
                 Data
               </h6>
diff --git a/apps/charterafrica/src/components/RichText/RichText.snap.js b/apps/charterafrica/src/components/RichText/RichText.snap.js
index 2e6e895c1..b98f92b3c 100644
--- a/apps/charterafrica/src/components/RichText/RichText.snap.js
+++ b/apps/charterafrica/src/components/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-1b0ebrt-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-rl8zr9-MuiTypography-root-MuiLink-root"
         href="/"
       >
         here
diff --git a/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js b/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
index 5c5344fb4..8dd8dc131 100644
--- a/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
@@ -3,39 +3,34 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-icxi44-MuiInputBase-root-MuiOutlinedInput-root"
+    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r8h7yy-MuiInputBase-root-MuiOutlinedInput-root"
   >
     <input
-      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
+      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
       type="search"
       value=""
     />
     <button
       aria-label="search"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
-      id=":r0:"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-      />
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
     </button>
     <fieldset
       aria-hidden="true"
-      class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
+      class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
     >
       <legend
-        class="css-w4cd9x"
+        class="css-ihdtdm"
       >
         <span
-          aria-hidden="true"
           class="notranslate"
         >
           ​
diff --git a/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
index d21752ad4..b2abdcd04 100644
--- a/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -6,7 +6,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
     class="MuiStack-root css-v2woy3-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
     >
       Sample Title
     </div>
@@ -20,7 +20,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -32,7 +32,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -44,7 +44,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
index 6745cffab..55b3f7a92 100644
--- a/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-v2woy3-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js b/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
index ce29b5352..bb9dff915 100644
--- a/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
+++ b/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<SpotlightCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-eleo5s-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-qb1xc-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/charterafrica/src/components/Switch/Switch.snap.js b/apps/charterafrica/src/components/Switch/Switch.snap.js
index 161533812..1343ea3d5 100644
--- a/apps/charterafrica/src/components/Switch/Switch.snap.js
+++ b/apps/charterafrica/src/components/Switch/Switch.snap.js
@@ -3,21 +3,21 @@
 exports[`<Switch /> renders unchanged 1`] = `
 <div>
   <span
-    class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
+    class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
   >
     <span
-      class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-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-j8yymo"
+        class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
         type="checkbox"
       />
       <span
-        class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
+        class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
       />
     </span>
     <span
-      class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
+      class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
     />
   </span>
 </div>
diff --git a/apps/charterafrica/src/components/Tool/Tool.snap.js b/apps/charterafrica/src/components/Tool/Tool.snap.js
index 0fa38d022..0a174d5a6 100644
--- a/apps/charterafrica/src/components/Tool/Tool.snap.js
+++ b/apps/charterafrica/src/components/Tool/Tool.snap.js
@@ -6,7 +6,7 @@ exports[`<Tool /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1twjo67-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ft7bnu-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-xgaee2-MuiGrid-root"
@@ -19,7 +19,7 @@ exports[`<Tool /> renders unchanged 1`] = `
           >
             <img
               alt="Tool Name"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1bh3fh5-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-3fnss6-MuiCardMedia-root"
               src="https://opengraph.githubassets.com/cdea3047f304ac30905b3f49eb4abdb00f2972aab918177244a0f111ea1348c7/CodeForAfrica/ui"
             />
           </div>
@@ -30,7 +30,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-kpcj8u"
             >
               <div
-                class="MuiTypography-root MuiTypography-h2SemiBold css-17o5qlc-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h2SemiBold css-1cs3fm2-MuiTypography-root"
               >
                 Tool Name
               </div>
@@ -47,14 +47,14 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
                   class="MuiBox-root css-1isemmb"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-ikfbaa-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-t7jmp9-MuiTypography-root"
                   >
                     30
                   </div>
@@ -65,14 +65,14 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
                   class="MuiBox-root css-1isemmb"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-ikfbaa-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-t7jmp9-MuiTypography-root"
                   >
                     -
                   </div>
@@ -83,7 +83,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
@@ -95,7 +95,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
@@ -107,12 +107,12 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-485ol6"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1 css-1wmw42j-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-2vraz5-MuiTypography-root"
               >
                 Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, urna enim nulla iaculis taciti semper parturient laoreet luctus, orci ac ornare senectus posuere nam libero. Imperdiet turpis tortor nu. Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, urna enim nulla iaculis taciti semper parturient laoreet luctus, orci ac ornare senectus posuere nam libero. Imperdiet turpis tortor nu.
               </div>
               <div
-                class="MuiTypography-root MuiTypography-captionCap css-1ufzz7k-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-captionCap css-k3l1ri-MuiTypography-root"
               >
                 undefined 6 Months ago
               </div>
@@ -123,7 +123,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   class="MuiStack-root css-82jnlo-MuiStack-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
                   >
                     Share via
                   </div>
@@ -137,7 +137,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -149,7 +149,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -161,7 +161,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -185,26 +185,25 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-19midj6"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-67az7o-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-zw0u9l-MuiTypography-root"
               >
                 Contributors
               </div>
               <div
-                class="MuiAvatarGroup-root css-p6rq2z-MuiAvatarGroup-root"
-                style="--AvatarGroup-spacing: -8px;"
+                class="MuiAvatarGroup-root css-1qcltu-MuiAvatarGroup-root"
               >
                 <div
-                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-oe639b-MuiAvatar-root"
+                  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-1b5yuar-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
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -215,12 +214,12 @@ 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-1b5yuar-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
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -231,12 +230,12 @@ 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-1b5yuar-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
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -247,12 +246,12 @@ 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-1b5yuar-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
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -271,21 +270,21 @@ exports[`<Tool /> renders unchanged 1`] = `
         class="MuiBox-root css-19midj6"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3Small css-fb0m73-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3Small css-tr3bum-MuiTypography-root"
         >
           More tools
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-2l6o4x-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-hamzp9-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
@@ -296,7 +295,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <img
-                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
+                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
                       src="/static/images/react.png"
                     />
                   </div>
@@ -304,13 +303,13 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
+                      class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
                     >
                       <div
                         class="MuiBox-root css-gg4vpm"
                       >
                         <h5
-                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
+                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
                         >
                           React
                         </h5>
@@ -323,7 +322,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -332,7 +331,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -341,19 +340,18 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
                       </div>
                       <div
-                        class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
                       >
                         A JavaScript library for building user interfaces
                       </div>
                       <button
-                        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-1rpch82-MuiButtonBase-root-MuiButton-root"
-                        id=":r0:"
+                        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"
                       />
@@ -361,7 +359,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
                 />
               </button>
             </div>
@@ -370,10 +368,10 @@ exports[`<Tool /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
@@ -384,7 +382,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <img
-                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
+                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
                       src="/static/images/nodejs.png"
                     />
                   </div>
@@ -392,13 +390,13 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
+                      class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
                     >
                       <div
                         class="MuiBox-root css-gg4vpm"
                       >
                         <h5
-                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
+                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
                         >
                           Node.js
                         </h5>
@@ -411,7 +409,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -420,7 +418,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -429,19 +427,18 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
                       </div>
                       <div
-                        class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1rpch82-MuiButtonBase-root-MuiButton-root"
-                        id=":r1:"
+                        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"
                       />
@@ -449,7 +446,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
                 />
               </button>
             </div>
diff --git a/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js b/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
index 4071ccaa1..0090243ed 100644
--- a/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
+++ b/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
@@ -3,10 +3,10 @@
 exports[`<ToolCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
@@ -17,7 +17,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
         >
           <img
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
             src="/image.jpg"
           />
         </div>
@@ -25,13 +25,13 @@ exports[`<ToolCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
+            class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
           >
             <div
               class="MuiBox-root css-gg4vpm"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
               >
                 Tool Name
               </h5>
@@ -44,7 +44,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
@@ -53,7 +53,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
@@ -62,19 +62,18 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
             </div>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
             >
               Sample description
             </div>
             <button
-              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-1rpch82-MuiButtonBase-root-MuiButton-root"
-              id=":r0:"
+              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"
             />
@@ -82,7 +81,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js b/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
index 4e022617f..a64e9589b 100644
--- a/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
+++ b/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
@@ -3,7 +3,7 @@
 exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiBox-root css-f0o1et"
+    class="MuiBox-root css-s11qj8"
   >
     <div
       aria-label="Video Player"
diff --git a/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js b/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
index 4fef7c2fe..deb2b30fd 100644
--- a/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-s4bhv7-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1omx1yq-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js b/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
index a6c15c9ce..14102b70a 100644
--- a/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardContent /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
+    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js b/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
index 888ea9e03..ef6d13f74 100644
--- a/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1exhmjd-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-dwzvxo-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js b/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
index ddcbe550e..97818fb0d 100644
--- a/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleGrid /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
diff --git a/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js b/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
index a92fc827e..409c4f80c 100644
--- a/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
@@ -3,13 +3,13 @@
 exports[`<ArticleHeader /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1acs8ar-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12qr4r4-MuiContainer-root"
   >
     <div
       class="MuiStack-root css-yhfzs2-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
       >
         Share This Article
       </div>
@@ -24,7 +24,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -37,7 +37,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -50,7 +50,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
index b5efc5ee4..f8eca7cba 100644
--- a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
+++ b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
@@ -6,11 +6,11 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <figure
-      class="MuiBox-root css-ayi7je"
+      class="MuiBox-root css-1ne42gc"
     >
       <img
         alt="Article"
-        class="css-dqrju9"
+        class="css-45v618"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
@@ -21,15 +21,15 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       />
     </figure>
     <header
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tqqwnc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cnnhfl-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-body2 css-1iin45x-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body2 css-f7w8um-MuiTypography-root"
       >
         Sept 1, 2021
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-1orudy1-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-16gyjy8-MuiTypography-root"
       >
         Article
       </div>
@@ -37,7 +37,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-yhfzs2-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
         >
           Share This Article
         </div>
@@ -52,7 +52,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -65,7 +65,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -78,7 +78,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -87,16 +87,16 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </header>
     <section
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-333pmc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-z5w0rf-MuiContainer-root"
     />
     <address
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1e1o0rh-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1o0bwi8-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
         >
           Article by
         </div>
@@ -104,12 +104,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-1niho6o-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-1vs3box-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-9bszke-MuiTypography-root"
           >
             Author 1
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
           >
             Author 1 bio
           </div>
@@ -119,7 +119,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
         >
           Article by
         </div>
@@ -127,12 +127,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-1niho6o-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-1vs3box-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-9bszke-MuiTypography-root"
           >
             Author 2
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
           >
             Author 2 bio
           </div>
@@ -140,27 +140,27 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </address>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16bepat-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ke15ni-MuiContainer-root"
     >
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-102tpll-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fwha7w-MuiContainer-root"
     >
       <div
-        class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-962wsk-MuiToggleButtonGroup-root"
+        class="MuiToggleButtonGroup-root css-1ie26o5-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 css-p9r9ld-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-1463e5x-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
           href="/tag1?tag=tag2"
           tabindex="0"
           value="tag2"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
           >
             tag2
           </span>
diff --git a/apps/civicsignalblog/src/components/Articles/Articles.snap.js b/apps/civicsignalblog/src/components/Articles/Articles.snap.js
index baa70df0a..4e124e312 100644
--- a/apps/civicsignalblog/src/components/Articles/Articles.snap.js
+++ b/apps/civicsignalblog/src/components/Articles/Articles.snap.js
@@ -4,7 +4,7 @@ exports[`<Articles /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
@@ -13,7 +13,7 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-17kpph-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h4 css-19d2xq6-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-19yntcu-MuiTypography-root"
           >
             Title
           </div>
@@ -21,14 +21,14 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiStack-root css-kbcct1-MuiStack-root"
           >
             <div
-              class="MuiFormControl-root MuiTextField-root css-zfsxrv-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiTextField-root css-1w88xu6-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-py2cs6-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wq2s8-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r0:"
                   placeholder="Search"
                   type="search"
@@ -36,30 +36,25 @@ exports[`<Articles /> renders unchanged 1`] = `
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-                  id=":r1:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-w4cd9x"
+                    class="css-ihdtdm"
                   >
                     <span
-                      aria-hidden="true"
                       class="notranslate"
                     >
                       ​
@@ -69,41 +64,41 @@ exports[`<Articles /> renders unchanged 1`] = `
               </div>
             </div>
             <div
-              class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1k5glp4-MuiToggleButtonGroup-root"
+              class="MuiToggleButtonGroup-root css-14ffl62-MuiToggleButtonGroup-root"
               role="group"
             >
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="All"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
                 >
                   All
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag1"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
                 >
                   tag1
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag2"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
                 >
                   tag2
                 </span>
@@ -115,10 +110,10 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-cy97kn-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1rzqy2p-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-81wvh9-MuiPaper-root-MuiCard-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ejc43j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1gjmvym-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
               href="/stories/article-1"
               tabindex="0"
             >
@@ -130,7 +125,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 >
                   <img
                     alt="Featured Article Image"
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14iqzpr-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14h10vz-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                 </div>
@@ -138,28 +133,27 @@ exports[`<Articles /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
+                    class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </p>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
                     >
                       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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-17irh2o-MuiButtonBase-root-MuiButton-root"
-                      id=":r2:"
+                      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-p3imlw-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
                       Read More
                     </button>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
@@ -172,16 +166,15 @@ exports[`<Articles /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
+                      class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
                     >
                       <h1
-                        class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-rlqp7e-MuiButtonBase-root-MuiButton-root"
-                        id=":r3:"
+                        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-4mulzs-MuiButtonBase-root-MuiButton-root"
                         tabindex="0"
                         type="button"
                       >
@@ -192,7 +185,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
               />
             </a>
           </div>
@@ -201,39 +194,39 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1nco2t7-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-1t2i2wj-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-mxdmwy-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
             >
               <div
-                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-16ehw7m-MuiPaper-root-MuiCard-root"
+                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1u025w9-MuiPaper-root-MuiCard-root"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1w94mff-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1nkr5oe-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
                   href="/stories/article-1"
                   tabindex="0"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-r4yojg-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qxudtl-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                   <div
-                    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
+                    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
                   >
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </h6>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
                   </div>
                   <span
-                    class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                    class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
                   />
                 </a>
               </div>
@@ -252,8 +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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-arrnye-MuiButtonBase-root-MuiButton-root"
-            id=":r4:"
+            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-s5eomh-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
diff --git a/apps/civicsignalblog/src/components/Author/Author.snap.js b/apps/civicsignalblog/src/components/Author/Author.snap.js
index bd000becc..04a4fc3d0 100644
--- a/apps/civicsignalblog/src/components/Author/Author.snap.js
+++ b/apps/civicsignalblog/src/components/Author/Author.snap.js
@@ -6,7 +6,7 @@ exports[`<Author /> renders unchanged 1`] = `
     class="MuiStack-root css-ty68jk-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
     >
       Article by
     </div>
diff --git a/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js b/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
index 0b291856c..f45f1aa3c 100644
--- a/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
+++ b/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
@@ -3,16 +3,16 @@
 exports[`<Breadcrumbs /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-160nqft-MuiTypography-root-MuiBreadcrumbs-root"
+    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1yleyq8-MuiTypography-root-MuiBreadcrumbs-root"
   >
     <ol
-      class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
+      class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
     >
       <li
         class="MuiBreadcrumbs-li"
       >
         <a
-          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
           href="/projects"
         >
           Our Work
@@ -20,7 +20,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
+        class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
       >
         /
       </li>
@@ -28,7 +28,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
         class="MuiBreadcrumbs-li"
       >
         <div
-          class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
         >
           Initiatives
         </div>
diff --git a/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js b/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
index b0437ea7c..f60c64a80 100644
--- a/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
+++ b/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
@@ -3,17 +3,17 @@
 exports[`<CMSContent /> renders unchanged 1`] = `
 <div>
   <section
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-17be2kn"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
       >
         Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-nzp4fb-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-147dsfb-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://whomakesthenews.org/gmmp-2020-final-reports/"
           rel="noreferrer noopener"
           target="_blank"
@@ -23,17 +23,17 @@ exports[`<CMSContent /> renders unchanged 1`] = `
          report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
       >
         “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
       >
         However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
       >
         Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
       </p>
@@ -42,11 +42,11 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <figure
-        class="MuiBox-root css-1ol0o2q"
+        class="MuiBox-root css-datfzi"
       >
         <img
           alt="alt"
-          class="css-nkefi2"
+          class="css-11xr7uw"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -66,7 +66,7 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <div
-        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
       >
         <iframe
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js b/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
index bcf8012b2..d3eb6d4bb 100644
--- a/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
+++ b/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
@@ -3,12 +3,12 @@
 exports[`<ChoiceChip /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
+    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
     role="button"
     tabindex="0"
   >
     <span
-      class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+      class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
     />
   </div>
 </div>
diff --git a/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js b/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
index e49403cdd..6194c4217 100644
--- a/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
+++ b/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
@@ -3,7 +3,7 @@
 exports[`<ChoiceChipGroup /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-t9hjzu-MuiToggleButtonGroup-root"
+    class="MuiToggleButtonGroup-root css-155203t-MuiToggleButtonGroup-root"
     role="group"
   />
 </div>
diff --git a/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js b/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
index 298899b69..b0c0657b4 100644
--- a/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
+++ b/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
@@ -6,16 +6,15 @@ exports[`<CustomPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-lso55o"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1jpj0cn-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-17rh705-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-1k47aja-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-99nlzo-MuiTypography-root"
       >
         About Us
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-ehpc6x-MuiTypography-root"
-        style="--Typography-textAlign: center;"
+        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-1ar65j8-MuiTypography-root"
       >
         We are Africa’s largest network of civic technology and data journalism labs
       </h2>
diff --git a/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js b/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
index 2cd3a56c8..b72c6b33a 100644
--- a/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
+++ b/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
@@ -3,10 +3,10 @@
 exports[`<FeaturedArticle /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1rzqy2p-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-81wvh9-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ejc43j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1gjmvym-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/stories/article-1"
       tabindex="0"
     >
@@ -18,7 +18,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         >
           <img
             alt="Featured Article Image"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14iqzpr-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14h10vz-MuiCardMedia-root"
             src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
           />
         </div>
@@ -26,28 +26,27 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
+            class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
             >
               Battle for gender equality in African media continues
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-17irh2o-MuiButtonBase-root-MuiButton-root"
-              id=":r0:"
+              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-p3imlw-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             >
               Read Story
             </button>
             <span
-              class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
             >
               Jan 6, 2022
             </span>
@@ -60,16 +59,15 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
+              class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
               >
                 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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-rlqp7e-MuiButtonBase-root-MuiButton-root"
-                id=":r1:"
+                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-4mulzs-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
@@ -80,7 +78,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js b/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
index 5bde794f6..1002271d6 100644
--- a/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
+++ b/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
@@ -6,44 +6,39 @@ exports[`<FilterBar /> renders unchanged 1`] = `
     class="MuiStack-root css-7ziy04-MuiStack-root"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root css-zfsxrv-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-1w88xu6-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-py2cs6-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wq2s8-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           type="search"
           value=""
         />
         <button
           aria-label="search"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-          id=":r1:"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
           tabindex="0"
           type="button"
         >
-          <span
-            class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-          />
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 16 16"
           />
         </button>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-w4cd9x"
+            class="css-ihdtdm"
           >
             <span
-              aria-hidden="true"
               class="notranslate"
             >
               ​
@@ -53,17 +48,17 @@ exports[`<FilterBar /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1k5glp4-MuiToggleButtonGroup-root"
+      class="MuiToggleButtonGroup-root css-14ffl62-MuiToggleButtonGroup-root"
       role="group"
     >
       <div
-        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
+        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
         role="button"
         tabindex="0"
         value="tag"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
         >
           tag
         </span>
diff --git a/apps/civicsignalblog/src/components/Footer/Footer.snap.js b/apps/civicsignalblog/src/components/Footer/Footer.snap.js
index bd649722a..d2e2211b9 100644
--- a/apps/civicsignalblog/src/components/Footer/Footer.snap.js
+++ b/apps/civicsignalblog/src/components/Footer/Footer.snap.js
@@ -6,7 +6,7 @@ exports[`<Footer /> renders unchanged 1`] = `
     class="MuiBox-root css-uokh7t"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
diff --git a/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js b/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
index 80c5442a7..e66ca0117 100644
--- a/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormExternalEmbed /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
     >
       <iframe
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js b/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
index 4e584c879..92e9b62d8 100644
--- a/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormMedia /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <figure
-      class="MuiBox-root css-1ol0o2q"
+      class="MuiBox-root css-datfzi"
     >
       <img
         alt="alt"
-        class="css-nkefi2"
+        class="css-11xr7uw"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
diff --git a/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
index 2f083ce12..6a991478d 100644
--- a/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-17be2kn"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
     >
       Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-nzp4fb-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-147dsfb-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="https://whomakesthenews.org/gmmp-2020-final-reports/"
         rel="noreferrer noopener"
         target="_blank"
@@ -20,17 +20,17 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
        report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
     >
       “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
     >
       However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
     >
       Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
     </p>
diff --git a/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
index 2dc2fadda..90da31bad 100644
--- a/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -12,7 +12,7 @@ exports[`<MobileNavigation /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <button
-        class="MuiButtonBase-root css-68ofh6-MuiButtonBase-root"
+        class="MuiButtonBase-root css-drm4qu-MuiButtonBase-root"
         tabindex="0"
         type="button"
       >
diff --git a/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js b/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
index e27020759..0f0419207 100644
--- a/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
+++ b/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
@@ -3,14 +3,13 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-8dwgit-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
-    style="--Paper-shadow: none;"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1sr66oj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1twxsqv-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-l73zrm-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -22,7 +21,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-68ofh6-MuiButtonBase-root"
+              class="MuiButtonBase-root css-drm4qu-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
diff --git a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
index 59a65636a..58b692753 100644
--- a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,67 +6,67 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
         href="/our-work"
       >
         Our Work
       </a>
     </li>
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         About
       </a>
     </li>
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         Stories
       </a>
     </li>
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
         href="/opportunity"
       >
         Opportunity
       </a>
     </li>
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
         href="/contact"
       >
         Contact
       </a>
     </li>
     <li
-      class="css-1gfen40"
+      class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1iki3ku-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mwhxb7-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -76,17 +76,17 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </li>
     <li
-      class="css-1gfen40"
+      class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1iki3ku-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mwhxb7-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
diff --git a/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js b/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
index e1dc0c40e..0f36178b8 100644
--- a/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
+++ b/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
@@ -6,7 +6,7 @@ exports[`<NewsletterSubscription /> renders unchanged 1`] = `
     class="MuiStack-root css-4qg6bb-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-6c00cf-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16j77y-MuiTypography-root"
     >
       
           
diff --git a/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js b/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
index 652d13294..a75de14a9 100644
--- a/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
+++ b/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
@@ -6,17 +6,16 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-arrnye-MuiButtonBase-root-MuiButton-root"
-      id=":r0:"
+      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-s5eomh-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
       type="button"
     >
       <span
-        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
+        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
           focusable="false"
           style="font-size: 16px;"
           viewbox="0 0 32 32"
diff --git a/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js b/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
index e48e741ee..2d3fcb5ea 100644
--- a/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
@@ -6,10 +6,10 @@ exports[`<PageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-17eyxl5"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1h88o2a-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j4752t-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-8lni03-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-pb7s0c-MuiTypography-root"
       >
         Contact
       </h2>
@@ -17,7 +17,7 @@ exports[`<PageHeader /> renders unchanged 1`] = `
         class="MuiBox-root css-0"
       >
         <h2
-          class="MuiTypography-root MuiTypography-h2 css-1hmh46k-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h2 css-vb0iat-MuiTypography-root"
         >
           Let's
           <strong>
diff --git a/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js b/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
index a7743b1fe..5490c4a9d 100644
--- a/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
+++ b/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
@@ -3,47 +3,47 @@
 exports[`<RelatedStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1j30eyg-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1pmgh96-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-es9ltw-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-13spjgy-MuiTypography-root"
     >
       Related Stories
     </div>
     <div
-      class="MuiGrid-root MuiGrid-container css-9nfmm8-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-16q497u-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-16ehw7m-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1u025w9-MuiPaper-root-MuiCard-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1w94mff-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1nkr5oe-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
             href="/stories/article-1"
             tabindex="0"
           >
             <img
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-r4yojg-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qxudtl-MuiCardMedia-root"
               src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
             />
             <div
-              class="MuiCardContent-root css-qkirah-MuiCardContent-root"
+              class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
               >
                 Battle for gender equality in African media continues
               </h6>
               <span
-                class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
               >
                 Jan 6, 2022
               </span>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
             />
           </a>
         </div>
diff --git a/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js b/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
index 23e6fe76d..634729ac6 100644
--- a/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
@@ -3,44 +3,39 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiFormControl-root MuiTextField-root css-14soxr1-MuiFormControl-root-MuiTextField-root"
+    class="MuiFormControl-root MuiTextField-root css-1vpmlj9-MuiFormControl-root-MuiTextField-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-irp64v-MuiInputBase-root-MuiOutlinedInput-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-3h83u3-MuiInputBase-root-MuiOutlinedInput-root"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-ucicrb-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-krewe6-MuiInputBase-input-MuiOutlinedInput-input"
         id=":r0:"
         type="search"
         value=""
       />
       <button
         aria-label="search"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-        id=":r1:"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
       <fieldset
         aria-hidden="true"
-        class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
       >
         <legend
-          class="css-w4cd9x"
+          class="css-ihdtdm"
         >
           <span
-            aria-hidden="true"
             class="notranslate"
           >
             ​
diff --git a/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js b/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
index 82909b898..5b9ff41ad 100644
--- a/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
+++ b/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
@@ -3,10 +3,10 @@
 exports[`<SectionDivider /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
   >
     <hr
-      class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
+      class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
     />
   </div>
 </div>
diff --git a/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js b/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
index aa39e3e64..024d802f0 100644
--- a/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
+++ b/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
@@ -10,7 +10,7 @@ exports[`<FacebookShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -28,7 +28,7 @@ exports[`<LinkedinShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -46,7 +46,7 @@ exports[`<TwitterShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
index 9a120c537..65fa86dfe 100644
--- a/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -16,7 +16,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -29,7 +29,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -42,7 +42,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
index 9dc375017..b7b1dac90 100644
--- a/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-1vlyie4-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js b/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
index 039eb8831..bed729055 100644
--- a/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
+++ b/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
@@ -4,7 +4,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
 <div>
   <a
     aria-label="facebook"
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-1gfsfde-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-qb5hih-MuiTypography-root-MuiLink-root"
     data-mui-internal-clone-element="true"
     href="https://www.facebook.com/"
     rel="noreferrer noopener"
@@ -12,7 +12,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js b/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
index d93995f3d..2e650f842 100644
--- a/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
+++ b/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
@@ -4,15 +4,10 @@ exports[`<TooltipButton /> renders unchanged 1`] = `
 <div>
   <button
     aria-label="Title"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-1bkrgty-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-v34xym-MuiButtonBase-root-MuiIconButton-root"
     data-mui-internal-clone-element="true"
-    id=":r1:"
     tabindex="0"
     type="button"
-  >
-    <span
-      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-    />
-  </button>
+  />
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
index d2aaa9a1b..dc2824203 100644
--- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
+++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
@@ -6,10 +6,10 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-1termwk"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1cxefnp-MuiContainer-root"
     >
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-7i7a1w-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"
       >
         About Team
       </h4>
diff --git a/apps/climatemappedafrica/src/components/Card/Card.snap.js b/apps/climatemappedafrica/src/components/Card/Card.snap.js
index 64dae7242..faa79b3df 100644
--- a/apps/climatemappedafrica/src/components/Card/Card.snap.js
+++ b/apps/climatemappedafrica/src/components/Card/Card.snap.js
@@ -3,8 +3,7 @@
 exports[`<Card /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1mxzk6x-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: none;"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-s2nibj-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
index 2a9fa2039..630de530f 100644
--- a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
+++ b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
@@ -40,7 +40,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-18bgkre-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-58ah25-MuiButtonBase-root"
+              class="MuiButtonBase-root css-72d9li-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
@@ -55,10 +55,13 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
                 />
               </div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1euzdtt-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-1eogcpa-MuiTypography-root"
               >
                 Overview
               </p>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
             </button>
           </div>
         </div>
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
index 90818578b..55850b6f2 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -7,36 +7,35 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
     id="location-search"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
     >
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-19ymigm-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-wn8n2y-MuiInputBase-root"
     >
       <input
         aria-label="search"
-        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
+        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
         placeholder="Search for a location"
         type="text"
         value=""
       />
       <button
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
-        id=":r0:"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
         root="[object Object]"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-        />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
index 1eaabbed0..952ff48de 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
@@ -7,7 +7,7 @@ exports[`<TreeView /> renders unchanged 1`] = `
   >
     <ul
       aria-multiselectable="false"
-      class="MuiSimpleTreeView-root css-1o8c9x7-MuiSimpleTreeView-root"
+      class="MuiSimpleTreeView-root css-rejl51-MuiSimpleTreeView-root"
       id="mui-tree-view-1"
       role="tree"
       style="--TreeView-itemChildrenIndentation: 12px;"
@@ -15,25 +15,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-ezfdyn-MuiTreeItem2-root"
+        class="css-1uhp40g-MuiTreeItem2-root"
         id="mui-tree-view-1-annual-temperature"
         role="treeitem"
         tabindex="0"
       >
         <div
-          class="content css-df642v-MuiTreeItem2-content"
+          class="content css-tbaszv-MuiTreeItem2-content"
         >
           <div
-            class="css-13p7y6r-MuiTreeItem2-label"
+            class="css-d6m21r-MuiTreeItem2-label"
           >
             Annual Temperature
           </div>
           <div
-            class="css-1qa0aux-MuiTreeItem2-iconContainer"
+            class="css-19d0qwr-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
@@ -42,25 +42,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-ezfdyn-MuiTreeItem2-root"
+        class="css-1uhp40g-MuiTreeItem2-root"
         id="mui-tree-view-1-temperature-variation"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="content css-df642v-MuiTreeItem2-content"
+          class="content css-tbaszv-MuiTreeItem2-content"
         >
           <div
-            class="css-13p7y6r-MuiTreeItem2-label"
+            class="css-d6m21r-MuiTreeItem2-label"
           >
             Temperature Variation
           </div>
           <div
-            class="css-1qa0aux-MuiTreeItem2-iconContainer"
+            class="css-19d0qwr-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
diff --git a/apps/climatemappedafrica/src/components/Header/Header.snap.js b/apps/climatemappedafrica/src/components/Header/Header.snap.js
index af27261ed..8c0b6f63c 100644
--- a/apps/climatemappedafrica/src/components/Header/Header.snap.js
+++ b/apps/climatemappedafrica/src/components/Header/Header.snap.js
@@ -7,12 +7,12 @@ exports[`<Header /> renders unchanged 1`] = `
     title="Title with <span class="highlight">Highlight</span>"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-1qgi9z8-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-2tpb9q-MuiTypography-root"
     >
       Overline
     </div>
     <div
-      class="MuiTypography-root MuiTypography-subtitle1 css-da6zqu-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-subtitle1 css-1ymhwmr-MuiTypography-root"
     >
       A short paragraph to describe what the header is all about.
     </div>
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index 25dfc1a73..e224d01a1 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -17,10 +17,10 @@ exports[`<Hero /> renders unchanged 1`] = `
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hqp65g-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qcxpxp-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-15wb4z1-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-ljvmaf-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kvfo90-MuiGrid-root"
@@ -35,7 +35,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                 class="MuiBox-root css-b8dxf0"
               >
                 <h1
-                  class="MuiTypography-root MuiTypography-h1 css-gu7oov-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h1 css-51s2c1-MuiTypography-root"
                 >
                   Empowering action through climate data.
                 </h1>
@@ -44,7 +44,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                 class="MuiBox-root css-1733xbc"
               >
                 <h6
-                  class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
                 >
                   ClimateMapped.AFRICA helps explore, analyse, and use climate data to advocate for stronger, faster action on climate resilience and sustainability.
                 </h6>
@@ -62,36 +62,35 @@ exports[`<Hero /> renders unchanged 1`] = `
                 id="location-search"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
                 >
                   Search for a location
                 </p>
                 <div
-                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1c0cgss-MuiInputBase-root"
+                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-14f5sin-MuiInputBase-root"
                 >
                   <input
                     aria-label="search"
-                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
+                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
                     placeholder="Search for a location"
                     type="text"
                     value=""
                   />
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
-                    id=":r0:"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
                     root="[object Object]"
                     tabindex="0"
                     type="button"
                   >
-                    <span
-                      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
                       focusable="false"
                       viewBox="0 0 48 48"
                     />
+                    <span
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                    />
                   </button>
                 </div>
                 <div
diff --git a/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js b/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
index efa32e753..1ef5c8a97 100644
--- a/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
+++ b/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
@@ -6,7 +6,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
     class="MuiBox-root css-u361uw"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1q4btob-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1l22h3t-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
@@ -18,7 +18,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
             class="MuiBox-root css-0"
           >
             <div
-              class="MuiTypography-root MuiTypography-overline css-rqlamj-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-overline css-1hwczut-MuiTypography-root"
             >
               About
             </div>
@@ -26,7 +26,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
               class="MuiBox-root css-1ki7zn5"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-gu7oov-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-51s2c1-MuiTypography-root"
               >
                 Project  
                 <strong>
@@ -39,7 +39,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
               class="MuiBox-root css-1yyblq"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
               >
                 Learn more about 
                 <strong>
@@ -51,7 +51,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
                 </em>
                  and how you can help improve 
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1c4b5qt-MuiTypography-root-MuiLink-root-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1nejbix-MuiTypography-root-MuiLink-root-MuiTypography-root"
                   href="/"
                 >
                   ClimateMap
diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
index f55def9e2..32bfdc3b8 100644
--- a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
+++ b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
@@ -7,7 +7,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
     title="[object Object]"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-rqlamj-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-1hwczut-MuiTypography-root"
     >
       About
     </div>
@@ -15,7 +15,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
       class="MuiBox-root css-1xaekgw"
     >
       <h6
-        class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
       >
         Learn more about 
         <strong>
@@ -27,7 +27,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
         </em>
          and how you can help improve 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1c4b5qt-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1nejbix-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="/"
         >
           ClimateMap
diff --git a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
index 723d10f14..2ee355342 100644
--- a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
+++ b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
@@ -6,7 +6,7 @@ exports[`<Summary /> renders unchanged 1`] = `
     class="MuiBox-root css-dx4cvz"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1cxefnp-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -15,12 +15,12 @@ exports[`<Summary /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-u2oqkr-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h2 css-1vtq9iq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-yrv1vq-MuiTypography-root"
           >
             History
           </h2>
           <h5
-            class="MuiTypography-root MuiTypography-h5 css-z49wvx-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5 css-1fb4hg2-MuiTypography-root"
           >
             The ClimateMapped.AFRICA project by the CfA Datalab team is a data storytelling initiative designed to make 120 years of climate sampling data accessible to experts, journalists, concerned citizens, and researchers. This project chronicles Africa's climate history, using data storytelling techniques to present temperature trends and analysis at both national and sub-national levels
           </h5>
@@ -32,23 +32,23 @@ exports[`<Summary /> renders unchanged 1`] = `
             class="MuiBox-root css-ge1eyg"
           >
             <p
-              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
             >
               The project was focused on helping journalists at Kenyan community-based radio stations adopt data-driven digital journalism tools and techniques to improve their evidence-driven analysis and multimedia reporting on development issues. The data portal was built to help them explore, visualise and interpret development data that impacted their own communities.
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
             />
             <p
-              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
             >
               The initial project involved 14 community radio stations in eight Kenyan counties. The selected community radios are all an integral part of their local communities and broadcast not only in English and Kiswahili but also in various local languages (such as Kitaita, Borana, Samburu and Meru).
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
             />
             <p
-              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
             >
               Their listeners are mainly marginalised groups in Kenyan society and the poor rural population. The ‘Our County: Our Responsibility’ project was a partnership between 
               <strong>
diff --git a/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js b/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
index c8547587d..fcb1fa3f2 100644
--- a/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
@@ -6,10 +6,10 @@ exports[`<AboutChildPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-1dmumqp"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-b8di4k-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-h42qkr-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-kgx5jm-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-1fyy4z-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-l2rmlj-MuiGrid-root"
@@ -22,12 +22,12 @@ exports[`<AboutChildPageHeader /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-u2r8gx-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h1 css-1ivm86d-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h1 css-1iw1m6a-MuiTypography-root"
           >
             Jacobo Ottaviani
           </div>
           <div
-            class="MuiTypography-root MuiTypography-h3Light css-1tpi4ke-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3Light css-1wlmmn9-MuiTypography-root"
           >
             Chief Data Officer
           </div>
diff --git a/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js b/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
index fd408c234..51ed4fcae 100644
--- a/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
+++ b/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
@@ -6,7 +6,7 @@ exports[`<AboutPageEntity /> renders unchanged 1`] = `
     class="MuiBox-root css-1gghq2r"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-13wzzov-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ilq66o-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-15sqwg8"
diff --git a/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js b/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
index f8b159e3f..eb3499f15 100644
--- a/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
+++ b/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
@@ -13,7 +13,7 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-4xeugy-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1u8nxw3-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 64 64"
         />
@@ -25,13 +25,13 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
           class="MuiBox-root css-1htlurg"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-1l1ocre-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-zgmcj5-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-body1 css-xa0rza-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-cx4ow6-MuiTypography-root"
               >
                 Award Name
               </p>
@@ -40,7 +40,7 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-184b5ev-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-1nn8juq-MuiTypography-root"
               >
                 Month 2021
               </span>
diff --git a/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js b/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
index dcb63dd95..751e21364 100644
--- a/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1afl0o2-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-xy1jw4-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js b/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
index a6c15c9ce..14102b70a 100644
--- a/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardContent /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
+    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js b/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
index 250c858f5..0095b6a94 100644
--- a/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-8kfifd-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-w63bgl-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
index ddcbe550e..97818fb0d 100644
--- a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
+++ b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleGrid /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js b/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
index 9f9af557b..50233aceb 100644
--- a/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
+++ b/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
@@ -3,13 +3,13 @@
 exports[`<ArticleHeader /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1acs8ar-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12qr4r4-MuiContainer-root"
   >
     <div
       class="MuiStack-root css-yhfzs2-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
       >
         Share This Article
       </div>
@@ -24,7 +24,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -37,7 +37,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -50,7 +50,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
index f5b5307eb..e3ac4f60d 100644
--- a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
+++ b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
@@ -6,11 +6,11 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <figure
-      class="MuiBox-root css-11cyhif"
+      class="MuiBox-root css-nxzwqu"
     >
       <img
         alt="Article"
-        class="css-dqrju9"
+        class="css-45v618"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
@@ -21,15 +21,15 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       />
     </figure>
     <header
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tqqwnc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cnnhfl-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-body2 css-1evzhmm-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body2 css-3nqud1-MuiTypography-root"
       >
         Sept 1, 2021
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-1xqv05z-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-3hsw5e-MuiTypography-root"
       >
         Article
       </div>
@@ -37,7 +37,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-yhfzs2-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
         >
           Share This Article
         </div>
@@ -52,7 +52,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -65,7 +65,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -78,7 +78,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -87,16 +87,16 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </header>
     <section
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-333pmc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-z5w0rf-MuiContainer-root"
     />
     <address
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1e1o0rh-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1o0bwi8-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
         >
           Article by
         </div>
@@ -104,12 +104,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-3oepjh-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-5bq78h-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-1n8elks-MuiTypography-root"
           >
             Author 1
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
           >
             Author 1 bio
           </div>
@@ -119,7 +119,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
         >
           Article by
         </div>
@@ -127,12 +127,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-3oepjh-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-5bq78h-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-1n8elks-MuiTypography-root"
           >
             Author 2
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
           >
             Author 2 bio
           </div>
@@ -140,27 +140,27 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </address>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16bepat-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ke15ni-MuiContainer-root"
     >
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-102tpll-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fwha7w-MuiContainer-root"
     >
       <div
-        class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1t1qg9b-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 css-up37a5-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"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
           >
             tag2
           </span>
diff --git a/apps/codeforafrica/src/components/Articles/Articles.snap.js b/apps/codeforafrica/src/components/Articles/Articles.snap.js
index ec009a8d2..615375841 100644
--- a/apps/codeforafrica/src/components/Articles/Articles.snap.js
+++ b/apps/codeforafrica/src/components/Articles/Articles.snap.js
@@ -4,7 +4,7 @@ exports[`<Articles /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
@@ -13,7 +13,7 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-17kpph-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h4 css-10rydhy-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-iht8qd-MuiTypography-root"
           >
             Title
           </div>
@@ -21,14 +21,14 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiStack-root css-kbcct1-MuiStack-root"
           >
             <div
-              class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r0:"
                   placeholder="Search"
                   type="search"
@@ -36,30 +36,25 @@ exports[`<Articles /> renders unchanged 1`] = `
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-                  id=":r1:"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
                 >
-                  <span
-                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-w4cd9x"
+                    class="css-ihdtdm"
                   >
                     <span
-                      aria-hidden="true"
                       class="notranslate"
                     >
                       ​
@@ -69,41 +64,41 @@ exports[`<Articles /> renders unchanged 1`] = `
               </div>
             </div>
             <div
-              class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
+              class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
               role="group"
             >
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-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"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
                 >
                   All
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-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"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
                 >
                   tag1
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-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"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
                 >
                   tag2
                 </span>
@@ -115,10 +110,10 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-cy97kn-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1j78d08-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-ern672-MuiPaper-root-MuiCard-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
               href="/stories/article-1"
               tabindex="0"
             >
@@ -130,7 +125,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 >
                   <img
                     alt="Featured Article Image"
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-i04c02-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-6crdfp-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                 </div>
@@ -138,28 +133,27 @@ exports[`<Articles /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
+                    class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </p>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
                     >
                       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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1k0wfhb-MuiButtonBase-root-MuiButton-root"
-                      id=":r2:"
+                      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"
                     >
                       Read More
                     </button>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
@@ -172,16 +166,15 @@ exports[`<Articles /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
+                      class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
                     >
                       <h1
-                        class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-vwpt7m-MuiButtonBase-root-MuiButton-root"
-                        id=":r3:"
+                        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"
                       >
@@ -192,7 +185,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
               />
             </a>
           </div>
@@ -201,39 +194,39 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1nco2t7-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-1t2i2wj-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-mxdmwy-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
             >
               <div
-                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-5tgk1w-MuiPaper-root-MuiCard-root"
+                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1dxfqf3-MuiPaper-root-MuiCard-root"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
                   href="/stories/article-1"
                   tabindex="0"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1u60xul-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-gzk243-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                   <div
-                    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
+                    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
                   >
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </h6>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
                   </div>
                   <span
-                    class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+                    class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
                   />
                 </a>
               </div>
@@ -252,8 +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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-ubz8n1-MuiButtonBase-root-MuiButton-root"
-            id=":r4:"
+            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/Author/Author.snap.js b/apps/codeforafrica/src/components/Author/Author.snap.js
index db4858082..0181b8f07 100644
--- a/apps/codeforafrica/src/components/Author/Author.snap.js
+++ b/apps/codeforafrica/src/components/Author/Author.snap.js
@@ -6,7 +6,7 @@ exports[`<Author /> renders unchanged 1`] = `
     class="MuiStack-root css-ty68jk-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
     >
       Article by
     </div>
diff --git a/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js b/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
index 360d17351..ed7b7c3ca 100644
--- a/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
+++ b/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
@@ -3,16 +3,16 @@
 exports[`<Breadcrumbs /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-160nqft-MuiTypography-root-MuiBreadcrumbs-root"
+    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1yleyq8-MuiTypography-root-MuiBreadcrumbs-root"
   >
     <ol
-      class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
+      class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
     >
       <li
         class="MuiBreadcrumbs-li"
       >
         <a
-          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
           href="/projects"
         >
           Our Work
@@ -20,7 +20,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
+        class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
       >
         /
       </li>
@@ -28,7 +28,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
         class="MuiBreadcrumbs-li"
       >
         <div
-          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
         >
           Initiatives
         </div>
diff --git a/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js b/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
index 1473b1ae0..1e1be4d66 100644
--- a/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
+++ b/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
@@ -3,17 +3,17 @@
 exports[`<CMSContent /> renders unchanged 1`] = `
 <div>
   <section
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-6cogad"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://whomakesthenews.org/gmmp-2020-final-reports/"
           rel="noreferrer noopener"
           target="_blank"
@@ -23,17 +23,17 @@ exports[`<CMSContent /> renders unchanged 1`] = `
          report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
       </p>
@@ -42,11 +42,11 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <figure
-        class="MuiBox-root css-1ol0o2q"
+        class="MuiBox-root css-datfzi"
       >
         <img
           alt="alt"
-          class="css-nkefi2"
+          class="css-11xr7uw"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -66,7 +66,7 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <div
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         <iframe
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js b/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
index f8648fa7b..b142ce849 100644
--- a/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
+++ b/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
@@ -3,12 +3,12 @@
 exports[`<ChoiceChip /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-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"
   >
     <span
-      class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+      class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js b/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
index e7710b280..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 MuiToggleButtonGroup-horizontal css-13g1sjm-MuiToggleButtonGroup-root"
+    class="MuiToggleButtonGroup-root css-vw6mhb-MuiToggleButtonGroup-root"
     role="group"
   />
 </div>
diff --git a/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js b/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
index 254069966..083ccaf7e 100644
--- a/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
+++ b/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
@@ -3,10 +3,10 @@
 exports[`<ContactForm /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-142h6kb-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-7u83cd-MuiTypography-root"
     >
       
     
diff --git a/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js b/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
index 6ecb6529c..6f63e3a76 100644
--- a/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
@@ -6,16 +6,15 @@ exports[`<CustomPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-g6ohb3"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1jpj0cn-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-17rh705-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-1wffq7f-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-wy10c9-MuiTypography-root"
       >
         About Us
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-wqof5o-MuiTypography-root"
-        style="--Typography-textAlign: center;"
+        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-3preu5-MuiTypography-root"
       >
         We are Africa’s largest network of civic technology and data journalism labs
       </h2>
diff --git a/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js b/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
index 86825eb67..06e8232f1 100644
--- a/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
+++ b/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
@@ -6,7 +6,7 @@ exports[`<ErrorHero /> renders unchanged 1`] = `
     class="MuiBox-root css-f0vcxq"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-184q5a6-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x9ncny-MuiContainer-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
index 83d9ccb83..9e149e7f3 100644
--- a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
+++ b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
@@ -3,10 +3,10 @@
 exports[`<FeaturedArticle /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1j78d08-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-ern672-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/stories/article-1"
       tabindex="0"
     >
@@ -18,7 +18,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         >
           <img
             alt="Featured Article Image"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-i04c02-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-6crdfp-MuiCardMedia-root"
             src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
           />
         </div>
@@ -26,28 +26,27 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
+            class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
             >
               Battle for gender equality in African media continues
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1k0wfhb-MuiButtonBase-root-MuiButton-root"
-              id=":r0:"
+              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"
             >
               Read Story
             </button>
             <span
-              class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
             >
               Jan 6, 2022
             </span>
@@ -60,16 +59,15 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
+              class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
               >
                 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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-vwpt7m-MuiButtonBase-root-MuiButton-root"
-                id=":r1:"
+                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"
               >
@@ -80,7 +78,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js b/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
index e47911d52..5a42ea103 100644
--- a/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
+++ b/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
@@ -6,44 +6,39 @@ exports[`<FilterBar /> renders unchanged 1`] = `
     class="MuiStack-root css-7ziy04-MuiStack-root"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           type="search"
           value=""
         />
         <button
           aria-label="search"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-          id=":r1:"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
           tabindex="0"
           type="button"
         >
-          <span
-            class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-          />
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 16 16"
           />
         </button>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-w4cd9x"
+            class="css-ihdtdm"
           >
             <span
-              aria-hidden="true"
               class="notranslate"
             >
               ​
@@ -53,17 +48,17 @@ exports[`<FilterBar /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
+      class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
       role="group"
     >
       <div
-        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-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"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
         >
           tag
         </span>
diff --git a/apps/codeforafrica/src/components/Footer/Footer.snap.js b/apps/codeforafrica/src/components/Footer/Footer.snap.js
index 47b010068..b34476984 100644
--- a/apps/codeforafrica/src/components/Footer/Footer.snap.js
+++ b/apps/codeforafrica/src/components/Footer/Footer.snap.js
@@ -6,7 +6,7 @@ exports[`<Footer /> renders unchanged 1`] = `
     class="MuiBox-root css-iaw44m"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
index b1c6adf13..322b9ab75 100644
--- a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
+++ b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
@@ -6,35 +6,32 @@ exports[`<GetInTouch /> renders unchanged 1`] = `
     class="MuiBox-root css-xvn5y9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-163ljxj-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-oz8nnx-MuiTypography-root"
-          style="--Typography-textAlign: center;"
+          class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-1s1x4el-MuiTypography-root"
         >
           Are you looking to start a new project?
         </div>
         <div
-          class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-p4ptdx-MuiTypography-root"
-          style="--Typography-textAlign: center;"
+          class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-djznl0-MuiTypography-root"
         >
           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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary css-ay9u4j-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"
-          id=":r0:"
           tabindex="0"
         >
           <span
-            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-1xskro6-MuiButton-startIcon"
+            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
index 0b43cf462..87f4be844 100644
--- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
+++ b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
@@ -6,30 +6,29 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
     class="MuiBox-root css-tm3fmn"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-uuq4mx-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ftddi4-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-15pqvda-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-7mi0ln-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
-            style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
           >
             <div
-              class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
+              class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
             >
               <div
                 class="MuiBox-root css-17pohca"
               >
                 <figure
-                  class="MuiBox-root css-3k1316"
+                  class="MuiBox-root css-1lb2pcr"
                 >
                   <img
                     alt="Beneficiaries trained"
-                    class="css-qv2885"
+                    class="css-g98gbd"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -38,13 +37,13 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
                   />
                 </figure>
                 <div
-                  class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
                 >
                   Beneficiaries trained
                 </div>
               </div>
               <div
-                class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
               >
                 15000
               </div>
@@ -52,7 +51,7 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
                 class="MuiBox-root css-2ligbh"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
                 >
                   Our team makes an impact in more than 20 countries where members are present.
                 </span>
@@ -62,9 +61,8 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1ecuhjn-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"
-        id=":r0:"
         tabindex="0"
       >
         Get Involved
diff --git a/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js b/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
index e91b51ff8..175d55cd2 100644
--- a/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
+++ b/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
@@ -3,15 +3,14 @@
 exports[`<GuidingPrinciplesCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1kcakmx-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-mf2jkh-MuiPaper-root-MuiCard-root"
   >
     <img
       alt=""
-      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qz2jhi-MuiCardMedia-root"
+      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-duozqf-MuiCardMedia-root"
     />
     <div
-      class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
+      class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/Hero/Hero.snap.js b/apps/codeforafrica/src/components/Hero/Hero.snap.js
index 88896827e..ad54cac88 100644
--- a/apps/codeforafrica/src/components/Hero/Hero.snap.js
+++ b/apps/codeforafrica/src/components/Hero/Hero.snap.js
@@ -6,7 +6,7 @@ exports[`<Hero /> renders unchanged 1`] = `
     class="MuiBox-root css-1jyu2xp"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1oukqxz-MuiGrid-root"
@@ -18,11 +18,11 @@ exports[`<Hero /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-1fk4bve"
+            class="MuiBox-root css-3zt5io"
           >
             <img
               alt="Civic tech and open data labs"
-              class="css-qv2885"
+              class="css-g98gbd"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
index 5451f8bc5..f90973dbf 100644
--- a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
+++ b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
@@ -3,21 +3,20 @@
 exports[`<ImpactCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
   >
     <div
-      class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
+      class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
     >
       <div
         class="MuiBox-root css-17pohca"
       >
         <figure
-          class="MuiBox-root css-3k1316"
+          class="MuiBox-root css-1lb2pcr"
         >
           <img
             alt="Beneficiaries trained"
-            class="css-qv2885"
+            class="css-g98gbd"
             data-nimg="fill"
             decoding="async"
             loading="lazy"
@@ -26,13 +25,13 @@ exports[`<ImpactCard /> renders unchanged 1`] = `
           />
         </figure>
         <div
-          class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
         >
           Beneficiaries trained
         </div>
       </div>
       <div
-        class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
       >
         15000
       </div>
@@ -40,7 +39,7 @@ exports[`<ImpactCard /> renders unchanged 1`] = `
         class="MuiBox-root css-2ligbh"
       >
         <span
-          class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
         >
           Our team makes an impact in more than 20 countries where members are present.
         </span>
diff --git a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
index 610eadcd5..118766189 100644
--- a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
+++ b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
@@ -3,27 +3,26 @@
 exports[`<ImpactCardList /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-15pqvda-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-7mi0ln-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
-        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
       >
         <div
-          class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
+          class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
         >
           <div
             class="MuiBox-root css-17pohca"
           >
             <figure
-              class="MuiBox-root css-3k1316"
+              class="MuiBox-root css-1lb2pcr"
             >
               <img
                 alt="Beneficiaries trained"
-                class="css-qv2885"
+                class="css-g98gbd"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -32,13 +31,13 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
               />
             </figure>
             <div
-              class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
             >
               Beneficiaries trained
             </div>
           </div>
           <div
-            class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
           >
             15000
           </div>
@@ -46,7 +45,7 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
             class="MuiBox-root css-2ligbh"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
             >
               Our team makes an impact in more than 20 countries where members are present.
             </span>
diff --git a/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js b/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
index a2e2abd91..a679e1fe2 100644
--- a/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
+++ b/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormExternalEmbed /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
     >
       <iframe
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js b/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
index 4e584c879..92e9b62d8 100644
--- a/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
+++ b/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormMedia /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <figure
-      class="MuiBox-root css-1ol0o2q"
+      class="MuiBox-root css-datfzi"
     >
       <img
         alt="alt"
-        class="css-nkefi2"
+        class="css-11xr7uw"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
diff --git a/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
index 07ed453c8..6a2b574e7 100644
--- a/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-6cogad"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
     >
       Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="https://whomakesthenews.org/gmmp-2020-final-reports/"
         rel="noreferrer noopener"
         target="_blank"
@@ -20,17 +20,17 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
        report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
     >
       “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
     >
       However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
     >
       Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
     </p>
diff --git a/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js b/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
index 659cf4342..7d3cb0203 100644
--- a/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
+++ b/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
@@ -6,7 +6,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-1mkqfm9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-14agrwc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-wo9xbb-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
@@ -15,7 +15,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-qq6rd1-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h2 css-vk3q8d-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-1j82ixe-MuiTypography-root"
           >
             title
           </div>
@@ -23,7 +23,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
             class="MuiBox-root css-pxpt32"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
             >
               <strong>
                 Africa's
@@ -32,9 +32,8 @@ 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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary css-1ctsdn-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"
-            id=":r0:"
             tabindex="0"
           >
             Meet our team
@@ -44,11 +43,11 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1912ugn-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-1xjnpxv"
+            class="MuiBox-root css-97qtcq"
           >
             <img
               alt="Our offices across africa"
-              class="css-qv2885"
+              class="css-g98gbd"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
index e66d86452..e4075436f 100644
--- a/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -12,7 +12,7 @@ exports[`<MobileNavigation /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <button
-        class="MuiButtonBase-root css-qtrzli-MuiButtonBase-root"
+        class="MuiButtonBase-root css-r1bof9-MuiButtonBase-root"
         tabindex="0"
         type="button"
       >
diff --git a/apps/codeforafrica/src/components/NavBar/NavBar.snap.js b/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
index 27a2b1e19..dbf1f8339 100644
--- a/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
+++ b/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
@@ -3,14 +3,13 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1ehuqn3-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
-    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-vckksl-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1twxsqv-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-l73zrm-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -22,7 +21,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-qtrzli-MuiButtonBase-root"
+              class="MuiButtonBase-root css-r1bof9-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
diff --git a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
index 5ecbaef99..23ab46426 100644
--- a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,67 +6,67 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/our-work"
       >
         Our Work
       </a>
     </li>
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         About
       </a>
     </li>
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         Stories
       </a>
     </li>
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/opportunity"
       >
         Opportunity
       </a>
     </li>
     <li
-      class="css-9be76x"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/contact"
       >
         Contact
       </a>
     </li>
     <li
-      class="css-1gfen40"
+      class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-k5xgb-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-181jv7l-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -76,17 +76,17 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </li>
     <li
-      class="css-1gfen40"
+      class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-k5xgb-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-181jv7l-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
diff --git a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
index 9399892c8..3379eee88 100644
--- a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
+++ b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
@@ -3,21 +3,21 @@
 exports[`<NewsAndStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-6miz6g-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-zy2rzy-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-dvxtzn"
     >
       <div
-        class="MuiTypography-root MuiTypography-h4 css-3r90ab-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-304hzg-MuiTypography-root"
       >
         News and Stories
       </div>
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiCard-root css-wvkjen-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1486ctq-MuiPaper-root-MuiCard-root"
       >
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
           href="/stories/article-1"
           tabindex="0"
         >
@@ -29,7 +29,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
             >
               <img
                 alt="Featured Article Image"
-                class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-kitp2x-MuiCardMedia-root"
+                class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1hjwis2-MuiCardMedia-root"
                 src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
               />
             </div>
@@ -37,28 +37,27 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-p8r8tv-MuiGrid-root"
             >
               <div
-                class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
+                class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
                 >
                   Battle for gender equality in African media continues
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
                 >
                   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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1k0wfhb-MuiButtonBase-root-MuiButton-root"
-                  id=":r0:"
+                  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"
                 >
                   Read Story
                 </button>
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
                 >
                   Jan 6, 2022
                 </span>
@@ -71,16 +70,15 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <div
-                  class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
+                  class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
                 >
                   <h1
-                    class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
                   >
                     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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-vwpt7m-MuiButtonBase-root-MuiButton-root"
-                    id=":r1:"
+                    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"
                   >
@@ -91,14 +89,13 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
             </div>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
           />
         </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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-12l5fu5-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"
-        id=":r2:"
         tabindex="0"
       >
         Read Stories
@@ -106,7 +103,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
     </div>
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth css-1oifqm7-MuiDivider-root"
+    class="MuiDivider-root MuiDivider-fullWidth css-92tnng-MuiDivider-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
index 112a497b1..cd23fd4a0 100644
--- a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
+++ b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
@@ -6,7 +6,7 @@ exports[`<NewsletterSubscription /> renders unchanged 1`] = `
     class="MuiStack-root css-4qg6bb-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-1uz1t14-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-2lzuww-MuiTypography-root"
     >
       
           
diff --git a/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js b/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
index 2158eb318..047f7aa53 100644
--- a/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
+++ b/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
@@ -6,17 +6,16 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-ubz8n1-MuiButtonBase-root-MuiButton-root"
-      id=":r0:"
+      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-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
+        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
           focusable="false"
           style="font-size: 16px;"
           viewbox="0 0 32 32"
diff --git a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
index 97d348911..9c399b87e 100644
--- a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
+++ b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
@@ -4,20 +4,20 @@ exports[`<Opportunities /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1uesgbp-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1an3gwn-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-7ziy04-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search"
               type="search"
@@ -25,30 +25,25 @@ exports[`<Opportunities /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-              id=":r1:"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
-              <span
-                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-w4cd9x"
+                class="css-ihdtdm"
               >
                 <span
-                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
@@ -58,17 +53,17 @@ exports[`<Opportunities /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
+          class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
           role="group"
         >
           <div
-            class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-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"
           >
             <span
-              class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+              class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
             >
               All
             </span>
diff --git a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
index 211ccd851..4d340f6ae 100644
--- a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
+++ b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
@@ -3,24 +3,23 @@
 exports[`<OpportunityCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l5d74p-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-19gv4rl-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/opportunities/1"
       tabindex="0"
     >
       <img
         alt="Deputy Investigative Manager"
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1kuwa16-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
         src="https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg"
       />
       <div
-        class="MuiCardContent-root css-127evc8-MuiCardContent-root"
+        class="MuiCardContent-root css-1i9wt8r-MuiCardContent-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3 css-dvuf73-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3 css-15dwhyt-MuiTypography-root"
         >
           DEPUTY INVESTIGATIVE MANAGER: Support the fight against disinformation and transnational organised crime
         </div>
@@ -28,23 +27,22 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiBox-root css-k008qs"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1 css-uzezo2-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-1kqg5wv-MuiTypography-root"
           >
             Data Journalism
           </div>
         </div>
         <section
-          class="MuiTypography-root MuiTypography-body2 css-vao4z2-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-uf7njh-MuiTypography-root"
         >
           Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...
         </section>
       </div>
       <div
-        class="MuiCardActions-root MuiCardActions-spacing css-1dirygt-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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary css-1d7udnj-MuiButtonBase-root-MuiButton-root"
-          id=":r0:"
+          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"
         >
@@ -52,7 +50,7 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
index f37ba4d6a..25fb9daeb 100644
--- a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
+++ b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
@@ -6,24 +6,23 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
     class="MuiStack-root css-112qvrx-MuiStack-root"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l5d74p-MuiPaper-root-MuiCard-root"
-      style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-19gv4rl-MuiPaper-root-MuiCard-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
         href="/opportunities/1"
         tabindex="0"
       >
         <img
           alt="Deputy Investigative Manager"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1kuwa16-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
           src="https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg"
         />
         <div
-          class="MuiCardContent-root css-127evc8-MuiCardContent-root"
+          class="MuiCardContent-root css-1i9wt8r-MuiCardContent-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h3 css-dvuf73-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3 css-15dwhyt-MuiTypography-root"
           >
             DEPUTY INVESTIGATIVE MANAGER: Support the fight against disinformation and transnational organised crime
           </div>
@@ -31,29 +30,28 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
             class="MuiBox-root css-k008qs"
           >
             <div
-              class="MuiTypography-root MuiTypography-body1 css-uzezo2-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1kqg5wv-MuiTypography-root"
             >
               Data Journalism
             </div>
           </div>
           <section
-            class="MuiTypography-root MuiTypography-body2 css-vao4z2-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-uf7njh-MuiTypography-root"
           >
             Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...
           </section>
         </div>
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-1dirygt-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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary css-1d7udnj-MuiButtonBase-root-MuiButton-root"
-            id=":r0:"
+            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"
           />
         </div>
         <span
-          class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+          class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
         />
       </a>
     </div>
diff --git a/apps/codeforafrica/src/components/OurMission/OurMission.snap.js b/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
index d4791a029..db8bae978 100644
--- a/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
+++ b/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
@@ -3,15 +3,15 @@
 exports[`<OurMission /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-15bs9il-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ur5qos-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h4 css-6pic6-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h4 css-8s6c84-MuiTypography-root"
     >
       Our mission
     </div>
     <div
-      class="MuiTypography-root MuiTypography-h4 css-b3usaa-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h4 css-1m4iaew-MuiTypography-root"
     >
       Our mission subtitle
     </div>
@@ -19,11 +19,11 @@ exports[`<OurMission /> renders unchanged 1`] = `
       class="MuiBox-root css-ak74op"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         CfA builds digital democracy solutions that give citizens unfettered access to actionable information that empowers them to make informed decisions, which strengthens civic engagement for improved public governance and accountability. This includes building infrastructures like the continent’s largest open data portals at 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://openafrica.net/"
           rel="noreferrer noopener"
           target="_blank"
@@ -32,7 +32,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          and 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://sourceafrica.net/"
           rel="noreferrer noopener"
           target="_blank"
@@ -41,7 +41,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         . CfA incubates initiatives as diverse as the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://africandrone.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -50,7 +50,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          network, the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://pesacheck.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -59,7 +59,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          fact-checking initiative and the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://sensors.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -69,11 +69,11 @@ exports[`<OurMission /> renders unchanged 1`] = `
          air quality sensor network.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         CfA manages the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://investigate.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -82,7 +82,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          (ANCIR), which gives the continent’s top muckraking newsrooms the best possible 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://data.investigate.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -91,7 +91,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         , 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://getoutline.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -100,7 +100,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          and 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://afrileaks.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -109,7 +109,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          to help improve their ability to tackle crooked politicians, organised crime and predatory big business. CfA runs 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://academy.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -118,7 +118,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         , one of the continent’s largest 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://courses.academy.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -127,7 +127,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          initiatives for digital journalists, and seed funds cross-border collaboration. CfA’s research and analysis programme 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://civicsignal.africa/#/home"
           rel="noreferrer noopener"
           target="_blank"
@@ -137,40 +137,40 @@ exports[`<OurMission /> renders unchanged 1`] = `
          offers actionable insights to help navigate Africa’s media ecosystem and emerging civic technology sector using machine learning tools and ‘big data’ resources.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         CfA is non-partisan and does not support or oppose any political party or candidate. We do not undertake any advocacy work either for ourselves or on behalf of others.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         CfA is registered as a non-profit organisation in South Africa, registration number 168–092, and in Kenya with registration number CPR/2016/220101.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         <strong>
           Partnering for excellence
         </strong>
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         Collaborations and partnerships are at the heart of our work. To build digital democracies, we partner with organisations aligned with CfA values, acting as a catalyst for new initiatives and strengthening the local ecosystem by investing in and working through these partnerships.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         <strong>
           Guiding Principles
         </strong>
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         CfA shares a covenant with the rest of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://codeforall.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -180,30 +180,30 @@ exports[`<OurMission /> renders unchanged 1`] = `
          federation, based on the following guiding principles:
       </p>
       <ol
-        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
       >
         <li
-          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
         >
           We show what’s possible. CfA seeks to be a catalyst by lowering the political risk of experimentation through creating successful proofs of concept for liberating civic data, for building enabling technologies and for pioneering sustainable revenue models. The organisation also endeavours to lower the financial costs for technology experimentation by creating and managing ‘shared’ backbone civic technology, and availing resources for rapid innovation.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
         >
           We empower citizens. Empowering citizens is central to CfA’s theory of change. Strong democracies rely on engaged citizens who have actionable information and easy-to-use channels for making their will known. CfA works primarily with citizen organisations and civic watchdogs, including the media and also supports government and social enterprises in developing their capacity to respond meaningfully to citizens and to collaborate effectively with them.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
         >
           We are action-oriented. African societies are asymmetric: the balance of power rests with governments and corporate institutions, at the expense of citizens who are treated as passive recipients of consultation or services. CfA seeks to change this by focusing on actionable data and action-oriented tools that give agency to citizens.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
         >
           We operate in public. CfA promotes openness in our operations and in the work of our partners. All digital tools utilised are open source, and the organisation’s information is open data. CfA actively encourages documentation, sharing and collaboration, in addition to reuse of our own tools, programmes and processes, as well as those of our partners.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
         >
           We help build ecosystems. CfA actively marshals resources to support the growth of a pan-African ecosystem of civic technologists. Whenever possible, this means reusing existing tools, standards and platforms, encouraging integration and extension. CfA operates as a pan-African federation of organisations who are active members of a global community, leveraging each other’s knowledge and resources.
         </li>
diff --git a/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js b/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
index 6b44d9fd5..aaba0e48f 100644
--- a/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
+++ b/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
@@ -6,10 +6,10 @@ exports[`<OurTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-y4gfvb"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-kwletu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1clvkda-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h5Small css-1f1z9uq-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5Small css-1sc3pwv-MuiTypography-root"
       >
         Our team
       </div>
@@ -17,14 +17,14 @@ exports[`<OurTeam /> renders unchanged 1`] = `
         class="MuiStack-root css-1vi1n47-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-1dem73f-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-112en4k-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search"
               type="search"
@@ -32,30 +32,25 @@ exports[`<OurTeam /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-              id=":r1:"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
-              <span
-                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-w4cd9x"
+                class="css-ihdtdm"
               >
                 <span
-                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
diff --git a/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js b/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
index 3a160e55b..4be05b1cd 100644
--- a/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
@@ -6,15 +6,15 @@ exports[`<PageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-1mt7k12"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1h88o2a-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j4752t-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-179juyi-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-88sweq-MuiTypography-root"
       >
         Contact
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 css-16ynaea-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 css-128vzxr-MuiTypography-root"
       >
         Let’s start something together!
       </h2>
diff --git a/apps/codeforafrica/src/components/Project/Project.snap.js b/apps/codeforafrica/src/components/Project/Project.snap.js
index 0a7b63373..5b917f81f 100644
--- a/apps/codeforafrica/src/components/Project/Project.snap.js
+++ b/apps/codeforafrica/src/components/Project/Project.snap.js
@@ -6,23 +6,22 @@ exports[`<Project /> renders unchanged 1`] = `
     class="MuiBox-root css-h16mw8"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-a0mq7k-MuiPaper-root-MuiCard-root"
-        style="--Paper-shadow: none;"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-znh1og-MuiPaper-root-MuiCard-root"
       >
         <nav
-          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1fdeege-MuiTypography-root-MuiBreadcrumbs-root"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-19xgsyh-MuiTypography-root-MuiBreadcrumbs-root"
         >
           <ol
-            class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
+            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
           >
             <li
               class="MuiBreadcrumbs-li"
             >
               <a
-                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
                 href="/projects"
               >
                 Our Work
@@ -30,7 +29,7 @@ exports[`<Project /> renders unchanged 1`] = `
             </li>
             <li
               aria-hidden="true"
-              class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
+              class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
             >
               /
             </li>
@@ -38,7 +37,7 @@ exports[`<Project /> renders unchanged 1`] = `
               class="MuiBreadcrumbs-li"
             >
               <div
-                class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
               >
                 Knowedge
               </div>
@@ -47,23 +46,23 @@ exports[`<Project /> renders unchanged 1`] = `
         </nav>
         <img
           alt="knowledgeAFRICA"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
           src="https://res.cloudinary.com/code-for-africa/image/upload/v1652705959/codeforafrica/images/Property_1_PesaCheck_iahlrh.jpg"
         />
         <div
           class="MuiBox-root css-1ntmuzk"
         >
           <nav
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-niza22-MuiTypography-root-MuiBreadcrumbs-root"
+            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1y4hekn-MuiTypography-root-MuiBreadcrumbs-root"
           >
             <ol
-              class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
+              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
             >
               <li
                 class="MuiBreadcrumbs-li"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
+                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
                   href="/projects"
                 >
                   Our Work
@@ -71,7 +70,7 @@ exports[`<Project /> renders unchanged 1`] = `
               </li>
               <li
                 aria-hidden="true"
-                class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
+                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
               >
                 /
               </li>
@@ -79,7 +78,7 @@ exports[`<Project /> renders unchanged 1`] = `
                 class="MuiBreadcrumbs-li"
               >
                 <div
-                  class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
                 >
                   Knowedge
                 </div>
@@ -87,20 +86,20 @@ exports[`<Project /> renders unchanged 1`] = `
             </ol>
           </nav>
           <div
-            class="MuiCardContent-root css-t0p48k-MuiCardContent-root"
+            class="MuiCardContent-root css-nvlyan-MuiCardContent-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
+              class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
             >
               <div
                 class="MuiBox-root css-uq7i85"
               >
                 <figure
-                  class="MuiBox-root css-1kpvnft"
+                  class="MuiBox-root css-f1ltsh"
                 >
                   <img
                     alt="knowledgeAFRICA"
-                    class="css-qv2885"
+                    class="css-g98gbd"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -109,7 +108,7 @@ exports[`<Project /> renders unchanged 1`] = `
                   />
                 </figure>
                 <h4
-                  class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
                 >
                   knowledgeAFRICA
                 </h4>
@@ -117,12 +116,12 @@ exports[`<Project /> renders unchanged 1`] = `
                   class="MuiStack-root css-1v20l1v-MuiStack-root"
                 >
                   <span
-                    class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
                   >
                     knowledgeAFRICA
                   </span>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
                   >
                     Knowledge tag line
                   </div>
@@ -141,23 +140,22 @@ exports[`<Project /> renders unchanged 1`] = `
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-roxh35-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-1wyu7kr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
-              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
             >
               Launch Project
               <span
-                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
+                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -169,10 +167,10 @@ exports[`<Project /> renders unchanged 1`] = `
     </div>
   </div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-k1mu3d-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1mtya01-MuiContainer-root"
   />
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ntmmg2-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1rw4djt-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
@@ -184,7 +182,7 @@ exports[`<Project /> renders unchanged 1`] = `
           class="MuiStack-root css-1b1mat0-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
           >
             Details
           </div>
@@ -192,7 +190,7 @@ exports[`<Project /> renders unchanged 1`] = `
             class="MuiStack-root css-7d4qva-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
             >
               Share This Project
             </div>
@@ -207,7 +205,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -220,7 +218,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -233,7 +231,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -243,7 +241,7 @@ exports[`<Project /> renders unchanged 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-1o055zn-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-11319uf-MuiDivider-root"
       />
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-17q9xai-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js b/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
index 89434ac6c..577eaf383 100644
--- a/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
+++ b/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
@@ -3,11 +3,10 @@
 exports[`<ProjectCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-bl0cqu-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: none;"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1lxhh98-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-n8bttj-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-1f2y1bk-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
@@ -15,40 +14,39 @@ exports[`<ProjectCard /> renders unchanged 1`] = `
         class="MuiBox-root css-0"
       >
         <img
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
         />
       </div>
       <div
         class="MuiBox-root css-zg1vud"
       >
         <div
-          class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
+          class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
           >
             <div
               class="MuiBox-root css-uq7i85"
             >
               <h4
-                class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
               />
               <div
                 class="MuiStack-root css-1v20l1v-MuiStack-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
                 />
               </div>
             </div>
           </div>
         </div>
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary css-11lybd0-MuiButtonBase-root-MuiButton-root"
-            id=":r0:"
+            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"
           >
@@ -57,7 +55,7 @@ exports[`<ProjectCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js b/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
index ddf638b3a..8aa6c7131 100644
--- a/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
+++ b/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ProjectCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
index 5699cf1ec..beaaa7681 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
@@ -6,7 +6,7 @@ exports[`<ProjectDescription /> renders unchanged 1`] = `
     class="MuiStack-root css-4ktc6n-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5 css-t2zx3t-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5 css-d1o0u3-MuiTypography-root"
     >
       Description
     </div>
@@ -14,9 +14,8 @@ 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-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-889a7d-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"
-        id=":r0:"
         rel="noreferrer noopener"
         tabindex="0"
         target="_blank"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
index 29487369f..745054de5 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
@@ -3,10 +3,9 @@
 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-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-889a7d-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"
-    id=":r0:"
     rel="noreferrer noopener"
     tabindex="0"
     target="_blank"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
index 91ce15cc8..2cbc85ec7 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
@@ -3,7 +3,7 @@
 exports[`<ProjectDetails /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
@@ -15,7 +15,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
           class="MuiStack-root css-1b1mat0-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
           >
             Details
           </div>
@@ -23,7 +23,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
             class="MuiStack-root css-7d4qva-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
             >
               Share This Project
             </div>
@@ -38,7 +38,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -51,7 +51,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -64,7 +64,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -74,7 +74,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-1o055zn-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-11319uf-MuiDivider-root"
       />
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-17q9xai-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
index 49c41d368..e9fb87e7c 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
@@ -6,12 +6,12 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
     class="MuiStack-root css-1b1mat0-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
     >
       Details
     </div>
     <div
-      class="MuiTypography-root MuiTypography-captionCap css-1y9353b-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-captionCap css-1pz3l8n-MuiTypography-root"
     >
       Donors
     </div>
@@ -19,10 +19,10 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
       class="MuiStack-root css-1y69rbp-MuiStack-root"
     >
       <div
-        class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-991qnp-MuiChip-root"
+        class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1xpc6d0-MuiChip-root"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
         >
           World Bank
         </span>
@@ -32,7 +32,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
       class="MuiStack-root css-7d4qva-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
       >
         Share This Project
       </div>
@@ -47,7 +47,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -60,7 +60,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -73,7 +73,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
index d3d914c4c..7573610fa 100644
--- a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
@@ -6,23 +6,22 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-h16mw8"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-a0mq7k-MuiPaper-root-MuiCard-root"
-        style="--Paper-shadow: none;"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-znh1og-MuiPaper-root-MuiCard-root"
       >
         <nav
-          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1fdeege-MuiTypography-root-MuiBreadcrumbs-root"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-19xgsyh-MuiTypography-root-MuiBreadcrumbs-root"
         >
           <ol
-            class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
+            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
           >
             <li
               class="MuiBreadcrumbs-li"
             >
               <a
-                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
                 href="/projects"
               >
                 Our Work
@@ -30,7 +29,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
             </li>
             <li
               aria-hidden="true"
-              class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
+              class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
             >
               /
             </li>
@@ -38,7 +37,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
               class="MuiBreadcrumbs-li"
             >
               <div
-                class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
               >
                 Iniatives
               </div>
@@ -46,22 +45,22 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
           </ol>
         </nav>
         <img
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
         />
         <div
           class="MuiBox-root css-1ntmuzk"
         >
           <nav
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-niza22-MuiTypography-root-MuiBreadcrumbs-root"
+            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1y4hekn-MuiTypography-root-MuiBreadcrumbs-root"
           >
             <ol
-              class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
+              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
             >
               <li
                 class="MuiBreadcrumbs-li"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
+                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
                   href="/projects"
                 >
                   Our Work
@@ -69,7 +68,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
               </li>
               <li
                 aria-hidden="true"
-                class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
+                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
               >
                 /
               </li>
@@ -77,7 +76,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
                 class="MuiBreadcrumbs-li"
               >
                 <div
-                  class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
                 >
                   Iniatives
                 </div>
@@ -85,45 +84,44 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
             </ol>
           </nav>
           <div
-            class="MuiCardContent-root css-t0p48k-MuiCardContent-root"
+            class="MuiCardContent-root css-nvlyan-MuiCardContent-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
+              class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
             >
               <div
                 class="MuiBox-root css-uq7i85"
               >
                 <h4
-                  class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
                 />
                 <div
                   class="MuiStack-root css-1v20l1v-MuiStack-root"
                 >
                   <span
-                    class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-roxh35-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-1wyu7kr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
-              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
             >
               Launch Project
               <span
-                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
+                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
diff --git a/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js b/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
index b216066c9..1abea106d 100644
--- a/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
+++ b/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
@@ -3,17 +3,17 @@
 exports[`<ProjectTile /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
+    class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
   >
     <div
       class="MuiBox-root css-uq7i85"
     >
       <figure
-        class="MuiBox-root css-1kpvnft"
+        class="MuiBox-root css-f1ltsh"
       >
         <img
           alt="africanDRONE"
-          class="css-qv2885"
+          class="css-g98gbd"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -22,7 +22,7 @@ exports[`<ProjectTile /> renders unchanged 1`] = `
         />
       </figure>
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
       >
         africanDRONE
       </h4>
@@ -30,12 +30,12 @@ exports[`<ProjectTile /> renders unchanged 1`] = `
         class="MuiStack-root css-1v20l1v-MuiStack-root"
       >
         <span
-          class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
         >
           africanDRONE
         </span>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
         >
           Drones for good
         </div>
diff --git a/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js b/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
index 1dd6b224a..c4ac6a063 100644
--- a/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
+++ b/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
@@ -3,23 +3,23 @@
 exports[`<ProjectTileList /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-itewyf-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-1vcxjca-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-outlined css-g7jrtq-MuiPaper-root"
+        class="MuiPaper-root MuiPaper-outlined css-1w24b7k-MuiPaper-root"
       >
         <div
           class="MuiBox-root css-uq7i85"
         >
           <figure
-            class="MuiBox-root css-1kpvnft"
+            class="MuiBox-root css-f1ltsh"
           >
             <img
               alt="africanDRONE"
-              class="css-qv2885"
+              class="css-g98gbd"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -28,7 +28,7 @@ exports[`<ProjectTileList /> renders unchanged 1`] = `
             />
           </figure>
           <h4
-            class="MuiTypography-root MuiTypography-h4 css-1fjnnz-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-60qtjo-MuiTypography-root"
           >
             africanDRONE
           </h4>
@@ -36,12 +36,12 @@ exports[`<ProjectTileList /> renders unchanged 1`] = `
             class="MuiStack-root css-fbzq2r-MuiStack-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
             >
               africanDRONE
             </span>
             <div
-              class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
             >
               Drones for good
             </div>
diff --git a/apps/codeforafrica/src/components/Projects/Projects.snap.js b/apps/codeforafrica/src/components/Projects/Projects.snap.js
index dcd128d5e..002ba73cf 100644
--- a/apps/codeforafrica/src/components/Projects/Projects.snap.js
+++ b/apps/codeforafrica/src/components/Projects/Projects.snap.js
@@ -4,20 +4,20 @@ exports[`<Projects /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1w8a3sk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hxthm7-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-7ziy04-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search projects"
               type="search"
@@ -25,30 +25,25 @@ exports[`<Projects /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-              id=":r1:"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
               tabindex="0"
               type="button"
             >
-              <span
-                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-w4cd9x"
+                class="css-ihdtdm"
               >
                 <span
-                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
diff --git a/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js b/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
index b2aa4bc64..e3d5e2fcd 100644
--- a/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
+++ b/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
@@ -3,47 +3,47 @@
 exports[`<RelatedStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1j30eyg-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1pmgh96-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-108ogmb-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-11m9a1j-MuiTypography-root"
     >
       Related Stories
     </div>
     <div
-      class="MuiGrid-root MuiGrid-container css-9nfmm8-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-16q497u-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-5tgk1w-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1dxfqf3-MuiPaper-root-MuiCard-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
             href="/stories/article-1"
             tabindex="0"
           >
             <img
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1u60xul-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-gzk243-MuiCardMedia-root"
               src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
             />
             <div
-              class="MuiCardContent-root css-qkirah-MuiCardContent-root"
+              class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
               >
                 Battle for gender equality in African media continues
               </h6>
               <span
-                class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
               >
                 Jan 6, 2022
               </span>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
             />
           </a>
         </div>
diff --git a/apps/codeforafrica/src/components/RichText/RichText.snap.js b/apps/codeforafrica/src/components/RichText/RichText.snap.js
index c0dabe006..093b1b240 100644
--- a/apps/codeforafrica/src/components/RichText/RichText.snap.js
+++ b/apps/codeforafrica/src/components/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-ll6ja1-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-26k9w6-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="/"
       >
         here
diff --git a/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js b/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
index 824c748c3..2f01b5e1d 100644
--- a/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
@@ -3,44 +3,39 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiFormControl-root MuiTextField-root css-1af1cxr-MuiFormControl-root-MuiTextField-root"
+    class="MuiFormControl-root MuiTextField-root css-1vqv0ht-MuiFormControl-root-MuiTextField-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-1eahq4f-MuiInputBase-root-MuiOutlinedInput-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-j0rfn6-MuiInputBase-root-MuiOutlinedInput-root"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-ucicrb-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-krewe6-MuiInputBase-input-MuiOutlinedInput-input"
         id=":r0:"
         type="search"
         value=""
       />
       <button
         aria-label="search"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
-        id=":r1:"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
       <fieldset
         aria-hidden="true"
-        class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
       >
         <legend
-          class="css-w4cd9x"
+          class="css-ihdtdm"
         >
           <span
-            aria-hidden="true"
             class="notranslate"
           >
             ​
diff --git a/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js b/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
index 82909b898..5b9ff41ad 100644
--- a/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
+++ b/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
@@ -3,10 +3,10 @@
 exports[`<SectionDivider /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
   >
     <hr
-      class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
+      class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js b/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
index aa39e3e64..024d802f0 100644
--- a/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
+++ b/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
@@ -10,7 +10,7 @@ exports[`<FacebookShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -28,7 +28,7 @@ exports[`<LinkedinShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -46,7 +46,7 @@ exports[`<TwitterShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
index 9a120c537..65fa86dfe 100644
--- a/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -16,7 +16,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -29,7 +29,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -42,7 +42,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
index 474034b8e..c086f20f2 100644
--- a/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-1vlyie4-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js b/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
index ef760acb7..6f859b8f6 100644
--- a/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
+++ b/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
@@ -4,7 +4,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
 <div>
   <a
     aria-label="facebook"
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-x0889r-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-1wukk74-MuiTypography-root-MuiLink-root"
     data-mui-internal-clone-element="true"
     href="https://www.facebook.com/"
     rel="noreferrer noopener"
@@ -12,7 +12,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js b/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
index 70c5f3f91..f7aff74c5 100644
--- a/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
+++ b/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
@@ -3,22 +3,21 @@
 exports[`<TeamMemberCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-mdnsl9-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: none;"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-wixki0-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-1mxjrd2-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-18mm84o-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-184g7z0-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-ys68yq-MuiCardMedia-root"
       />
       <div
-        class="MuiCardContent-root css-3u5n2m-MuiCardContent-root"
+        class="MuiCardContent-root css-1bqtlyx-MuiCardContent-root"
       />
       <span
-        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js b/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
index d93995f3d..2e650f842 100644
--- a/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
+++ b/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
@@ -4,15 +4,10 @@ exports[`<TooltipButton /> renders unchanged 1`] = `
 <div>
   <button
     aria-label="Title"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-1bkrgty-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-v34xym-MuiButtonBase-root-MuiIconButton-root"
     data-mui-internal-clone-element="true"
-    id=":r1:"
     tabindex="0"
     type="button"
-  >
-    <span
-      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-    />
-  </button>
+  />
 </div>
 `;
diff --git a/packages/commons-ui-core/src/Copyright/Copyright.snap.js b/packages/commons-ui-core/src/Copyright/Copyright.snap.js
index 7a579a5c0..72290025f 100644
--- a/packages/commons-ui-core/src/Copyright/Copyright.snap.js
+++ b/packages/commons-ui-core/src/Copyright/Copyright.snap.js
@@ -6,12 +6,12 @@ exports[`<Copyright /> renders inchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
     >
       Code for Africa
     </div>
     <div
-      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
     >
       2024
     </div>
diff --git a/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js b/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
index 3ddadda9c..5a512f347 100644
--- a/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
+++ b/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
@@ -3,13 +3,16 @@
 exports[`ImageButton renders unchanged 1`] = `
 <div>
   <button
-    class="MuiButtonBase-root css-gks9my-MuiButtonBase-root"
+    class="MuiButtonBase-root css-1spa9k-MuiButtonBase-root"
     tabindex="0"
     type="button"
   >
     <span
       class="css-1qzaqu2"
     />
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
diff --git a/packages/commons-ui-core/src/NavBar/NavBar.snap.js b/packages/commons-ui-core/src/NavBar/NavBar.snap.js
index 310a2ad50..ac3c3c51d 100644
--- a/packages/commons-ui-core/src/NavBar/NavBar.snap.js
+++ b/packages/commons-ui-core/src/NavBar/NavBar.snap.js
@@ -3,14 +3,13 @@
 exports[`NavBar renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-18zgm56-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
-    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1fg40jf-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1u9o2lj-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-r6ewbb-MuiToolbar-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h6 css-1r1spq9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h6 css-hnscw4-MuiTypography-root"
       >
         LOGO
       </div>
diff --git a/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js b/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
index 1069c12a5..fb8c1b560 100644
--- a/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
+++ b/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
@@ -6,16 +6,16 @@ exports[`<QuickLinks /> renders inchanged 1`] = `
     class="MuiBox-root css-ufz638"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-rizt0-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
     >
       Quick Links
     </p>
     <ul
-      class="MuiTypography-root MuiTypography-body1 css-rizt0-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
     >
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-18rqtra-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-r74m4g-MuiTypography-root-MuiLink-root"
           href="/"
         >
           Home
@@ -23,7 +23,7 @@ exports[`<QuickLinks /> renders inchanged 1`] = `
       </li>
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-18rqtra-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-r74m4g-MuiTypography-root-MuiLink-root"
           href="/about"
         >
           About
diff --git a/packages/commons-ui-core/src/Section/Section.snap.js b/packages/commons-ui-core/src/Section/Section.snap.js
index 48d659686..383bd2191 100644
--- a/packages/commons-ui-core/src/Section/Section.snap.js
+++ b/packages/commons-ui-core/src/Section/Section.snap.js
@@ -4,7 +4,7 @@ exports[`<Section /> prop fixed=true (default) renders unchanged 1`] = `
 <div>
   <section
     aria-label="section"
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1dl39i7-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cyvr0l-MuiContainer-root"
   >
     <h2>
       Section heading
diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
index c75ba348d..bd2b0480c 100644
--- a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
+++ b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
@@ -3,12 +3,12 @@
 exports[`<SocialMediaIconLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1qgi5s6-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mtm6uj-MuiTypography-root-MuiLink-root"
     href="https://github.com/CodeForAfrica"
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
       focusable="false"
       viewBox="0 0 24 24"
     >
diff --git a/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js b/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
index 0cc3e608a..3503e2641 100644
--- a/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
+++ b/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
@@ -6,7 +6,7 @@ exports[`<StayInTouch /> renders unchanged 1`] = `
     class="MuiStack-root css-upk803-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-2turhu-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-1g4ok2n-MuiTypography-root"
     >
       Stay in Touch:
     </div>
diff --git a/packages/commons-ui-next/src/Figure/Figure.snap.js b/packages/commons-ui-next/src/Figure/Figure.snap.js
index 8016a3df8..2e8633315 100644
--- a/packages/commons-ui-next/src/Figure/Figure.snap.js
+++ b/packages/commons-ui-next/src/Figure/Figure.snap.js
@@ -3,11 +3,11 @@
 exports[`<Figure /> renders unchanged 1`] = `
 <div>
   <figure
-    class="MuiBox-root css-vutmxe"
+    class="MuiBox-root css-db5opy"
   >
     <img
       alt="Image"
-      class="css-qv2885"
+      class="css-g98gbd"
       data-nimg="fill"
       decoding="async"
       loading="lazy"
diff --git a/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js b/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
index 6af95dde5..b793a3a41 100644
--- a/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
+++ b/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
@@ -3,7 +3,7 @@
 exports[`<PagesRouterLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-1mtkv63-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-dr1pfv-MuiTypography-root-MuiLink-root"
     href="/"
   >
     Home
diff --git a/packages/commons-ui-next/src/Link/StyledLink.snap.js b/packages/commons-ui-next/src/Link/StyledLink.snap.js
index 56de0a824..db0e8ddea 100644
--- a/packages/commons-ui-next/src/Link/StyledLink.snap.js
+++ b/packages/commons-ui-next/src/Link/StyledLink.snap.js
@@ -3,7 +3,7 @@
 exports[`<StyledLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mtkv63-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-dr1pfv-MuiTypography-root-MuiLink-root"
     href="/"
   >
     Home
diff --git a/packages/commons-ui-payload/src/RichText/RichText.snap.js b/packages/commons-ui-payload/src/RichText/RichText.snap.js
index fc2b01701..b1ebb135f 100644
--- a/packages/commons-ui-payload/src/RichText/RichText.snap.js
+++ b/packages/commons-ui-payload/src/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-1dw4g7j-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-1ukerl5-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="/"
       >
         here
diff --git a/packages/hurumap-core/src/Action/Action.snap.js b/packages/hurumap-core/src/Action/Action.snap.js
index 18bbb7f58..fc1f6bf63 100644
--- a/packages/hurumap-core/src/Action/Action.snap.js
+++ b/packages/hurumap-core/src/Action/Action.snap.js
@@ -7,15 +7,11 @@ exports[`Action renders unchanged 1`] = `
   >
     <button
       aria-label="Action"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1dl7lzd-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-16rd89w-MuiButtonBase-root-MuiIconButton-root"
       data-mui-internal-clone-element="true"
-      id=":r1:"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-      />
       <svg
         height="100"
         width="100"
@@ -29,6 +25,9 @@ exports[`Action renders unchanged 1`] = `
           stroke-width="3"
         />
       </svg>
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
     </button>
   </div>
 </div>
diff --git a/packages/hurumap-core/src/Download/Download.snap.js b/packages/hurumap-core/src/Download/Download.snap.js
index b856eab90..d554592a9 100644
--- a/packages/hurumap-core/src/Download/Download.snap.js
+++ b/packages/hurumap-core/src/Download/Download.snap.js
@@ -12,7 +12,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1gfrinl-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
       >
         Download chart as:
       </p>
@@ -24,7 +24,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
       >
         Layout option:
       </p>
@@ -36,7 +36,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1gfrinl-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
       >
         Download data as:
       </p>
diff --git a/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js b/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
index dbd530b96..21bb81802 100644
--- a/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
+++ b/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
@@ -12,7 +12,7 @@ exports[`IndicatorTitle renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-9drkqd-MuiGrid-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h6 css-wxg01y-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h6 css-134eivx-MuiTypography-root"
         >
           <div>
             Children
diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js
index cb2d5ddf5..c0848f77a 100644
--- a/packages/hurumap-core/src/Location/Location.snap.js
+++ b/packages/hurumap-core/src/Location/Location.snap.js
@@ -57,12 +57,12 @@ exports[`Location renders unchanged 1`] = `
           class="MuiBox-root css-w6ptp5"
         >
           <h6
-            class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
           >
             Population
           </h6>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
           >
             10,000,000
           </p>
@@ -71,12 +71,12 @@ exports[`Location renders unchanged 1`] = `
           class="MuiBox-root css-w6ptp5"
         >
           <h6
-            class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
           >
             GDP
           </h6>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
           >
             10,000,000
           </p>
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
index a38a66782..c92cf918e 100644
--- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
@@ -6,12 +6,12 @@ exports[`LocationHighlight renders unchanged 1`] = `
     class="MuiBox-root css-1s0xv82"
   >
     <h6
-      class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
     >
       Population
     </h6>
     <p
-      class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
     >
       1,000,000
     </p>
diff --git a/packages/hurumap-core/src/Share/Share.snap.js b/packages/hurumap-core/src/Share/Share.snap.js
index 75a6cef9c..ec7e33dd2 100644
--- a/packages/hurumap-core/src/Share/Share.snap.js
+++ b/packages/hurumap-core/src/Share/Share.snap.js
@@ -9,7 +9,7 @@ exports[`Share renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <span
-        class="MuiTypography-root MuiTypography-caption css-1n9vc5u-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-caption css-l67hkg-MuiTypography-root"
       >
         Embed on your website:
       </span>
@@ -18,15 +18,15 @@ exports[`Share renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <div
-        class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-cmpglg-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall css-1blp12k-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
           style="background: rgb(255, 255, 255); font-size: 0.6875rem; line-height: 1.5454545454545454; color: rgb(102, 102, 102);"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1pzfmz2-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1n4twyu-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r0:"
             type="text"
             value="
@@ -70,13 +70,12 @@ exports[`Share renders unchanged 1`] = `
           />
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-w4cd9x"
+              class="css-ihdtdm"
             >
               <span
-                aria-hidden="true"
                 class="notranslate"
               >
                 ​
diff --git a/packages/hurumap-core/src/Share/ShareButton.snap.js b/packages/hurumap-core/src/Share/ShareButton.snap.js
index 81ca8a5e0..ec804119d 100644
--- a/packages/hurumap-core/src/Share/ShareButton.snap.js
+++ b/packages/hurumap-core/src/Share/ShareButton.snap.js
@@ -11,7 +11,7 @@ exports[`ShareButton renders unchanged 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1psi471-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-wsb35j-MuiSvgIcon-root"
         focusable="false"
         viewBox="0 0 24 24"
       />
diff --git a/packages/hurumap-next/src/Source/Source.snap.js b/packages/hurumap-next/src/Source/Source.snap.js
index b3e37c00c..b54076180 100644
--- a/packages/hurumap-next/src/Source/Source.snap.js
+++ b/packages/hurumap-next/src/Source/Source.snap.js
@@ -4,13 +4,13 @@ exports[`Source renders unchanged 1`] = `
 <div>
   <div>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1xlq4xj-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1u2wb76-MuiTypography-root"
     >
       Source
       : 
     </p>
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-uszb9u-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1jglad5-MuiTypography-root-MuiLink-root"
       href="https://example.com"
       rel="noreferrer noopener"
       target="_blank"

From e35fa60da695d75084317599defea64e6f2c01fe Mon Sep 17 00:00:00 2001
From: Kevin Koech <kevinkoech@MacBook-Pro.local>
Date: Fri, 17 Jan 2025 10:18:00 +0300
Subject: [PATCH 3/6] Update snapshots

---
 .../components/Accordion/Accordion.snap.js    | 372 +++++++-------
 .../src/components/Articles/Articles.snap.js  |  34 +-
 .../src/components/ComboBox/ComboBox.snap.js  |  31 +-
 .../CommunityPlatforms.snap.js                |  15 +-
 .../Consultations/Consultations.snap.js       |   4 +-
 .../ContributorCard/ContributorCard.snap.js   |  14 +-
 .../src/components/Dataset/Dataset.snap.js    |  43 +-
 .../DatasetCard/DatasetCard.snap.js           |  30 +-
 .../Datasets/DatasetFilterBar.snap.js         | 129 +++--
 .../src/components/Datasets/Datasets.snap.js  | 131 +++--
 .../DesktopNavBar/DesktopNavBar.snap.js       |  47 +-
 .../src/components/Document/Document.snap.js  |  19 +-
 .../DocumentCard/DocumentCard.snap.js         |  17 +-
 .../Documents/DocumentFilterBar.snap.js       |  51 +-
 .../components/Documents/Documents.snap.js    |  63 ++-
 .../DropdownMenu/DropdownMenu.snap.js         |   8 +-
 .../components/Ecosystem/Ecosystem.snap.js    |  88 ++--
 .../src/components/Entity/Entity.snap.js      | 163 +++---
 .../src/components/Error/Error.snap.js        |  13 +-
 .../components/ErrorPage/ErrorPage.snap.js    |  13 +-
 .../components/Explainers/Explainer.snap.js   |   8 +-
 .../components/Explainers/Explainers.snap.js  |  44 +-
 .../src/components/FAQ/FAQ.snap.js            | 376 +++++++-------
 .../FeaturedPostCard/FeaturedPostCard.snap.js |  24 +-
 .../FeaturedVideos/FeaturedVideo.snap.js      |  12 +-
 .../FeaturedVideos/FeaturedVideoCard.snap.js  |   6 +-
 .../FlourishChart/FlourishChart.snap.js       |   6 +-
 .../FocalCountries/FocalCountries.snap.js     |   6 +-
 .../src/components/Footer/Footer.snap.js      |  20 +-
 .../src/components/Grantees/Grantees.snap.js  | 486 ++++++++++--------
 .../GuidingPrinciples.snap.js                 | 376 +++++++-------
 .../src/components/Helpdesk/Helpdesk.snap.js  |  15 +-
 .../HelpdeskPageContent.snap.js               |   9 +-
 .../src/components/Hero/Hero.snap.js          |  31 +-
 .../components/Impressum/Impressum.snap.js    |  18 +-
 .../LanguageButton/LanguageButton.snap.js     |  11 +-
 .../src/components/Layout/Layout.snap.js      |  70 ++-
 .../src/components/LongForm/LongForm.snap.js  |   2 +-
 .../LongFormMediaBlock.snap.js                |   6 +-
 .../LongFormRichText/LongFormRichText.snap.js |   2 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   8 +-
 .../src/components/Mooc/Mooc.snap.js          |  10 +-
 .../src/components/NavBar/NavBar.snap.js      |  53 +-
 .../NavBarDropdown/NavBarDropdown.snap.js     |  10 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  38 +-
 .../NavBarNavMenu/NavBarNavMenu.snap.js       |  32 +-
 .../NextPrevPagination.snap.js                |   5 +-
 .../PaginationButton.snap.js                  |   3 +-
 .../OpenCloseIcon/OpenCloseIcon.snap.js       |   2 +-
 .../Opportunity/Opportunity.snap.js           |  19 +-
 .../OpportunityCard/OpportunityCard.snap.js   |  19 +-
 .../OpportunityCardGrid.snap.js               |  53 +-
 .../OpportunityCardHeader.snap.js             |   5 +-
 .../OpportunityCards/OpportunityCards.snap.js |  61 ++-
 .../OpportunityHeader.snap.js                 |   6 +-
 .../OpportunityPage/OpportunityPage.snap.js   |  97 ++--
 .../OrganisationCard/OrganisationCard.snap.js |  14 +-
 .../OrganisationImageLink.snap.js             |   9 +-
 .../PageDescription/PageDescription.snap.js   |   4 +-
 .../components/PageHeader/PageHeader.snap.js  |  10 +-
 .../src/components/PostCard/PostCard.snap.js  |  16 +-
 .../components/Repository/Repository.snap.js  |  16 +-
 .../components/Resources/Resources.snap.js    |  50 +-
 .../src/components/RichText/RichText.snap.js  |   8 +-
 .../SearchInput/SearchInput.snap.js           |  17 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   8 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SpotlightCard/SpotlightCard.snap.js       |   2 +-
 .../src/components/Switch/Switch.snap.js      |  10 +-
 .../src/components/Tool/Tool.snap.js          | 103 ++--
 .../src/components/ToolCard/ToolCard.snap.js  |  23 +-
 .../YoutubeVideoPlayer.snap.js                |   2 +-
 .../ArticleCard/ArticleCard.snap.js           |   2 +-
 .../ArticleCardContent.snap.js                |   2 +-
 .../ArticleCardMedia/ArticleCardMedia.snap.js |   2 +-
 .../ArticleGrid/ArticleGrid.snap.js           |   2 +-
 .../ArticleHeader/ArticleHeader.snap.js       |  10 +-
 .../ArticlePage/ArticlePage.snap.js           |  46 +-
 .../src/components/Articles/Articles.snap.js  |  82 +--
 .../src/components/Author/Author.snap.js      |   2 +-
 .../Breadcrumbs/Breadcrumbs.snap.js           |  10 +-
 .../components/CMSContent/CMSContent.snap.js  |  18 +-
 .../components/ChoiceChip/ChoiceChip.snap.js  |   4 +-
 .../ChoiceChipGroup/ChoiceChipGroup.snap.js   |   2 +-
 .../CustomPageHeader/CustomPageHeader.snap.js |   7 +-
 .../FeaturedArticle/FeaturedArticle.snap.js   |  26 +-
 .../components/FilterBar/FilterBar.snap.js    |  25 +-
 .../src/components/Footer/Footer.snap.js      |   2 +-
 .../LongFormExternalEmbed.snap.js             |   2 +-
 .../LongFormMedia/LongFormMedia.snap.js       |   4 +-
 .../LongFormRichText/LongFormRichText.snap.js |  10 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   2 +-
 .../src/components/NavBar/NavBar.snap.js      |   9 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  32 +-
 .../NewsletterSubscription.snap.js            |   2 +-
 .../PaginationButton.snap.js                  |   7 +-
 .../components/PageHeader/PageHeader.snap.js  |   6 +-
 .../RelatedStories/RelatedStories.snap.js     |  20 +-
 .../SearchInput/SearchInput.snap.js           |  19 +-
 .../SectionDivider/SectionDivider.snap.js     |   4 +-
 .../ShareButton/ShareButton.snap.js           |   6 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   6 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SocialMediaButton.snap.js                 |   4 +-
 .../TooltipButton/TooltipButton.snap.js       |   9 +-
 .../components/AboutTeam/AboutTeam.snap.js    |   4 +-
 .../src/components/Card/Card.snap.js          |   3 +-
 .../DataIndicators/DataIndicators.snap.js     |   7 +-
 .../DropdownSearch/DropdownSearch.snap.js     |  17 +-
 .../HURUmap/TreeView/TreeView.snap.js         |  22 +-
 .../src/components/Header/Header.snap.js      |   4 +-
 .../src/components/Hero/Hero.snap.js          |  25 +-
 .../src/components/PageHero/PageHero.snap.js  |  10 +-
 .../components/RichHeader/RichHeader.snap.js  |   6 +-
 .../src/components/Summary/Summary.snap.js    |  16 +-
 .../AboutChildPageHeader.snap.js              |   8 +-
 .../AboutPageEntity/AboutPageEntity.snap.js   |   2 +-
 .../AccoladeBadge/AccoladeBadge.snap.js       |   8 +-
 .../ArticleCard/ArticleCard.snap.js           |   2 +-
 .../ArticleCardContent.snap.js                |   2 +-
 .../ArticleCardMedia/ArticleCardMedia.snap.js |   2 +-
 .../ArticleGrid/ArticleGrid.snap.js           |   2 +-
 .../ArticleHeader/ArticleHeader.snap.js       |  10 +-
 .../ArticlePage/ArticlePage.snap.js           |  46 +-
 .../src/components/Articles/Articles.snap.js  |  82 +--
 .../src/components/Author/Author.snap.js      |   2 +-
 .../Breadcrumbs/Breadcrumbs.snap.js           |  10 +-
 .../components/CMSContent/CMSContent.snap.js  |  18 +-
 .../components/ChoiceChip/ChoiceChip.snap.js  |   4 +-
 .../ChoiceChipGroup/ChoiceChipGroup.snap.js   |   2 +-
 .../ContactForm/ContactForm.snap.js           |   4 +-
 .../CustomPageHeader/CustomPageHeader.snap.js |   7 +-
 .../components/ErrorHero/ErrorHero.snap.js    |   2 +-
 .../FeaturedArticle/FeaturedArticle.snap.js   |  26 +-
 .../components/FilterBar/FilterBar.snap.js    |  25 +-
 .../src/components/Footer/Footer.snap.js      |   2 +-
 .../components/GetInTouch/GetInTouch.snap.js  |  15 +-
 .../GetInvolved/GetInvolved.snap.js           |  22 +-
 .../GuidingPrinciplesCard.snap.js             |   7 +-
 .../src/components/Hero/Hero.snap.js          |   6 +-
 .../components/ImpactCard/ImpactCard.snap.js  |  15 +-
 .../ImpactCardList/ImpactCardList.snap.js     |  17 +-
 .../src/components/Input/Input.snap.js        |  35 ++
 .../LongFormExternalEmbed.snap.js             |   2 +-
 .../LongFormMedia/LongFormMedia.snap.js       |   4 +-
 .../LongFormRichText/LongFormRichText.snap.js |  10 +-
 .../MeetOurTeam/MeetOurTeam.snap.js           |  13 +-
 .../MobileNavBar/MobileNavBar.snap.js         |   2 +-
 .../src/components/NavBar/NavBar.snap.js      |   9 +-
 .../NavBarNavList/NavBarNavList.snap.js       |  32 +-
 .../NewsAndStories/NewsAndStories.snap.js     |  35 +-
 .../NewsletterSubscription.snap.js            |   2 +-
 .../PaginationButton.snap.js                  |   7 +-
 .../Opportunities/Opportunities.snap.js       |  27 +-
 .../OpportunityCard/OpportunityCard.snap.js   |  22 +-
 .../OpportunityCardList.snap.js               |  22 +-
 .../components/OurMission/OurMission.snap.js  |  60 +--
 .../src/components/OurTeam/OurTeam.snap.js    |  23 +-
 .../components/PageHeader/PageHeader.snap.js  |   6 +-
 .../src/components/Project/Project.snap.js    |  66 +--
 .../ProjectCard/ProjectCard.snap.js           |  22 +-
 .../ProjectCardMedia/ProjectCardMedia.snap.js |   2 +-
 .../ProjectDetails/ProjectDescription.snap.js |   5 +-
 .../ProjectDescriptionButton.snap.js          |   3 +-
 .../ProjectDetails/ProjectDetails.snap.js     |  14 +-
 .../ProjectStakeholders.snap.js               |  16 +-
 .../ProjectPageHeader.snap.js                 |  44 +-
 .../ProjectTile/ProjectTile.snap.js           |  12 +-
 .../ProjectTileList/ProjectTileList.snap.js   |  14 +-
 .../src/components/Projects/Projects.snap.js  |  21 +-
 .../RelatedStories/RelatedStories.snap.js     |  20 +-
 .../src/components/RichText/RichText.snap.js  |   8 +-
 .../SearchInput/SearchInput.snap.js           |  19 +-
 .../SectionDivider/SectionDivider.snap.js     |   4 +-
 .../ShareButton/ShareButton.snap.js           |   6 +-
 .../ShareThisPage/ShareThisPage.snap.js       |   6 +-
 .../SocialMediaBar/SocialMediaBar.snap.js     |   2 +-
 .../SocialMediaButton.snap.js                 |   4 +-
 .../TeamMemberCard/TeamMemberCard.snap.js     |  11 +-
 .../TooltipButton/TooltipButton.snap.js       |   9 +-
 .../src/Copyright/Copyright.snap.js           |   4 +-
 .../src/ImageButton/ImageButton.snap.js       |   5 +-
 .../commons-ui-core/src/NavBar/NavBar.snap.js |   7 +-
 .../src/QuickLinks/QuickLinks.snap.js         |   8 +-
 .../src/Section/Section.snap.js               |   2 +-
 .../SocialMediaIconLink.snap.js               |   4 +-
 .../src/StayInTouch/StayInTouch.snap.js       |   2 +-
 .../commons-ui-next/src/Figure/Figure.snap.js |   4 +-
 .../src/Link/PagesRouterLink.snap.js          |   2 +-
 .../src/Link/StyledLink.snap.js               |   2 +-
 .../src/RichText/RichText.snap.js             |   8 +-
 .../hurumap-core/src/Action/Action.snap.js    |   9 +-
 .../src/Download/Download.snap.js             |   6 +-
 .../src/IndicatorTitle/IndicatorTitle.snap.js |   2 +-
 .../src/Location/Location.snap.js             |   8 +-
 .../LocationHighlight.snap.js                 |   4 +-
 packages/hurumap-core/src/Share/Share.snap.js |  13 +-
 .../src/Share/ShareButton.snap.js             |   2 +-
 .../hurumap-next/src/Source/Source.snap.js    |   4 +-
 pnpm-lock.yaml                                | 432 +++++++++++-----
 pnpm-workspace.yaml                           |  16 +-
 201 files changed, 3089 insertions(+), 2450 deletions(-)
 create mode 100644 apps/codeforafrica/src/components/Input/Input.snap.js

diff --git a/apps/charterafrica/src/components/Accordion/Accordion.snap.js b/apps/charterafrica/src/components/Accordion/Accordion.snap.js
index 1ce29ce71..133577fcf 100644
--- a/apps/charterafrica/src/components/Accordion/Accordion.snap.js
+++ b/apps/charterafrica/src/components/Accordion/Accordion.snap.js
@@ -3,71 +3,76 @@
 exports[`<Accordion /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-controls="panel-63f388c3ebe92a85650e8051-content"
-      aria-expanded="false"
-      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-      id="panel-63f388c3ebe92a85650e8051-header"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
     >
-      <div
-        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+      <button
+        aria-controls="panel-63f388c3ebe92a85650e8051-content"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+        id="panel-63f388c3ebe92a85650e8051-header"
+        tabindex="0"
+        type="button"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+        <span
+          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
           >
             <div
-              class="css-jijv3e"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
+                class="css-jijv3e"
+              >
+                <div
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                  focusable="false"
+                  viewbox="0 0 24 24"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-          >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
-                Open Source
+                <div
+                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                >
+                  Open Source
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </div>
-    </div>
+        </span>
+        <span
+          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+        >
+          <div
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+            focusable="false"
+            viewbox="0 0 24 24"
+          />
+        </span>
+      </button>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -76,14 +81,14 @@ exports[`<Accordion /> renders unchanged 1`] = `
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
               id="panel-63f388c3ebe92a85650e8051-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -96,71 +101,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-controls="panel-63f388e0ebe92a85650e8052-content"
-      aria-expanded="false"
-      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-      id="panel-63f388e0ebe92a85650e8052-header"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
     >
-      <div
-        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+      <button
+        aria-controls="panel-63f388e0ebe92a85650e8052-content"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+        id="panel-63f388e0ebe92a85650e8052-header"
+        tabindex="0"
+        type="button"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+        <span
+          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
           >
             <div
-              class="css-jijv3e"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
+                class="css-jijv3e"
+              >
+                <div
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                  focusable="false"
+                  viewbox="0 0 24 24"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-          >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
-                Teamwork
+                <div
+                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                >
+                  Teamwork
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </div>
-    </div>
+        </span>
+        <span
+          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+        >
+          <div
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+            focusable="false"
+            viewbox="0 0 24 24"
+          />
+        </span>
+      </button>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -169,14 +179,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
               id="panel-63f388e0ebe92a85650e8052-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -189,71 +199,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-controls="panel-63f388f9ebe92a85650e8053-content"
-      aria-expanded="false"
-      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-      id="panel-63f388f9ebe92a85650e8053-header"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
     >
-      <div
-        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+      <button
+        aria-controls="panel-63f388f9ebe92a85650e8053-content"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+        id="panel-63f388f9ebe92a85650e8053-header"
+        tabindex="0"
+        type="button"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+        <span
+          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
           >
             <div
-              class="css-jijv3e"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
+                class="css-jijv3e"
+              >
+                <div
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                  focusable="false"
+                  viewbox="0 0 24 24"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-          >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
-                Accountability
+                <div
+                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                >
+                  Accountability
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </div>
-    </div>
+        </span>
+        <span
+          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+        >
+          <div
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+            focusable="false"
+            viewbox="0 0 24 24"
+          />
+        </span>
+      </button>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -262,14 +277,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
               id="panel-63f388f9ebe92a85650e8053-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -282,71 +297,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-controls="panel-63f38902ebe92a85650e8054-content"
-      aria-expanded="false"
-      class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-      id="panel-63f38902ebe92a85650e8054-header"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
     >
-      <div
-        class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+      <button
+        aria-controls="panel-63f38902ebe92a85650e8054-content"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+        id="panel-63f38902ebe92a85650e8054-header"
+        tabindex="0"
+        type="button"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+        <span
+          class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
           >
             <div
-              class="css-jijv3e"
+              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
             >
               <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
+                class="css-jijv3e"
+              >
+                <div
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                  focusable="false"
+                  viewbox="0 0 24 24"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-          >
             <div
-              class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
               >
-                Impact
+                <div
+                  class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                >
+                  Impact
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-          focusable="false"
-          viewbox="0 0 24 24"
-        />
-      </div>
-    </div>
+        </span>
+        <span
+          class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+        >
+          <div
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+            focusable="false"
+            viewbox="0 0 24 24"
+          />
+        </span>
+      </button>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
         >
           <div
             aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -355,14 +375,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+              class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
               id="panel-63f38902ebe92a85650e8054-content"
             >
               <div
                 class="MuiBox-root css-0"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                 >
                   Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/Articles/Articles.snap.js b/apps/charterafrica/src/components/Articles/Articles.snap.js
index 7a832c4c1..655949c5b 100644
--- a/apps/charterafrica/src/components/Articles/Articles.snap.js
+++ b/apps/charterafrica/src/components/Articles/Articles.snap.js
@@ -9,7 +9,7 @@ exports[`<Articles /> renders unchanged 1`] = `
       class="MuiBox-root css-e2yz6z"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-dygcit-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1k9ut7q-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1bnx1lo-MuiGrid-root"
@@ -18,40 +18,44 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5 css-1lirkz0-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5 css-jx2mcl-MuiTypography-root"
             />
           </div>
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-xmiuqd-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-kevmqv-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
                 placeholder="Search"
                 type="search"
                 value=""
               />
               <button
                 aria-label="search"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+                id=":r0:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-yjsfm1"
+                  class="css-81qg8w"
                 >
                   <span>
                     Search
@@ -64,14 +68,13 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary css-a46zki-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiSelect-root css-1ex860j-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
-                aria-controls=":r0:"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-label="Without label"
-                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1mtwe1r-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1mfuego-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
                 role="combobox"
                 tabindex="0"
               >
@@ -80,13 +83,13 @@ exports[`<Articles /> renders unchanged 1`] = `
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
+                class="MuiSelect-nativeInput css-j0riat-MuiSelect-nativeInput"
                 tabindex="-1"
                 value="-publishedOn"
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-lohd6h-MuiSvgIcon-root-MuiSelect-icon"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -97,12 +100,13 @@ exports[`<Articles /> renders unchanged 1`] = `
               </svg>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
diff --git a/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js b/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
index 1a700c49b..837f26f07 100644
--- a/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
+++ b/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
@@ -3,13 +3,13 @@
 exports[`<ComboBox /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-cd7l2b-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
   >
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-cmpglg-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-autocomplete="list"
@@ -17,7 +17,7 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           aria-invalid="false"
           autocapitalize="none"
           autocomplete="off"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           role="combobox"
           spellcheck="false"
@@ -25,18 +25,22 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           value="Countries"
         />
         <div
-          class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+          class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
         >
           <button
             aria-label="Clear"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+            id=":r2:"
             tabindex="-1"
             title="Clear"
             type="button"
           >
+            <span
+              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+            />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
               data-testid="CloseIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -48,26 +52,31 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           </button>
           <button
             aria-label="Open"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+            id=":r3:"
             tabindex="-1"
             title="Open"
             type="button"
           >
+            <span
+              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
               focusable="false"
             />
           </button>
         </div>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-ihdtdm"
+            class="css-w4cd9x"
           >
             <span
+              aria-hidden="true"
               class="notranslate"
             >
               ​
diff --git a/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js b/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
index a313601d6..dccafd77e 100644
--- a/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
+++ b/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
@@ -15,11 +15,11 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
           class="MuiBox-root css-7ehmit"
         >
           <figure
-            class="MuiBox-root css-p826pz"
+            class="MuiBox-root css-10sllnv"
           >
             <img
               alt="Newsletter"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -34,11 +34,11 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="Newsletter"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -50,7 +50,7 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
               class="MuiBox-root css-y8s3qt"
             >
               <h3
-                class="MuiTypography-root MuiTypography-h3Small css-xeim5i-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h3Small css-n2yqz7-MuiTypography-root"
               >
                 Newsletter
               </h3>
@@ -58,15 +58,16 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
                 class="MuiBox-root css-c33e1h"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p3 css-1hy6kbg-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p3 css-1aj3ole-MuiTypography-root"
                 >
                   Receive updates on the Charter Project Africa
                 </p>
               </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary 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 css-druj3j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
+              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
diff --git a/apps/charterafrica/src/components/Consultations/Consultations.snap.js b/apps/charterafrica/src/components/Consultations/Consultations.snap.js
index 01833974f..dc53920ad 100644
--- a/apps/charterafrica/src/components/Consultations/Consultations.snap.js
+++ b/apps/charterafrica/src/components/Consultations/Consultations.snap.js
@@ -6,10 +6,10 @@ exports[`<Consultations /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-27tpcc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11jnlxf-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h2 css-yocep0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 css-1698jfb-MuiTypography-root"
       >
         Sample tiltle
       </div>
diff --git a/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js b/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
index 74ebf07eb..2747506c8 100644
--- a/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
+++ b/apps/charterafrica/src/components/ContributorCard/ContributorCard.snap.js
@@ -3,32 +3,32 @@
 exports[`<ContributorCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-10z892v-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zoydxh-MuiCardMedia-root"
       />
       <div
-        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
+        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-l2ultw-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1b7pqoa-MuiTypography-root"
         >
           Tool Name
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-zpa7jo-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1xge335-MuiTypography-root"
         >
           Sample description
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/Dataset/Dataset.snap.js b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
index 59a22f5c3..65d607154 100644
--- a/apps/charterafrica/src/components/Dataset/Dataset.snap.js
+++ b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
@@ -6,7 +6,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] css-o70cs7-MuiGrid-root"
@@ -15,20 +15,20 @@ exports[`<Dataset /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-ucdck3-MuiGrid-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-p1 css-i1xkt3-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1dr4mcp-MuiTypography-root"
           >
             Back to Datasets
           </a>
           <h2
-            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-1vv4c3h-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-xvgnvn-MuiTypography-root"
           >
             Document Title
           </h2>
           <p
-            class="MuiTypography-root MuiTypography-p1 css-l6prdf-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1mclz91-MuiTypography-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-inherit css-dhy9gx-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-inherit css-1wojwvd-MuiTypography-root"
             >
               Created January 1, 2021
             </span>
@@ -37,39 +37,40 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1phk7xb-MuiGrid-root"
           >
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1puf64w-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1bfmoy7-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
               >
                 CSV
               </span>
             </div>
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1g3w73k-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-7i6xv5-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
               >
                 PDF
               </span>
             </div>
           </div>
           <button
-            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"
+            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-cctx58-MuiButtonBase-root-MuiButton-root"
+            id=":r0:"
             tabindex="0"
             target="_blank"
             type="button"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-1xskro6-MuiButton-startIcon"
             >
               <div />
             </span>
             Open Dataset
           </button>
           <div
-            class="MuiTypography-root MuiTypography-p1 css-n4k5ds-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1nxupmx-MuiTypography-root"
           >
             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>
@@ -78,7 +79,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-[object Object] MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-kdi1tf-MuiGrid-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-p1 css-1w5j2yd-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1n0t3bi-MuiTypography-root"
           >
             Back to Datasets
           </a>
@@ -86,7 +87,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiStack-root css-1xe1uy8-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
             >
               Share Via
             </div>
@@ -100,7 +101,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -112,7 +113,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -124,7 +125,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -134,7 +135,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
         </div>
       </div>
       <a
-        class="MuiTypography-root MuiTypography-p1 css-1v10z4i-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p1 css-1wd86cb-MuiTypography-root"
       >
         Back to Datasets
       </a>
@@ -148,7 +149,7 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <h3
-              class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-11gtfkg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-1k4ywuw-MuiTypography-root"
             >
               See more datasets
             </h3>
@@ -157,14 +158,14 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-p1 css-1wdkhl3-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-z9sjxm-MuiTypography-root"
             >
               See more datasets
             </a>
           </div>
         </div>
         <a
-          class="MuiTypography-root MuiTypography-p1 css-qnck1c-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-9llhji-MuiTypography-root"
         >
           Back to Datasets
         </a>
diff --git a/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js b/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
index 6214d2600..c0481d19d 100644
--- a/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
+++ b/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
@@ -3,29 +3,30 @@
 exports[`<DatasetCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-dzxyww-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-oclxzy-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <a
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       href="/resources/datasets"
       tabindex="0"
     >
       <div
-        class="MuiCardContent-root css-16iq3h-MuiCardContent-root"
+        class="MuiCardContent-root css-tem57g-MuiCardContent-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-[object Object] css-bkp0sa-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-[object Object] css-iewyyr-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SmallSemiBold css-17k81ph-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1trh6s6-MuiTypography-root"
             >
               Document Title
             </h5>
             <p
-              class="MuiTypography-root MuiTypography-p1 css-1pop01s-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-atoqz6-MuiTypography-root"
             >
                
               Created
@@ -33,7 +34,7 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
               January 1, 2021
             </p>
             <p
-              class="MuiTypography-root MuiTypography-p1SemiBold css-1egbhxv-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1SemiBold css-9djn7y-MuiTypography-root"
             >
               Author Name
             </p>
@@ -42,12 +43,13 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-ls0fcs-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-so49wn-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-x22hae-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-157zrhe-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
@@ -58,19 +60,19 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-6thyz8-MuiGrid-root"
           >
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1puf64w-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1bfmoy7-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
               >
                 CSV
               </span>
             </div>
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1g3w73k-MuiChip-root"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-7i6xv5-MuiChip-root"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+                class="MuiChip-label MuiChip-labelMedium css-1dybbl5-MuiChip-label"
               >
                 PDF
               </span>
@@ -79,7 +81,7 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js b/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
index ce4bd935b..c9412787a 100644
--- a/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
+++ b/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
@@ -6,39 +6,43 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
     class="MuiBox-root css-1kgakwq"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-2 css-uzx68p-MuiGrid-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
             placeholder="Search"
             type="search"
             value=""
           />
           <button
             aria-label="search"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+            id=":r0:"
             tabindex="0"
             type="button"
           >
+            <span
+              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 16 16"
             />
           </button>
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-yjsfm1"
+              class="css-81qg8w"
             >
               <span>
                 Search
@@ -51,13 +55,13 @@ 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-cd7l2b-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
                 aria-autocomplete="list"
@@ -65,26 +69,30 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r0:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r1:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value="Sort"
               />
               <div
-                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  id=":r3:"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -96,26 +104,31 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  id=":r4:"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -130,16 +143,16 @@ 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-2uxksm-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-4u29cd-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
               >
                 2 Countries
               </p>
@@ -149,26 +162,30 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r2:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r5:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value=""
               />
               <div
-                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  id=":r7:"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -180,26 +197,31 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  id=":r8:"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -214,16 +236,16 @@ 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-2uxksm-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-4u29cd-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
               >
                 Agriculture
               </p>
@@ -233,26 +255,30 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r4:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r9:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value=""
               />
               <div
-                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  id=":rb:"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -264,26 +290,31 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  id=":rc:"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
@@ -298,22 +329,24 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-3 MuiGrid-grid-lg-3 css-10brl9b-MuiGrid-root"
       >
         <p
-          class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
         >
           Show
           :
         </p>
         <button
-          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"
+          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-zz8rc6-MuiButtonBase-root-MuiButton-root"
           disabled=""
+          id=":rd:"
           tabindex="-1"
           type="button"
         >
           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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-vjivbx-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
           href="/documents"
+          id=":re:"
           tabindex="0"
         >
           Documents
diff --git a/apps/charterafrica/src/components/Datasets/Datasets.snap.js b/apps/charterafrica/src/components/Datasets/Datasets.snap.js
index baa59398c..aa382328f 100644
--- a/apps/charterafrica/src/components/Datasets/Datasets.snap.js
+++ b/apps/charterafrica/src/components/Datasets/Datasets.snap.js
@@ -6,45 +6,49 @@ exports[`<Datasets /> renders unchanged 1`] = `
     class="MuiBox-root css-yr9t7q"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16qnzbm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vbgufp-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-1kgakwq"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-2 css-uzx68p-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
                 placeholder="Search"
                 type="search"
                 value=""
               />
               <button
                 aria-label="search"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+                id=":r0:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-yjsfm1"
+                  class="css-81qg8w"
                 >
                   <span>
                     Search
@@ -57,13 +61,13 @@ 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-cd7l2b-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <input
                     aria-autocomplete="list"
@@ -71,26 +75,30 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r0:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r1:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value="Sort"
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      id=":r3:"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -102,26 +110,31 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      id=":r4:"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-ihdtdm"
+                      class="css-w4cd9x"
                     >
                       <span
+                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -136,16 +149,16 @@ 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-2uxksm-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-4u29cd-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
                   >
                     Countries
                   </p>
@@ -155,26 +168,30 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r2:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r5:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      id=":r7:"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -186,26 +203,31 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      id=":r8:"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-ihdtdm"
+                      class="css-w4cd9x"
                     >
                       <span
+                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -220,16 +242,16 @@ 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-2uxksm-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-4u29cd-MuiAutocomplete-root"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1bewz1j-MuiFormControl-root-MuiTextField-root"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1hg3r3m-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-10z04o9-MuiInputBase-root-MuiOutlinedInput-root"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1iv56pm-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-iwkawf-MuiTypography-root"
                   >
                     Tags
                   </p>
@@ -239,26 +261,30 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1lp1hoy-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r4:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-splk4z-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r9:"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                      id=":rb:"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                         data-testid="CloseIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -270,26 +296,31 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     </button>
                     <button
                       aria-label="Open"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                      id=":rc:"
                       tabindex="-1"
                       title="Open"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                         focusable="false"
                       />
                     </button>
                   </div>
                   <fieldset
                     aria-hidden="true"
-                    class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                    class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-ihdtdm"
+                      class="css-w4cd9x"
                     >
                       <span
+                        aria-hidden="true"
                         class="notranslate"
                       >
                         ​
@@ -304,21 +335,23 @@ exports[`<Datasets /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-3 MuiGrid-grid-lg-3 css-10brl9b-MuiGrid-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
             >
               :
             </p>
             <button
-              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"
+              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-zz8rc6-MuiButtonBase-root-MuiButton-root"
               disabled=""
+              id=":rd:"
               tabindex="-1"
               type="button"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-vjivbx-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="/documents"
+              id=":re:"
               tabindex="0"
             >
               Documents
diff --git a/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js b/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
index 597780c2e..8f7e58bd3 100644
--- a/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
+++ b/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
@@ -9,7 +9,7 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-ethxoc-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-1lpbt8y-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
         href="/"
         tabindex="0"
       >
@@ -27,7 +27,7 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -36,67 +36,79 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
             class="css-xthg9g"
           >
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
               href="/resources"
             >
               Resources
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                id=":r0:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
               href="/knowledge"
             >
               Knowledge
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                id=":r1:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
               href="/opportunities"
             >
               Oppportunities
               <button
                 aria-haspopup="menu"
                 aria-label="select merge strategy"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                id=":r2:"
                 tabindex="0"
                 type="button"
               >
+                <span
+                  class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                />
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 16 16"
                 />
               </button>
             </a>
             <a
-              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
               href="/about"
             >
               About
@@ -107,27 +119,28 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-ny25p5-MuiButtonBase-root-MuiButton-root"
+            id=":r3:"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
             >
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 24 24"
               />
             </span>
             en
             <span
-              class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+              class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
             >
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
diff --git a/apps/charterafrica/src/components/Document/Document.snap.js b/apps/charterafrica/src/components/Document/Document.snap.js
index e004abca6..a9c95adad 100644
--- a/apps/charterafrica/src/components/Document/Document.snap.js
+++ b/apps/charterafrica/src/components/Document/Document.snap.js
@@ -6,16 +6,16 @@ exports[`<Document /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4 MuiGrid-direction-xs-[object Object] css-1gcb1z5-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-4 MuiGrid-direction-xs-[object Object] css-wq27zs-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-fffmms-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-1vv4c3h-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 MuiTypography-gutterBottom css-xvgnvn-MuiTypography-root"
           >
             Document Title
           </h2>
@@ -41,12 +41,13 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-wg2o4k-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
             href="/"
+            id=":r0:"
             tabindex="0"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
             >
               <div />
             </span>
@@ -59,7 +60,7 @@ exports[`<Document /> renders unchanged 1`] = `
               class="MuiStack-root css-plcmrn-MuiStack-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
               >
                 Share this document
               </div>
@@ -73,7 +74,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
@@ -85,7 +86,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
@@ -97,7 +98,7 @@ exports[`<Document /> renders unchanged 1`] = `
                 >
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 24 24"
                   />
diff --git a/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js b/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
index 4f71e72d7..fac562914 100644
--- a/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
+++ b/apps/charterafrica/src/components/DocumentCard/DocumentCard.snap.js
@@ -3,15 +3,16 @@
 exports[`<DocumentCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1wj4l1q-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-cob2z-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <a
-      class="MuiButtonBase-root MuiCardActionArea-root css-dvh6vf-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-1ts5io8-MuiButtonBase-root-MuiCardActionArea-root"
       href="url=https://dc.sourceafrica.net/documents/120991-Case-Study-Drones-and-the-2017-Sierra-Leone.html&contrubutor=true&showNotes=true"
       tabindex="0"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-2r8llh-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1odrru0-MuiCardMedia-root"
         src="/images/hero-slide-1.jpg"
       />
       <div
@@ -24,7 +25,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-1w036fe-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-5hes4x-MuiTypography-root"
             >
               Document Title
             </div>
@@ -33,7 +34,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1qjtras-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-1du89xn-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1tcecrn-MuiTypography-root"
             >
               10 Pages
             </div>
@@ -43,7 +44,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
               .
             </span>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-dvnpys-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-1khdwyg-MuiTypography-root"
             >
               Contributed by: Contributor
             </div>
@@ -52,7 +53,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-p1 css-vscbyg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-igxqn7-MuiTypography-root"
             >
               September 1, 2021
             </div>
@@ -63,7 +64,7 @@ exports[`<DocumentCard /> renders unchanged 1`] = `
         />
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js b/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
index d243fe0e7..756dac90f 100644
--- a/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
+++ b/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
@@ -6,39 +6,43 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
     class="MuiBox-root css-1kgakwq"
   >
     <div
-      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
             placeholder="Search"
             type="search"
             value=""
           />
           <button
             aria-label="search"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+            id=":r0:"
             tabindex="0"
             type="button"
           >
+            <span
+              class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+            />
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 16 16"
             />
           </button>
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-yjsfm1"
+              class="css-81qg8w"
             >
               <span>
                 Search
@@ -51,13 +55,13 @@ 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-cd7l2b-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <input
                 aria-autocomplete="list"
@@ -65,26 +69,30 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r0:"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+                id=":r1:"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value="Sort"
               />
               <div
-                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                  id=":r3:"
                   tabindex="-1"
                   title="Clear"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                     data-testid="CloseIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -96,26 +104,31 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
                 </button>
                 <button
                   aria-label="Open"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                  id=":r4:"
                   tabindex="-1"
                   title="Open"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                     focusable="false"
                   />
                 </button>
               </div>
               <fieldset
                 aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
               >
                 <legend
-                  class="css-ihdtdm"
+                  class="css-w4cd9x"
                 >
                   <span
+                    aria-hidden="true"
                     class="notranslate"
                   >
                     ​
diff --git a/apps/charterafrica/src/components/Documents/Documents.snap.js b/apps/charterafrica/src/components/Documents/Documents.snap.js
index 2cdcd0cb3..abee620d2 100644
--- a/apps/charterafrica/src/components/Documents/Documents.snap.js
+++ b/apps/charterafrica/src/components/Documents/Documents.snap.js
@@ -6,7 +6,7 @@ exports[`<Documents /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-27tpcc-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11jnlxf-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-blp6vs"
@@ -15,39 +15,43 @@ exports[`<Documents /> renders unchanged 1`] = `
           class="MuiBox-root css-1kgakwq"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-5yr11w-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 css-k1f5dp-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1iuekym-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-4zizdr-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
                   placeholder="Search"
                   type="search"
                   value=""
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+                  id=":r0:"
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-yjsfm1"
+                    class="css-81qg8w"
                   >
                     <span>
                       Search
@@ -60,13 +64,13 @@ 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-cd7l2b-MuiAutocomplete-root"
+                class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-b4rh0e-MuiAutocomplete-root"
               >
                 <div
-                  class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
+                  class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-niwfbu-MuiFormControl-root-MuiTextField-root"
                 >
                   <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-mtvuba-MuiInputBase-root-MuiOutlinedInput-root"
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-f06f7r-MuiInputBase-root-MuiOutlinedInput-root"
                   >
                     <input
                       aria-autocomplete="list"
@@ -74,26 +78,30 @@ exports[`<Documents /> renders unchanged 1`] = `
                       aria-invalid="false"
                       autocapitalize="none"
                       autocomplete="off"
-                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-222ubz-MuiInputBase-input-MuiOutlinedInput-input"
-                      id=":r0:"
+                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-afq685-MuiInputBase-input-MuiOutlinedInput-input"
+                      id=":r1:"
                       role="combobox"
                       spellcheck="false"
                       type="text"
                       value="Sort"
                     />
                     <div
-                      class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
+                      class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                     >
                       <button
                         aria-label="Clear"
-                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1glvl0p-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-1x7n7v0-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
+                        id=":r3:"
                         tabindex="-1"
                         title="Clear"
                         type="button"
                       >
+                        <span
+                          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                        />
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-120dh41-MuiSvgIcon-root"
                           data-testid="CloseIcon"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -105,26 +113,31 @@ exports[`<Documents /> renders unchanged 1`] = `
                       </button>
                       <button
                         aria-label="Open"
-                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-10egcn8-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                        id=":r4:"
                         tabindex="-1"
                         title="Open"
                         type="button"
                       >
+                        <span
+                          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                        />
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hf2qhf-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bgqlhh-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </button>
                     </div>
                     <fieldset
                       aria-hidden="true"
-                      class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+                      class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="css-ihdtdm"
+                        class="css-w4cd9x"
                       >
                         <span
+                          aria-hidden="true"
                           class="notranslate"
                         >
                           ​
@@ -139,20 +152,22 @@ exports[`<Documents /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1ia2r28-MuiGrid-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1eww23z-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-170pkzg-MuiTypography-root"
               >
                 :
               </p>
               <a
-                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"
+                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-d5yv8m-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="/datasets"
+                id=":r5:"
                 tabindex="0"
               >
                 Datasets
               </a>
               <button
-                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"
+                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-1imxd5l-MuiButtonBase-root-MuiButton-root"
                 disabled=""
+                id=":r6:"
                 tabindex="-1"
                 type="button"
               >
@@ -162,7 +177,7 @@ exports[`<Documents /> renders unchanged 1`] = `
           </div>
         </div>
         <hr
-          class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+          class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
         />
       </div>
     </div>
diff --git a/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js b/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
index 042bace3c..0b1982f77 100644
--- a/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
+++ b/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
@@ -3,26 +3,26 @@
 exports[`<DropdownMenu /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiList-root MuiList-padding css-1fv1une-MuiList-root"
+    class="MuiList-root MuiList-padding css-1mwqho1-MuiList-root"
     role="menu"
     tabindex="-1"
   >
     <a
-      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"
+      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiMenuItem-root"
       href="/resources/tools"
       tabindex="0"
     >
       Tools
     </a>
     <a
-      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"
+      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiMenuItem-root"
       href="/resources/data"
       tabindex="-1"
     >
       Data
     </a>
     <a
-      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"
+      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-1aut4du-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiMenuItem-root"
       href="/resources/people"
       tabindex="-1"
     >
diff --git a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
index ca89430f0..8cff14390 100644
--- a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
+++ b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
@@ -6,20 +6,20 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1vfict-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-mtt3i8-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h2Small css-13ipfz9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2Small css-1ipdkw2-MuiTypography-root"
       >
         Tools
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h2Small css-1fm4yxa-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2Small css-15klgrw-MuiTypography-root"
       >
         People
       </div>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3.75 css-1mmhzy4-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3.75 css-18yh1kh-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-auto css-1p4bcov-MuiGrid-root"
@@ -34,30 +34,30 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
             class="MuiBox-root css-kx5zyc"
           >
             <div
-              class="MuiTypography-root MuiTypography-p3SemiBold css-hlwom7-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold css-mxdw1y-MuiTypography-root"
             >
               Tools
             </div>
             <span
-              class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
+              class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
             >
               <span
-                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
+                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-MuiButtonBase-root-MuiSwitch-switchBase"
               >
                 <input
-                  class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+                  class="PrivateSwitchBase-input MuiSwitch-input css-j8yymo"
                   type="checkbox"
                 />
                 <span
-                  class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+                  class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
                 />
               </span>
               <span
-                class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+                class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
               />
             </span>
             <div
-              class="MuiTypography-root MuiTypography-p3SemiBold css-7sagb9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3SemiBold css-1gw3mcu-MuiTypography-root"
             >
               People
             </div>
@@ -70,12 +70,12 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
             class="MuiBox-root css-13wj3xb"
           >
             <div
-              class="MuiTypography-root MuiTypography-h2Small css-f84vvj-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2Small css-1n5pg1q-MuiTypography-root"
             >
               Tools
             </div>
             <div
-              class="MuiTypography-root MuiTypography-h2Small css-100zm5k-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2Small css-13v8hm1-MuiTypography-root"
             >
               People
             </div>
@@ -83,30 +83,30 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-1k5ue6b"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-hlwom7-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-mxdw1y-MuiTypography-root"
               >
                 Tools
               </div>
               <span
-                class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
+                class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
               >
                 <span
-                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
+                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-MuiButtonBase-root-MuiSwitch-switchBase"
                 >
                   <input
-                    class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+                    class="PrivateSwitchBase-input MuiSwitch-input css-j8yymo"
                     type="checkbox"
                   />
                   <span
-                    class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+                    class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
                   />
                 </span>
                 <span
-                  class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+                  class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
                 />
               </span>
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-7sagb9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-1gw3mcu-MuiTypography-root"
               >
                 People
               </div>
@@ -115,7 +115,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-5i7ax1"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1SemiBold css-44vm40-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1SemiBold css-ueha9c-MuiTypography-root"
               >
                 Key
               </div>
@@ -129,7 +129,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-uzt8lc"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Elections
                   </div>
@@ -141,7 +141,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-bhlonb"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Rule of law
                   </div>
@@ -153,7 +153,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1e9tm9b"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Civic space
                   </div>
@@ -165,7 +165,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-ga3poe"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Media
                   </div>
@@ -177,7 +177,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1098gr8"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Civic values
                   </div>
@@ -189,7 +189,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1l9yb90"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Decentralisation
                   </div>
@@ -201,7 +201,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1gl40r4"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Multilateralism
                   </div>
@@ -213,7 +213,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1epexq2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Economic governance
                   </div>
@@ -225,7 +225,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tv8i5c"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Corporate governance
                   </div>
@@ -237,7 +237,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-m9kyz2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Gender equality
                   </div>
@@ -249,7 +249,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-10gsdz3"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Constitutional changes of government
                   </div>
@@ -260,7 +260,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiBox-root css-174du92"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1SemiBold css-44vm40-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1SemiBold css-ueha9c-MuiTypography-root"
               >
                 Key
               </div>
@@ -274,7 +274,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-uzt8lc"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Elections
                   </div>
@@ -286,7 +286,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-bhlonb"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Rule of law
                   </div>
@@ -298,7 +298,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1e9tm9b"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Civic space
                   </div>
@@ -310,7 +310,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-ga3poe"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Media
                   </div>
@@ -322,7 +322,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1098gr8"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Civic values
                   </div>
@@ -334,7 +334,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1l9yb90"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Decentralisation
                   </div>
@@ -346,7 +346,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1gl40r4"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Multilateralism
                   </div>
@@ -358,7 +358,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1epexq2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Economic governance
                   </div>
@@ -370,7 +370,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tv8i5c"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Corporate governance
                   </div>
@@ -382,7 +382,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-m9kyz2"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Gender equality
                   </div>
@@ -394,7 +394,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                     class="MuiBox-root css-10gsdz3"
                   />
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-1k3hc3i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-b2ay7z-MuiTypography-root"
                   >
                     Constitutional changes of government
                   </div>
diff --git a/apps/charterafrica/src/components/Entity/Entity.snap.js b/apps/charterafrica/src/components/Entity/Entity.snap.js
index 96e0ea220..2e8f9f7cd 100644
--- a/apps/charterafrica/src/components/Entity/Entity.snap.js
+++ b/apps/charterafrica/src/components/Entity/Entity.snap.js
@@ -6,20 +6,20 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10h56vb-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x1dvlf-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-gqilsr-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-2miyha-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-db5opy"
+            class="MuiBox-root css-vutmxe"
           >
             <img
               alt="John Doe"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -35,45 +35,45 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-u4yv58-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h2 css-wx8luq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-wz0oyq-MuiTypography-root"
           >
             John Doe
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
           >
             Developer
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
           >
             Charter Africa
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p4 css-2xha87-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p4 css-1ibmzsv-MuiTypography-root"
           >
             San Francisco, CA
           </div>
           <div
-            class="MuiTypography-root MuiTypography-p1 css-pxso3q-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-uehaqk-MuiTypography-root"
           >
             Full-stack web developer with over 5 years of experience.
           </div>
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-auto css-3odm25-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-auto css-109lh6d-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-zo8y90-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-18imcs6-MuiTypography-root-MuiLink-root"
                 href="https://twitter.com/johndoe"
                 rel="noreferrer noopener"
                 target="_blank"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
@@ -82,14 +82,14 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-zo8y90-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-18imcs6-MuiTypography-root-MuiLink-root"
                 href="https://github.com/johndoe"
                 rel="noreferrer noopener"
                 target="_blank"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
@@ -98,19 +98,19 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-6wafux-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-cp0dln-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ofcnda-MuiTypography-root-MuiLink-root"
                 href="maito:johndoe@example.com"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1835xr2-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-161bqzh-MuiSvgIcon-root"
                   focusable="false"
                 />
               </a>
             </div>
           </div>
           <div
-            class="MuiTypography-root MuiTypography-h3Small css-itrhit-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3Small css-d4pglc-MuiTypography-root"
           >
             Organisations
           </div>
@@ -121,8 +121,9 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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 css-1rha4ds-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
+                id=":r0:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -131,11 +132,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-1u82k0c"
+                    class="MuiBox-root css-6roq6o"
                   >
                     <img
                       alt="Organisation 0"
-                      class="css-1r7uxv0"
+                      class="css-1enhhhm"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -146,7 +147,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
                   >
                     Organisation 0
                   </div>
@@ -157,8 +158,9 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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 css-1rha4ds-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
+                id=":r1:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -167,11 +169,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-1u82k0c"
+                    class="MuiBox-root css-6roq6o"
                   >
                     <img
                       alt="Organisation 1"
-                      class="css-1r7uxv0"
+                      class="css-1enhhhm"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -182,7 +184,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
                   >
                     Organisation 1
                   </div>
@@ -193,8 +195,9 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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 css-1rha4ds-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
+                id=":r2:"
                 rel="noreferrer noopener"
                 tabindex="0"
                 target="_blank"
@@ -203,11 +206,11 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiStack-root css-1l9qugs-MuiStack-root"
                 >
                   <figure
-                    class="MuiBox-root css-1u82k0c"
+                    class="MuiBox-root css-6roq6o"
                   >
                     <img
                       alt="Organisation 2"
-                      class="css-1r7uxv0"
+                      class="css-1enhhhm"
                       data-nimg="fill"
                       decoding="async"
                       loading="lazy"
@@ -218,7 +221,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                     />
                   </figure>
                   <div
-                    class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
                   >
                     Organisation 2
                   </div>
@@ -229,10 +232,10 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
         </div>
       </div>
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg css-1jzu7sv-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg css-ut8xii-MuiContainer-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3Small css-3xokdu-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3Small css-1943xhm-MuiTypography-root"
         >
           Repositories
         </div>
@@ -243,7 +246,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -255,22 +258,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
                   >
                     Repository 0
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -285,16 +288,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -307,7 +310,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -319,22 +322,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
                   >
                     Repository 1
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -349,16 +352,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -371,7 +374,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
               href="https://charter.africa"
               rel="noreferrer noopener"
               target="_blank"
@@ -383,22 +386,22 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
                   >
                     Repository 2
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     Charter Africa website
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     React, Next.js, TypeScript
                   </div>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
                   >
                     October 1, 2021
                   </div>
@@ -413,16 +416,16 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       sx="[object Object]"
                     />
                     <div
-                      class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
                     >
                       100
                     </div>
                   </div>
                   <div
-                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
+                    class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
+                      class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
                     >
                       PUBLIC
                     </span>
@@ -434,21 +437,21 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
         </div>
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3Small css-3xokdu-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-1943xhm-MuiTypography-root"
       >
         Favorite Tools
       </div>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-hamzp9-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-2l6o4x-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
           >
             <button
-              class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
               tabindex="0"
               type="button"
             >
@@ -459,7 +462,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-1j9yqi7-MuiGrid-root"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-pssmpe-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-u7nuca-MuiCardMedia-root"
                     src="/static/images/react.png"
                   />
                 </div>
@@ -467,18 +470,19 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-8 css-1u7cbv1-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+                    class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
                   >
                     <div
                       class="MuiBox-root css-gg4vpm"
                     >
                       <h5
-                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
                       >
                         React
                       </h5>
                       <button
-                        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"
+                        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-ffiew0-MuiButtonBase-root-MuiButton-root"
+                        id=":r3:"
                         tabindex="0"
                         type="button"
                       >
@@ -493,7 +497,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -502,7 +506,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -511,13 +515,13 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
                     </div>
                     <div
-                      class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
                     >
                       A JavaScript library for building user interfaces
                     </div>
@@ -525,7 +529,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
               />
             </button>
           </div>
@@ -534,10 +538,10 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
           >
             <button
-              class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
               tabindex="0"
               type="button"
             >
@@ -548,7 +552,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-1j9yqi7-MuiGrid-root"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-pssmpe-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-u7nuca-MuiCardMedia-root"
                     src="/static/images/nodejs.png"
                   />
                 </div>
@@ -556,18 +560,19 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-8 css-1u7cbv1-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+                    class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
                   >
                     <div
                       class="MuiBox-root css-gg4vpm"
                     >
                       <h5
-                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
                       >
                         Node.js
                       </h5>
                       <button
-                        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"
+                        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-ffiew0-MuiButtonBase-root-MuiButton-root"
+                        id=":r4:"
                         tabindex="0"
                         type="button"
                       >
@@ -582,7 +587,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -591,7 +596,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
@@ -600,13 +605,13 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                       >
                         <div
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                           focusable="false"
                         />
                       </div>
                     </div>
                     <div
-                      class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
                     >
                       A JavaScript runtime built on Chrome's V8 JavaScript engine.
                     </div>
@@ -614,7 +619,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
               />
             </button>
           </div>
diff --git a/apps/charterafrica/src/components/Error/Error.snap.js b/apps/charterafrica/src/components/Error/Error.snap.js
index eafce5cd3..a38584998 100644
--- a/apps/charterafrica/src/components/Error/Error.snap.js
+++ b/apps/charterafrica/src/components/Error/Error.snap.js
@@ -6,22 +6,22 @@ exports[`<Error /> renders unchanged 1`] = `
     class="MuiBox-root css-lfupbe"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1lmdmi3-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ezfg9w-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-1xpnus0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-cg2m9u-MuiTypography-root"
       >
         404
          - 
         NOT FOUND
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-19to4pe-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-f5me0o-MuiTypography-root"
       >
         404
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3 css-pawrpu-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-m8stqq-MuiTypography-root"
       >
         NOT FOUND
       </div>
@@ -29,14 +29,15 @@ exports[`<Error /> renders unchanged 1`] = `
         class="MuiBox-root css-dx31bc"
       >
         <p
-          class="MuiTypography-root MuiTypography-p3 css-1ullfhh-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p3 css-1p1zjna-MuiTypography-root"
         >
           Description Text
         </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary 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-16uizo2-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/"
+        id=":r0:"
         tabindex="0"
       >
         NOT FOUND
diff --git a/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js b/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
index 8f880e16b..e0c24ae1c 100644
--- a/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
+++ b/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
@@ -6,22 +6,22 @@ exports[`<ErrorPage /> renders unchanged 1`] = `
     class="MuiBox-root css-lfupbe"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1lmdmi3-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ezfg9w-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-1xpnus0-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-cg2m9u-MuiTypography-root"
       >
         404
          - 
         NOT FOUND
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-19to4pe-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-f5me0o-MuiTypography-root"
       >
         404
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h3 css-pawrpu-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-m8stqq-MuiTypography-root"
       >
         NOT FOUND
       </div>
@@ -29,14 +29,15 @@ exports[`<ErrorPage /> renders unchanged 1`] = `
         class="MuiBox-root css-dx31bc"
       >
         <p
-          class="MuiTypography-root MuiTypography-p3 css-1ullfhh-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p3 css-1p1zjna-MuiTypography-root"
         >
           Description Text
         </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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary 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-16uizo2-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/"
+        id=":r0:"
         tabindex="0"
       >
         NOT FOUND
diff --git a/apps/charterafrica/src/components/Explainers/Explainer.snap.js b/apps/charterafrica/src/components/Explainers/Explainer.snap.js
index 1ee642e96..1731d7049 100644
--- a/apps/charterafrica/src/components/Explainers/Explainer.snap.js
+++ b/apps/charterafrica/src/components/Explainers/Explainer.snap.js
@@ -6,11 +6,11 @@ exports[`<Explainer /> renders unchanged 1`] = `
     class="MuiStack-root css-nen11g-MuiStack-root"
   >
     <figure
-      class="MuiBox-root css-db5opy"
+      class="MuiBox-root css-vutmxe"
     >
       <img
         alt="Event 1"
-        class="css-g98gbd"
+        class="css-qv2885"
         data-nimg="1"
         decoding="async"
         height="0"
@@ -22,7 +22,7 @@ exports[`<Explainer /> renders unchanged 1`] = `
       />
     </figure>
     <div
-      class="MuiTypography-root MuiTypography-h3SmallSemiBold css-12w5e8m-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h3SmallSemiBold css-7h25xh-MuiTypography-root"
     >
       Event title going on two or even three lines
     </div>
@@ -30,7 +30,7 @@ exports[`<Explainer /> renders unchanged 1`] = `
       class="MuiBox-root css-12mwhaj"
     >
       <p
-        class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
       >
         Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
       </p>
diff --git a/apps/charterafrica/src/components/Explainers/Explainers.snap.js b/apps/charterafrica/src/components/Explainers/Explainers.snap.js
index 4261f74e6..bfea98c1e 100644
--- a/apps/charterafrica/src/components/Explainers/Explainers.snap.js
+++ b/apps/charterafrica/src/components/Explainers/Explainers.snap.js
@@ -6,10 +6,10 @@ exports[`<Explainers /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-9gm53n-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xb6wsu-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3 css-n55336-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-1sgmt5b-MuiTypography-root"
       >
         Explainers
       </div>
@@ -17,11 +17,11 @@ exports[`<Explainers /> renders unchanged 1`] = `
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 0"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -36,24 +36,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 1"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -68,24 +68,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 2"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -100,24 +100,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 3"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -132,24 +132,24 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
       <div
         class="MuiStack-root css-nen11g-MuiStack-root"
       >
         <figure
-          class="MuiBox-root css-db5opy"
+          class="MuiBox-root css-vutmxe"
         >
           <img
             alt="Event 4"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="1"
             decoding="async"
             height="0"
@@ -164,14 +164,14 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-12mwhaj"
         >
           <p
-            class="MuiTypography-root MuiTypography-p2 css-9c4w98-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p2 css-1ihwlob-MuiTypography-root"
           >
             Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
           </p>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1i2odet-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-18cva15-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/FAQ/FAQ.snap.js b/apps/charterafrica/src/components/FAQ/FAQ.snap.js
index 07ce57c69..885875814 100644
--- a/apps/charterafrica/src/components/FAQ/FAQ.snap.js
+++ b/apps/charterafrica/src/components/FAQ/FAQ.snap.js
@@ -6,79 +6,84 @@ exports[`<FAQ /> renders unchanged 1`] = `
     class="MuiBox-root css-ow7qj4"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qbjolu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x30ed7-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h1Small css-kkm4ih-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1Small css-18mtumj-MuiTypography-root"
       >
         Frequently Asked Questions
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388c3ebe92a85650e8051-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388c3ebe92a85650e8051-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388c3ebe92a85650e8051-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388c3ebe92a85650e8051-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Open Source
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Open Source
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -87,14 +92,14 @@ exports[`<FAQ /> renders unchanged 1`] = `
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388c3ebe92a85650e8051-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -107,71 +112,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388e0ebe92a85650e8052-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388e0ebe92a85650e8052-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388e0ebe92a85650e8052-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388e0ebe92a85650e8052-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Teamwork
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Teamwork
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -180,14 +190,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388e0ebe92a85650e8052-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -200,71 +210,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388f9ebe92a85650e8053-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388f9ebe92a85650e8053-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388f9ebe92a85650e8053-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388f9ebe92a85650e8053-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Accountability
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Accountability
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -273,14 +288,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388f9ebe92a85650e8053-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -293,71 +308,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f38902ebe92a85650e8054-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f38902ebe92a85650e8054-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f38902ebe92a85650e8054-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f38902ebe92a85650e8054-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Impact
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Impact
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -366,14 +386,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f38902ebe92a85650e8054-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js b/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
index 970460569..087cbf808 100644
--- a/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
+++ b/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
@@ -6,24 +6,25 @@ exports[`FeaturedPostCard should render 1`] = `
     class="MuiBox-root css-1w0avnn"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-aezxtm-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1qilz93-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <img
           alt="Featured Post"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1mzr6lk-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1x5fzrj-MuiCardMedia-root"
           src="/images/featured_post.png"
         />
         <div
-          class="MuiCardContent-root css-cnb62q-MuiCardContent-root"
+          class="MuiCardContent-root css-eato5c-MuiCardContent-root"
         >
           <div
             class="MuiStack-root css-1nza621-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-h2SemiBold css-1urtb6r-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h2SemiBold css-1sk5upv-MuiTypography-root"
             >
               News Story title goes here and spans over second line
             </div>
@@ -31,7 +32,7 @@ exports[`FeaturedPostCard should render 1`] = `
               class="MuiBox-root css-1kvdr3x"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subheading css-mze3vf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subheading css-15yy3mb-MuiTypography-root"
               >
                 Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur
               </h6>
@@ -40,23 +41,24 @@ exports[`FeaturedPostCard should render 1`] = `
               class="MuiStack-root css-1262us1-MuiStack-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1 css-1i5r2d9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-18fuvi2-MuiTypography-root"
               >
                 Author Name
               </div>
               <div
-                class="MuiTypography-root MuiTypography-p1 css-1rq3c06-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-cz5bl3-MuiTypography-root"
               >
                 2020-10-10 10:10:10
               </div>
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-ozhbbr-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-p3 MuiLink-root MuiLink-underlineAlways css-c45nw1-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-p3 MuiLink-root MuiLink-underlineAlways css-1fok47i-MuiTypography-root-MuiLink-root"
               href="/research/1"
+              style="--Link-underlineColor: rgba(62, 32, 44, 0.4);"
             >
               Read More
             </a>
@@ -64,7 +66,7 @@ exports[`FeaturedPostCard should render 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1c8vknm-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1sgddrj-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
index 473244440..cd950a38f 100644
--- a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideo.snap.js
@@ -6,15 +6,15 @@ exports[`FeaturedVideos should render 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ydzulf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1r0pch9-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3Small css-1ru8fzi-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-j9k0gw-MuiTypography-root"
       >
         Featured Videos
       </h3>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-zow5z4-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-1qw2a80-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
@@ -23,7 +23,7 @@ exports[`FeaturedVideos should render 1`] = `
             class="MuiBox-root css-0"
           >
             <div
-              class="MuiBox-root css-s11qj8"
+              class="MuiBox-root css-f0o1et"
             >
               <div
                 aria-label="Video Player"
@@ -1213,12 +1213,12 @@ exports[`FeaturedVideos should render 1`] = `
               </div>
             </div>
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-1k5ns17-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-rp5pi0-MuiTypography-root"
             >
               Latest Release
             </h5>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-1m1ks3x-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-4jhbfx-MuiTypography-root"
             >
               Aired on
                
diff --git a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
index 1af4f1d79..a27df7152 100644
--- a/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
+++ b/apps/charterafrica/src/components/FeaturedVideos/FeaturedVideoCard.snap.js
@@ -6,7 +6,7 @@ exports[`FeaturedVideoCard should render 1`] = `
     class="MuiBox-root css-0"
   >
     <div
-      class="MuiBox-root css-s11qj8"
+      class="MuiBox-root css-f0o1et"
     >
       <div
         aria-label="Video Player"
@@ -1196,12 +1196,12 @@ exports[`FeaturedVideoCard should render 1`] = `
       </div>
     </div>
     <h5
-      class="MuiTypography-root MuiTypography-h5SemiBold css-1k5ns17-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5SemiBold css-rp5pi0-MuiTypography-root"
     >
       Latest Release
     </h5>
     <div
-      class="MuiTypography-root MuiTypography-p1 css-1m1ks3x-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-4jhbfx-MuiTypography-root"
     >
       Aired on
        
diff --git a/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js b/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
index e023b702f..00b4f71d8 100644
--- a/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
+++ b/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
@@ -6,15 +6,15 @@ exports[`<FlourishChart /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-wxw7nq-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1op9dlc-MuiContainer-root"
     >
       <h5
-        class="MuiTypography-root MuiTypography-h5SemiBold css-5afmx9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5SemiBold css-1uucibd-MuiTypography-root"
       >
         Flourish Charts
       </h5>
       <div
-        class="MuiTypography-root MuiTypography-p1 css-1d485r-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p1 css-1bvmr11-MuiTypography-root"
       >
         Flourish Charts
       </div>
diff --git a/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js b/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
index a4f5b9bfd..27f94c0d0 100644
--- a/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
+++ b/apps/charterafrica/src/components/FocalCountries/FocalCountries.snap.js
@@ -7,7 +7,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
       class="MuiBox-root css-ow7qj4"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ly8805-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1nyzrlf-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-xdpkhm-MuiGrid-root"
@@ -19,7 +19,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
               class="MuiBox-root css-qupvse"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1Small css-umhov1-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1Small css-1glxybr-MuiTypography-root"
               >
                 Focal Countries
               </h1>
@@ -27,7 +27,7 @@ exports[`<FocalCountries /> renders unchanged 1`] = `
                 class="MuiBox-root css-vrd2gm"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
                 >
                   The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
                 </p>
diff --git a/apps/charterafrica/src/components/Footer/Footer.snap.js b/apps/charterafrica/src/components/Footer/Footer.snap.js
index 89a9415a7..fb9dc257f 100644
--- a/apps/charterafrica/src/components/Footer/Footer.snap.js
+++ b/apps/charterafrica/src/components/Footer/Footer.snap.js
@@ -9,7 +9,7 @@ exports[`<Footer /> renders unchanged 1`] = `
       class="MuiBox-root css-1idzjj5"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-93fe3t-MuiGrid-root"
@@ -30,11 +30,11 @@ exports[`<Footer /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <figure
-                  class="MuiBox-root css-102aivi"
+                  class="MuiBox-root css-zxbr8s"
                 >
                   <img
                     alt="EU"
-                    class="css-6mvbnf"
+                    class="css-1vimlo0"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -51,7 +51,7 @@ exports[`<Footer /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 css-1pemd0m-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container css-uomglc-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container css-17wbwnu-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -60,7 +60,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiBox-root css-yho6nr"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2 css-1te4c5f-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2 css-sj0aus-MuiTypography-root"
                   >
                     This website was created and maintained with the financial support of the European Union. Its contents are the sole responsibility of the European Partnership for Democracy, Africtivistes, Code for Africa, ECPDM, and Goree Institute and do not necessarily reflect the views of the European Union.
                   </p>
@@ -76,7 +76,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiBox-root css-1s6v4an"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2SemiBold css-2li1iq-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2SemiBold css-f8lckj-MuiTypography-root"
                   >
                     Website designed and built by Code for Africa
                   </p>
@@ -89,7 +89,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-auto css-3fm92-MuiGrid-root"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-16az78j-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-vvqhkh-MuiTypography-root-MuiLink-root"
                     href="/"
                   >
                     Privacy Policy
@@ -99,7 +99,7 @@ exports[`<Footer /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-auto css-3fm92-MuiGrid-root"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-16az78j-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p1 MuiLink-root MuiLink-underlineAlways active css-vvqhkh-MuiTypography-root-MuiLink-root"
                     href="/"
                   >
                     Imprint
@@ -115,10 +115,10 @@ exports[`<Footer /> renders unchanged 1`] = `
       class="MuiBox-root css-onpmix"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-u81ong-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1v2h2lv-MuiContainer-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-p2SemiBold css-1h79qiy-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p2SemiBold css-dsh1b6-MuiTypography-root"
         >
           © 2022 European Partnership for Democracy (CC BY-NC 2.0)
         </div>
diff --git a/apps/charterafrica/src/components/Grantees/Grantees.snap.js b/apps/charterafrica/src/components/Grantees/Grantees.snap.js
index feddf8536..0cd1e15ea 100644
--- a/apps/charterafrica/src/components/Grantees/Grantees.snap.js
+++ b/apps/charterafrica/src/components/Grantees/Grantees.snap.js
@@ -6,34 +6,34 @@ exports[`<Grantees /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1kti42o-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1a3e8n3-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3Small css-1kwvb63-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-na0pej-MuiTypography-root"
       >
         Grantees
       </h3>
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-1ld3b9g-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-z6icgh-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -41,7 +41,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -50,14 +50,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r0:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1:"
                     role="button"
                     tabindex="0"
                   >
@@ -72,20 +74,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -93,7 +95,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -102,14 +104,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r2:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r3:"
                     role="button"
                     tabindex="0"
                   >
@@ -124,20 +128,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -145,7 +149,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -154,14 +158,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r4:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r5:"
                     role="button"
                     tabindex="0"
                   >
@@ -176,20 +182,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -197,7 +203,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -206,14 +212,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r6:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r7:"
                     role="button"
                     tabindex="0"
                   >
@@ -228,20 +236,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -249,7 +257,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -258,14 +266,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r8:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r9:"
                     role="button"
                     tabindex="0"
                   >
@@ -280,20 +290,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -301,7 +311,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -310,14 +320,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":ra:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rb:"
                     role="button"
                     tabindex="0"
                   >
@@ -332,20 +344,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -353,7 +365,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -362,14 +374,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rc:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rd:"
                     role="button"
                     tabindex="0"
                   >
@@ -384,20 +398,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -405,7 +419,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -414,14 +428,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":re:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rf:"
                     role="button"
                     tabindex="0"
                   >
@@ -436,20 +452,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -457,7 +473,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -466,14 +482,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rg:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rh:"
                     role="button"
                     tabindex="0"
                   >
@@ -488,20 +506,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -509,7 +527,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -518,14 +536,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":ri:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rj:"
                     role="button"
                     tabindex="0"
                   >
@@ -540,20 +560,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -561,7 +581,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -570,14 +590,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rk:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rl:"
                     role="button"
                     tabindex="0"
                   >
@@ -592,20 +614,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -613,7 +635,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -622,14 +644,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rm:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rn:"
                     role="button"
                     tabindex="0"
                   >
@@ -644,20 +668,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -665,7 +689,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -674,14 +698,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":ro:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rp:"
                     role="button"
                     tabindex="0"
                   >
@@ -696,20 +722,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -717,7 +743,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -726,14 +752,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rq:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rr:"
                     role="button"
                     tabindex="0"
                   >
@@ -748,20 +776,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -769,7 +797,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -778,14 +806,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":rs:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rt:"
                     role="button"
                     tabindex="0"
                   >
@@ -800,20 +830,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -821,7 +851,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -830,14 +860,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":ru:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":rv:"
                     role="button"
                     tabindex="0"
                   >
@@ -852,20 +884,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -873,7 +905,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -882,14 +914,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r10:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r11:"
                     role="button"
                     tabindex="0"
                   >
@@ -904,20 +938,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -925,7 +959,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -934,14 +968,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r12:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r13:"
                     role="button"
                     tabindex="0"
                   >
@@ -956,20 +992,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -977,7 +1013,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -986,14 +1022,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r14:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r15:"
                     role="button"
                     tabindex="0"
                   >
@@ -1008,20 +1046,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1029,7 +1067,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1038,14 +1076,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r16:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r17:"
                     role="button"
                     tabindex="0"
                   >
@@ -1060,20 +1100,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1081,7 +1121,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1090,14 +1130,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r18:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r19:"
                     role="button"
                     tabindex="0"
                   >
@@ -1112,20 +1154,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1133,7 +1175,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1142,14 +1184,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1a:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1b:"
                     role="button"
                     tabindex="0"
                   >
@@ -1164,20 +1208,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1185,7 +1229,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1194,14 +1238,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1c:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1d:"
                     role="button"
                     tabindex="0"
                   >
@@ -1216,20 +1262,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1237,7 +1283,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1246,14 +1292,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1e:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1f:"
                     role="button"
                     tabindex="0"
                   >
@@ -1268,20 +1316,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1289,7 +1337,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1298,14 +1346,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1g:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1h:"
                     role="button"
                     tabindex="0"
                   >
@@ -1320,20 +1370,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1341,7 +1391,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1350,14 +1400,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1i:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1j:"
                     role="button"
                     tabindex="0"
                   >
@@ -1372,20 +1424,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1393,7 +1445,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1402,14 +1454,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1k:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1l:"
                     role="button"
                     tabindex="0"
                   >
@@ -1424,20 +1478,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1445,7 +1499,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1454,14 +1508,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1m:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1n:"
                     role="button"
                     tabindex="0"
                   >
@@ -1476,20 +1532,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name
                 </h5>
@@ -1497,7 +1553,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1506,14 +1562,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1o:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1p:"
                     role="button"
                     tabindex="0"
                   >
@@ -1528,20 +1586,20 @@ exports[`<Grantees /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
           >
             <div
               class="MuiBox-root css-1ruxp1v"
             >
               <div
-                class="MuiCardMedia-root css-yvjiy-MuiCardMedia-root"
+                class="MuiCardMedia-root css-1ynoqfs-MuiCardMedia-root"
                 role="img"
               />
               <div
-                class="MuiCardContent-root css-1ycytn4-MuiCardContent-root"
+                class="MuiCardContent-root css-1juv20m-MuiCardContent-root"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 css-1g4k37w-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-7srbb-MuiTypography-root"
                 >
                   Grantee Name Grantee Name
                 </h5>
@@ -1549,7 +1607,7 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiBox-root css-b1zwnw"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                   >
                     Lorem ipsum dolor sit amet con sectetur adipiscing elit mi, interdum blandit fring illa fus. adipiscing elit mi, adipiscing.
                   </p>
@@ -1558,14 +1616,16 @@ 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-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess 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-1jd7qrn-MuiButtonBase-root-MuiButton-root"
+                    id=":r1q:"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    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"
+                    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-h3eb70-MuiButtonBase-root-MuiButton-root"
+                    id=":r1r:"
                     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 8fdde5b85..1958d3060 100644
--- a/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
+++ b/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
@@ -6,79 +6,84 @@ exports[`<GuidingPrinciples /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qbjolu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x30ed7-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h1Small css-kkm4ih-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1Small css-18mtumj-MuiTypography-root"
       >
         Guiding Principles
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388c3ebe92a85650e8051-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388c3ebe92a85650e8051-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388c3ebe92a85650e8051-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388c3ebe92a85650e8051-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Open Source
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Open Source
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388c3ebe92a85650e8051-header"
@@ -87,14 +92,14 @@ exports[`<GuidingPrinciples /> renders unchanged 1`] = `
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388c3ebe92a85650e8051-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -107,71 +112,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388e0ebe92a85650e8052-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388e0ebe92a85650e8052-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388e0ebe92a85650e8052-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388e0ebe92a85650e8052-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Teamwork
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Teamwork
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388e0ebe92a85650e8052-header"
@@ -180,14 +190,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388e0ebe92a85650e8052-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -200,71 +210,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f388f9ebe92a85650e8053-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f388f9ebe92a85650e8053-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f388f9ebe92a85650e8053-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f388f9ebe92a85650e8053-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Accountability
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Accountability
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f388f9ebe92a85650e8053-header"
@@ -273,14 +288,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f388f9ebe92a85650e8053-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
@@ -293,71 +308,76 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-7wmomf-MuiPaper-root-MuiAccordion-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
-        <div
-          aria-controls="panel-63f38902ebe92a85650e8054-content"
-          aria-expanded="false"
-          class="MuiButtonBase-root MuiAccordionSummary-root css-vess51-MuiButtonBase-root-MuiAccordionSummary-root"
-          id="panel-63f38902ebe92a85650e8054-header"
-          role="button"
-          tabindex="0"
+        <h3
+          class="MuiAccordion-heading css-cy7rkm-MuiAccordion-heading"
         >
-          <div
-            class="MuiAccordionSummary-content css-1betqn-MuiAccordionSummary-content"
+          <button
+            aria-controls="panel-63f38902ebe92a85650e8054-content"
+            aria-expanded="false"
+            class="MuiButtonBase-root MuiAccordionSummary-root css-h4rzs5-MuiButtonBase-root-MuiAccordionSummary-root"
+            id="panel-63f38902ebe92a85650e8054-header"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiGrid-root MuiGrid-container css-12gcizw-MuiGrid-root"
+            <span
+              class="MuiAccordionSummary-content css-18x5eyn-MuiAccordionSummary-content"
             >
               <div
-                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container css-16wnofg-MuiGrid-root"
               >
                 <div
-                  class="css-jijv3e"
+                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                 >
                   <div
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-                    focusable="false"
-                    viewbox="0 0 24 24"
-                  />
+                    class="css-jijv3e"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                      focusable="false"
+                      viewbox="0 0 24 24"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
-              >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-10 css-fj2vzh-MuiGrid-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-h5 css-1g8avbx-MuiTypography-root"
+                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-16402sw-MuiGrid-root"
                   >
-                    Impact
+                    <div
+                      class="MuiTypography-root MuiTypography-h5 css-1me1hor-MuiTypography-root"
+                    >
+                      Impact
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-          >
-            <div
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1y2pftv-MuiSvgIcon-root"
-              focusable="false"
-              viewbox="0 0 24 24"
-            />
-          </div>
-        </div>
+            </span>
+            <span
+              class="MuiAccordionSummary-expandIconWrapper css-1wqf3nl-MuiAccordionSummary-expandIconWrapper"
+            >
+              <div
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1o6uw8c-MuiSvgIcon-root"
+                focusable="false"
+                viewbox="0 0 24 24"
+              />
+            </span>
+          </button>
+        </h3>
         <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+          class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-cwrbtg-MuiCollapse-root"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-1x6hinx-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
             >
               <div
                 aria-labelledby="panel-63f38902ebe92a85650e8054-header"
@@ -366,14 +386,14 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
                 role="region"
               >
                 <div
-                  class="MuiAccordionDetails-root css-ohput3-MuiAccordionDetails-root"
+                  class="MuiAccordionDetails-root css-11n1jjl-MuiAccordionDetails-root"
                   id="panel-63f38902ebe92a85650e8054-content"
                 >
                   <div
                     class="MuiBox-root css-0"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p2 css-1f1mmvn-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p2 css-gyz7sc-MuiTypography-root"
                     >
                       Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus penatibus congue vestibulum libero in neque dignissim, netus mus orci eu molestie per gravida, vel placerat maecenas dictumst nec etiam. Libero proin sagittis curae volutpat integer mattis magnis sociis, molestie curabitur montes per lectus sociosqu natoque facilisi, vestibulum convallis cursus nascetur eget vivamus nam. Augue placerat cubilia blandit integer nulla tempor magna, pretium sem magnis netus ullamcorper luctus eget egestas, curae fermentum rhoncus vitae odio sociis.
 Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan ornare fermentum varius praesent sapien imperdiet, natoque morbi nullam mauris suspendisse nisi aptent. Vehicula malesuada litora libero himenaeos quisque vestibulum urna pretium ullamcorper dapibus, scelerisque phasellus commodo ligula est ut nascetur magna nisi ad ante, senectus sem nostra donec morbi placerat posuere pharetra pellentesque. 
diff --git a/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js b/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
index 09767fa81..9131413a8 100644
--- a/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
+++ b/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
@@ -6,17 +6,17 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
     class="MuiBox-root css-1n99d1h"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-9m637t"
       >
         <figure
-          class="MuiBox-root css-1lypdo1"
+          class="MuiBox-root css-q6ue4o"
         >
           <img
             alt="Democracy Support Helpdesk"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="fill"
             decoding="async"
             loading="lazy"
@@ -28,7 +28,7 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
           class="MuiBox-root css-j7qwjs"
         >
           <h1
-            class="MuiTypography-root MuiTypography-h1Small css-ek5pw1-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h1Small css-1gf7d1q-MuiTypography-root"
           >
             Democracy Support Helpdesk
           </h1>
@@ -36,19 +36,20 @@ exports[`<Helpdesk /> renders unchanged 1`] = `
             class="MuiBox-root css-1jz2duz"
           >
             <p
-              class="MuiTypography-root MuiTypography-p3 css-1s69ce2-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-1aa3xuk-MuiTypography-root"
             >
               Need help connecting with experts?
             </p>
             <p
-              class="MuiTypography-root MuiTypography-p3 css-1s69ce2-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p3 css-1aa3xuk-MuiTypography-root"
             >
               
 We can help you find specialists or resources to improve the impact of your democracy project.
             </p>
           </div>
           <button
-            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"
+            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-1j3b0ra-MuiButtonBase-root-MuiButton-root"
+            id=":r0:"
             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 b0136f547..dcfe45a23 100644
--- a/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
+++ b/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
@@ -6,7 +6,7 @@ exports[`<HelpdeskPageContent /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-j7qwjs"
@@ -15,19 +15,20 @@ exports[`<HelpdeskPageContent /> renders unchanged 1`] = `
           class="MuiBox-root css-1r3trlq"
         >
           <p
-            class="MuiTypography-root MuiTypography-p3 css-1xflfon-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p3 css-1svdd3f-MuiTypography-root"
           >
             Need help connecting with experts?
           </p>
           <p
-            class="MuiTypography-root MuiTypography-p3 css-1xflfon-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p3 css-1svdd3f-MuiTypography-root"
           >
             
 We can help you find specialists or resources to improve the impact of your democracy project.
           </p>
         </div>
         <button
-          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"
+          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-dlqng1-MuiButtonBase-root-MuiButton-root"
+          id=":r0:"
           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 55374181e..e9df89de7 100644
--- a/apps/charterafrica/src/components/Hero/Hero.snap.js
+++ b/apps/charterafrica/src/components/Hero/Hero.snap.js
@@ -21,7 +21,7 @@ exports[`<Hero /> renders unchanged 1`] = `
             class="MuiBox-root css-1lerasb"
           >
             <div
-              class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1s39khq-MuiContainer-root"
+              class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-gww3xw-MuiContainer-root"
             >
               <div
                 class="MuiBox-root css-dvxtzn"
@@ -30,7 +30,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                   class="MuiBox-root css-jd4a7r"
                 >
                   <h1
-                    class="MuiTypography-root MuiTypography-h2Small css-1awbn21-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h2Small css-1afd4o7-MuiTypography-root"
                   >
                     Find Africa's best 
                     <em>
@@ -40,7 +40,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                   </h1>
                 </div>
                 <div
-                  class="MuiTypography-root MuiTypography-p1 css-15y612c-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-s9bs3i-MuiTypography-root"
                 >
                   Easy to use resources for democracy activists
                 </div>
@@ -48,19 +48,20 @@ 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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary 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-1yakt1o-MuiButtonBase-root-MuiButton-root"
+                    id=":r0:"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-1in3o51-MuiButton-startIcon"
                     >
                       <figure
-                        class="MuiBox-root css-zmiex6"
+                        class="MuiBox-root css-1qtc0jw"
                       >
                         <img
                           alt="Software"
-                          class="css-g98gbd"
+                          class="css-qv2885"
                           data-nimg="fill"
                           decoding="async"
                           loading="lazy"
@@ -72,19 +73,20 @@ exports[`<Hero /> renders unchanged 1`] = `
                     Explore software
                   </button>
                   <button
-                    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"
+                    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-1yakt1o-MuiButtonBase-root-MuiButton-root"
+                    id=":r1:"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-1in3o51-MuiButton-startIcon"
                     >
                       <figure
-                        class="MuiBox-root css-zmiex6"
+                        class="MuiBox-root css-1qtc0jw"
                       >
                         <img
                           alt="Database"
-                          class="css-g98gbd"
+                          class="css-qv2885"
                           data-nimg="fill"
                           decoding="async"
                           loading="lazy"
@@ -103,13 +105,14 @@ exports[`<Hero /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiMobileStepper-root MuiMobileStepper-positionStatic css-rddy23-MuiPaper-root-MuiMobileStepper-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiMobileStepper-root MuiMobileStepper-positionStatic css-kaa7ne-MuiPaper-root-MuiMobileStepper-root"
+      style="--Paper-shadow: none;"
     >
       <div
-        class="MuiMobileStepper-dots css-1384nzf-MuiMobileStepper-dots"
+        class="MuiMobileStepper-dots css-13wf08b-MuiMobileStepper-dots"
       >
         <div
-          class="MuiMobileStepper-dot MuiMobileStepper-dotActive css-1scj8vt-MuiMobileStepper-dot"
+          class="MuiMobileStepper-dot MuiMobileStepper-dotActive css-hkkix3-MuiMobileStepper-dot"
         />
       </div>
     </div>
diff --git a/apps/charterafrica/src/components/Impressum/Impressum.snap.js b/apps/charterafrica/src/components/Impressum/Impressum.snap.js
index 806ab2484..9f8490678 100644
--- a/apps/charterafrica/src/components/Impressum/Impressum.snap.js
+++ b/apps/charterafrica/src/components/Impressum/Impressum.snap.js
@@ -6,20 +6,20 @@ exports[`<Impressum /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10ehrg6-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-idlf64-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-ae960m-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-5 css-1vm9ek7-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-4ah52f-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-1pgoklf"
+            class="MuiBox-root css-i8cjvb"
           >
             <img
               alt="S"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -41,25 +41,25 @@ exports[`<Impressum /> renders unchanged 1`] = `
               class="MuiBox-root css-12mwhaj"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               >
                 European Partnership for Democracy (EPD)
 Rue Froissart 123-133
 1040 Brussels, Belgium
               </p>
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               />
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               >
                 EPD is registered in Belgium (0648.708.779).
               </p>
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               />
               <p
-                class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
               >
                 You can contact EPD via email (info@epd.eu) or by phone (+32 2 733 2282).
               </p>
diff --git a/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js b/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
index cf4aa3e95..59ae98667 100644
--- a/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
+++ b/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
@@ -3,27 +3,28 @@
 exports[`<LanguageButton /> renders unchanged 1`] = `
 <div>
   <button
-    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"
+    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-ny25p5-MuiButtonBase-root-MuiButton-root"
+    id=":r0:"
     tabindex="0"
     type="button"
   >
     <span
-      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
     >
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 24 24"
       />
     </span>
     en
     <span
-      class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+      class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
     >
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
diff --git a/apps/charterafrica/src/components/Layout/Layout.snap.js b/apps/charterafrica/src/components/Layout/Layout.snap.js
index e83582fd1..16b06eab2 100644
--- a/apps/charterafrica/src/components/Layout/Layout.snap.js
+++ b/apps/charterafrica/src/components/Layout/Layout.snap.js
@@ -3,13 +3,14 @@
 exports[`<Layout /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-bxh7mj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-n0kqde-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1gcfjze-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-lxmw82-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12jovna-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-rdfh4n-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -22,13 +23,17 @@ exports[`<Layout /> renders unchanged 1`] = `
           >
             <button
               aria-label="navigation"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 32 32"
               />
@@ -45,7 +50,7 @@ exports[`<Layout /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -54,67 +59,79 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="css-xthg9g"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/resources"
                   >
                     Resources
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r1:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/knowledge"
                   >
                     Knowledge
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r2:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/opportunities"
                   >
                     Oppportunities
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r3:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/about"
                   >
                     About
@@ -125,27 +142,28 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-ny25p5-MuiButtonBase-root-MuiButton-root"
+                  id=":r4:"
                   tabindex="0"
                   type="button"
                 >
                   <span
-                    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+                    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
                   >
                     <div
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1aqxn45-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-5ah855-MuiSvgIcon-root"
                       focusable="false"
                       viewbox="0 0 24 24"
                     />
                   </span>
                   en
                   <span
-                    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
                   >
                     <div
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1lew53b-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1tfujsx-MuiSvgIcon-root"
                       focusable="false"
                       viewbox="0 0 16 16"
                     />
@@ -165,7 +183,7 @@ exports[`<Layout /> renders unchanged 1`] = `
       class="MuiBox-root css-1idzjj5"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-s6f1m4-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-10vms58-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-93fe3t-MuiGrid-root"
@@ -191,7 +209,7 @@ exports[`<Layout /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-7 css-1pemd0m-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container css-uomglc-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container css-17wbwnu-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -200,7 +218,7 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="MuiBox-root css-yho6nr"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2 css-1te4c5f-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2 css-sj0aus-MuiTypography-root"
                   />
                 </div>
               </div>
@@ -214,7 +232,7 @@ exports[`<Layout /> renders unchanged 1`] = `
                   class="MuiBox-root css-1s6v4an"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-p2SemiBold css-2li1iq-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p2SemiBold css-f8lckj-MuiTypography-root"
                   />
                 </div>
               </div>
@@ -227,7 +245,7 @@ exports[`<Layout /> renders unchanged 1`] = `
       class="MuiBox-root css-onpmix"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-u81ong-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1v2h2lv-MuiContainer-root"
       />
     </div>
   </footer>
diff --git a/apps/charterafrica/src/components/LongForm/LongForm.snap.js b/apps/charterafrica/src/components/LongForm/LongForm.snap.js
index 1f765e431..d89bc7dbb 100644
--- a/apps/charterafrica/src/components/LongForm/LongForm.snap.js
+++ b/apps/charterafrica/src/components/LongForm/LongForm.snap.js
@@ -6,7 +6,7 @@ exports[`<LongForm /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xmubp1-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-11qhdim-MuiContainer-root"
     />
   </div>
 </div>
diff --git a/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js b/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
index 653d3c7cf..069c48e60 100644
--- a/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
+++ b/apps/charterafrica/src/components/LongFormMediaBlock/LongFormMediaBlock.snap.js
@@ -3,11 +3,11 @@
 exports[`<LongFormMediaBlock /> renders unchanged 1`] = `
 <div>
   <figure
-    class="MuiBox-root css-g1fxym"
+    class="MuiBox-root css-82o9x6"
   >
     <img
       alt="Featured Post"
-      class="css-g98gbd"
+      class="css-qv2885"
       data-nimg="1"
       decoding="async"
       height="0"
@@ -18,7 +18,7 @@ exports[`<LongFormMediaBlock /> renders unchanged 1`] = `
       width="0"
     />
     <figcaption
-      class="MuiTypography-root MuiTypography-caption css-fl2ocl-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-caption css-1uaaouy-MuiTypography-root"
     >
       Image caption.
     </figcaption>
diff --git a/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
index ba2c19ff9..ec66e5936 100644
--- a/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/charterafrica/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-142s5v6"
   >
     <p
-      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
     >
       We process and manage your personal data in compliance with the European Union’s General Data Protection Regulation (GDPR). The following information provides an overview of how we process and manage your personal data as well as of your rights as a visitor and user of this site.
 Who is responsible and who may you contact?
diff --git a/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
index f8de4a6a2..dadd5709b 100644
--- a/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/charterafrica/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -13,13 +13,17 @@ exports[`<MobileNavBar /> renders unchanged 1`] = `
     >
       <button
         aria-label="navigation"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
+        id=":r0:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 32 32"
         />
diff --git a/apps/charterafrica/src/components/Mooc/Mooc.snap.js b/apps/charterafrica/src/components/Mooc/Mooc.snap.js
index 51846aa06..30e8d84ed 100644
--- a/apps/charterafrica/src/components/Mooc/Mooc.snap.js
+++ b/apps/charterafrica/src/components/Mooc/Mooc.snap.js
@@ -6,13 +6,13 @@ exports[`<Mooc/> renders unchanged 1`] = `
     class="MuiBox-root css-l3bbx9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tgrrgk-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ipyg2f-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-7yylxy-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1gkqic5-MuiGrid-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-rm5v4n-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-10xnvyd-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -22,11 +22,11 @@ exports[`<Mooc/> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-15gjm0g-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-jitnt0"
+            class="MuiBox-root css-1w3flzm"
           >
             <img
               alt="MOOC"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/charterafrica/src/components/NavBar/NavBar.snap.js b/apps/charterafrica/src/components/NavBar/NavBar.snap.js
index 5384036c4..2945c7e24 100644
--- a/apps/charterafrica/src/components/NavBar/NavBar.snap.js
+++ b/apps/charterafrica/src/components/NavBar/NavBar.snap.js
@@ -3,13 +3,14 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-bxh7mj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-n0kqde-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1gcfjze-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-lxmw82-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12jovna-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-rdfh4n-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -18,7 +19,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-13uxck9-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-geux3z-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
               href="/"
               tabindex="0"
             >
@@ -37,13 +38,17 @@ exports[`<NavBar /> renders unchanged 1`] = `
           >
             <button
               aria-label="navigation"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-53g0n7-MuiButtonBase-root-MuiIconButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-lujri2-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9lf3ez-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 32 32"
               />
@@ -57,7 +62,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-ethxoc-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root active css-1lpbt8y-MuiTypography-root-MuiLink-root-MuiButtonBase-root"
               href="/"
               tabindex="0"
             >
@@ -75,7 +80,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-1s57hzs-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap css-10s5dmi-MuiGrid-root"
             >
               <div
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -84,67 +89,79 @@ exports[`<NavBar /> renders unchanged 1`] = `
                   class="css-xthg9g"
                 >
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/resources"
                   >
                     Resources
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r1:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/knowledge"
                   >
                     Knowledge
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r2:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/opportunities"
                   >
                     Oppportunities
                     <button
                       aria-haspopup="menu"
                       aria-label="select merge strategy"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+                      id=":r3:"
                       tabindex="0"
                       type="button"
                     >
+                      <span
+                        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                      />
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 16 16"
                       />
                     </button>
                   </a>
                   <a
-                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+                    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
                     href="/about"
                   >
                     About
diff --git a/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js b/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
index ee19441de..46d88e694 100644
--- a/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
+++ b/apps/charterafrica/src/components/NavBarDropdown/NavBarDropdown.snap.js
@@ -3,20 +3,24 @@
 exports[`<NavBarDropdown /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
     href="/resources"
   >
     Resources
     <button
       aria-haspopup="menu"
       aria-label="select merge strategy"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
+      <span
+        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+      />
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
diff --git a/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
index 26a0f585c..a671e642f 100644
--- a/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/charterafrica/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,30 +6,30 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="MuiBox-root css-12tykev"
   >
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/resources"
       >
         Resources
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/tools"
         tabindex="0"
       >
         Tools
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/data"
         tabindex="0"
       >
         Data
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/resources/people"
         tabindex="0"
       >
@@ -37,37 +37,37 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/knowledge"
       >
         Knowledge
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/explainers"
         tabindex="0"
       >
         Explainers
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/news"
         tabindex="0"
       >
         News
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/research"
         tabindex="0"
       >
         Research
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/knowledge/academy"
         tabindex="0"
       >
@@ -75,37 +75,37 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/opportunities"
       >
         Oppportunities
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/grants-and-fellowships"
         tabindex="0"
       >
         Grants and Fellowships
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/events"
         tabindex="0"
       >
         Events
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/community"
         tabindex="0"
       >
         Community
       </a>
       <a
-        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-yayf3y-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
+        class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root css-18a2jz5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiListItemButton-root"
         href="/opportunities/democracy-helpdesk"
         tabindex="0"
       >
@@ -113,10 +113,10 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </nav>
     <nav
-      class="MuiList-root MuiList-padding MuiList-subheader css-15o1hun-MuiList-root"
+      class="MuiList-root MuiList-padding MuiList-subheader css-1aiwhli-MuiList-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-8y40qm-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone MuiListSubheader-root MuiListSubheader-colorInherit MuiListSubheader-gutters css-yghx58-MuiTypography-root-MuiLink-root-MuiListSubheader-root"
         href="/about"
       >
         About
diff --git a/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js b/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
index 974dbcc32..01e1265bf 100644
--- a/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
+++ b/apps/charterafrica/src/components/NavBarNavMenu/NavBarNavMenu.snap.js
@@ -6,67 +6,79 @@ exports[`<NavBarNavMenu /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
       href="/resources"
     >
       Resources
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+        id=":r0:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
       href="/knowledge"
     >
       Knowledge
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+        id=":r1:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
       href="/opportunities"
     >
       Oppportunities
       <button
         aria-haspopup="menu"
         aria-label="select merge strategy"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ac7f14-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1krvc7o-MuiButtonBase-root-MuiIconButton-root"
+        id=":r2:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1s6992r-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-9kj0vt-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
     </a>
     <a
-      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-p2engr-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-p3SemiBold MuiLink-root MuiLink-underlineNone css-1gzm295-MuiTypography-root-MuiLink-root"
       href="/about"
     >
       About
diff --git a/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js b/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
index 134ec0fa4..78ddb8141 100644
--- a/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
+++ b/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
@@ -6,13 +6,14 @@ exports[`<NextPrevPagination /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <ul
-      class="css-1szo00h"
+      class="css-1u984he"
     >
       <li
         class="MuiBox-root css-0"
       >
         <button
-          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"
+          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-1ue9ibh-MuiButtonBase-root-MuiButton-root"
+          id=":r0:"
           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 d9ed37443..91325b180 100644
--- a/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
+++ b/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
@@ -6,7 +6,8 @@ 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-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary 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-1ue9ibh-MuiButtonBase-root-MuiButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
diff --git a/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js b/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
index ea794983d..1f9ab605f 100644
--- a/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
+++ b/apps/charterafrica/src/components/OpenCloseIcon/OpenCloseIcon.snap.js
@@ -4,7 +4,7 @@ exports[`<OpenCloseIcon /> renders unchanged 1`] = `
 <div>
   <div
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ccdodd-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17poc4t-MuiSvgIcon-root"
     focusable="false"
     viewbox="0 0 16 16"
   />
diff --git a/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js b/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
index 25689bf3f..bac646422 100644
--- a/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
+++ b/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
@@ -6,10 +6,10 @@ exports[`<Opportunity /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-18qfgg5-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2u7biu-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-1b14d7z-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-4ef04g-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1g4nj95-MuiGrid-root"
@@ -18,11 +18,11 @@ exports[`<Opportunity /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <figure
-              class="MuiBox-root css-1nudpye"
+              class="MuiBox-root css-1h2h3lo"
             >
               <img
                 alt="Hero 1"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="1"
                 decoding="async"
                 height="0"
@@ -36,16 +36,16 @@ exports[`<Opportunity /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-1h2ytjv-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-frq7pl-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 css-15he5x-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 css-e2xkrp-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-h3Small css-1jnbwjl-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h3Small css-1hity0z-MuiTypography-root"
               >
                 Opportunity title
               </div>
@@ -54,7 +54,7 @@ exports[`<Opportunity /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <div
-                class="MuiTypography-root MuiTypography-subheading css-1okuc1l-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subheading css-i042z2-MuiTypography-root"
               >
                 DEADLINE: February 6, 2023 at 12:00:00 AM
               </div>
@@ -63,8 +63,9 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1o5bdc4-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="/opportunities/felloships/grants/research-title-goes-here-and-spans-over-second-line"
+                id=":r0:"
                 tabindex="0"
               >
                 Apply Now
diff --git a/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js b/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
index c2ef3f357..8a22a1f8b 100644
--- a/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCard/OpportunityCard.snap.js
@@ -3,25 +3,26 @@
 exports[`<OpportunityCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root active css-1j8g7zj-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root active css-1sk9sjr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/"
       tabindex="0"
     >
       <img
         alt="Grant 1"
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
         height="187.26"
         src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
         width="270"
       />
       <div
-        class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+        class="MuiCardContent-root css-4k114w-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
         >
           Democratic Governance in Zambia
         </h5>
@@ -29,18 +30,18 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiBox-root css-1tdn91g"
         >
           <p
-            class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
           >
             This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
           </p>
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
     <div
-      class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+      class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -49,7 +50,7 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <span
-            class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
           >
             : undefined
           </span>
diff --git a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
index 3c24cc76b..7b8672846 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardGrid.snap.js
@@ -9,25 +9,26 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 1"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
@@ -35,18 +36,18 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiBox-root css-1tdn91g"
             >
               <p
-                class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
               >
                 This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
               </p>
             </div>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -55,7 +56,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
               >
                 : undefined
               </span>
@@ -68,35 +69,36 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 2"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -105,7 +107,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
               >
                 : undefined
               </span>
@@ -118,35 +120,36 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <button
-          class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
           tabindex="0"
           type="button"
         >
           <img
             alt="Grant 3"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
             height="187.26"
             src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
             width="270"
           />
           <div
-            class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+            class="MuiCardContent-root css-4k114w-MuiCardContent-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
             >
               Democratic Governance in Zambia
             </h5>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
           />
         </button>
         <div
-          class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+          class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
         >
           <div
             class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -155,7 +158,7 @@ exports[`<OpportunityCardGrid /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
               >
                 : undefined
               </span>
diff --git a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
index 066d86f1d..5e97ddca6 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
@@ -9,7 +9,7 @@ exports[`<OpportunityCardHeader /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
     >
       <h5
-        class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
       >
         Grants
       </h5>
@@ -18,7 +18,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+        id=":r0:"
         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 21e4f221a..8677b8cef 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
@@ -12,7 +12,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
         >
           Grants
         </h5>
@@ -21,7 +21,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+          id=":r0:"
           tabindex="0"
           type="button"
         >
@@ -36,25 +37,26 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 1"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
@@ -62,18 +64,18 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiBox-root css-1tdn91g"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                 >
                   This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                 </p>
               </div>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -82,7 +84,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -95,35 +97,36 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 2"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -132,7 +135,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -145,35 +148,36 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <button
-            class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
             tabindex="0"
             type="button"
           >
             <img
               alt="Grant 3"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
               height="187.26"
               src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
               width="270"
             />
             <div
-              class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+              class="MuiCardContent-root css-4k114w-MuiCardContent-root"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
               >
                 Democratic Governance in Zambia
               </h5>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </button>
           <div
-            class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+            class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -182,7 +186,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                 >
                   : undefined
                 </span>
@@ -193,7 +197,8 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
       </div>
     </div>
     <button
-      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"
+      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-1ul7yle-MuiButtonBase-root-MuiButton-root"
+      id=":r1:"
       tabindex="0"
       type="button"
     >
diff --git a/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js b/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
index b31a1cf73..43df7a079 100644
--- a/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
+++ b/apps/charterafrica/src/components/OpportunityHeader/OpportunityHeader.snap.js
@@ -6,15 +6,15 @@ exports[`<OpportunityHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-156ejva"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3 css-1dbe021-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 css-gk3coa-MuiTypography-root"
       >
         Grants and Fellowships
       </h3>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-f8pbns-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-e230pt-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js b/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
index cfe7a4a86..c32461f06 100644
--- a/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
+++ b/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
@@ -10,23 +10,23 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
       class="MuiBox-root css-156ejva"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1om00n2-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1iv9rp5-MuiContainer-root"
       >
         <h3
-          class="MuiTypography-root MuiTypography-h3 css-1dbe021-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3 css-gk3coa-MuiTypography-root"
         >
           Fellowships
         </h3>
         <hr
-          class="MuiDivider-root MuiDivider-fullWidth css-f8pbns-MuiDivider-root"
+          class="MuiDivider-root MuiDivider-fullWidth css-e230pt-MuiDivider-root"
         />
       </div>
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-xskjid-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ihbtgs-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h3Small css-1g0ac4a-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3Small css-10gkr8y-MuiTypography-root"
       >
         Fellowships
       </div>
@@ -40,7 +40,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
             >
               open
             </h5>
@@ -49,7 +49,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
@@ -64,25 +65,26 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 1"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -90,18 +92,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -110,7 +112,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -121,7 +123,8 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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"
+          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
+          id=":r1:"
           tabindex="0"
           type="button"
         >
@@ -129,7 +132,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
       />
       <div
         class="MuiBox-root css-1bsmwc1"
@@ -141,7 +144,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
             >
               closed
             </h5>
@@ -150,7 +153,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+              id=":r2:"
               tabindex="0"
               type="button"
             >
@@ -165,25 +169,26 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 2"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -191,18 +196,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -211,7 +216,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -222,7 +227,8 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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"
+          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
+          id=":r3:"
           tabindex="0"
           type="button"
         >
@@ -230,7 +236,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
       />
       <div
         class="MuiBox-root css-1bsmwc1"
@@ -242,7 +248,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1atob12-MuiGrid-root"
           >
             <h5
-              class="MuiTypography-root MuiTypography-h5SemiBold css-gjubs-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5SemiBold css-1qmsla9-MuiTypography-root"
             >
               upcoming
             </h5>
@@ -251,7 +257,8 @@ 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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-10qc60x-MuiButtonBase-root-MuiButton-root"
+              id=":r4:"
               tabindex="0"
               type="button"
             >
@@ -266,25 +273,26 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3 css-qnlzq-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-s80wf8-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-7ck4tl-MuiPaper-root-MuiCard-root"
+              style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-1hrkjpx-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-9wpcnj-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
                 <img
                   alt="Grant 3"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-cpcn2w-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-xe7bcs-MuiCardMedia-root"
                   height="187.26"
                   src="/images/the-charter-project-africa_brandguide_guidedemarque-2-2.jpg"
                   width="270"
                 />
                 <div
-                  class="MuiCardContent-root css-1dwdtg8-MuiCardContent-root"
+                  class="MuiCardContent-root css-4k114w-MuiCardContent-root"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5SemiBold css-14u98z9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h5SemiBold css-1izavza-MuiTypography-root"
                   >
                     Democratic Governance in Zambia
                   </h5>
@@ -292,18 +300,18 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiBox-root css-1tdn91g"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-p1 css-1deqp7c-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-p1 css-1j4tp75-MuiTypography-root"
                     >
                       This call will focus on using civic tech solutions to strengthen democratic governance in Zambia.
                     </p>
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
               <div
-                class="MuiCardActions-root css-kfkx4h-MuiCardActions-root"
+                class="MuiCardActions-root css-1qqjlrp-MuiCardActions-root"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -312,7 +320,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-y4met2-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-153ei4t-MuiTypography-root"
                     >
                       : undefined
                     </span>
@@ -323,7 +331,8 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          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"
+          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-1ul7yle-MuiButtonBase-root-MuiButton-root"
+          id=":r5:"
           tabindex="0"
           type="button"
         >
@@ -331,7 +340,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
         </button>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-1tnj24n-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-sskho3-MuiDivider-root"
       />
     </div>
   </div>
diff --git a/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js b/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
index c18e31594..a1b67ad44 100644
--- a/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
+++ b/apps/charterafrica/src/components/OrganisationCard/OrganisationCard.snap.js
@@ -3,34 +3,34 @@
 exports[`<OrganisationCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <div
-        class="MuiCardMedia-root css-muxve-MuiCardMedia-root"
+        class="MuiCardMedia-root css-shxb4t-MuiCardMedia-root"
         role="img"
         style="background-image: url(/image.jpg);"
       />
       <div
-        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
+        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-nwrr25-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-1r8vkhu-MuiTypography-root"
         >
           Tool Name
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
         >
           Sample description
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js b/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
index e4fddaae9..c08c0546c 100644
--- a/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
+++ b/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
@@ -3,8 +3,9 @@
 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-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary 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 css-1rha4ds-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
     href="https://charter.africa"
+    id=":r0:"
     rel="noreferrer noopener"
     tabindex="0"
     target="_blank"
@@ -13,11 +14,11 @@ exports[`<OrganisationImageCard /> renders unchanged 1`] = `
       class="MuiStack-root css-1l9qugs-MuiStack-root"
     >
       <figure
-        class="MuiBox-root css-1u82k0c"
+        class="MuiBox-root css-6roq6o"
       >
         <img
           alt="Organisation Name"
-          class="css-1r7uxv0"
+          class="css-1enhhhm"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -28,7 +29,7 @@ exports[`<OrganisationImageCard /> renders unchanged 1`] = `
         />
       </figure>
       <div
-        class="MuiTypography-root MuiTypography-p3SemiBold css-1xn8kt9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-p3SemiBold css-1aw81q8-MuiTypography-root"
       >
         Organisation Name
       </div>
diff --git a/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js b/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
index 74aac2e9a..31b04ebb1 100644
--- a/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
+++ b/apps/charterafrica/src/components/PageDescription/PageDescription.snap.js
@@ -6,13 +6,13 @@ exports[`<PageDescription/> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ydzulf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1r0pch9-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-3zjynb"
       >
         <p
-          class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
         >
           The largest digital database for 
           <strong>
diff --git a/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js b/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
index e79c3b884..65babe1b6 100644
--- a/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/charterafrica/src/components/PageHeader/PageHeader.snap.js
@@ -9,17 +9,17 @@ exports[`<PageHeader/> renders unchanged 1`] = `
       class="MuiBox-root css-14gw6dj"
     >
       <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-u9nzae-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-[object Object] MuiGrid-wrap-xs-nowrap css-1qw5437-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-xwarr-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-17u5j6m"
+            class="MuiBox-root css-qe5rve"
           >
             <img
               alt="About"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="1"
               decoding="async"
               height="0"
@@ -32,7 +32,7 @@ exports[`<PageHeader/> renders unchanged 1`] = `
           </figure>
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kqkv4f-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-ten9jr-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -41,7 +41,7 @@ exports[`<PageHeader/> renders unchanged 1`] = `
               class="MuiBox-root css-qhe18k"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1Small css-1k3x2yj-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1Small css-1a8ie7p-MuiTypography-root"
               >
                 The largest digital database for 
                 <strong>
diff --git a/apps/charterafrica/src/components/PostCard/PostCard.snap.js b/apps/charterafrica/src/components/PostCard/PostCard.snap.js
index 16a6cfd06..839c5709a 100644
--- a/apps/charterafrica/src/components/PostCard/PostCard.snap.js
+++ b/apps/charterafrica/src/components/PostCard/PostCard.snap.js
@@ -3,39 +3,39 @@
 exports[`<PostCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1kskzdz-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-yj0p15-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <div
-        class="MuiCardMedia-root css-muxve-MuiCardMedia-root"
+        class="MuiCardMedia-root css-shxb4t-MuiCardMedia-root"
         role="img"
         style="background-image: url(/image.jpg);"
       />
       <div
-        class="MuiCardContent-root css-wsecsz-MuiCardContent-root"
+        class="MuiCardContent-root css-1bgagac-MuiCardContent-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-6z9xjs-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-fy2ogv-MuiTypography-root"
         >
           Some title
         </h5>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-1tk9iea-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1epd9r5-MuiTypography-root"
         >
           Sakwa
         </div>
         <div
-          class="MuiTypography-root MuiTypography-p1 css-1tk9iea-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-p1 css-1epd9r5-MuiTypography-root"
         >
           2023-09-01
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/Repository/Repository.snap.js b/apps/charterafrica/src/components/Repository/Repository.snap.js
index 5f86d64e1..1a66e1a94 100644
--- a/apps/charterafrica/src/components/Repository/Repository.snap.js
+++ b/apps/charterafrica/src/components/Repository/Repository.snap.js
@@ -3,7 +3,7 @@
 exports[`<Repository /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-15h90l6-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-5t2npa-MuiTypography-root-MuiLink-root"
     href="https://charter.africa"
     rel="noreferrer noopener"
     target="_blank"
@@ -15,22 +15,22 @@ exports[`<Repository /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h6 css-jbdq1g-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h6 css-1mlgsna-MuiTypography-root"
         >
           Repository 1
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
         >
           Charter Africa website
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
         >
           React, Next.js, TypeScript
         </div>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1l24uz4-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-r8nrk3-MuiTypography-root"
         >
           October 1, 2021
         </div>
@@ -45,16 +45,16 @@ exports[`<Repository /> renders unchanged 1`] = `
             sx="[object Object]"
           />
           <div
-            class="MuiTypography-root MuiTypography-p1SemiBold css-12svwoa-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-p1SemiBold css-lkcrki-MuiTypography-root"
           >
             100
           </div>
         </div>
         <div
-          class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1ayp8e5-MuiChip-root"
+          class="MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-outlinedDefault css-1w0hnh0-MuiChip-root"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-1jzq0dw-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-16cgrcw-MuiChip-label"
           >
             PUBLIC
           </span>
diff --git a/apps/charterafrica/src/components/Resources/Resources.snap.js b/apps/charterafrica/src/components/Resources/Resources.snap.js
index 8b6acc5e4..d14fed9a9 100644
--- a/apps/charterafrica/src/components/Resources/Resources.snap.js
+++ b/apps/charterafrica/src/components/Resources/Resources.snap.js
@@ -6,7 +6,7 @@ exports[`<Resources /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <h1
-      class="MuiTypography-root MuiTypography-h1Small css-1qj3dn7-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h1Small css-1h09don-MuiTypography-root"
     >
       Our Resources
     </h1>
@@ -20,11 +20,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-1rtaf4d"
+            class="MuiBox-root css-7lnogv"
           >
             <img
               alt="Tools"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -39,11 +39,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="Tools"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -55,12 +55,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
               >
                 Tools
               </h6>
@@ -75,11 +75,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-1laq4ye"
+            class="MuiBox-root css-3245q2"
           >
             <img
               alt="People"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -94,11 +94,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="People"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -110,12 +110,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
               >
                 People
               </h6>
@@ -130,11 +130,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-13llbsm"
+            class="MuiBox-root css-1ot2317"
           >
             <img
               alt="Organisations"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -149,11 +149,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="Organisations"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -165,12 +165,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
               >
                 Organisations
               </h6>
@@ -185,11 +185,11 @@ exports[`<Resources /> renders unchanged 1`] = `
           class="MuiBox-root css-1l16b48"
         >
           <figure
-            class="MuiBox-root css-16b4vs5"
+            class="MuiBox-root css-ms2f5w"
           >
             <img
               alt="Data"
-              class="css-1pkrzn9"
+              class="css-cawze6"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -204,11 +204,11 @@ exports[`<Resources /> renders unchanged 1`] = `
             wrap="nowrap"
           >
             <figure
-              class="MuiBox-root css-1upx2vz"
+              class="MuiBox-root css-1kn3429"
             >
               <img
                 alt="Data"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -220,12 +220,12 @@ exports[`<Resources /> renders unchanged 1`] = `
               class="MuiBox-root css-y0apaj"
             >
               <span
-                class="MuiTypography-root MuiTypography-numberSmall css-1yxljrf-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-numberSmall css-1cqngqe-MuiTypography-root"
               >
                 54,000
               </span>
               <h6
-                class="MuiTypography-root MuiTypography-h6 css-105pudy-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h6 css-3wv8ox-MuiTypography-root"
               >
                 Data
               </h6>
diff --git a/apps/charterafrica/src/components/RichText/RichText.snap.js b/apps/charterafrica/src/components/RichText/RichText.snap.js
index b98f92b3c..2e6e895c1 100644
--- a/apps/charterafrica/src/components/RichText/RichText.snap.js
+++ b/apps/charterafrica/src/components/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-p1 css-86wwd2-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p1 css-1e9o1ap-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-rl8zr9-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-1b0ebrt-MuiTypography-root-MuiLink-root"
         href="/"
       >
         here
diff --git a/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js b/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
index 8dd8dc131..5c5344fb4 100644
--- a/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/charterafrica/src/components/SearchInput/SearchInput.snap.js
@@ -3,34 +3,39 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r8h7yy-MuiInputBase-root-MuiOutlinedInput-root"
+    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-icxi44-MuiInputBase-root-MuiOutlinedInput-root"
   >
     <input
-      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1u6lhwd-MuiInputBase-input-MuiOutlinedInput-input"
+      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-pvvzpi-MuiInputBase-input-MuiOutlinedInput-input"
       type="search"
       value=""
     />
     <button
       aria-label="search"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-av538e-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1avsmgh-MuiButtonBase-root-MuiIconButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
+      <span
+        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+      />
       <div
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
         focusable="false"
         viewbox="0 0 16 16"
       />
     </button>
     <fieldset
       aria-hidden="true"
-      class="MuiOutlinedInput-notchedOutline css-m401k6-MuiOutlinedInput-notchedOutline"
+      class="MuiOutlinedInput-notchedOutline css-1bxtb2s-MuiOutlinedInput-notchedOutline"
     >
       <legend
-        class="css-ihdtdm"
+        class="css-w4cd9x"
       >
         <span
+          aria-hidden="true"
           class="notranslate"
         >
           ​
diff --git a/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
index b2abdcd04..d21752ad4 100644
--- a/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -6,7 +6,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
     class="MuiStack-root css-v2woy3-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
     >
       Sample Title
     </div>
@@ -20,7 +20,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -32,7 +32,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -44,7 +44,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
index 55b3f7a92..6745cffab 100644
--- a/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-v2woy3-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js b/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
index bb9dff915..ce29b5352 100644
--- a/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
+++ b/apps/charterafrica/src/components/SpotlightCard/SpotlightCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<SpotlightCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-qb1xc-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-eleo5s-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/charterafrica/src/components/Switch/Switch.snap.js b/apps/charterafrica/src/components/Switch/Switch.snap.js
index 1343ea3d5..161533812 100644
--- a/apps/charterafrica/src/components/Switch/Switch.snap.js
+++ b/apps/charterafrica/src/components/Switch/Switch.snap.js
@@ -3,21 +3,21 @@
 exports[`<Switch /> renders unchanged 1`] = `
 <div>
   <span
-    class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
+    class="MuiSwitch-root MuiSwitch-sizeMedium css-5x1qlg-MuiSwitch-root"
   >
     <span
-      class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
+      class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1cw5p8z-MuiButtonBase-root-MuiSwitch-switchBase"
     >
       <input
-        class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+        class="PrivateSwitchBase-input MuiSwitch-input css-j8yymo"
         type="checkbox"
       />
       <span
-        class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+        class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
       />
     </span>
     <span
-      class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+      class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
     />
   </span>
 </div>
diff --git a/apps/charterafrica/src/components/Tool/Tool.snap.js b/apps/charterafrica/src/components/Tool/Tool.snap.js
index 0a174d5a6..0fa38d022 100644
--- a/apps/charterafrica/src/components/Tool/Tool.snap.js
+++ b/apps/charterafrica/src/components/Tool/Tool.snap.js
@@ -6,7 +6,7 @@ exports[`<Tool /> renders unchanged 1`] = `
     class="MuiBox-root css-1k9ek97"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ft7bnu-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1twjo67-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-xgaee2-MuiGrid-root"
@@ -19,7 +19,7 @@ exports[`<Tool /> renders unchanged 1`] = `
           >
             <img
               alt="Tool Name"
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-3fnss6-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1bh3fh5-MuiCardMedia-root"
               src="https://opengraph.githubassets.com/cdea3047f304ac30905b3f49eb4abdb00f2972aab918177244a0f111ea1348c7/CodeForAfrica/ui"
             />
           </div>
@@ -30,7 +30,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-kpcj8u"
             >
               <div
-                class="MuiTypography-root MuiTypography-h2SemiBold css-1cs3fm2-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h2SemiBold css-17o5qlc-MuiTypography-root"
               >
                 Tool Name
               </div>
@@ -47,14 +47,14 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
                   class="MuiBox-root css-1isemmb"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-t7jmp9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-ikfbaa-MuiTypography-root"
                   >
                     30
                   </div>
@@ -65,14 +65,14 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
                   class="MuiBox-root css-1isemmb"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p1 css-t7jmp9-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p1 css-ikfbaa-MuiTypography-root"
                   >
                     -
                   </div>
@@ -83,7 +83,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
@@ -95,7 +95,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-w9l2y7-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-114p5kd-MuiSvgIcon-root"
                   focusable="false"
                 />
                 <div
@@ -107,12 +107,12 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-485ol6"
             >
               <div
-                class="MuiTypography-root MuiTypography-p1 css-2vraz5-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p1 css-1wmw42j-MuiTypography-root"
               >
                 Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, urna enim nulla iaculis taciti semper parturient laoreet luctus, orci ac ornare senectus posuere nam libero. Imperdiet turpis tortor nu. Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, urna enim nulla iaculis taciti semper parturient laoreet luctus, orci ac ornare senectus posuere nam libero. Imperdiet turpis tortor nu.
               </div>
               <div
-                class="MuiTypography-root MuiTypography-captionCap css-k3l1ri-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-captionCap css-1ufzz7k-MuiTypography-root"
               >
                 undefined 6 Months ago
               </div>
@@ -123,7 +123,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   class="MuiStack-root css-82jnlo-MuiStack-root"
                 >
                   <div
-                    class="MuiTypography-root MuiTypography-p3 css-7dv6su-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-p3 css-4m30it-MuiTypography-root"
                   >
                     Share via
                   </div>
@@ -137,7 +137,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -149,7 +149,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -161,7 +161,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                         focusable="false"
                         viewbox="0 0 24 24"
                       />
@@ -185,25 +185,26 @@ exports[`<Tool /> renders unchanged 1`] = `
               class="MuiBox-root css-19midj6"
             >
               <div
-                class="MuiTypography-root MuiTypography-p3SemiBold css-zw0u9l-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-p3SemiBold css-67az7o-MuiTypography-root"
               >
                 Contributors
               </div>
               <div
-                class="MuiAvatarGroup-root css-1qcltu-MuiAvatarGroup-root"
+                class="MuiAvatarGroup-root css-p6rq2z-MuiAvatarGroup-root"
+                style="--AvatarGroup-spacing: -8px;"
               >
                 <div
-                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-x2fwd7-MuiAvatar-root"
+                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-oe639b-MuiAvatar-root"
                 >
                   +26
                 </div>
                 <a
-                  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"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1b5yuar-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -214,12 +215,12 @@ 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-1yxemuo-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-1b5yuar-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -230,12 +231,12 @@ 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-1yxemuo-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-1b5yuar-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -246,12 +247,12 @@ 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-1yxemuo-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-1b5yuar-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-1mo2pzk-MuiSvgIcon-root-MuiAvatar-fallback"
                     data-testid="PersonIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -270,21 +271,21 @@ exports[`<Tool /> renders unchanged 1`] = `
         class="MuiBox-root css-19midj6"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3Small css-tr3bum-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3Small css-fb0m73-MuiTypography-root"
         >
           More tools
         </div>
         <div
-          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-hamzp9-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-2l6o4x-MuiGrid-root"
         >
           <div
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
@@ -295,7 +296,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <img
-                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
+                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
                       src="/static/images/react.png"
                     />
                   </div>
@@ -303,13 +304,13 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+                      class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
                     >
                       <div
                         class="MuiBox-root css-gg4vpm"
                       >
                         <h5
-                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
                         >
                           React
                         </h5>
@@ -322,7 +323,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -331,7 +332,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -340,18 +341,19 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
                       </div>
                       <div
-                        class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
                       >
                         A JavaScript library for building user interfaces
                       </div>
                       <button
-                        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"
+                        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-1rpch82-MuiButtonBase-root-MuiButton-root"
+                        id=":r0:"
                         tabindex="0"
                         type="button"
                       />
@@ -359,7 +361,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
             </div>
@@ -368,10 +370,10 @@ exports[`<Tool /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-12 css-10j6ha2-MuiGrid-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+              class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
             >
               <button
-                class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+                class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
                 tabindex="0"
                 type="button"
               >
@@ -382,7 +384,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <img
-                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
+                      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
                       src="/static/images/nodejs.png"
                     />
                   </div>
@@ -390,13 +392,13 @@ exports[`<Tool /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+                      class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
                     >
                       <div
                         class="MuiBox-root css-gg4vpm"
                       >
                         <h5
-                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                          class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
                         >
                           Node.js
                         </h5>
@@ -409,7 +411,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -418,7 +420,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
@@ -427,18 +429,19 @@ exports[`<Tool /> renders unchanged 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                             focusable="false"
                           />
                         </div>
                       </div>
                       <div
-                        class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1rpch82-MuiButtonBase-root-MuiButton-root"
+                        id=":r1:"
                         tabindex="0"
                         type="button"
                       />
@@ -446,7 +449,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </div>
                 </div>
                 <span
-                  class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                  class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                 />
               </button>
             </div>
diff --git a/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js b/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
index 0090243ed..4071ccaa1 100644
--- a/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
+++ b/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
@@ -3,10 +3,10 @@
 exports[`<ToolCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-1tmdl4w-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-14uhsz6-MuiPaper-root-MuiCard-root"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-11lg1vd-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-y53a6a-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
@@ -17,7 +17,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
         >
           <img
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-zyubfe-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1w0g221-MuiCardMedia-root"
             src="/image.jpg"
           />
         </div>
@@ -25,13 +25,13 @@ exports[`<ToolCard /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-12 css-18qart5-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-1gdcjgz-MuiCardContent-root"
+            class="MuiCardContent-root css-ovyh64-MuiCardContent-root"
           >
             <div
               class="MuiBox-root css-gg4vpm"
             >
               <h5
-                class="MuiTypography-root MuiTypography-h5SmallSemiBold css-2971bk-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h5SmallSemiBold css-ycrxwx-MuiTypography-root"
               >
                 Tool Name
               </h5>
@@ -44,7 +44,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
@@ -53,7 +53,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
@@ -62,18 +62,19 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kmhw4l-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-yyhgsn-MuiSvgIcon-root"
                   focusable="false"
                 />
               </div>
             </div>
             <div
-              class="MuiTypography-root MuiTypography-p1 css-phxr0c-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-p1 css-zmojj9-MuiTypography-root"
             >
               Sample description
             </div>
             <button
-              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"
+              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-1rpch82-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             />
@@ -81,7 +82,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js b/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
index a64e9589b..4e022617f 100644
--- a/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
+++ b/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
@@ -3,7 +3,7 @@
 exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiBox-root css-s11qj8"
+    class="MuiBox-root css-f0o1et"
   >
     <div
       aria-label="Video Player"
diff --git a/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js b/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
index deb2b30fd..4fef7c2fe 100644
--- a/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCard/ArticleCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1omx1yq-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-s4bhv7-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js b/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
index 14102b70a..a6c15c9ce 100644
--- a/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCardContent/ArticleCardContent.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardContent /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js b/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
index ef6d13f74..888ea9e03 100644
--- a/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-dwzvxo-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1exhmjd-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js b/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
index 97818fb0d..ddcbe550e 100644
--- a/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleGrid /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
diff --git a/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js b/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
index 409c4f80c..a92fc827e 100644
--- a/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
+++ b/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.snap.js
@@ -3,13 +3,13 @@
 exports[`<ArticleHeader /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12qr4r4-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1acs8ar-MuiContainer-root"
   >
     <div
       class="MuiStack-root css-yhfzs2-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
       >
         Share This Article
       </div>
@@ -24,7 +24,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -37,7 +37,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -50,7 +50,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
index f8eca7cba..b5efc5ee4 100644
--- a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
+++ b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
@@ -6,11 +6,11 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <figure
-      class="MuiBox-root css-1ne42gc"
+      class="MuiBox-root css-ayi7je"
     >
       <img
         alt="Article"
-        class="css-45v618"
+        class="css-dqrju9"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
@@ -21,15 +21,15 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       />
     </figure>
     <header
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cnnhfl-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tqqwnc-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-body2 css-f7w8um-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body2 css-1iin45x-MuiTypography-root"
       >
         Sept 1, 2021
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-16gyjy8-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-1orudy1-MuiTypography-root"
       >
         Article
       </div>
@@ -37,7 +37,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-yhfzs2-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
         >
           Share This Article
         </div>
@@ -52,7 +52,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -65,7 +65,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -78,7 +78,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -87,16 +87,16 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </header>
     <section
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-z5w0rf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-333pmc-MuiContainer-root"
     />
     <address
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1o0bwi8-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1e1o0rh-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
         >
           Article by
         </div>
@@ -104,12 +104,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-1niho6o-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-9bszke-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-1vs3box-MuiTypography-root"
           >
             Author 1
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
           >
             Author 1 bio
           </div>
@@ -119,7 +119,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
         >
           Article by
         </div>
@@ -127,12 +127,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-1niho6o-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-9bszke-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-1vs3box-MuiTypography-root"
           >
             Author 2
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
           >
             Author 2 bio
           </div>
@@ -140,27 +140,27 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </address>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ke15ni-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16bepat-MuiContainer-root"
     >
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fwha7w-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-102tpll-MuiContainer-root"
     >
       <div
-        class="MuiToggleButtonGroup-root css-1ie26o5-MuiToggleButtonGroup-root"
+        class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-962wsk-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 css-1463e5x-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-p9r9ld-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
           href="/tag1?tag=tag2"
           tabindex="0"
           value="tag2"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
           >
             tag2
           </span>
diff --git a/apps/civicsignalblog/src/components/Articles/Articles.snap.js b/apps/civicsignalblog/src/components/Articles/Articles.snap.js
index 4e124e312..baa70df0a 100644
--- a/apps/civicsignalblog/src/components/Articles/Articles.snap.js
+++ b/apps/civicsignalblog/src/components/Articles/Articles.snap.js
@@ -4,7 +4,7 @@ exports[`<Articles /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
@@ -13,7 +13,7 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-17kpph-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h4 css-19yntcu-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-19d2xq6-MuiTypography-root"
           >
             Title
           </div>
@@ -21,14 +21,14 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiStack-root css-kbcct1-MuiStack-root"
           >
             <div
-              class="MuiFormControl-root MuiTextField-root css-1w88xu6-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiTextField-root css-zfsxrv-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wq2s8-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-py2cs6-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r0:"
                   placeholder="Search"
                   type="search"
@@ -36,25 +36,30 @@ exports[`<Articles /> renders unchanged 1`] = `
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+                  id=":r1:"
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-ihdtdm"
+                    class="css-w4cd9x"
                   >
                     <span
+                      aria-hidden="true"
                       class="notranslate"
                     >
                       ​
@@ -64,41 +69,41 @@ exports[`<Articles /> renders unchanged 1`] = `
               </div>
             </div>
             <div
-              class="MuiToggleButtonGroup-root css-14ffl62-MuiToggleButtonGroup-root"
+              class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1k5glp4-MuiToggleButtonGroup-root"
               role="group"
             >
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="All"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   All
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag1"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   tag1
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag2"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   tag2
                 </span>
@@ -110,10 +115,10 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-cy97kn-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-81wvh9-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1rzqy2p-MuiPaper-root-MuiCard-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1gjmvym-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ejc43j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
               href="/stories/article-1"
               tabindex="0"
             >
@@ -125,7 +130,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 >
                   <img
                     alt="Featured Article Image"
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14h10vz-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14iqzpr-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                 </div>
@@ -133,27 +138,28 @@ exports[`<Articles /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+                    class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </p>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
                     >
                       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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p3imlw-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-17irh2o-MuiButtonBase-root-MuiButton-root"
+                      id=":r2:"
                       tabindex="0"
                       type="button"
                     >
                       Read More
                     </button>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
@@ -166,15 +172,16 @@ exports[`<Articles /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+                      class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
                     >
                       <h1
-                        class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-4mulzs-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-rlqp7e-MuiButtonBase-root-MuiButton-root"
+                        id=":r3:"
                         tabindex="0"
                         type="button"
                       >
@@ -185,7 +192,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
               />
             </a>
           </div>
@@ -194,39 +201,39 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1nco2t7-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-mxdmwy-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-1t2i2wj-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
             >
               <div
-                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1u025w9-MuiPaper-root-MuiCard-root"
+                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-16ehw7m-MuiPaper-root-MuiCard-root"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1nkr5oe-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1w94mff-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
                   href="/stories/article-1"
                   tabindex="0"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qxudtl-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-r4yojg-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                   <div
-                    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+                    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
                   >
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </h6>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
                   </div>
                   <span
-                    class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                    class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                   />
                 </a>
               </div>
@@ -245,7 +252,8 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-s5eomh-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-arrnye-MuiButtonBase-root-MuiButton-root"
+            id=":r4:"
             tabindex="0"
             type="button"
           >
diff --git a/apps/civicsignalblog/src/components/Author/Author.snap.js b/apps/civicsignalblog/src/components/Author/Author.snap.js
index 04a4fc3d0..bd000becc 100644
--- a/apps/civicsignalblog/src/components/Author/Author.snap.js
+++ b/apps/civicsignalblog/src/components/Author/Author.snap.js
@@ -6,7 +6,7 @@ exports[`<Author /> renders unchanged 1`] = `
     class="MuiStack-root css-ty68jk-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body2 css-1i0jku1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-1mk70ig-MuiTypography-root"
     >
       Article by
     </div>
diff --git a/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js b/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
index f45f1aa3c..0b291856c 100644
--- a/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
+++ b/apps/civicsignalblog/src/components/Breadcrumbs/Breadcrumbs.snap.js
@@ -3,16 +3,16 @@
 exports[`<Breadcrumbs /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1yleyq8-MuiTypography-root-MuiBreadcrumbs-root"
+    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-160nqft-MuiTypography-root-MuiBreadcrumbs-root"
   >
     <ol
-      class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+      class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
     >
       <li
         class="MuiBreadcrumbs-li"
       >
         <a
-          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
           href="/projects"
         >
           Our Work
@@ -20,7 +20,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+        class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
       >
         /
       </li>
@@ -28,7 +28,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
         class="MuiBreadcrumbs-li"
       >
         <div
-          class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
         >
           Initiatives
         </div>
diff --git a/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js b/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
index f60c64a80..b0437ea7c 100644
--- a/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
+++ b/apps/civicsignalblog/src/components/CMSContent/CMSContent.snap.js
@@ -3,17 +3,17 @@
 exports[`<CMSContent /> renders unchanged 1`] = `
 <div>
   <section
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-17be2kn"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-147dsfb-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-nzp4fb-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://whomakesthenews.org/gmmp-2020-final-reports/"
           rel="noreferrer noopener"
           target="_blank"
@@ -23,17 +23,17 @@ exports[`<CMSContent /> renders unchanged 1`] = `
          report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
       </p>
@@ -42,11 +42,11 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <figure
-        class="MuiBox-root css-datfzi"
+        class="MuiBox-root css-1ol0o2q"
       >
         <img
           alt="alt"
-          class="css-11xr7uw"
+          class="css-nkefi2"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -66,7 +66,7 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <div
-        class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
       >
         <iframe
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js b/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
index d3eb6d4bb..bcf8012b2 100644
--- a/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
+++ b/apps/civicsignalblog/src/components/ChoiceChip/ChoiceChip.snap.js
@@ -3,12 +3,12 @@
 exports[`<ChoiceChip /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
     role="button"
     tabindex="0"
   >
     <span
-      class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+      class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
     />
   </div>
 </div>
diff --git a/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js b/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
index 6194c4217..e49403cdd 100644
--- a/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
+++ b/apps/civicsignalblog/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
@@ -3,7 +3,7 @@
 exports[`<ChoiceChipGroup /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiToggleButtonGroup-root css-155203t-MuiToggleButtonGroup-root"
+    class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-t9hjzu-MuiToggleButtonGroup-root"
     role="group"
   />
 </div>
diff --git a/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js b/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
index b0c0657b4..298899b69 100644
--- a/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
+++ b/apps/civicsignalblog/src/components/CustomPageHeader/CustomPageHeader.snap.js
@@ -6,15 +6,16 @@ exports[`<CustomPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-lso55o"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-17rh705-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1jpj0cn-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-99nlzo-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-1k47aja-MuiTypography-root"
       >
         About Us
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-1ar65j8-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-ehpc6x-MuiTypography-root"
+        style="--Typography-textAlign: center;"
       >
         We are Africa’s largest network of civic technology and data journalism labs
       </h2>
diff --git a/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js b/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
index b72c6b33a..2cd3a56c8 100644
--- a/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
+++ b/apps/civicsignalblog/src/components/FeaturedArticle/FeaturedArticle.snap.js
@@ -3,10 +3,10 @@
 exports[`<FeaturedArticle /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-81wvh9-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1rzqy2p-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1gjmvym-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ejc43j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/stories/article-1"
       tabindex="0"
     >
@@ -18,7 +18,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         >
           <img
             alt="Featured Article Image"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14h10vz-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-14iqzpr-MuiCardMedia-root"
             src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
           />
         </div>
@@ -26,27 +26,28 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+            class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
             >
               Battle for gender equality in African media continues
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p3imlw-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-17irh2o-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
               Read Story
             </button>
             <span
-              class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
             >
               Jan 6, 2022
             </span>
@@ -59,15 +60,16 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+              class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
               >
                 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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-4mulzs-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-rlqp7e-MuiButtonBase-root-MuiButton-root"
+                id=":r1:"
                 tabindex="0"
                 type="button"
               >
@@ -78,7 +80,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js b/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
index 1002271d6..5bde794f6 100644
--- a/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
+++ b/apps/civicsignalblog/src/components/FilterBar/FilterBar.snap.js
@@ -6,39 +6,44 @@ exports[`<FilterBar /> renders unchanged 1`] = `
     class="MuiStack-root css-7ziy04-MuiStack-root"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root css-1w88xu6-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-zfsxrv-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wq2s8-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-py2cs6-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           type="search"
           value=""
         />
         <button
           aria-label="search"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+          id=":r1:"
           tabindex="0"
           type="button"
         >
+          <span
+            class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+          />
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 16 16"
           />
         </button>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-ihdtdm"
+            class="css-w4cd9x"
           >
             <span
+              aria-hidden="true"
               class="notranslate"
             >
               ​
@@ -48,17 +53,17 @@ exports[`<FilterBar /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiToggleButtonGroup-root css-14ffl62-MuiToggleButtonGroup-root"
+      class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1k5glp4-MuiToggleButtonGroup-root"
       role="group"
     >
       <div
-        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1wfz6ql-MuiButtonBase-root-MuiChip-root"
+        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-jbzocn-MuiButtonBase-root-MuiChip-root"
         role="button"
         tabindex="0"
         value="tag"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
         >
           tag
         </span>
diff --git a/apps/civicsignalblog/src/components/Footer/Footer.snap.js b/apps/civicsignalblog/src/components/Footer/Footer.snap.js
index d2e2211b9..bd649722a 100644
--- a/apps/civicsignalblog/src/components/Footer/Footer.snap.js
+++ b/apps/civicsignalblog/src/components/Footer/Footer.snap.js
@@ -6,7 +6,7 @@ exports[`<Footer /> renders unchanged 1`] = `
     class="MuiBox-root css-uokh7t"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
diff --git a/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js b/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
index e66ca0117..80c5442a7 100644
--- a/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormExternalEmbed /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       <iframe
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js b/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
index 92e9b62d8..4e584c879 100644
--- a/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormMedia /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <figure
-      class="MuiBox-root css-datfzi"
+      class="MuiBox-root css-1ol0o2q"
     >
       <img
         alt="alt"
-        class="css-11xr7uw"
+        class="css-nkefi2"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
diff --git a/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
index 6a991478d..2f083ce12 100644
--- a/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-17be2kn"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-147dsfb-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-nzp4fb-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="https://whomakesthenews.org/gmmp-2020-final-reports/"
         rel="noreferrer noopener"
         target="_blank"
@@ -20,17 +20,17 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
        report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-mp4gss-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-8ihs4n-MuiTypography-root"
     >
       Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
     </p>
diff --git a/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
index 90da31bad..2dc2fadda 100644
--- a/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/civicsignalblog/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -12,7 +12,7 @@ exports[`<MobileNavigation /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <button
-        class="MuiButtonBase-root css-drm4qu-MuiButtonBase-root"
+        class="MuiButtonBase-root css-68ofh6-MuiButtonBase-root"
         tabindex="0"
         type="button"
       >
diff --git a/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js b/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
index 0f0419207..e27020759 100644
--- a/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
+++ b/apps/civicsignalblog/src/components/NavBar/NavBar.snap.js
@@ -3,13 +3,14 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1sr66oj-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-8dwgit-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: none;"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-l73zrm-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-1twxsqv-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -21,7 +22,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-drm4qu-MuiButtonBase-root"
+              class="MuiButtonBase-root css-68ofh6-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
diff --git a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
index 58b692753..59a65636a 100644
--- a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,67 +6,67 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/our-work"
       >
         Our Work
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         About
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         Stories
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/opportunity"
       >
         Opportunity
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1l4edms-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-9r8121-MuiTypography-root-MuiLink-root"
         href="/contact"
       >
         Contact
       </a>
     </li>
     <li
-      class="css-o9b79t"
+      class="css-1gfen40"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mwhxb7-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1iki3ku-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -76,17 +76,17 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </li>
     <li
-      class="css-o9b79t"
+      class="css-1gfen40"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mwhxb7-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1iki3ku-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
diff --git a/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js b/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
index 0f36178b8..e1dc0c40e 100644
--- a/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
+++ b/apps/civicsignalblog/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
@@ -6,7 +6,7 @@ exports[`<NewsletterSubscription /> renders unchanged 1`] = `
     class="MuiStack-root css-4qg6bb-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-16j77y-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-6c00cf-MuiTypography-root"
     >
       
           
diff --git a/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js b/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
index a75de14a9..652d13294 100644
--- a/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
+++ b/apps/civicsignalblog/src/components/NextPreviousPagination/PaginationButton.snap.js
@@ -6,16 +6,17 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-s5eomh-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-arrnye-MuiButtonBase-root-MuiButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
       <span
-        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
           focusable="false"
           style="font-size: 16px;"
           viewbox="0 0 32 32"
diff --git a/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js b/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
index 2d3fcb5ea..e48e741ee 100644
--- a/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js
@@ -6,10 +6,10 @@ exports[`<PageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-17eyxl5"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j4752t-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1h88o2a-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-pb7s0c-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-8lni03-MuiTypography-root"
       >
         Contact
       </h2>
@@ -17,7 +17,7 @@ exports[`<PageHeader /> renders unchanged 1`] = `
         class="MuiBox-root css-0"
       >
         <h2
-          class="MuiTypography-root MuiTypography-h2 css-vb0iat-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h2 css-1hmh46k-MuiTypography-root"
         >
           Let's
           <strong>
diff --git a/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js b/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
index 5490c4a9d..a7743b1fe 100644
--- a/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
+++ b/apps/civicsignalblog/src/components/RelatedStories/RelatedStories.snap.js
@@ -3,47 +3,47 @@
 exports[`<RelatedStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1pmgh96-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1j30eyg-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-13spjgy-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-es9ltw-MuiTypography-root"
     >
       Related Stories
     </div>
     <div
-      class="MuiGrid-root MuiGrid-container css-16q497u-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-9nfmm8-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1u025w9-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-16ehw7m-MuiPaper-root-MuiCard-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1nkr5oe-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1w94mff-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
             href="/stories/article-1"
             tabindex="0"
           >
             <img
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qxudtl-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-r4yojg-MuiCardMedia-root"
               src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
             />
             <div
-              class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+              class="MuiCardContent-root css-qkirah-MuiCardContent-root"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
               >
                 Battle for gender equality in African media continues
               </h6>
               <span
-                class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
               >
                 Jan 6, 2022
               </span>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </a>
         </div>
diff --git a/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js b/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
index 634729ac6..23e6fe76d 100644
--- a/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/civicsignalblog/src/components/SearchInput/SearchInput.snap.js
@@ -3,39 +3,44 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiFormControl-root MuiTextField-root css-1vpmlj9-MuiFormControl-root-MuiTextField-root"
+    class="MuiFormControl-root MuiTextField-root css-14soxr1-MuiFormControl-root-MuiTextField-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-3h83u3-MuiInputBase-root-MuiOutlinedInput-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-irp64v-MuiInputBase-root-MuiOutlinedInput-root"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-krewe6-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-ucicrb-MuiInputBase-input-MuiOutlinedInput-input"
         id=":r0:"
         type="search"
         value=""
       />
       <button
         aria-label="search"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+        id=":r1:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
       <fieldset
         aria-hidden="true"
-        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
       >
         <legend
-          class="css-ihdtdm"
+          class="css-w4cd9x"
         >
           <span
+            aria-hidden="true"
             class="notranslate"
           >
             ​
diff --git a/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js b/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
index 5b9ff41ad..82909b898 100644
--- a/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
+++ b/apps/civicsignalblog/src/components/SectionDivider/SectionDivider.snap.js
@@ -3,10 +3,10 @@
 exports[`<SectionDivider /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
   >
     <hr
-      class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+      class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
     />
   </div>
 </div>
diff --git a/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js b/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
index 024d802f0..aa39e3e64 100644
--- a/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
+++ b/apps/civicsignalblog/src/components/ShareButton/ShareButton.snap.js
@@ -10,7 +10,7 @@ exports[`<FacebookShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -28,7 +28,7 @@ exports[`<LinkedinShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -46,7 +46,7 @@ exports[`<TwitterShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
index 65fa86dfe..9a120c537 100644
--- a/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/civicsignalblog/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -16,7 +16,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -29,7 +29,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -42,7 +42,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
index b7b1dac90..9dc375017 100644
--- a/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/civicsignalblog/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-1vlyie4-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-footerCap css-1rpq20r-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-footerCap css-gfkbqj-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js b/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
index bed729055..039eb8831 100644
--- a/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
+++ b/apps/civicsignalblog/src/components/SocialMediaButton/SocialMediaButton.snap.js
@@ -4,7 +4,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
 <div>
   <a
     aria-label="facebook"
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-qb5hih-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-1gfsfde-MuiTypography-root-MuiLink-root"
     data-mui-internal-clone-element="true"
     href="https://www.facebook.com/"
     rel="noreferrer noopener"
@@ -12,7 +12,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js b/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
index 2e650f842..d93995f3d 100644
--- a/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
+++ b/apps/civicsignalblog/src/components/TooltipButton/TooltipButton.snap.js
@@ -4,10 +4,15 @@ exports[`<TooltipButton /> renders unchanged 1`] = `
 <div>
   <button
     aria-label="Title"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-v34xym-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-1bkrgty-MuiButtonBase-root-MuiIconButton-root"
     data-mui-internal-clone-element="true"
+    id=":r1:"
     tabindex="0"
     type="button"
-  />
+  >
+    <span
+      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+    />
+  </button>
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
index dc2824203..d2aaa9a1b 100644
--- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
+++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
@@ -6,10 +6,10 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-1termwk"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1cxefnp-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
     >
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-7i7a1w-MuiTypography-root"
       >
         About Team
       </h4>
diff --git a/apps/climatemappedafrica/src/components/Card/Card.snap.js b/apps/climatemappedafrica/src/components/Card/Card.snap.js
index faa79b3df..64dae7242 100644
--- a/apps/climatemappedafrica/src/components/Card/Card.snap.js
+++ b/apps/climatemappedafrica/src/components/Card/Card.snap.js
@@ -3,7 +3,8 @@
 exports[`<Card /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-s2nibj-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1mxzk6x-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   />
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
index 630de530f..2a9fa2039 100644
--- a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
+++ b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
@@ -40,7 +40,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-18bgkre-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-72d9li-MuiButtonBase-root"
+              class="MuiButtonBase-root css-58ah25-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
@@ -55,13 +55,10 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
                 />
               </div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1eogcpa-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-1euzdtt-MuiTypography-root"
               >
                 Overview
               </p>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
index 55850b6f2..90818578b 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -7,35 +7,36 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
     id="location-search"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
     >
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-wn8n2y-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-19ymigm-MuiInputBase-root"
     >
       <input
         aria-label="search"
-        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
         placeholder="Search for a location"
         type="text"
         value=""
       />
       <button
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
+        id=":r0:"
         root="[object Object]"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
       </button>
     </div>
     <div
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
index 952ff48de..1eaabbed0 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
@@ -7,7 +7,7 @@ exports[`<TreeView /> renders unchanged 1`] = `
   >
     <ul
       aria-multiselectable="false"
-      class="MuiSimpleTreeView-root css-rejl51-MuiSimpleTreeView-root"
+      class="MuiSimpleTreeView-root css-1o8c9x7-MuiSimpleTreeView-root"
       id="mui-tree-view-1"
       role="tree"
       style="--TreeView-itemChildrenIndentation: 12px;"
@@ -15,25 +15,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-1uhp40g-MuiTreeItem2-root"
+        class="css-ezfdyn-MuiTreeItem2-root"
         id="mui-tree-view-1-annual-temperature"
         role="treeitem"
         tabindex="0"
       >
         <div
-          class="content css-tbaszv-MuiTreeItem2-content"
+          class="content css-df642v-MuiTreeItem2-content"
         >
           <div
-            class="css-d6m21r-MuiTreeItem2-label"
+            class="css-13p7y6r-MuiTreeItem2-label"
           >
             Annual Temperature
           </div>
           <div
-            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+            class="css-1qa0aux-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
@@ -42,25 +42,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-1uhp40g-MuiTreeItem2-root"
+        class="css-ezfdyn-MuiTreeItem2-root"
         id="mui-tree-view-1-temperature-variation"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="content css-tbaszv-MuiTreeItem2-content"
+          class="content css-df642v-MuiTreeItem2-content"
         >
           <div
-            class="css-d6m21r-MuiTreeItem2-label"
+            class="css-13p7y6r-MuiTreeItem2-label"
           >
             Temperature Variation
           </div>
           <div
-            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+            class="css-1qa0aux-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
diff --git a/apps/climatemappedafrica/src/components/Header/Header.snap.js b/apps/climatemappedafrica/src/components/Header/Header.snap.js
index 8c0b6f63c..af27261ed 100644
--- a/apps/climatemappedafrica/src/components/Header/Header.snap.js
+++ b/apps/climatemappedafrica/src/components/Header/Header.snap.js
@@ -7,12 +7,12 @@ exports[`<Header /> renders unchanged 1`] = `
     title="Title with <span class="highlight">Highlight</span>"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-2tpb9q-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-1qgi9z8-MuiTypography-root"
     >
       Overline
     </div>
     <div
-      class="MuiTypography-root MuiTypography-subtitle1 css-1ymhwmr-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-subtitle1 css-da6zqu-MuiTypography-root"
     >
       A short paragraph to describe what the header is all about.
     </div>
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index e224d01a1..25dfc1a73 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -17,10 +17,10 @@ exports[`<Hero /> renders unchanged 1`] = `
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1qcxpxp-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hqp65g-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-ljvmaf-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-15wb4z1-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kvfo90-MuiGrid-root"
@@ -35,7 +35,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                 class="MuiBox-root css-b8dxf0"
               >
                 <h1
-                  class="MuiTypography-root MuiTypography-h1 css-51s2c1-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h1 css-gu7oov-MuiTypography-root"
                 >
                   Empowering action through climate data.
                 </h1>
@@ -44,7 +44,7 @@ exports[`<Hero /> renders unchanged 1`] = `
                 class="MuiBox-root css-1733xbc"
               >
                 <h6
-                  class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
                 >
                   ClimateMapped.AFRICA helps explore, analyse, and use climate data to advocate for stronger, faster action on climate resilience and sustainability.
                 </h6>
@@ -62,35 +62,36 @@ exports[`<Hero /> renders unchanged 1`] = `
                 id="location-search"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
                 >
                   Search for a location
                 </p>
                 <div
-                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-14f5sin-MuiInputBase-root"
+                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1c0cgss-MuiInputBase-root"
                 >
                   <input
                     aria-label="search"
-                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
                     placeholder="Search for a location"
                     type="text"
                     value=""
                   />
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
+                    id=":r0:"
                     root="[object Object]"
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
                       focusable="false"
                       viewBox="0 0 48 48"
                     />
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </div>
                 <div
diff --git a/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js b/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
index 1ef5c8a97..efa32e753 100644
--- a/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
+++ b/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
@@ -6,7 +6,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
     class="MuiBox-root css-u361uw"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1l22h3t-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1q4btob-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
@@ -18,7 +18,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
             class="MuiBox-root css-0"
           >
             <div
-              class="MuiTypography-root MuiTypography-overline css-1hwczut-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-overline css-rqlamj-MuiTypography-root"
             >
               About
             </div>
@@ -26,7 +26,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
               class="MuiBox-root css-1ki7zn5"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-51s2c1-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-gu7oov-MuiTypography-root"
               >
                 Project  
                 <strong>
@@ -39,7 +39,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
               class="MuiBox-root css-1yyblq"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
               >
                 Learn more about 
                 <strong>
@@ -51,7 +51,7 @@ exports[`<PageHero /> renders unchanged 1`] = `
                 </em>
                  and how you can help improve 
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1nejbix-MuiTypography-root-MuiLink-root-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1c4b5qt-MuiTypography-root-MuiLink-root-MuiTypography-root"
                   href="/"
                 >
                   ClimateMap
diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
index 32bfdc3b8..f55def9e2 100644
--- a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
+++ b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
@@ -7,7 +7,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
     title="[object Object]"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-1hwczut-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-rqlamj-MuiTypography-root"
     >
       About
     </div>
@@ -15,7 +15,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
       class="MuiBox-root css-1xaekgw"
     >
       <h6
-        class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-subtitle1 css-1r50n8o-MuiTypography-root"
       >
         Learn more about 
         <strong>
@@ -27,7 +27,7 @@ exports[`<RichHeader /> renders unchanged 1`] = `
         </em>
          and how you can help improve 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1nejbix-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-1c4b5qt-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="/"
         >
           ClimateMap
diff --git a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
index 2ee355342..723d10f14 100644
--- a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
+++ b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
@@ -6,7 +6,7 @@ exports[`<Summary /> renders unchanged 1`] = `
     class="MuiBox-root css-dx4cvz"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1cxefnp-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
@@ -15,12 +15,12 @@ exports[`<Summary /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-u2oqkr-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h2 css-yrv1vq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-1vtq9iq-MuiTypography-root"
           >
             History
           </h2>
           <h5
-            class="MuiTypography-root MuiTypography-h5 css-1fb4hg2-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5 css-z49wvx-MuiTypography-root"
           >
             The ClimateMapped.AFRICA project by the CfA Datalab team is a data storytelling initiative designed to make 120 years of climate sampling data accessible to experts, journalists, concerned citizens, and researchers. This project chronicles Africa's climate history, using data storytelling techniques to present temperature trends and analysis at both national and sub-national levels
           </h5>
@@ -32,23 +32,23 @@ exports[`<Summary /> renders unchanged 1`] = `
             class="MuiBox-root css-ge1eyg"
           >
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             >
               The project was focused on helping journalists at Kenyan community-based radio stations adopt data-driven digital journalism tools and techniques to improve their evidence-driven analysis and multimedia reporting on development issues. The data portal was built to help them explore, visualise and interpret development data that impacted their own communities.
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             />
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             >
               The initial project involved 14 community radio stations in eight Kenyan counties. The selected community radios are all an integral part of their local communities and broadcast not only in English and Kiswahili but also in various local languages (such as Kitaita, Borana, Samburu and Meru).
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             />
             <p
-              class="MuiTypography-root MuiTypography-body2 css-15wq5q8-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-z3jro3-MuiTypography-root"
             >
               Their listeners are mainly marginalised groups in Kenyan society and the poor rural population. The ‘Our County: Our Responsibility’ project was a partnership between 
               <strong>
diff --git a/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js b/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
index fcb1fa3f2..c8547587d 100644
--- a/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/AboutChildPageHeader/AboutChildPageHeader.snap.js
@@ -6,10 +6,10 @@ exports[`<AboutChildPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-1dmumqp"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-h42qkr-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-b8di4k-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-1fyy4z-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-kgx5jm-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-l2rmlj-MuiGrid-root"
@@ -22,12 +22,12 @@ exports[`<AboutChildPageHeader /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-u2r8gx-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h1 css-1iw1m6a-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h1 css-1ivm86d-MuiTypography-root"
           >
             Jacobo Ottaviani
           </div>
           <div
-            class="MuiTypography-root MuiTypography-h3Light css-1wlmmn9-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3Light css-1tpi4ke-MuiTypography-root"
           >
             Chief Data Officer
           </div>
diff --git a/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js b/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
index 51ed4fcae..fd408c234 100644
--- a/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
+++ b/apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js
@@ -6,7 +6,7 @@ exports[`<AboutPageEntity /> renders unchanged 1`] = `
     class="MuiBox-root css-1gghq2r"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ilq66o-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-13wzzov-MuiContainer-root"
     >
       <div
         class="MuiBox-root css-15sqwg8"
diff --git a/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js b/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
index eb3499f15..f8b159e3f 100644
--- a/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
+++ b/apps/codeforafrica/src/components/AccoladeBadge/AccoladeBadge.snap.js
@@ -13,7 +13,7 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1u8nxw3-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-4xeugy-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 64 64"
         />
@@ -25,13 +25,13 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
           class="MuiBox-root css-1htlurg"
         >
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-zgmcj5-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2.5 css-1l1ocre-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-body1 css-cx4ow6-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-xa0rza-MuiTypography-root"
               >
                 Award Name
               </p>
@@ -40,7 +40,7 @@ exports[`<AccoladeBadge /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiTypography-root MuiTypography-caption css-1nn8juq-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-184b5ev-MuiTypography-root"
               >
                 Month 2021
               </span>
diff --git a/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js b/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
index 751e21364..dcb63dd95 100644
--- a/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCard/ArticleCard.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-xy1jw4-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1afl0o2-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js b/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
index 14102b70a..a6c15c9ce 100644
--- a/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCardContent/ArticleCardContent.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardContent /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js b/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
index 0095b6a94..250c858f5 100644
--- a/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
+++ b/apps/codeforafrica/src/components/ArticleCardMedia/ArticleCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-w63bgl-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-8kfifd-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
index 97818fb0d..ddcbe550e 100644
--- a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
+++ b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
@@ -3,7 +3,7 @@
 exports[`<ArticleGrid /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js b/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
index 50233aceb..9f9af557b 100644
--- a/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
+++ b/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js
@@ -3,13 +3,13 @@
 exports[`<ArticleHeader /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12qr4r4-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1acs8ar-MuiContainer-root"
   >
     <div
       class="MuiStack-root css-yhfzs2-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
       >
         Share This Article
       </div>
@@ -24,7 +24,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -37,7 +37,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -50,7 +50,7 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
index e3ac4f60d..f5b5307eb 100644
--- a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
+++ b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
@@ -6,11 +6,11 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <figure
-      class="MuiBox-root css-nxzwqu"
+      class="MuiBox-root css-11cyhif"
     >
       <img
         alt="Article"
-        class="css-45v618"
+        class="css-dqrju9"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
@@ -21,15 +21,15 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       />
     </figure>
     <header
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cnnhfl-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1tqqwnc-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-body2 css-3nqud1-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body2 css-1evzhmm-MuiTypography-root"
       >
         Sept 1, 2021
       </div>
       <div
-        class="MuiTypography-root MuiTypography-h1 css-3hsw5e-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h1 css-1xqv05z-MuiTypography-root"
       >
         Article
       </div>
@@ -37,7 +37,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-yhfzs2-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
         >
           Share This Article
         </div>
@@ -52,7 +52,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -65,7 +65,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -78,7 +78,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
@@ -87,16 +87,16 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </header>
     <section
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-z5w0rf-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-333pmc-MuiContainer-root"
     />
     <address
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1o0bwi8-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1e1o0rh-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
         >
           Article by
         </div>
@@ -104,12 +104,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-3oepjh-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-1n8elks-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-5bq78h-MuiTypography-root"
           >
             Author 1
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
           >
             Author 1 bio
           </div>
@@ -119,7 +119,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         class="MuiStack-root css-ty68jk-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
         >
           Article by
         </div>
@@ -127,12 +127,12 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
           class="MuiStack-root css-3oepjh-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1SemiBold css-1n8elks-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1SemiBold css-5bq78h-MuiTypography-root"
           >
             Author 2
           </div>
           <div
-            class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
           >
             Author 2 bio
           </div>
@@ -140,27 +140,27 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       </div>
     </address>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ke15ni-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-16bepat-MuiContainer-root"
     >
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
       />
     </div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fwha7w-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-102tpll-MuiContainer-root"
     >
       <div
-        class="MuiToggleButtonGroup-root css-h89xvq-MuiToggleButtonGroup-root"
+        class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-1t1qg9b-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 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-up37a5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
           href="/tag1?tag=tag2"
           tabindex="0"
           value="tag2"
         >
           <span
-            class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+            class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
           >
             tag2
           </span>
diff --git a/apps/codeforafrica/src/components/Articles/Articles.snap.js b/apps/codeforafrica/src/components/Articles/Articles.snap.js
index 615375841..ec009a8d2 100644
--- a/apps/codeforafrica/src/components/Articles/Articles.snap.js
+++ b/apps/codeforafrica/src/components/Articles/Articles.snap.js
@@ -4,7 +4,7 @@ exports[`<Articles /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
@@ -13,7 +13,7 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-17kpph-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h4 css-iht8qd-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-10rydhy-MuiTypography-root"
           >
             Title
           </div>
@@ -21,14 +21,14 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiStack-root css-kbcct1-MuiStack-root"
           >
             <div
-              class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r0:"
                   placeholder="Search"
                   type="search"
@@ -36,25 +36,30 @@ exports[`<Articles /> renders unchanged 1`] = `
                 />
                 <button
                   aria-label="search"
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+                  id=":r1:"
                   tabindex="0"
                   type="button"
                 >
+                  <span
+                    class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                  />
                   <div
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                     focusable="false"
                     viewbox="0 0 16 16"
                   />
                 </button>
                 <fieldset
                   aria-hidden="true"
-                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="css-ihdtdm"
+                    class="css-w4cd9x"
                   >
                     <span
+                      aria-hidden="true"
                       class="notranslate"
                     >
                       ​
@@ -64,41 +69,41 @@ exports[`<Articles /> renders unchanged 1`] = `
               </div>
             </div>
             <div
-              class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
+              class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
               role="group"
             >
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="All"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   All
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag1"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   tag1
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag2"
               >
                 <span
-                  class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+                  class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
                 >
                   tag2
                 </span>
@@ -110,10 +115,10 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-cy97kn-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-ern672-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1j78d08-MuiPaper-root-MuiCard-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
               href="/stories/article-1"
               tabindex="0"
             >
@@ -125,7 +130,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 >
                   <img
                     alt="Featured Article Image"
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-6crdfp-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-i04c02-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                 </div>
@@ -133,27 +138,28 @@ exports[`<Articles /> renders unchanged 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
                 >
                   <div
-                    class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+                    class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </p>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
                     >
                       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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1k0wfhb-MuiButtonBase-root-MuiButton-root"
+                      id=":r2:"
                       tabindex="0"
                       type="button"
                     >
                       Read More
                     </button>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
@@ -166,15 +172,16 @@ exports[`<Articles /> renders unchanged 1`] = `
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   >
                     <div
-                      class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+                      class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
                     >
                       <h1
-                        class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
                       >
                         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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-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-vwpt7m-MuiButtonBase-root-MuiButton-root"
+                        id=":r3:"
                         tabindex="0"
                         type="button"
                       >
@@ -185,7 +192,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 </div>
               </div>
               <span
-                class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
               />
             </a>
           </div>
@@ -194,39 +201,39 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1nco2t7-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-container css-mxdmwy-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container css-1t2i2wj-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
             >
               <div
-                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1dxfqf3-MuiPaper-root-MuiCard-root"
+                class="MuiPaper-root MuiPaper-outlined MuiCard-root css-5tgk1w-MuiPaper-root-MuiCard-root"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
                   href="/stories/article-1"
                   tabindex="0"
                 >
                   <img
-                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-gzk243-MuiCardMedia-root"
+                    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1u60xul-MuiCardMedia-root"
                     src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
                   />
                   <div
-                    class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+                    class="MuiCardContent-root css-qkirah-MuiCardContent-root"
                   >
                     <h6
-                      class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
                     >
                       Battle for gender equality in African media continues
                     </h6>
                     <span
-                      class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
                     >
                       Jan 6, 2022
                     </span>
                   </div>
                   <span
-                    class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+                    class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
                   />
                 </a>
               </div>
@@ -245,7 +252,8 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-ubz8n1-MuiButtonBase-root-MuiButton-root"
+            id=":r4:"
             tabindex="0"
             type="button"
           >
diff --git a/apps/codeforafrica/src/components/Author/Author.snap.js b/apps/codeforafrica/src/components/Author/Author.snap.js
index 0181b8f07..db4858082 100644
--- a/apps/codeforafrica/src/components/Author/Author.snap.js
+++ b/apps/codeforafrica/src/components/Author/Author.snap.js
@@ -6,7 +6,7 @@ exports[`<Author /> renders unchanged 1`] = `
     class="MuiStack-root css-ty68jk-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body2 css-197f1vg-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-d6svu1-MuiTypography-root"
     >
       Article by
     </div>
diff --git a/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js b/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
index ed7b7c3ca..360d17351 100644
--- a/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
+++ b/apps/codeforafrica/src/components/Breadcrumbs/Breadcrumbs.snap.js
@@ -3,16 +3,16 @@
 exports[`<Breadcrumbs /> renders unchanged 1`] = `
 <div>
   <nav
-    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1yleyq8-MuiTypography-root-MuiBreadcrumbs-root"
+    class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-160nqft-MuiTypography-root-MuiBreadcrumbs-root"
   >
     <ol
-      class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+      class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
     >
       <li
         class="MuiBreadcrumbs-li"
       >
         <a
-          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
           href="/projects"
         >
           Our Work
@@ -20,7 +20,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+        class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
       >
         /
       </li>
@@ -28,7 +28,7 @@ exports[`<Breadcrumbs /> renders unchanged 1`] = `
         class="MuiBreadcrumbs-li"
       >
         <div
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           Initiatives
         </div>
diff --git a/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js b/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
index 1e1be4d66..1473b1ae0 100644
--- a/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
+++ b/apps/codeforafrica/src/components/CMSContent/CMSContent.snap.js
@@ -3,17 +3,17 @@
 exports[`<CMSContent /> renders unchanged 1`] = `
 <div>
   <section
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-6cogad"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://whomakesthenews.org/gmmp-2020-final-reports/"
           rel="noreferrer noopener"
           target="_blank"
@@ -23,17 +23,17 @@ exports[`<CMSContent /> renders unchanged 1`] = `
          report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
       </p>
@@ -42,11 +42,11 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <figure
-        class="MuiBox-root css-datfzi"
+        class="MuiBox-root css-1ol0o2q"
       >
         <img
           alt="alt"
-          class="css-11xr7uw"
+          class="css-nkefi2"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -66,7 +66,7 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       class="MuiBox-root css-rm9e7r"
     >
       <div
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         <iframe
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js b/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
index b142ce849..f8648fa7b 100644
--- a/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
+++ b/apps/codeforafrica/src/components/ChoiceChip/ChoiceChip.snap.js
@@ -3,12 +3,12 @@
 exports[`<ChoiceChip /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
     role="button"
     tabindex="0"
   >
     <span
-      class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+      class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js b/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
index 1f9631e54..e7710b280 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-vw6mhb-MuiToggleButtonGroup-root"
+    class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-13g1sjm-MuiToggleButtonGroup-root"
     role="group"
   />
 </div>
diff --git a/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js b/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
index 083ccaf7e..254069966 100644
--- a/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
+++ b/apps/codeforafrica/src/components/ContactForm/ContactForm.snap.js
@@ -3,10 +3,10 @@
 exports[`<ContactForm /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-7u83cd-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-142h6kb-MuiTypography-root"
     >
       
     
diff --git a/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js b/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
index 6f63e3a76..6ecb6529c 100644
--- a/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/CustomPageHeader/CustomPageHeader.snap.js
@@ -6,15 +6,16 @@ exports[`<CustomPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-g6ohb3"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-17rh705-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1jpj0cn-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-wy10c9-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-1wffq7f-MuiTypography-root"
       >
         About Us
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-3preu5-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-wqof5o-MuiTypography-root"
+        style="--Typography-textAlign: center;"
       >
         We are Africa’s largest network of civic technology and data journalism labs
       </h2>
diff --git a/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js b/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
index 06e8232f1..86825eb67 100644
--- a/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
+++ b/apps/codeforafrica/src/components/ErrorHero/ErrorHero.snap.js
@@ -6,7 +6,7 @@ exports[`<ErrorHero /> renders unchanged 1`] = `
     class="MuiBox-root css-f0vcxq"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-x9ncny-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-184q5a6-MuiContainer-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
index 9e149e7f3..83d9ccb83 100644
--- a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
+++ b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
@@ -3,10 +3,10 @@
 exports[`<FeaturedArticle /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-ern672-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1j78d08-MuiPaper-root-MuiCard-root"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/stories/article-1"
       tabindex="0"
     >
@@ -18,7 +18,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         >
           <img
             alt="Featured Article Image"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-6crdfp-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-i04c02-MuiCardMedia-root"
             src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
           />
         </div>
@@ -26,27 +26,28 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1w7778q-MuiGrid-root"
         >
           <div
-            class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+            class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
             >
               Battle for gender equality in African media continues
             </p>
             <p
-              class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
             >
               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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1k0wfhb-MuiButtonBase-root-MuiButton-root"
+              id=":r0:"
               tabindex="0"
               type="button"
             >
               Read Story
             </button>
             <span
-              class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
             >
               Jan 6, 2022
             </span>
@@ -59,15 +60,16 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <div
-              class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+              class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
             >
               <h1
-                class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
               >
                 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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-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-vwpt7m-MuiButtonBase-root-MuiButton-root"
+                id=":r1:"
                 tabindex="0"
                 type="button"
               >
@@ -78,7 +80,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js b/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
index 5a42ea103..e47911d52 100644
--- a/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
+++ b/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
@@ -6,39 +6,44 @@ exports[`<FilterBar /> renders unchanged 1`] = `
     class="MuiStack-root css-7ziy04-MuiStack-root"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
           id=":r0:"
           type="search"
           value=""
         />
         <button
           aria-label="search"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+          id=":r1:"
           tabindex="0"
           type="button"
         >
+          <span
+            class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+          />
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 16 16"
           />
         </button>
         <fieldset
           aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+          class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
         >
           <legend
-            class="css-ihdtdm"
+            class="css-w4cd9x"
           >
             <span
+              aria-hidden="true"
               class="notranslate"
             >
               ​
@@ -48,17 +53,17 @@ exports[`<FilterBar /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
+      class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
       role="group"
     >
       <div
-        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
         role="button"
         tabindex="0"
         value="tag"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
         >
           tag
         </span>
diff --git a/apps/codeforafrica/src/components/Footer/Footer.snap.js b/apps/codeforafrica/src/components/Footer/Footer.snap.js
index b34476984..47b010068 100644
--- a/apps/codeforafrica/src/components/Footer/Footer.snap.js
+++ b/apps/codeforafrica/src/components/Footer/Footer.snap.js
@@ -6,7 +6,7 @@ exports[`<Footer /> renders unchanged 1`] = `
     class="MuiBox-root css-iaw44m"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
index 322b9ab75..b1c6adf13 100644
--- a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
+++ b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
@@ -6,32 +6,35 @@ exports[`<GetInTouch /> renders unchanged 1`] = `
     class="MuiBox-root css-xvn5y9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-163ljxj-MuiStack-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-1s1x4el-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-oz8nnx-MuiTypography-root"
+          style="--Typography-textAlign: center;"
         >
           Are you looking to start a new project?
         </div>
         <div
-          class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-djznl0-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-p4ptdx-MuiTypography-root"
+          style="--Typography-textAlign: center;"
         >
           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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary 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-ay9u4j-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
           href="/contact"
+          id=":r0:"
           tabindex="0"
         >
           <span
-            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
+            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-1xskro6-MuiButton-startIcon"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-scw3l4-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1suu95-MuiSvgIcon-root"
               focusable="false"
               viewbox="0 0 24 24"
             />
diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
index 87f4be844..0b43cf462 100644
--- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
+++ b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
@@ -6,29 +6,30 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
     class="MuiBox-root css-tm3fmn"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ftddi4-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-uuq4mx-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-7mi0ln-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-15pqvda-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
+            style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
           >
             <div
-              class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+              class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
             >
               <div
                 class="MuiBox-root css-17pohca"
               >
                 <figure
-                  class="MuiBox-root css-1lb2pcr"
+                  class="MuiBox-root css-3k1316"
                 >
                   <img
                     alt="Beneficiaries trained"
-                    class="css-g98gbd"
+                    class="css-qv2885"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -37,13 +38,13 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
                   />
                 </figure>
                 <div
-                  class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
                 >
                   Beneficiaries trained
                 </div>
               </div>
               <div
-                class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
               >
                 15000
               </div>
@@ -51,7 +52,7 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
                 class="MuiBox-root css-2ligbh"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
                 >
                   Our team makes an impact in more than 20 countries where members are present.
                 </span>
@@ -61,8 +62,9 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1ecuhjn-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/contact"
+        id=":r0:"
         tabindex="0"
       >
         Get Involved
diff --git a/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js b/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
index 175d55cd2..e91b51ff8 100644
--- a/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
+++ b/apps/codeforafrica/src/components/GuidingPrinciplesCard/GuidingPrinciplesCard.snap.js
@@ -3,14 +3,15 @@
 exports[`<GuidingPrinciplesCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-mf2jkh-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1kcakmx-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <img
       alt=""
-      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-duozqf-MuiCardMedia-root"
+      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-qz2jhi-MuiCardMedia-root"
     />
     <div
-      class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+      class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/Hero/Hero.snap.js b/apps/codeforafrica/src/components/Hero/Hero.snap.js
index ad54cac88..88896827e 100644
--- a/apps/codeforafrica/src/components/Hero/Hero.snap.js
+++ b/apps/codeforafrica/src/components/Hero/Hero.snap.js
@@ -6,7 +6,7 @@ exports[`<Hero /> renders unchanged 1`] = `
     class="MuiBox-root css-1jyu2xp"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1oukqxz-MuiGrid-root"
@@ -18,11 +18,11 @@ exports[`<Hero /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-3zt5io"
+            class="MuiBox-root css-1fk4bve"
           >
             <img
               alt="Civic tech and open data labs"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
index f90973dbf..5451f8bc5 100644
--- a/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
+++ b/apps/codeforafrica/src/components/ImpactCard/ImpactCard.snap.js
@@ -3,20 +3,21 @@
 exports[`<ImpactCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+      class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
     >
       <div
         class="MuiBox-root css-17pohca"
       >
         <figure
-          class="MuiBox-root css-1lb2pcr"
+          class="MuiBox-root css-3k1316"
         >
           <img
             alt="Beneficiaries trained"
-            class="css-g98gbd"
+            class="css-qv2885"
             data-nimg="fill"
             decoding="async"
             loading="lazy"
@@ -25,13 +26,13 @@ exports[`<ImpactCard /> renders unchanged 1`] = `
           />
         </figure>
         <div
-          class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
         >
           Beneficiaries trained
         </div>
       </div>
       <div
-        class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
       >
         15000
       </div>
@@ -39,7 +40,7 @@ exports[`<ImpactCard /> renders unchanged 1`] = `
         class="MuiBox-root css-2ligbh"
       >
         <span
-          class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
         >
           Our team makes an impact in more than 20 countries where members are present.
         </span>
diff --git a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
index 118766189..610eadcd5 100644
--- a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
+++ b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
@@ -3,26 +3,27 @@
 exports[`<ImpactCardList /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-7mi0ln-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-15pqvda-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1146bej-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4692n1-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <div
-          class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+          class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
         >
           <div
             class="MuiBox-root css-17pohca"
           >
             <figure
-              class="MuiBox-root css-1lb2pcr"
+              class="MuiBox-root css-3k1316"
             >
               <img
                 alt="Beneficiaries trained"
-                class="css-g98gbd"
+                class="css-qv2885"
                 data-nimg="fill"
                 decoding="async"
                 loading="lazy"
@@ -31,13 +32,13 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
               />
             </figure>
             <div
-              class="MuiTypography-root MuiTypography-h5 css-1jnssn-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-h5 css-1pgj9d6-MuiTypography-root"
             >
               Beneficiaries trained
             </div>
           </div>
           <div
-            class="MuiTypography-root MuiTypography-display1 css-1nwmxyx-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-display1 css-1kjape3-MuiTypography-root"
           >
             15000
           </div>
@@ -45,7 +46,7 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
             class="MuiBox-root css-2ligbh"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
             >
               Our team makes an impact in more than 20 countries where members are present.
             </span>
diff --git a/apps/codeforafrica/src/components/Input/Input.snap.js b/apps/codeforafrica/src/components/Input/Input.snap.js
new file mode 100644
index 000000000..8ab669270
--- /dev/null
+++ b/apps/codeforafrica/src/components/Input/Input.snap.js
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Input /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiFormControl-root MuiTextField-root css-1vqv0ht-MuiFormControl-root-MuiTextField-root"
+  >
+    <div
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-1e9tdcl-MuiInputBase-root-MuiOutlinedInput-root"
+    >
+      <input
+        aria-invalid="false"
+        class="MuiInputBase-input MuiOutlinedInput-input css-s9ndwd-MuiInputBase-input-MuiOutlinedInput-input"
+        id=":r0:"
+        type="text"
+        value=""
+      />
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+      >
+        <legend
+          class="css-ihdtdm"
+        >
+          <span
+            class="notranslate"
+          >
+            ​
+          </span>
+        </legend>
+      </fieldset>
+    </div>
+  </div>
+</div>
+`;
diff --git a/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js b/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
index a679e1fe2..a2e2abd91 100644
--- a/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
+++ b/apps/codeforafrica/src/components/LongFormExternalEmbed/LongFormExternalEmbed.snap.js
@@ -6,7 +6,7 @@ exports[`<LongFormExternalEmbed /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       <iframe
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js b/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
index 92e9b62d8..4e584c879 100644
--- a/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
+++ b/apps/codeforafrica/src/components/LongFormMedia/LongFormMedia.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormMedia /> renders unchanged 1`] = `
     class="MuiBox-root css-rm9e7r"
   >
     <figure
-      class="MuiBox-root css-datfzi"
+      class="MuiBox-root css-1ol0o2q"
     >
       <img
         alt="alt"
-        class="css-11xr7uw"
+        class="css-nkefi2"
         data-nimg="fill"
         decoding="async"
         loading="lazy"
diff --git a/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js b/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
index 6a2b574e7..07ed453c8 100644
--- a/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
+++ b/apps/codeforafrica/src/components/LongFormRichText/LongFormRichText.snap.js
@@ -6,11 +6,11 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     class="MuiBox-root css-6cogad"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="https://whomakesthenews.org/gmmp-2020-final-reports/"
         rel="noreferrer noopener"
         target="_blank"
@@ -20,17 +20,17 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
        report launched on 14 July show. The performance of the continent’s news media has stagnated in comparison to the media in the rest of the world which has improved in the quarter century that the research has been running.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       “At the world level, women are only 1 in 4 of subjects and sources in the news. This proportion is marginally better in the digital news space but at the cumulative pace of change over time, it will take at least 67 more years to close the average global gender equality gap in news media content,” Sarah Macharia, Coordinator of WACC’s Global Media Monitoring Project (GMMP) said.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       However, in a more positive development, women in Africa tend to be featured more as subjects on science and health stories at 30%. Interestingly, this topic is also covered by more women reporters than average. The positive correlation supports the idea that having a more diverse newsroom leads to more diverse stories.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       Taking place every five years, the GMMP study is the largest and longest longitudinal study on gender in the world’s media. The 6th edition took place in 2020, in the midst of the pandemic and some adjustments had to be made on the schedule and data capture, including offline coding tools.
     </p>
diff --git a/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js b/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
index 7d3cb0203..659cf4342 100644
--- a/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
+++ b/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
@@ -6,7 +6,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-1mkqfm9"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-wo9xbb-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-14agrwc-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
@@ -15,7 +15,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-qq6rd1-MuiGrid-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h2 css-1j82ixe-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-vk3q8d-MuiTypography-root"
           >
             title
           </div>
@@ -23,7 +23,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
             class="MuiBox-root css-pxpt32"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3 css-b9odyg-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3 css-1edqesx-MuiTypography-root"
             >
               <strong>
                 Africa's
@@ -32,8 +32,9 @@ 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-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"
+            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-1ctsdn-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
             href="/about#our-team"
+            id=":r0:"
             tabindex="0"
           >
             Meet our team
@@ -43,11 +44,11 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1912ugn-MuiGrid-root"
         >
           <figure
-            class="MuiBox-root css-97qtcq"
+            class="MuiBox-root css-1xjnpxv"
           >
             <img
               alt="Our offices across africa"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
diff --git a/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js b/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
index e4075436f..e66d86452 100644
--- a/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
+++ b/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.snap.js
@@ -12,7 +12,7 @@ exports[`<MobileNavigation /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <button
-        class="MuiButtonBase-root css-r1bof9-MuiButtonBase-root"
+        class="MuiButtonBase-root css-qtrzli-MuiButtonBase-root"
         tabindex="0"
         type="button"
       >
diff --git a/apps/codeforafrica/src/components/NavBar/NavBar.snap.js b/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
index dbf1f8339..27a2b1e19 100644
--- a/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
+++ b/apps/codeforafrica/src/components/NavBar/NavBar.snap.js
@@ -3,13 +3,14 @@
 exports[`<NavBar /> renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-vckksl-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1ehuqn3-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-l73zrm-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-1twxsqv-MuiToolbar-root"
     >
       <div
-        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1y3f71u-MuiContainer-root"
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-iz79el-MuiContainer-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
@@ -21,7 +22,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-r1bof9-MuiButtonBase-root"
+              class="MuiButtonBase-root css-qtrzli-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
diff --git a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
index 23ab46426..5ecbaef99 100644
--- a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
+++ b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,67 +6,67 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/our-work"
       >
         Our Work
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         About
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         Stories
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/opportunity"
       >
         Opportunity
       </a>
     </li>
     <li
-      class="css-lvozse"
+      class="css-9be76x"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1yp9n1r-MuiTypography-root-MuiLink-root"
         href="/contact"
       >
         Contact
       </a>
     </li>
     <li
-      class="css-o9b79t"
+      class="css-1gfen40"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-181jv7l-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-k5xgb-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -76,17 +76,17 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       </a>
     </li>
     <li
-      class="css-o9b79t"
+      class="css-1gfen40"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-181jv7l-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-k5xgb-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 24 24"
         >
diff --git a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
index 3379eee88..9399892c8 100644
--- a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
+++ b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
@@ -3,21 +3,21 @@
 exports[`<NewsAndStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-zy2rzy-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-6miz6g-MuiContainer-root"
   >
     <div
       class="MuiBox-root css-dvxtzn"
     >
       <div
-        class="MuiTypography-root MuiTypography-h4 css-304hzg-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-3r90ab-MuiTypography-root"
       >
         News and Stories
       </div>
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1486ctq-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-outlined MuiCard-root css-wvkjen-MuiPaper-root-MuiCard-root"
       >
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-ihjyes-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-g4e2aq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
           href="/stories/article-1"
           tabindex="0"
         >
@@ -29,7 +29,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
             >
               <img
                 alt="Featured Article Image"
-                class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1hjwis2-MuiCardMedia-root"
+                class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-kitp2x-MuiCardMedia-root"
                 src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
               />
             </div>
@@ -37,27 +37,28 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-p8r8tv-MuiGrid-root"
             >
               <div
-                class="MuiCardContent-root css-jq2jyh-MuiCardContent-root"
+                class="MuiCardContent-root css-hpyc84-MuiCardContent-root"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-kaytih-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-17jpcsv-MuiTypography-root"
                 >
                   Battle for gender equality in African media continues
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-k5rac-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-r2eylt-MuiTypography-root"
                 >
                   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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-1k0wfhb-MuiButtonBase-root-MuiButton-root"
+                  id=":r0:"
                   tabindex="0"
                   type="button"
                 >
                   Read Story
                 </button>
                 <span
-                  class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-caption css-fddt5t-MuiTypography-root"
                 >
                   Jan 6, 2022
                 </span>
@@ -70,15 +71,16 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <div
-                  class="MuiCardContent-root css-148nlxb-MuiCardContent-root"
+                  class="MuiCardContent-root css-1chrhtn-MuiCardContent-root"
                 >
                   <h1
-                    class="MuiTypography-root MuiTypography-h1 css-gklt6i-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-h1 css-nudd2q-MuiTypography-root"
                   >
                     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-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-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-vwpt7m-MuiButtonBase-root-MuiButton-root"
+                    id=":r1:"
                     tabindex="0"
                     type="button"
                   >
@@ -89,13 +91,14 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
             </div>
           </div>
           <span
-            class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
           />
         </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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-12l5fu5-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/stories"
+        id=":r2:"
         tabindex="0"
       >
         Read Stories
@@ -103,7 +106,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
     </div>
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth css-92tnng-MuiDivider-root"
+    class="MuiDivider-root MuiDivider-fullWidth css-1oifqm7-MuiDivider-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
index cd23fd4a0..112a497b1 100644
--- a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
+++ b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
@@ -6,7 +6,7 @@ exports[`<NewsletterSubscription /> renders unchanged 1`] = `
     class="MuiStack-root css-4qg6bb-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-2lzuww-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1uz1t14-MuiTypography-root"
     >
       
           
diff --git a/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js b/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
index 047f7aa53..2158eb318 100644
--- a/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
+++ b/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
@@ -6,16 +6,17 @@ 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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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-ubz8n1-MuiButtonBase-root-MuiButton-root"
+      id=":r0:"
       tabindex="0"
       type="button"
     >
       <span
-        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
           focusable="false"
           style="font-size: 16px;"
           viewbox="0 0 32 32"
diff --git a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
index 9c399b87e..97d348911 100644
--- a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
+++ b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
@@ -4,20 +4,20 @@ exports[`<Opportunities /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1an3gwn-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1uesgbp-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-7ziy04-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search"
               type="search"
@@ -25,25 +25,30 @@ exports[`<Opportunities /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+              id=":r1:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-ihdtdm"
+                class="css-w4cd9x"
               >
                 <span
+                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
@@ -53,17 +58,17 @@ exports[`<Opportunities /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
+          class="MuiToggleButtonGroup-root MuiToggleButtonGroup-horizontal css-swwstw-MuiToggleButtonGroup-root"
           role="group"
         >
           <div
-            class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+            class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1a4zic4-MuiButtonBase-root-MuiChip-root"
             role="button"
             tabindex="0"
             value="All"
           >
             <span
-              class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+              class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
             >
               All
             </span>
diff --git a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
index 4d340f6ae..211ccd851 100644
--- a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
+++ b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
@@ -3,23 +3,24 @@
 exports[`<OpportunityCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-19gv4rl-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l5d74p-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
       href="/opportunities/1"
       tabindex="0"
     >
       <img
         alt="Deputy Investigative Manager"
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1kuwa16-MuiCardMedia-root"
         src="https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg"
       />
       <div
-        class="MuiCardContent-root css-1i9wt8r-MuiCardContent-root"
+        class="MuiCardContent-root css-127evc8-MuiCardContent-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h3 css-15dwhyt-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h3 css-dvuf73-MuiTypography-root"
         >
           DEPUTY INVESTIGATIVE MANAGER: Support the fight against disinformation and transnational organised crime
         </div>
@@ -27,22 +28,23 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           class="MuiBox-root css-k008qs"
         >
           <div
-            class="MuiTypography-root MuiTypography-body1 css-1kqg5wv-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-uzezo2-MuiTypography-root"
           >
             Data Journalism
           </div>
         </div>
         <section
-          class="MuiTypography-root MuiTypography-body2 css-uf7njh-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-vao4z2-MuiTypography-root"
         >
           Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...
         </section>
       </div>
       <div
-        class="MuiCardActions-root MuiCardActions-spacing css-1u29npa-MuiCardActions-root"
+        class="MuiCardActions-root MuiCardActions-spacing css-1dirygt-MuiCardActions-root"
       >
         <div
-          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"
+          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-1d7udnj-MuiButtonBase-root-MuiButton-root"
+          id=":r0:"
           role="button"
           tabindex="0"
         >
@@ -50,7 +52,7 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </a>
   </div>
diff --git a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
index 25fb9daeb..f37ba4d6a 100644
--- a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
+++ b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
@@ -6,23 +6,24 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
     class="MuiStack-root css-112qvrx-MuiStack-root"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-19gv4rl-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l5d74p-MuiPaper-root-MuiCard-root"
+      style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
         href="/opportunities/1"
         tabindex="0"
       >
         <img
           alt="Deputy Investigative Manager"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1kuwa16-MuiCardMedia-root"
           src="https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg"
         />
         <div
-          class="MuiCardContent-root css-1i9wt8r-MuiCardContent-root"
+          class="MuiCardContent-root css-127evc8-MuiCardContent-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h3 css-15dwhyt-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h3 css-dvuf73-MuiTypography-root"
           >
             DEPUTY INVESTIGATIVE MANAGER: Support the fight against disinformation and transnational organised crime
           </div>
@@ -30,28 +31,29 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
             class="MuiBox-root css-k008qs"
           >
             <div
-              class="MuiTypography-root MuiTypography-body1 css-1kqg5wv-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-uzezo2-MuiTypography-root"
             >
               Data Journalism
             </div>
           </div>
           <section
-            class="MuiTypography-root MuiTypography-body2 css-uf7njh-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-vao4z2-MuiTypography-root"
           >
             Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...
           </section>
         </div>
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-1u29npa-MuiCardActions-root"
+          class="MuiCardActions-root MuiCardActions-spacing css-1dirygt-MuiCardActions-root"
         >
           <div
-            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"
+            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-1d7udnj-MuiButtonBase-root-MuiButton-root"
+            id=":r0:"
             role="button"
             tabindex="0"
           />
         </div>
         <span
-          class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+          class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
         />
       </a>
     </div>
diff --git a/apps/codeforafrica/src/components/OurMission/OurMission.snap.js b/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
index db8bae978..d4791a029 100644
--- a/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
+++ b/apps/codeforafrica/src/components/OurMission/OurMission.snap.js
@@ -3,15 +3,15 @@
 exports[`<OurMission /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-ur5qos-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-15bs9il-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h4 css-8s6c84-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h4 css-6pic6-MuiTypography-root"
     >
       Our mission
     </div>
     <div
-      class="MuiTypography-root MuiTypography-h4 css-1m4iaew-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h4 css-b3usaa-MuiTypography-root"
     >
       Our mission subtitle
     </div>
@@ -19,11 +19,11 @@ exports[`<OurMission /> renders unchanged 1`] = `
       class="MuiBox-root css-ak74op"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA builds digital democracy solutions that give citizens unfettered access to actionable information that empowers them to make informed decisions, which strengthens civic engagement for improved public governance and accountability. This includes building infrastructures like the continent’s largest open data portals at 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://openafrica.net/"
           rel="noreferrer noopener"
           target="_blank"
@@ -32,7 +32,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          and 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://sourceafrica.net/"
           rel="noreferrer noopener"
           target="_blank"
@@ -41,7 +41,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         . CfA incubates initiatives as diverse as the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://africandrone.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -50,7 +50,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          network, the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://pesacheck.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -59,7 +59,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          fact-checking initiative and the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://sensors.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -69,11 +69,11 @@ exports[`<OurMission /> renders unchanged 1`] = `
          air quality sensor network.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA manages the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://investigate.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -82,7 +82,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          (ANCIR), which gives the continent’s top muckraking newsrooms the best possible 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://data.investigate.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -91,7 +91,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         , 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://getoutline.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -100,7 +100,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          and 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://afrileaks.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -109,7 +109,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          to help improve their ability to tackle crooked politicians, organised crime and predatory big business. CfA runs 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://academy.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -118,7 +118,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
         , one of the continent’s largest 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://courses.academy.africa/"
           rel="noreferrer noopener"
           target="_blank"
@@ -127,7 +127,7 @@ exports[`<OurMission /> renders unchanged 1`] = `
         </a>
          initiatives for digital journalists, and seed funds cross-border collaboration. CfA’s research and analysis programme 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://civicsignal.africa/#/home"
           rel="noreferrer noopener"
           target="_blank"
@@ -137,40 +137,40 @@ exports[`<OurMission /> renders unchanged 1`] = `
          offers actionable insights to help navigate Africa’s media ecosystem and emerging civic technology sector using machine learning tools and ‘big data’ resources.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA is non-partisan and does not support or oppose any political party or candidate. We do not undertake any advocacy work either for ourselves or on behalf of others.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA is registered as a non-profit organisation in South Africa, registration number 168–092, and in Kenya with registration number CPR/2016/220101.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         <strong>
           Partnering for excellence
         </strong>
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         Collaborations and partnerships are at the heart of our work. To build digital democracies, we partner with organisations aligned with CfA values, acting as a catalyst for new initiatives and strengthening the local ecosystem by investing in and working through these partnerships.
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         <strong>
           Guiding Principles
         </strong>
       </p>
       <p
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         CfA shares a covenant with the rest of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-1bcdde8-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-f9cych-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://codeforall.org/"
           rel="noreferrer noopener"
           target="_blank"
@@ -180,30 +180,30 @@ exports[`<OurMission /> renders unchanged 1`] = `
          federation, based on the following guiding principles:
       </p>
       <ol
-        class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
       >
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We show what’s possible. CfA seeks to be a catalyst by lowering the political risk of experimentation through creating successful proofs of concept for liberating civic data, for building enabling technologies and for pioneering sustainable revenue models. The organisation also endeavours to lower the financial costs for technology experimentation by creating and managing ‘shared’ backbone civic technology, and availing resources for rapid innovation.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We empower citizens. Empowering citizens is central to CfA’s theory of change. Strong democracies rely on engaged citizens who have actionable information and easy-to-use channels for making their will known. CfA works primarily with citizen organisations and civic watchdogs, including the media and also supports government and social enterprises in developing their capacity to respond meaningfully to citizens and to collaborate effectively with them.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We are action-oriented. African societies are asymmetric: the balance of power rests with governments and corporate institutions, at the expense of citizens who are treated as passive recipients of consultation or services. CfA seeks to change this by focusing on actionable data and action-oriented tools that give agency to citizens.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We operate in public. CfA promotes openness in our operations and in the work of our partners. All digital tools utilised are open source, and the organisation’s information is open data. CfA actively encourages documentation, sharing and collaboration, in addition to reuse of our own tools, programmes and processes, as well as those of our partners.
         </li>
         <li
-          class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
         >
           We help build ecosystems. CfA actively marshals resources to support the growth of a pan-African ecosystem of civic technologists. Whenever possible, this means reusing existing tools, standards and platforms, encouraging integration and extension. CfA operates as a pan-African federation of organisations who are active members of a global community, leveraging each other’s knowledge and resources.
         </li>
diff --git a/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js b/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
index aaba0e48f..6b44d9fd5 100644
--- a/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
+++ b/apps/codeforafrica/src/components/OurTeam/OurTeam.snap.js
@@ -6,10 +6,10 @@ exports[`<OurTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-y4gfvb"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1clvkda-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-kwletu-MuiContainer-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h5Small css-1sc3pwv-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5Small css-1f1z9uq-MuiTypography-root"
       >
         Our team
       </div>
@@ -17,14 +17,14 @@ exports[`<OurTeam /> renders unchanged 1`] = `
         class="MuiStack-root css-1vi1n47-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-112en4k-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-1dem73f-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search"
               type="search"
@@ -32,25 +32,30 @@ exports[`<OurTeam /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+              id=":r1:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-ihdtdm"
+                class="css-w4cd9x"
               >
                 <span
+                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
diff --git a/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js b/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
index 4be05b1cd..3a160e55b 100644
--- a/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
+++ b/apps/codeforafrica/src/components/PageHeader/PageHeader.snap.js
@@ -6,15 +6,15 @@ exports[`<PageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-1mt7k12"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-j4752t-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1h88o2a-MuiContainer-root"
     >
       <h2
-        class="MuiTypography-root MuiTypography-h5ExtraBold css-88sweq-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h5ExtraBold css-179juyi-MuiTypography-root"
       >
         Contact
       </h2>
       <h2
-        class="MuiTypography-root MuiTypography-h2 css-128vzxr-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h2 css-16ynaea-MuiTypography-root"
       >
         Let’s start something together!
       </h2>
diff --git a/apps/codeforafrica/src/components/Project/Project.snap.js b/apps/codeforafrica/src/components/Project/Project.snap.js
index 5b917f81f..0a7b63373 100644
--- a/apps/codeforafrica/src/components/Project/Project.snap.js
+++ b/apps/codeforafrica/src/components/Project/Project.snap.js
@@ -6,22 +6,23 @@ exports[`<Project /> renders unchanged 1`] = `
     class="MuiBox-root css-h16mw8"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-znh1og-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-a0mq7k-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: none;"
       >
         <nav
-          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-19xgsyh-MuiTypography-root-MuiBreadcrumbs-root"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1fdeege-MuiTypography-root-MuiBreadcrumbs-root"
         >
           <ol
-            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
           >
             <li
               class="MuiBreadcrumbs-li"
             >
               <a
-                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
                 href="/projects"
               >
                 Our Work
@@ -29,7 +30,7 @@ exports[`<Project /> renders unchanged 1`] = `
             </li>
             <li
               aria-hidden="true"
-              class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+              class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
             >
               /
             </li>
@@ -37,7 +38,7 @@ exports[`<Project /> renders unchanged 1`] = `
               class="MuiBreadcrumbs-li"
             >
               <div
-                class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
               >
                 Knowedge
               </div>
@@ -46,23 +47,23 @@ exports[`<Project /> renders unchanged 1`] = `
         </nav>
         <img
           alt="knowledgeAFRICA"
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
           src="https://res.cloudinary.com/code-for-africa/image/upload/v1652705959/codeforafrica/images/Property_1_PesaCheck_iahlrh.jpg"
         />
         <div
           class="MuiBox-root css-1ntmuzk"
         >
           <nav
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1y4hekn-MuiTypography-root-MuiBreadcrumbs-root"
+            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-niza22-MuiTypography-root-MuiBreadcrumbs-root"
           >
             <ol
-              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+              class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
             >
               <li
                 class="MuiBreadcrumbs-li"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
                   href="/projects"
                 >
                   Our Work
@@ -70,7 +71,7 @@ exports[`<Project /> renders unchanged 1`] = `
               </li>
               <li
                 aria-hidden="true"
-                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+                class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
               >
                 /
               </li>
@@ -78,7 +79,7 @@ exports[`<Project /> renders unchanged 1`] = `
                 class="MuiBreadcrumbs-li"
               >
                 <div
-                  class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
                 >
                   Knowedge
                 </div>
@@ -86,20 +87,20 @@ exports[`<Project /> renders unchanged 1`] = `
             </ol>
           </nav>
           <div
-            class="MuiCardContent-root css-nvlyan-MuiCardContent-root"
+            class="MuiCardContent-root css-t0p48k-MuiCardContent-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+              class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
             >
               <div
                 class="MuiBox-root css-uq7i85"
               >
                 <figure
-                  class="MuiBox-root css-f1ltsh"
+                  class="MuiBox-root css-1kpvnft"
                 >
                   <img
                     alt="knowledgeAFRICA"
-                    class="css-g98gbd"
+                    class="css-qv2885"
                     data-nimg="fill"
                     decoding="async"
                     loading="lazy"
@@ -108,7 +109,7 @@ exports[`<Project /> renders unchanged 1`] = `
                   />
                 </figure>
                 <h4
-                  class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
                 >
                   knowledgeAFRICA
                 </h4>
@@ -116,12 +117,12 @@ exports[`<Project /> renders unchanged 1`] = `
                   class="MuiStack-root css-1v20l1v-MuiStack-root"
                 >
                   <span
-                    class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
                   >
                     knowledgeAFRICA
                   </span>
                   <div
-                    class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
                   >
                     Knowledge tag line
                   </div>
@@ -140,22 +141,23 @@ exports[`<Project /> renders unchanged 1`] = `
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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 css-roxh35-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
+              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
             >
               Launch Project
               <span
-                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -167,10 +169,10 @@ exports[`<Project /> renders unchanged 1`] = `
     </div>
   </div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1mtya01-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-k1mu3d-MuiContainer-root"
   />
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1rw4djt-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ntmmg2-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
@@ -182,7 +184,7 @@ exports[`<Project /> renders unchanged 1`] = `
           class="MuiStack-root css-1b1mat0-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
           >
             Details
           </div>
@@ -190,7 +192,7 @@ exports[`<Project /> renders unchanged 1`] = `
             class="MuiStack-root css-7d4qva-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
             >
               Share This Project
             </div>
@@ -205,7 +207,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -218,7 +220,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -231,7 +233,7 @@ exports[`<Project /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -241,7 +243,7 @@ exports[`<Project /> renders unchanged 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-11319uf-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-1o055zn-MuiDivider-root"
       />
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-17q9xai-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js b/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
index 577eaf383..89434ac6c 100644
--- a/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
+++ b/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
@@ -3,10 +3,11 @@
 exports[`<ProjectCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1lxhh98-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-bl0cqu-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-1f2y1bk-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-n8bttj-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
@@ -14,39 +15,40 @@ exports[`<ProjectCard /> renders unchanged 1`] = `
         class="MuiBox-root css-0"
       >
         <img
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
         />
       </div>
       <div
         class="MuiBox-root css-zg1vud"
       >
         <div
-          class="MuiCardContent-root css-8kp80x-MuiCardContent-root"
+          class="MuiCardContent-root css-fjiewg-MuiCardContent-root"
         >
           <div
-            class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
           >
             <div
               class="MuiBox-root css-uq7i85"
             >
               <h4
-                class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
               />
               <div
                 class="MuiStack-root css-1v20l1v-MuiStack-root"
               >
                 <span
-                  class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
                 />
               </div>
             </div>
           </div>
         </div>
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
+          class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-MuiCardActions-root"
         >
           <div
-            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"
+            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-11lybd0-MuiButtonBase-root-MuiButton-root"
+            id=":r0:"
             role="button"
             tabindex="0"
           >
@@ -55,7 +57,7 @@ exports[`<ProjectCard /> renders unchanged 1`] = `
         </div>
       </div>
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js b/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
index 8aa6c7131..ddf638b3a 100644
--- a/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
+++ b/apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.snap.js
@@ -3,7 +3,7 @@
 exports[`<ProjectCardMedia /> renders unchanged 1`] = `
 <div>
   <img
-    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+    class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
   />
 </div>
 `;
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
index beaaa7681..5699cf1ec 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
@@ -6,7 +6,7 @@ exports[`<ProjectDescription /> renders unchanged 1`] = `
     class="MuiStack-root css-4ktc6n-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5 css-d1o0u3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5 css-t2zx3t-MuiTypography-root"
     >
       Description
     </div>
@@ -14,8 +14,9 @@ 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-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary 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-889a7d-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="https://github.com/CodeForAfrica"
+        id=":r0:"
         rel="noreferrer noopener"
         tabindex="0"
         target="_blank"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
index 745054de5..29487369f 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
@@ -3,9 +3,10 @@
 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-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary 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-889a7d-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
     content="Github"
     href="https://github.com/CodeForAfrica"
+    id=":r0:"
     rel="noreferrer noopener"
     tabindex="0"
     target="_blank"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
index 2cbc85ec7..91ce15cc8 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
@@ -3,7 +3,7 @@
 exports[`<ProjectDetails /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
@@ -15,7 +15,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
           class="MuiStack-root css-1b1mat0-MuiStack-root"
         >
           <div
-            class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
           >
             Details
           </div>
@@ -23,7 +23,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
             class="MuiStack-root css-7d4qva-MuiStack-root"
           >
             <div
-              class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
             >
               Share This Project
             </div>
@@ -38,7 +38,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -51,7 +51,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -64,7 +64,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
@@ -74,7 +74,7 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-11319uf-MuiDivider-root"
+        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-1o055zn-MuiDivider-root"
       />
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-17q9xai-MuiGrid-root"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
index e9fb87e7c..49c41d368 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectStakeholders.snap.js
@@ -6,12 +6,12 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
     class="MuiStack-root css-1b1mat0-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-msfork-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-iq7yq-MuiTypography-root"
     >
       Details
     </div>
     <div
-      class="MuiTypography-root MuiTypography-captionCap css-1pz3l8n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-captionCap css-1y9353b-MuiTypography-root"
     >
       Donors
     </div>
@@ -19,10 +19,10 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
       class="MuiStack-root css-1y69rbp-MuiStack-root"
     >
       <div
-        class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-1xpc6d0-MuiChip-root"
+        class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-991qnp-MuiChip-root"
       >
         <span
-          class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+          class="MuiChip-label MuiChip-labelMedium css-eccknh-MuiChip-label"
         >
           World Bank
         </span>
@@ -32,7 +32,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
       class="MuiStack-root css-7d4qva-MuiStack-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
       >
         Share This Project
       </div>
@@ -47,7 +47,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -60,7 +60,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
@@ -73,7 +73,7 @@ exports[`<ProjectStakeholders /> renders unchanged 1`] = `
         >
           <div
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
             focusable="false"
             viewbox="0 0 24 24"
           />
diff --git a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
index 7573610fa..d3d914c4c 100644
--- a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
@@ -6,22 +6,23 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
     class="MuiBox-root css-h16mw8"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-2y1b9m-MuiContainer-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-znh1og-MuiPaper-root-MuiCard-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-a0mq7k-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: none;"
       >
         <nav
-          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-19xgsyh-MuiTypography-root-MuiBreadcrumbs-root"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1fdeege-MuiTypography-root-MuiBreadcrumbs-root"
         >
           <ol
-            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
           >
             <li
               class="MuiBreadcrumbs-li"
             >
               <a
-                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
                 href="/projects"
               >
                 Our Work
@@ -29,7 +30,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
             </li>
             <li
               aria-hidden="true"
-              class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+              class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
             >
               /
             </li>
@@ -37,7 +38,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
               class="MuiBreadcrumbs-li"
             >
               <div
-                class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
               >
                 Iniatives
               </div>
@@ -45,22 +46,22 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
           </ol>
         </nav>
         <img
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1da3jgb-MuiCardMedia-root"
         />
         <div
           class="MuiBox-root css-1ntmuzk"
         >
           <nav
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1y4hekn-MuiTypography-root-MuiBreadcrumbs-root"
+            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-niza22-MuiTypography-root-MuiBreadcrumbs-root"
           >
             <ol
-              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+              class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
             >
               <li
                 class="MuiBreadcrumbs-li"
               >
                 <a
-                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-17o088p-MuiTypography-root-MuiLink-root"
                   href="/projects"
                 >
                   Our Work
@@ -68,7 +69,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
               </li>
               <li
                 aria-hidden="true"
-                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+                class="MuiBreadcrumbs-separator css-jhr02i-MuiBreadcrumbs-separator"
               >
                 /
               </li>
@@ -76,7 +77,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
                 class="MuiBreadcrumbs-li"
               >
                 <div
-                  class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
                 >
                   Iniatives
                 </div>
@@ -84,44 +85,45 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
             </ol>
           </nav>
           <div
-            class="MuiCardContent-root css-nvlyan-MuiCardContent-root"
+            class="MuiCardContent-root css-t0p48k-MuiCardContent-root"
           >
             <div
-              class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+              class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
             >
               <div
                 class="MuiBox-root css-uq7i85"
               >
                 <h4
-                  class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
                 />
                 <div
                   class="MuiStack-root css-1v20l1v-MuiStack-root"
                 >
                   <span
-                    class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+                    class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-8kkylm-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-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary 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 css-roxh35-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
+              id=":r0:"
               rel="noreferrer noopener"
               tabindex="0"
               target="_blank"
             >
               Launch Project
               <span
-                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1wyk03i-MuiButton-endIcon"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
                   focusable="false"
                   viewbox="0 0 24 24"
                 />
diff --git a/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js b/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
index 1abea106d..b216066c9 100644
--- a/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
+++ b/apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js
@@ -3,17 +3,17 @@
 exports[`<ProjectTile /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+    class="MuiPaper-root MuiPaper-outlined css-pmvic8-MuiPaper-root"
   >
     <div
       class="MuiBox-root css-uq7i85"
     >
       <figure
-        class="MuiBox-root css-f1ltsh"
+        class="MuiBox-root css-1kpvnft"
       >
         <img
           alt="africanDRONE"
-          class="css-g98gbd"
+          class="css-qv2885"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -22,7 +22,7 @@ exports[`<ProjectTile /> renders unchanged 1`] = `
         />
       </figure>
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-j4666c-MuiTypography-root"
       >
         africanDRONE
       </h4>
@@ -30,12 +30,12 @@ exports[`<ProjectTile /> renders unchanged 1`] = `
         class="MuiStack-root css-1v20l1v-MuiStack-root"
       >
         <span
-          class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
         >
           africanDRONE
         </span>
         <div
-          class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
         >
           Drones for good
         </div>
diff --git a/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js b/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
index c4ac6a063..1dd6b224a 100644
--- a/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
+++ b/apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js
@@ -3,23 +3,23 @@
 exports[`<ProjectTileList /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-1vcxjca-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-itewyf-MuiGrid-root"
   >
     <div
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 css-bdfmo7-MuiGrid-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-outlined css-1w24b7k-MuiPaper-root"
+        class="MuiPaper-root MuiPaper-outlined css-g7jrtq-MuiPaper-root"
       >
         <div
           class="MuiBox-root css-uq7i85"
         >
           <figure
-            class="MuiBox-root css-f1ltsh"
+            class="MuiBox-root css-1kpvnft"
           >
             <img
               alt="africanDRONE"
-              class="css-g98gbd"
+              class="css-qv2885"
               data-nimg="fill"
               decoding="async"
               loading="lazy"
@@ -28,7 +28,7 @@ exports[`<ProjectTileList /> renders unchanged 1`] = `
             />
           </figure>
           <h4
-            class="MuiTypography-root MuiTypography-h4 css-60qtjo-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h4 css-1fjnnz-MuiTypography-root"
           >
             africanDRONE
           </h4>
@@ -36,12 +36,12 @@ exports[`<ProjectTileList /> renders unchanged 1`] = `
             class="MuiStack-root css-fbzq2r-MuiStack-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body3SemiBold css-acgid4-MuiTypography-root"
             >
               africanDRONE
             </span>
             <div
-              class="MuiTypography-root MuiTypography-body2 css-1s1s5lw-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body2 css-tk7g08-MuiTypography-root"
             >
               Drones for good
             </div>
diff --git a/apps/codeforafrica/src/components/Projects/Projects.snap.js b/apps/codeforafrica/src/components/Projects/Projects.snap.js
index 002ba73cf..dcd128d5e 100644
--- a/apps/codeforafrica/src/components/Projects/Projects.snap.js
+++ b/apps/codeforafrica/src/components/Projects/Projects.snap.js
@@ -4,20 +4,20 @@ exports[`<Projects /> renders unchanged 1`] = `
 <div>
   <div>
     <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hxthm7-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1w8a3sk-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-7ziy04-MuiStack-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-78ojy-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1r515j9-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-b9lgir-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
               placeholder="Search projects"
               type="search"
@@ -25,25 +25,30 @@ exports[`<Projects /> renders unchanged 1`] = `
             />
             <button
               aria-label="search"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+              id=":r1:"
               tabindex="0"
               type="button"
             >
+              <span
+                class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+              />
               <div
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
                 focusable="false"
                 viewbox="0 0 16 16"
               />
             </button>
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="css-ihdtdm"
+                class="css-w4cd9x"
               >
                 <span
+                  aria-hidden="true"
                   class="notranslate"
                 >
                   ​
diff --git a/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js b/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
index e3d5e2fcd..b2aa4bc64 100644
--- a/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
+++ b/apps/codeforafrica/src/components/RelatedStories/RelatedStories.snap.js
@@ -3,47 +3,47 @@
 exports[`<RelatedStories /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1pmgh96-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1j30eyg-MuiContainer-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-h5Small css-11m9a1j-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-h5Small css-108ogmb-MuiTypography-root"
     >
       Related Stories
     </div>
     <div
-      class="MuiGrid-root MuiGrid-container css-16q497u-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container css-9nfmm8-MuiGrid-root"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1dxfqf3-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-5tgk1w-MuiPaper-root-MuiCard-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-1cub10c-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-u1foci-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
             href="/stories/article-1"
             tabindex="0"
           >
             <img
-              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-gzk243-MuiCardMedia-root"
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1u60xul-MuiCardMedia-root"
               src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
             />
             <div
-              class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+              class="MuiCardContent-root css-qkirah-MuiCardContent-root"
             >
               <h6
-                class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-subtitle1 css-1h19ei3-MuiTypography-root"
               >
                 Battle for gender equality in African media continues
               </h6>
               <span
-                class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-caption css-fwrve2-MuiTypography-root"
               >
                 Jan 6, 2022
               </span>
             </div>
             <span
-              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+              class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
             />
           </a>
         </div>
diff --git a/apps/codeforafrica/src/components/RichText/RichText.snap.js b/apps/codeforafrica/src/components/RichText/RichText.snap.js
index 093b1b240..c0dabe006 100644
--- a/apps/codeforafrica/src/components/RichText/RichText.snap.js
+++ b/apps/codeforafrica/src/components/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-16a0ezn-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-hz33y3-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-26k9w6-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-ll6ja1-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="/"
       >
         here
diff --git a/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js b/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
index 2f01b5e1d..824c748c3 100644
--- a/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
+++ b/apps/codeforafrica/src/components/SearchInput/SearchInput.snap.js
@@ -3,39 +3,44 @@
 exports[`<SearchInput /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiFormControl-root MuiTextField-root css-1vqv0ht-MuiFormControl-root-MuiTextField-root"
+    class="MuiFormControl-root MuiTextField-root css-1af1cxr-MuiFormControl-root-MuiTextField-root"
   >
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-j0rfn6-MuiInputBase-root-MuiOutlinedInput-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-1eahq4f-MuiInputBase-root-MuiOutlinedInput-root"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-krewe6-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedEnd css-ucicrb-MuiInputBase-input-MuiOutlinedInput-input"
         id=":r0:"
         type="search"
         value=""
       />
       <button
         aria-label="search"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-1kcqim2-MuiButtonBase-root-MuiIconButton-root"
+        id=":r1:"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-129mfkz-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 16 16"
         />
       </button>
       <fieldset
         aria-hidden="true"
-        class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
       >
         <legend
-          class="css-ihdtdm"
+          class="css-w4cd9x"
         >
           <span
+            aria-hidden="true"
             class="notranslate"
           >
             ​
diff --git a/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js b/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
index 5b9ff41ad..82909b898 100644
--- a/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
+++ b/apps/codeforafrica/src/components/SectionDivider/SectionDivider.snap.js
@@ -3,10 +3,10 @@
 exports[`<SectionDivider /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-vli7ch-MuiContainer-root"
   >
     <hr
-      class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+      class="MuiDivider-root MuiDivider-fullWidth css-1s464qc-MuiDivider-root"
     />
   </div>
 </div>
diff --git a/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js b/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
index 024d802f0..aa39e3e64 100644
--- a/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
+++ b/apps/codeforafrica/src/components/ShareButton/ShareButton.snap.js
@@ -10,7 +10,7 @@ exports[`<FacebookShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -28,7 +28,7 @@ exports[`<LinkedinShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
@@ -46,7 +46,7 @@ exports[`<TwitterShareBarButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js b/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
index 65fa86dfe..9a120c537 100644
--- a/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
+++ b/apps/codeforafrica/src/components/ShareThisPage/ShareThisPage.snap.js
@@ -16,7 +16,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -29,7 +29,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
@@ -42,7 +42,7 @@ exports[`<ShareThisPage /> renders unchanged 1`] = `
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
diff --git a/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js b/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
index c086f20f2..474034b8e 100644
--- a/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
+++ b/apps/codeforafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js
@@ -6,7 +6,7 @@ exports[`<SocialMediaBar /> renders unchanged 1`] = `
     class="MuiStack-root css-1vlyie4-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-footerCap css-ybncnd-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-footerCap css-10h3evw-MuiTypography-root"
     >
       Connect with: 
     </div>
diff --git a/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js b/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
index 6f859b8f6..ef760acb7 100644
--- a/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
+++ b/apps/codeforafrica/src/components/SocialMediaButton/SocialMediaButton.snap.js
@@ -4,7 +4,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
 <div>
   <a
     aria-label="facebook"
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-1wukk74-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-x0889r-MuiTypography-root-MuiLink-root"
     data-mui-internal-clone-element="true"
     href="https://www.facebook.com/"
     rel="noreferrer noopener"
@@ -12,7 +12,7 @@ exports[`<SocialMediaButton /> renders unchanged 1`] = `
   >
     <div
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewbox="0 0 24 24"
     />
diff --git a/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js b/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
index f7aff74c5..70c5f3f91 100644
--- a/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
+++ b/apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.snap.js
@@ -3,21 +3,22 @@
 exports[`<TeamMemberCard /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-wixki0-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-mdnsl9-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   >
     <button
-      class="MuiButtonBase-root MuiCardActionArea-root css-18mm84o-MuiButtonBase-root-MuiCardActionArea-root"
+      class="MuiButtonBase-root MuiCardActionArea-root css-1mxjrd2-MuiButtonBase-root-MuiCardActionArea-root"
       tabindex="0"
       type="button"
     >
       <img
-        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-ys68yq-MuiCardMedia-root"
+        class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-184g7z0-MuiCardMedia-root"
       />
       <div
-        class="MuiCardContent-root css-1bqtlyx-MuiCardContent-root"
+        class="MuiCardContent-root css-3u5n2m-MuiCardContent-root"
       />
       <span
-        class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+        class="MuiCardActionArea-focusHighlight css-1h5un5t-MuiCardActionArea-focusHighlight"
       />
     </button>
   </div>
diff --git a/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js b/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
index 2e650f842..d93995f3d 100644
--- a/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
+++ b/apps/codeforafrica/src/components/TooltipButton/TooltipButton.snap.js
@@ -4,10 +4,15 @@ exports[`<TooltipButton /> renders unchanged 1`] = `
 <div>
   <button
     aria-label="Title"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-v34xym-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiBox-root css-1bkrgty-MuiButtonBase-root-MuiIconButton-root"
     data-mui-internal-clone-element="true"
+    id=":r1:"
     tabindex="0"
     type="button"
-  />
+  >
+    <span
+      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+    />
+  </button>
 </div>
 `;
diff --git a/packages/commons-ui-core/src/Copyright/Copyright.snap.js b/packages/commons-ui-core/src/Copyright/Copyright.snap.js
index 72290025f..7a579a5c0 100644
--- a/packages/commons-ui-core/src/Copyright/Copyright.snap.js
+++ b/packages/commons-ui-core/src/Copyright/Copyright.snap.js
@@ -6,12 +6,12 @@ exports[`<Copyright /> renders inchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       Code for Africa
     </div>
     <div
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       2024
     </div>
diff --git a/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js b/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
index 5a512f347..3ddadda9c 100644
--- a/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
+++ b/packages/commons-ui-core/src/ImageButton/ImageButton.snap.js
@@ -3,16 +3,13 @@
 exports[`ImageButton renders unchanged 1`] = `
 <div>
   <button
-    class="MuiButtonBase-root css-1spa9k-MuiButtonBase-root"
+    class="MuiButtonBase-root css-gks9my-MuiButtonBase-root"
     tabindex="0"
     type="button"
   >
     <span
       class="css-1qzaqu2"
     />
-    <span
-      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-    />
   </button>
 </div>
 `;
diff --git a/packages/commons-ui-core/src/NavBar/NavBar.snap.js b/packages/commons-ui-core/src/NavBar/NavBar.snap.js
index ac3c3c51d..310a2ad50 100644
--- a/packages/commons-ui-core/src/NavBar/NavBar.snap.js
+++ b/packages/commons-ui-core/src/NavBar/NavBar.snap.js
@@ -3,13 +3,14 @@
 exports[`NavBar renders unchanged 1`] = `
 <div>
   <header
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1fg40jf-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-18zgm56-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-r6ewbb-MuiToolbar-root"
+      class="MuiToolbar-root MuiToolbar-regular css-1u9o2lj-MuiToolbar-root"
     >
       <div
-        class="MuiTypography-root MuiTypography-h6 css-hnscw4-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h6 css-1r1spq9-MuiTypography-root"
       >
         LOGO
       </div>
diff --git a/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js b/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
index fb8c1b560..1069c12a5 100644
--- a/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
+++ b/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
@@ -6,16 +6,16 @@ exports[`<QuickLinks /> renders inchanged 1`] = `
     class="MuiBox-root css-ufz638"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-rizt0-MuiTypography-root"
     >
       Quick Links
     </p>
     <ul
-      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-rizt0-MuiTypography-root"
     >
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-r74m4g-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-18rqtra-MuiTypography-root-MuiLink-root"
           href="/"
         >
           Home
@@ -23,7 +23,7 @@ exports[`<QuickLinks /> renders inchanged 1`] = `
       </li>
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-r74m4g-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-18rqtra-MuiTypography-root-MuiLink-root"
           href="/about"
         >
           About
diff --git a/packages/commons-ui-core/src/Section/Section.snap.js b/packages/commons-ui-core/src/Section/Section.snap.js
index 383bd2191..48d659686 100644
--- a/packages/commons-ui-core/src/Section/Section.snap.js
+++ b/packages/commons-ui-core/src/Section/Section.snap.js
@@ -4,7 +4,7 @@ exports[`<Section /> prop fixed=true (default) renders unchanged 1`] = `
 <div>
   <section
     aria-label="section"
-    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cyvr0l-MuiContainer-root"
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1dl39i7-MuiContainer-root"
   >
     <h2>
       Section heading
diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
index bd2b0480c..c75ba348d 100644
--- a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
+++ b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js
@@ -3,12 +3,12 @@
 exports[`<SocialMediaIconLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mtm6uj-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1qgi5s6-MuiTypography-root-MuiLink-root"
     href="https://github.com/CodeForAfrica"
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ca8ujh-MuiSvgIcon-root"
       focusable="false"
       viewBox="0 0 24 24"
     >
diff --git a/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js b/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
index 3503e2641..0cc3e608a 100644
--- a/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
+++ b/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js
@@ -6,7 +6,7 @@ exports[`<StayInTouch /> renders unchanged 1`] = `
     class="MuiStack-root css-upk803-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-overline css-1g4ok2n-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-2turhu-MuiTypography-root"
     >
       Stay in Touch:
     </div>
diff --git a/packages/commons-ui-next/src/Figure/Figure.snap.js b/packages/commons-ui-next/src/Figure/Figure.snap.js
index 2e8633315..8016a3df8 100644
--- a/packages/commons-ui-next/src/Figure/Figure.snap.js
+++ b/packages/commons-ui-next/src/Figure/Figure.snap.js
@@ -3,11 +3,11 @@
 exports[`<Figure /> renders unchanged 1`] = `
 <div>
   <figure
-    class="MuiBox-root css-db5opy"
+    class="MuiBox-root css-vutmxe"
   >
     <img
       alt="Image"
-      class="css-g98gbd"
+      class="css-qv2885"
       data-nimg="fill"
       decoding="async"
       loading="lazy"
diff --git a/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js b/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
index b793a3a41..6af95dde5 100644
--- a/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
+++ b/packages/commons-ui-next/src/Link/PagesRouterLink.snap.js
@@ -3,7 +3,7 @@
 exports[`<PagesRouterLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-dr1pfv-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways active css-1mtkv63-MuiTypography-root-MuiLink-root"
     href="/"
   >
     Home
diff --git a/packages/commons-ui-next/src/Link/StyledLink.snap.js b/packages/commons-ui-next/src/Link/StyledLink.snap.js
index db0e8ddea..56de0a824 100644
--- a/packages/commons-ui-next/src/Link/StyledLink.snap.js
+++ b/packages/commons-ui-next/src/Link/StyledLink.snap.js
@@ -3,7 +3,7 @@
 exports[`<StyledLink /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-dr1pfv-MuiTypography-root-MuiLink-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1mtkv63-MuiTypography-root-MuiLink-root"
     href="/"
   >
     Home
diff --git a/packages/commons-ui-payload/src/RichText/RichText.snap.js b/packages/commons-ui-payload/src/RichText/RichText.snap.js
index b1ebb135f..fc2b01701 100644
--- a/packages/commons-ui-payload/src/RichText/RichText.snap.js
+++ b/packages/commons-ui-payload/src/RichText/RichText.snap.js
@@ -6,21 +6,21 @@ exports[`<RichText /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       The Charter Project is a pan-African initiative by a coalition of watchdog organisations that use civic technologies to strengthen democracy.
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       We do this by helping digital activists and democracy changemakers leverage the African Union’s Charter on Democracy, Elections and Governance (ACDEG).
     </p>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-176x3p1-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1qowh4e-MuiTypography-root"
     >
       The project currently supports initiatives in 11 countries. Find out more 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-1ukerl5-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 active css-1dw4g7j-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="/"
       >
         here
diff --git a/packages/hurumap-core/src/Action/Action.snap.js b/packages/hurumap-core/src/Action/Action.snap.js
index fc1f6bf63..18bbb7f58 100644
--- a/packages/hurumap-core/src/Action/Action.snap.js
+++ b/packages/hurumap-core/src/Action/Action.snap.js
@@ -7,11 +7,15 @@ exports[`Action renders unchanged 1`] = `
   >
     <button
       aria-label="Action"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-16rd89w-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1dl7lzd-MuiButtonBase-root-MuiIconButton-root"
       data-mui-internal-clone-element="true"
+      id=":r1:"
       tabindex="0"
       type="button"
     >
+      <span
+        class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+      />
       <svg
         height="100"
         width="100"
@@ -25,9 +29,6 @@ exports[`Action renders unchanged 1`] = `
           stroke-width="3"
         />
       </svg>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
     </button>
   </div>
 </div>
diff --git a/packages/hurumap-core/src/Download/Download.snap.js b/packages/hurumap-core/src/Download/Download.snap.js
index d554592a9..b856eab90 100644
--- a/packages/hurumap-core/src/Download/Download.snap.js
+++ b/packages/hurumap-core/src/Download/Download.snap.js
@@ -12,7 +12,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1gfrinl-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
       >
         Download chart as:
       </p>
@@ -24,7 +24,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
       >
         Layout option:
       </p>
@@ -36,7 +36,7 @@ exports[`Download renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1gfrinl-MuiGrid-root"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-11jgupt-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-179yco0-MuiTypography-root"
       >
         Download data as:
       </p>
diff --git a/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js b/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
index 21bb81802..dbd530b96 100644
--- a/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
+++ b/packages/hurumap-core/src/IndicatorTitle/IndicatorTitle.snap.js
@@ -12,7 +12,7 @@ exports[`IndicatorTitle renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 css-9drkqd-MuiGrid-root"
       >
         <div
-          class="MuiTypography-root MuiTypography-h6 css-134eivx-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h6 css-wxg01y-MuiTypography-root"
         >
           <div>
             Children
diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js
index c0848f77a..cb2d5ddf5 100644
--- a/packages/hurumap-core/src/Location/Location.snap.js
+++ b/packages/hurumap-core/src/Location/Location.snap.js
@@ -57,12 +57,12 @@ exports[`Location renders unchanged 1`] = `
           class="MuiBox-root css-w6ptp5"
         >
           <h6
-            class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
           >
             Population
           </h6>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
           >
             10,000,000
           </p>
@@ -71,12 +71,12 @@ exports[`Location renders unchanged 1`] = `
           class="MuiBox-root css-w6ptp5"
         >
           <h6
-            class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
           >
             GDP
           </h6>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
           >
             10,000,000
           </p>
diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
index c92cf918e..a38a66782 100644
--- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
+++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js
@@ -6,12 +6,12 @@ exports[`LocationHighlight renders unchanged 1`] = `
     class="MuiBox-root css-1s0xv82"
   >
     <h6
-      class="MuiTypography-root MuiTypography-subtitle1 css-luofes-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-subtitle1 css-1nou8st-MuiTypography-root"
     >
       Population
     </h6>
     <p
-      class="MuiTypography-root MuiTypography-body2 css-e784if-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-7ctihp-MuiTypography-root"
     >
       1,000,000
     </p>
diff --git a/packages/hurumap-core/src/Share/Share.snap.js b/packages/hurumap-core/src/Share/Share.snap.js
index ec7e33dd2..75a6cef9c 100644
--- a/packages/hurumap-core/src/Share/Share.snap.js
+++ b/packages/hurumap-core/src/Share/Share.snap.js
@@ -9,7 +9,7 @@ exports[`Share renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <span
-        class="MuiTypography-root MuiTypography-caption css-l67hkg-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-caption css-1n9vc5u-MuiTypography-root"
       >
         Embed on your website:
       </span>
@@ -18,15 +18,15 @@ exports[`Share renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1yuqec2-MuiGrid-root"
     >
       <div
-        class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-cmpglg-MuiFormControl-root-MuiTextField-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall css-1blp12k-MuiInputBase-root-MuiOutlinedInput-root"
           style="background: rgb(255, 255, 255); font-size: 0.6875rem; line-height: 1.5454545454545454; color: rgb(102, 102, 102);"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1n4twyu-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-1pzfmz2-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r0:"
             type="text"
             value="
@@ -70,12 +70,13 @@ exports[`Share renders unchanged 1`] = `
           />
           <fieldset
             aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+            class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
           >
             <legend
-              class="css-ihdtdm"
+              class="css-w4cd9x"
             >
               <span
+                aria-hidden="true"
                 class="notranslate"
               >
                 ​
diff --git a/packages/hurumap-core/src/Share/ShareButton.snap.js b/packages/hurumap-core/src/Share/ShareButton.snap.js
index ec804119d..81ca8a5e0 100644
--- a/packages/hurumap-core/src/Share/ShareButton.snap.js
+++ b/packages/hurumap-core/src/Share/ShareButton.snap.js
@@ -11,7 +11,7 @@ exports[`ShareButton renders unchanged 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-wsb35j-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1psi471-MuiSvgIcon-root"
         focusable="false"
         viewBox="0 0 24 24"
       />
diff --git a/packages/hurumap-next/src/Source/Source.snap.js b/packages/hurumap-next/src/Source/Source.snap.js
index b54076180..b3e37c00c 100644
--- a/packages/hurumap-next/src/Source/Source.snap.js
+++ b/packages/hurumap-next/src/Source/Source.snap.js
@@ -4,13 +4,13 @@ exports[`Source renders unchanged 1`] = `
 <div>
   <div>
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1u2wb76-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1xlq4xj-MuiTypography-root"
     >
       Source
       : 
     </p>
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1jglad5-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-uszb9u-MuiTypography-root-MuiLink-root"
       href="https://example.com"
       rel="noreferrer noopener"
       target="_blank"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 12c6a9e74..6b8c72071 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,17 +79,17 @@ catalogs:
       specifier: ^3.0.1
       version: 3.1.0
     '@mui/icons-material':
-      specifier: ^5.16.6
-      version: 5.16.7
+      specifier: ^6.4.0
+      version: 6.4.0
     '@mui/material':
-      specifier: ^5.16.6
-      version: 5.16.7
+      specifier: ^6.4.0
+      version: 6.4.0
     '@mui/material-nextjs':
-      specifier: ^5.16.1
-      version: 5.16.6
+      specifier: ^6.3.1
+      version: 6.3.1
     '@mui/utils':
-      specifier: ^5.16.6
-      version: 5.16.6
+      specifier: ^6.4.0
+      version: 6.4.0
     '@mui/x-date-pickers':
       specifier: ^7.15.0
       version: 7.22.1
@@ -578,20 +578,20 @@ catalogs:
       version: 0.18.5
   mui-styles:
     '@mui/icons-material':
-      specifier: ^5.16.6
-      version: 5.16.7
+      specifier: ^6.4.0
+      version: 6.4.0
     '@mui/lab':
       specifier: ^5.0.0-alpha.155
       version: 5.0.0-alpha.173
     '@mui/material':
-      specifier: ^5.16.6
-      version: 5.16.7
+      specifier: ^6.4.0
+      version: 6.4.0
     '@mui/styles':
-      specifier: ^5.16.6
-      version: 5.16.7
+      specifier: ^6.4.0
+      version: 6.4.0
     '@mui/utils':
-      specifier: ^5.16.6
-      version: 5.16.6
+      specifier: ^6.4.0
+      version: 6.4.0
 
 overrides:
   sharp: ^0.33.5
@@ -665,10 +665,10 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/utils':
         specifier: 'catalog:'
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -891,10 +891,10 @@ importers:
         version: 1.1.42(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/utils':
         specifier: 'catalog:'
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -1087,16 +1087,16 @@ importers:
         version: link:../../packages/hurumap-next
       '@mui/material':
         specifier: catalog:mui-styles
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/styles':
         specifier: catalog:mui-styles
-        version: 5.16.7(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/utils':
         specifier: catalog:mui-styles
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-tree-view':
         specifier: 'catalog:'
-        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -1373,10 +1373,10 @@ importers:
         version: 1.1.42(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/utils':
         specifier: 'catalog:'
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -1536,7 +1536,7 @@ importers:
         version: 3.11.8(@types/react@18.3.12)(graphql@15.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@commons-ui/core':
         specifier: 'catalog:'
-        version: 0.1.0(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@5.16.7(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))
+        version: 0.1.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@6.4.0(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))
       '@commons-ui/next':
         specifier: workspace:*
         version: link:../../packages/commons-ui-next
@@ -1554,16 +1554,16 @@ importers:
         version: link:../../packages/hurumap-next
       '@mui/material':
         specifier: catalog:mui-styles
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/styles':
         specifier: catalog:mui-styles
-        version: 5.16.7(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/utils':
         specifier: catalog:mui-styles
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-tree-view':
         specifier: 'catalog:'
-        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@reactour/tour':
         specifier: 'catalog:'
         version: 3.7.0(react@18.3.1)
@@ -1786,7 +1786,7 @@ importers:
     dependencies:
       '@commons-ui/core':
         specifier: 'catalog:'
-        version: 0.1.0(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@5.16.7(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))
+        version: 0.1.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@6.4.0(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))
       '@commons-ui/next':
         specifier: workspace:*
         version: link:../../packages/commons-ui-next
@@ -1801,19 +1801,19 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/icons-material':
         specifier: catalog:mui-styles
-        version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/lab':
         specifier: catalog:mui-styles
-        version: 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material':
         specifier: catalog:mui-styles
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/styles':
         specifier: catalog:mui-styles
-        version: 5.16.7(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/utils':
         specifier: catalog:mui-styles
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@sentry/nextjs':
         specifier: 'catalog:'
         version: 8.36.0(@opentelemetry/core@1.27.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.27.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.0.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.96.1)
@@ -1831,10 +1831,10 @@ importers:
         version: 2.4.6(react@18.3.1)
       formik-mui:
         specifier: 'catalog:'
-        version: 5.0.0-alpha.1(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3)
+        version: 5.0.0-alpha.1(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3)
       formik-mui-lab:
         specifier: 'catalog:'
-        version: 1.0.0(ggufnrxx63oy5h7baag2v3l5wi)
+        version: 1.0.0(2udarizgs3bv3sgnz346lqfjvm)
       jwt-decode:
         specifier: 'catalog:'
         version: 4.0.0
@@ -1967,19 +1967,19 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/icons-material':
         specifier: 'catalog:'
-        version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material-nextjs':
         specifier: 'catalog:'
-        version: 5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0(@emotion/css@11.13.4))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(next@15.0.3(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)
+        version: 6.3.1(@emotion/cache@11.13.1)(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/server@11.11.0(@emotion/css@11.13.4))(@types/react@18.3.12)(next@15.0.3(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)
       '@mui/utils':
         specifier: 'catalog:'
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-date-pickers':
         specifier: 'catalog:'
-        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -2157,13 +2157,13 @@ importers:
         version: 3.1.0(acorn@8.14.0)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material-nextjs':
         specifier: 'catalog:'
-        version: 5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0(@emotion/css@11.13.4))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(next@15.0.3(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)
+        version: 6.3.1(@emotion/cache@11.13.1)(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/server@11.11.0(@emotion/css@11.13.4))(@types/react@18.3.12)(next@15.0.3(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)
       '@mui/utils':
         specifier: 'catalog:'
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@next/mdx':
         specifier: 'catalog:'
         version: 15.0.3(@mdx-js/loader@3.1.0(acorn@8.14.0)(webpack@5.96.1))(@mdx-js/react@3.1.0(@types/react@18.3.12)(react@18.3.1))
@@ -2272,13 +2272,13 @@ importers:
         version: link:../../packages/hurumap-next
       '@mui/icons-material':
         specifier: 'catalog:'
-        version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/utils':
         specifier: 'catalog:'
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -2390,10 +2390,10 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/utils':
         specifier: 'catalog:'
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -2494,10 +2494,10 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/utils':
         specifier: 'catalog:'
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.12
@@ -2567,7 +2567,7 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.12
@@ -2640,7 +2640,7 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.12
@@ -2716,7 +2716,7 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.12
@@ -2877,10 +2877,10 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/icons-material':
         specifier: 'catalog:'
-        version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+        version: 6.4.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.12
@@ -2961,7 +2961,7 @@ importers:
         version: link:../hurumap-core
       '@mui/material':
         specifier: 'catalog:'
-        version: 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       babel-loader:
         specifier: 'catalog:'
         version: 9.2.1(@babel/core@7.26.0)(webpack@5.96.1)
@@ -4298,6 +4298,9 @@ packages:
   '@emotion/cache@11.13.1':
     resolution: {integrity: sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==}
 
+  '@emotion/cache@11.14.0':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+
   '@emotion/css@11.13.4':
     resolution: {integrity: sha512-CthbOD5EBw+iN0rfM96Tuv5kaZN4nxPyYDvGUs0bc7wZBBiU/0mse+l+0O9RshW2d+v5HH1cme+BAbLJ/3Folw==}
 
@@ -4322,6 +4325,9 @@ packages:
   '@emotion/serialize@1.3.2':
     resolution: {integrity: sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==}
 
+  '@emotion/serialize@1.3.3':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
   '@emotion/server@11.11.0':
     resolution: {integrity: sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==}
     peerDependencies:
@@ -4354,6 +4360,9 @@ packages:
   '@emotion/utils@1.4.1':
     resolution: {integrity: sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==}
 
+  '@emotion/utils@1.4.2':
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
   '@emotion/weak-memoize@0.4.0':
     resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
 
@@ -5040,16 +5049,16 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/core-downloads-tracker@5.16.7':
-    resolution: {integrity: sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==}
+  '@mui/core-downloads-tracker@6.4.0':
+    resolution: {integrity: sha512-6u74wi+9zeNlukrCtYYET8Ed/n9AS27DiaXCZKAD3TRGFaqiyYSsQgN2disW83pI/cM1Q2lJY1JX4YfwvNtlNw==}
 
-  '@mui/icons-material@5.16.7':
-    resolution: {integrity: sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==}
-    engines: {node: '>=12.0.0'}
+  '@mui/icons-material@6.4.0':
+    resolution: {integrity: sha512-zF0Vqt8a+Zp2Oz8P+WvJflba6lLe3PhxIz1NNqn+n4A+wKLPbkeqY8ShmKjPyiCTg0RMbPrp993oUDl9xGsDlQ==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': ^5.0.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
+      '@mui/material': ^6.4.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -5072,16 +5081,16 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/material-nextjs@5.16.6':
-    resolution: {integrity: sha512-Y64ybP5Pmy+GCUcu3SuMnc25CqFwBQkRn6XNXyhvc1mhR48Iq0oFKjoO5ncqfhm58OwPClIRW2tecP/PTdGNJw==}
-    engines: {node: '>=12.0.0'}
+  '@mui/material-nextjs@6.3.1':
+    resolution: {integrity: sha512-14Y9wHdGsxI7u9XiMlpK5L6+MTsGo3Pod0EqwEde3jMx6dv63uqnMokhC1mzIJ3PjWtG8FwJkDsl57O9H6d+gQ==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/cache': ^11.11.0
+      '@emotion/react': ^11.11.4
       '@emotion/server': ^11.11.0
-      '@mui/material': ^5.0.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      next: ^13.0.0 || ^14.0.0
-      react: ^17.0.0 || ^18.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      next: ^13.0.0 || ^14.0.0 || ^15.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@emotion/cache':
         optional: true
@@ -5090,20 +5099,23 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/material@5.16.7':
-    resolution: {integrity: sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==}
-    engines: {node: '>=12.0.0'}
+  '@mui/material@6.4.0':
+    resolution: {integrity: sha512-hNIgwdM9U3DNmowZ8mU59oFmWoDKjc92FqQnQva3Pxh6xRKWtD2Ej7POUHMX8Dwr1OpcSUlT2+tEMeLb7WYsIg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-      react-dom: ^17.0.0 || ^18.0.0
+      '@mui/material-pigment-css': ^6.4.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
       '@emotion/styled':
         optional: true
+      '@mui/material-pigment-css':
+        optional: true
       '@types/react':
         optional: true
 
@@ -5117,6 +5129,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/private-theming@6.4.0':
+    resolution: {integrity: sha512-rNHci8MP6NOdEWAfZ/RBMO5Rhtp1T6fUDMSmingg9F1T6wiUeodIQ+NuTHh2/pMoUSeP9GdHdgMhMmfsXxOMuw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/styled-engine@5.16.6':
     resolution: {integrity: sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==}
     engines: {node: '>=12.0.0'}
@@ -5130,12 +5152,25 @@ packages:
       '@emotion/styled':
         optional: true
 
-  '@mui/styles@5.16.7':
-    resolution: {integrity: sha512-FfXhHP/2MlqH+vLs2tIHMeCChmqSRgkOALVNLKkPrDsvtoq5J8OraOutCn1scpvRjr9mO8ZhW6jKx2t/vUDxtQ==}
-    engines: {node: '>=12.0.0'}
+  '@mui/styled-engine@6.4.0':
+    resolution: {integrity: sha512-ek/ZrDujrger12P6o4luQIfRd2IziH7jQod2WMbLqGE03Iy0zUwYmckRTVhRQTLPNccpD8KXGcALJF+uaUQlbg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+
+  '@mui/styles@6.4.0':
+    resolution: {integrity: sha512-F9itethjoG/urwu5aCr0irGhwW84EZj+jw4pXsJmYCwk53GZ3dJQSdqETjP3UGOODXLGvuyN4jDdJME6taZBZw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -5156,6 +5191,22 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/system@6.4.0':
+    resolution: {integrity: sha512-wTDyfRlaZCo2sW2IuOsrjeE5dl0Usrs6J7DxE3GwNCVFqS5wMplM2YeNiV3DO7s53RfCqbho+gJY6xaB9KThUA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+
   '@mui/types@7.2.19':
     resolution: {integrity: sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==}
     peerDependencies:
@@ -5164,6 +5215,14 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/types@7.2.21':
+    resolution: {integrity: sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/utils@5.16.6':
     resolution: {integrity: sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==}
     engines: {node: '>=12.0.0'}
@@ -5174,6 +5233,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/utils@6.4.0':
+    resolution: {integrity: sha512-woOTATWNsTNR3YBh2Ixkj3l5RaxSiGoC9G8gOpYoFw1mZM77LWJeuMHFax7iIW4ahK0Cr35TF9DKtrafJmOmNQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/x-date-pickers@7.22.1':
     resolution: {integrity: sha512-VBgicE+7PvJrdHSL6HyieHT6a/0dENH8RaMIM2VwUFrGoZzvik50WNwY5U+Hip1BwZLIEvlqtNRQIIj6kgBR6Q==}
     engines: {node: '>=14.0.0'}
@@ -6922,6 +6991,9 @@ packages:
   '@types/prop-types@15.7.13':
     resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
 
+  '@types/prop-types@15.7.14':
+    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
+
   '@types/qs@6.9.16':
     resolution: {integrity: sha512-7i+zxXdPD0T4cKDuxCUXJ4wHcsJLwENa6Z3dCu8cfCK743OGy5Nu1RmAGqDPsoTDINVEcdXKRvR/zre+P2Ku1A==}
 
@@ -6937,6 +7009,11 @@ packages:
   '@types/react-transition-group@4.4.11':
     resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
 
+  '@types/react-transition-group@4.4.12':
+    resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
+    peerDependencies:
+      '@types/react': '*'
+
   '@types/react@18.3.12':
     resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
 
@@ -12608,6 +12685,9 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-is@19.0.0:
+    resolution: {integrity: sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==}
+
   react-leaflet@4.2.1:
     resolution: {integrity: sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==}
     peerDependencies:
@@ -16481,10 +16561,10 @@ snapshots:
   '@colors/colors@1.5.0':
     optional: true
 
-  '@commons-ui/core@0.1.0(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@5.16.7(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))':
+  '@commons-ui/core@0.1.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@6.4.0(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))':
     dependencies:
-      '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/styles': 5.16.7(@types/react@18.3.12)(react@18.3.1)
+      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/styles': 6.4.0(@types/react@18.3.12)(react@18.3.1)
       clsx: 1.2.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -16763,6 +16843,14 @@ snapshots:
       '@emotion/weak-memoize': 0.4.0
       stylis: 4.2.0
 
+  '@emotion/cache@11.14.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
   '@emotion/css@11.13.4':
     dependencies:
       '@emotion/babel-plugin': 11.12.0
@@ -16805,6 +16893,14 @@ snapshots:
       '@emotion/utils': 1.4.1
       csstype: 3.1.3
 
+  '@emotion/serialize@1.3.3':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.1.3
+
   '@emotion/server@11.11.0(@emotion/css@11.13.4)':
     dependencies:
       '@emotion/utils': 1.4.1
@@ -16839,6 +16935,8 @@ snapshots:
 
   '@emotion/utils@1.4.1': {}
 
+  '@emotion/utils@1.4.2': {}
+
   '@emotion/weak-memoize@0.4.0': {}
 
   '@esbuild/aix-ppc64@0.23.1':
@@ -17506,21 +17604,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
-  '@mui/core-downloads-tracker@5.16.7': {}
+  '@mui/core-downloads-tracker@6.4.0': {}
 
-  '@mui/icons-material@5.16.7(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
+  '@mui/icons-material@6.4.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.12
 
-  '@mui/lab@5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/lab@5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@mui/base': 5.0.0-beta.40(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/system': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/types': 7.2.19(@types/react@18.3.12)
       '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
@@ -17533,10 +17631,10 @@ snapshots:
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@types/react': 18.3.12
 
-  '@mui/material-nextjs@5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0(@emotion/css@11.13.4))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(next@15.0.3(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)':
+  '@mui/material-nextjs@6.3.1(@emotion/cache@11.13.1)(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/server@11.11.0(@emotion/css@11.13.4))(@types/react@18.3.12)(next@15.0.3(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
       next: 15.0.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4)
       react: 18.3.1
     optionalDependencies:
@@ -17544,21 +17642,21 @@ snapshots:
       '@emotion/server': 11.11.0(@emotion/css@11.13.4)
       '@types/react': 18.3.12
 
-  '@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/core-downloads-tracker': 5.16.7
-      '@mui/system': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/core-downloads-tracker': 6.4.0
+      '@mui/system': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@popperjs/core': 2.11.8
-      '@types/react-transition-group': 4.4.11
+      '@types/react-transition-group': 4.4.12(@types/react@18.3.12)
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-is: 18.3.1
+      react-is: 19.0.0
       react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     optionalDependencies:
       '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
@@ -17574,6 +17672,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/private-theming@6.4.0(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
+      prop-types: 15.8.1
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@mui/styled-engine@5.16.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -17585,13 +17692,26 @@ snapshots:
       '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
 
-  '@mui/styles@5.16.7(@types/react@18.3.12)(react@18.3.1)':
+  '@mui/styled-engine@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/sheet': 1.4.0
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 18.3.1
+    optionalDependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+
+  '@mui/styles@6.4.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@emotion/hash': 0.9.2
-      '@mui/private-theming': 5.16.6(@types/react@18.3.12)(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/private-theming': 6.4.0(@types/react@18.3.12)(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
       clsx: 2.1.1
       csstype: 3.1.3
       hoist-non-react-statics: 3.3.2
@@ -17624,10 +17744,30 @@ snapshots:
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@types/react': 18.3.12
 
+  '@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/private-theming': 6.4.0(@types/react@18.3.12)(react@18.3.1)
+      '@mui/styled-engine': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
+      clsx: 2.1.1
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 18.3.1
+    optionalDependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@types/react': 18.3.12
+
   '@mui/types@7.2.19(@types/react@18.3.12)':
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/types@7.2.21(@types/react@18.3.12)':
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@mui/utils@5.16.6(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -17640,12 +17780,24 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
-  '@mui/x-date-pickers@7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/utils@6.4.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/system': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@types/prop-types': 15.7.14
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-is: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.12
+
+  '@mui/x-date-pickers@7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/system': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
       '@types/react-transition-group': 4.4.11
       clsx: 2.1.1
@@ -17663,17 +17815,17 @@ snapshots:
   '@mui/x-internals@7.21.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
       react: 18.3.1
     transitivePeerDependencies:
       - '@types/react'
 
-  '@mui/x-tree-view@7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/x-tree-view@7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/system': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/system': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
       '@types/react-transition-group': 4.4.11
       clsx: 2.1.1
@@ -20473,6 +20625,8 @@ snapshots:
 
   '@types/prop-types@15.7.13': {}
 
+  '@types/prop-types@15.7.14': {}
+
   '@types/qs@6.9.16': {}
 
   '@types/range-parser@1.2.7': {}
@@ -20489,6 +20643,10 @@ snapshots:
     dependencies:
       '@types/react': 18.3.12
 
+  '@types/react-transition-group@4.4.12(@types/react@18.3.12)':
+    dependencies:
+      '@types/react': 18.3.12
+
   '@types/react@18.3.12':
     dependencies:
       '@types/prop-types': 15.7.13
@@ -20879,33 +21037,33 @@ snapshots:
       '@webassemblyjs/ast': 1.12.1
       '@xtuc/long': 4.2.2
 
+  '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))':
+    dependencies:
+      webpack: 5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))
+      webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
+
   '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1))(webpack@5.96.1)':
     dependencies:
       webpack: 5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))(webpack-cli@4.10.0)
       webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1)
 
-  '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))':
+  '@webpack-cli/info@1.5.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))':
     dependencies:
-      webpack: 5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))
+      envinfo: 7.14.0
       webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
 
-  '@webpack-cli/info@1.5.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1))':
+  '@webpack-cli/info@1.5.0(webpack-cli@4.10.0)':
     dependencies:
       envinfo: 7.14.0
       webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1)
 
-  '@webpack-cli/info@1.5.0(webpack-cli@4.10.0)':
+  '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))':
     dependencies:
-      envinfo: 7.14.0
       webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
 
-  '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1))':
-    dependencies:
-      webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1)
-
   '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0)':
     dependencies:
-      webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
+      webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1)
 
   '@wry/caches@1.0.1':
     dependencies:
@@ -23977,19 +24135,19 @@ snapshots:
     dependencies:
       fetch-blob: 3.2.0
 
-  formik-mui-lab@1.0.0(ggufnrxx63oy5h7baag2v3l5wi):
+  formik-mui-lab@1.0.0(2udarizgs3bv3sgnz346lqfjvm):
     dependencies:
       '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
-      '@mui/lab': 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/lab': 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       formik: 2.4.6(react@18.3.1)
       react: 18.3.1
       tiny-warning: 1.0.3
 
-  formik-mui@5.0.0-alpha.1(@mui/material@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3):
+  formik-mui@5.0.0-alpha.1(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3):
     dependencies:
-      '@mui/material': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       formik: 2.4.6(react@18.3.1)
       react: 18.3.1
       tiny-warning: 1.0.3
@@ -28108,6 +28266,8 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-is@19.0.0: {}
+
   react-leaflet@4.2.1(leaflet@1.9.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@react-leaflet/core': 2.1.0(leaflet@1.9.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -30714,9 +30874,9 @@ snapshots:
   webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))):
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
-      '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0)
-      '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0)
+      '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
+      '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))
+      '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))
       colorette: 2.0.20
       commander: 7.2.0
       cross-spawn: 7.0.3
@@ -30733,8 +30893,8 @@ snapshots:
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
       '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1))(webpack@5.96.1)
-      '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1))
-      '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack@5.96.1))
+      '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0)
+      '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0)
       colorette: 2.0.20
       commander: 7.2.0
       cross-spawn: 7.0.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index aa089349c..70a09a7a6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -28,10 +28,10 @@ catalog:
   "@mdx-js/loader": ^3.0.1
   "@mdx-js/mdx": ^3.0.1
   "@mdx-js/react": ^3.0.1
-  "@mui/icons-material": ^5.16.6
-  "@mui/material": ^5.16.6
-  "@mui/material-nextjs": ^5.16.1
-  "@mui/utils": ^5.16.6
+  "@mui/icons-material": ^6.4.0
+  "@mui/material": ^6.4.0
+  "@mui/material-nextjs": ^6.3.1
+  "@mui/utils": ^6.4.0
   "@mui/x-date-pickers": ^7.15.0
   "@mui/x-tree-view": ^7.15.0
   "@next/env": ^15.0.3
@@ -202,8 +202,8 @@ catalogs:
   # @see: https://mui.com/system/styles/basics/
   # climatemappedafrica, pesayetu and promisetracker still use @mui/styles
   mui-styles:
-    "@mui/icons-material": ^5.16.6
+    "@mui/icons-material": ^6.4.0
     "@mui/lab": ^5.0.0-alpha.155
-    "@mui/material": ^5.16.6
-    "@mui/styles": ^5.16.6
-    "@mui/utils": ^5.16.6
+    "@mui/material": ^6.4.0
+    "@mui/styles": ^6.4.0
+    "@mui/utils": ^6.4.0

From 76dea2758d154eb391f10c88ab57990dd68e5cb9 Mon Sep 17 00:00:00 2001
From: Kevin Koech <kevinkoech@MacBook-Pro.local>
Date: Thu, 23 Jan 2025 13:21:28 +0300
Subject: [PATCH 4/6] Fix Material UI packages to version 5.16.6 and update
 snapshots accordingly

---
 .../components/AboutTeam/AboutTeam.snap.js    |   2 +-
 .../src/components/Card/Card.snap.js          |   3 +-
 .../DataIndicators/DataIndicators.snap.js     |   7 +-
 .../DropdownSearch/DropdownSearch.snap.js     |  18 +-
 .../HURUmap/TreeView/TreeView.snap.js         |  22 +-
 .../src/components/Hero/Hero.snap.js          |  20 +-
 .../src/components/Summary/Summary.snap.js    |   4 +-
 pnpm-lock.yaml                                | 249 ++++++++++++++----
 pnpm-workspace.yaml                           |   8 +-
 9 files changed, 245 insertions(+), 88 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
index d2aaa9a1b..dac30ea15 100644
--- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
+++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
@@ -9,7 +9,7 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
     >
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-7i7a1w-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"
       >
         About Team
       </h4>
diff --git a/apps/climatemappedafrica/src/components/Card/Card.snap.js b/apps/climatemappedafrica/src/components/Card/Card.snap.js
index 64dae7242..faa79b3df 100644
--- a/apps/climatemappedafrica/src/components/Card/Card.snap.js
+++ b/apps/climatemappedafrica/src/components/Card/Card.snap.js
@@ -3,8 +3,7 @@
 exports[`<Card /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1mxzk6x-MuiPaper-root-MuiCard-root"
-    style="--Paper-shadow: none;"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-s2nibj-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
index 2a9fa2039..630de530f 100644
--- a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
+++ b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
@@ -40,7 +40,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-18bgkre-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-58ah25-MuiButtonBase-root"
+              class="MuiButtonBase-root css-72d9li-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
@@ -55,10 +55,13 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
                 />
               </div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1euzdtt-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-1eogcpa-MuiTypography-root"
               >
                 Overview
               </p>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
             </button>
           </div>
         </div>
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
index 90818578b..c39ff95ea 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -7,36 +7,34 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
     id="location-search"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
     >
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-19ymigm-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-wn8n2y-MuiInputBase-root"
     >
       <input
         aria-label="search"
-        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
+        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
         placeholder="Search for a location"
         type="text"
         value=""
       />
       <button
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
-        id=":r0:"
-        root="[object Object]"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-        />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
index 1eaabbed0..952ff48de 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
@@ -7,7 +7,7 @@ exports[`<TreeView /> renders unchanged 1`] = `
   >
     <ul
       aria-multiselectable="false"
-      class="MuiSimpleTreeView-root css-1o8c9x7-MuiSimpleTreeView-root"
+      class="MuiSimpleTreeView-root css-rejl51-MuiSimpleTreeView-root"
       id="mui-tree-view-1"
       role="tree"
       style="--TreeView-itemChildrenIndentation: 12px;"
@@ -15,25 +15,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-ezfdyn-MuiTreeItem2-root"
+        class="css-1uhp40g-MuiTreeItem2-root"
         id="mui-tree-view-1-annual-temperature"
         role="treeitem"
         tabindex="0"
       >
         <div
-          class="content css-df642v-MuiTreeItem2-content"
+          class="content css-tbaszv-MuiTreeItem2-content"
         >
           <div
-            class="css-13p7y6r-MuiTreeItem2-label"
+            class="css-d6m21r-MuiTreeItem2-label"
           >
             Annual Temperature
           </div>
           <div
-            class="css-1qa0aux-MuiTreeItem2-iconContainer"
+            class="css-19d0qwr-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
@@ -42,25 +42,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-ezfdyn-MuiTreeItem2-root"
+        class="css-1uhp40g-MuiTreeItem2-root"
         id="mui-tree-view-1-temperature-variation"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="content css-df642v-MuiTreeItem2-content"
+          class="content css-tbaszv-MuiTreeItem2-content"
         >
           <div
-            class="css-13p7y6r-MuiTreeItem2-label"
+            class="css-d6m21r-MuiTreeItem2-label"
           >
             Temperature Variation
           </div>
           <div
-            class="css-1qa0aux-MuiTreeItem2-iconContainer"
+            class="css-19d0qwr-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index 25dfc1a73..31a1ed5f8 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -20,7 +20,7 @@ exports[`<Hero /> renders unchanged 1`] = `
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hqp65g-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-15wb4z1-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-ljvmaf-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kvfo90-MuiGrid-root"
@@ -62,36 +62,34 @@ exports[`<Hero /> renders unchanged 1`] = `
                 id="location-search"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
                 >
                   Search for a location
                 </p>
                 <div
-                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1c0cgss-MuiInputBase-root"
+                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-14f5sin-MuiInputBase-root"
                 >
                   <input
                     aria-label="search"
-                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
+                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
                     placeholder="Search for a location"
                     type="text"
                     value=""
                   />
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
-                    id=":r0:"
-                    root="[object Object]"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
                     tabindex="0"
                     type="button"
                   >
-                    <span
-                      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
-                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
                       focusable="false"
                       viewBox="0 0 48 48"
                     />
+                    <span
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                    />
                   </button>
                 </div>
                 <div
diff --git a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
index 723d10f14..ca3a169fd 100644
--- a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
+++ b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
@@ -15,12 +15,12 @@ exports[`<Summary /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-u2oqkr-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h2 css-1vtq9iq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-yrv1vq-MuiTypography-root"
           >
             History
           </h2>
           <h5
-            class="MuiTypography-root MuiTypography-h5 css-z49wvx-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5 css-1fb4hg2-MuiTypography-root"
           >
             The ClimateMapped.AFRICA project by the CfA Datalab team is a data storytelling initiative designed to make 120 years of climate sampling data accessible to experts, journalists, concerned citizens, and researchers. This project chronicles Africa's climate history, using data storytelling techniques to present temperature trends and analysis at both national and sub-national levels
           </h5>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8926c8cb5..883246df0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -578,20 +578,20 @@ catalogs:
       version: 0.18.5
   mui-styles:
     '@mui/icons-material':
-      specifier: ^6.4.0
-      version: 6.4.0
+      specifier: ^5.16.6
+      version: 5.16.14
     '@mui/lab':
       specifier: ^5.0.0-alpha.155
       version: 5.0.0-alpha.173
     '@mui/material':
-      specifier: ^6.4.0
-      version: 6.4.0
+      specifier: ^5.16.6
+      version: 5.16.14
     '@mui/styles':
-      specifier: ^6.4.0
-      version: 6.4.0
+      specifier: ^5.16.6
+      version: 5.16.14
     '@mui/utils':
-      specifier: ^6.4.0
-      version: 6.4.0
+      specifier: ^5.16.6
+      version: 5.16.6
 
 overrides:
   sharp: ^0.33.5
@@ -1087,16 +1087,16 @@ importers:
         version: link:../../packages/hurumap-next
       '@mui/material':
         specifier: catalog:mui-styles
-        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/styles':
         specifier: catalog:mui-styles
-        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
+        version: 5.16.14(@types/react@18.3.12)(react@18.3.1)
       '@mui/utils':
         specifier: catalog:mui-styles
-        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
+        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-tree-view':
         specifier: 'catalog:'
-        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -1536,7 +1536,7 @@ importers:
         version: 3.11.8(@types/react@18.3.12)(graphql@15.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@commons-ui/core':
         specifier: 'catalog:'
-        version: 0.1.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@6.4.0(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))
+        version: 0.1.0(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@5.16.14(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))
       '@commons-ui/next':
         specifier: workspace:*
         version: link:../../packages/commons-ui-next
@@ -1554,16 +1554,16 @@ importers:
         version: link:../../packages/hurumap-next
       '@mui/material':
         specifier: catalog:mui-styles
-        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/styles':
         specifier: catalog:mui-styles
-        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
+        version: 5.16.14(@types/react@18.3.12)(react@18.3.1)
       '@mui/utils':
         specifier: catalog:mui-styles
-        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
+        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-tree-view':
         specifier: 'catalog:'
-        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@reactour/tour':
         specifier: 'catalog:'
         version: 3.7.0(react@18.3.1)
@@ -1786,7 +1786,7 @@ importers:
     dependencies:
       '@commons-ui/core':
         specifier: 'catalog:'
-        version: 0.1.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@6.4.0(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))
+        version: 0.1.0(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@5.16.14(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))
       '@commons-ui/next':
         specifier: workspace:*
         version: link:../../packages/commons-ui-next
@@ -1801,19 +1801,19 @@ importers:
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/icons-material':
         specifier: catalog:mui-styles
-        version: 6.4.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+        version: 5.16.14(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/lab':
         specifier: catalog:mui-styles
-        version: 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material':
         specifier: catalog:mui-styles
-        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/styles':
         specifier: catalog:mui-styles
-        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
+        version: 5.16.14(@types/react@18.3.12)(react@18.3.1)
       '@mui/utils':
         specifier: catalog:mui-styles
-        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
+        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
       '@sentry/nextjs':
         specifier: 'catalog:'
         version: 8.36.0(@opentelemetry/core@1.27.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.27.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.0.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.96.1)
@@ -1831,10 +1831,10 @@ importers:
         version: 2.4.6(react@18.3.1)
       formik-mui:
         specifier: 'catalog:'
-        version: 5.0.0-alpha.1(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3)
+        version: 5.0.0-alpha.1(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3)
       formik-mui-lab:
         specifier: 'catalog:'
-        version: 1.0.0(2udarizgs3bv3sgnz346lqfjvm)
+        version: 1.0.0(vclvzoittxbab22ewvctc3dwgi)
       jwt-decode:
         specifier: 'catalog:'
         version: 4.0.0
@@ -5043,9 +5043,23 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/core-downloads-tracker@5.16.14':
+    resolution: {integrity: sha512-sbjXW+BBSvmzn61XyTMun899E7nGPTXwqD9drm1jBUAvWEhJpPFIRxwQQiATWZnd9rvdxtnhhdsDxEGWI0jxqA==}
+
   '@mui/core-downloads-tracker@6.4.0':
     resolution: {integrity: sha512-6u74wi+9zeNlukrCtYYET8Ed/n9AS27DiaXCZKAD3TRGFaqiyYSsQgN2disW83pI/cM1Q2lJY1JX4YfwvNtlNw==}
 
+  '@mui/icons-material@5.16.14':
+    resolution: {integrity: sha512-heL4S+EawrP61xMXBm59QH6HODsu0gxtZi5JtnXF2r+rghzyU/3Uftlt1ij8rmJh+cFdKTQug1L9KkZB5JgpMQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/icons-material@6.4.0':
     resolution: {integrity: sha512-zF0Vqt8a+Zp2Oz8P+WvJflba6lLe3PhxIz1NNqn+n4A+wKLPbkeqY8ShmKjPyiCTg0RMbPrp993oUDl9xGsDlQ==}
     engines: {node: '>=14.0.0'}
@@ -5093,6 +5107,23 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/material@5.16.14':
+    resolution: {integrity: sha512-eSXQVCMKU2xc7EcTxe/X/rC9QsV2jUe8eLM3MUCPYbo6V52eCE436akRIvELq/AqZpxx2bwkq7HC0cRhLB+yaw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+
   '@mui/material@6.4.0':
     resolution: {integrity: sha512-hNIgwdM9U3DNmowZ8mU59oFmWoDKjc92FqQnQva3Pxh6xRKWtD2Ej7POUHMX8Dwr1OpcSUlT2+tEMeLb7WYsIg==}
     engines: {node: '>=14.0.0'}
@@ -5113,6 +5144,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/private-theming@5.16.14':
+    resolution: {integrity: sha512-12t7NKzvYi819IO5IapW2BcR33wP/KAVrU8d7gLhGHoAmhDxyXlRoKiRij3TOD8+uzk0B6R9wHUNKi4baJcRNg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/private-theming@5.16.6':
     resolution: {integrity: sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==}
     engines: {node: '>=12.0.0'}
@@ -5133,6 +5174,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/styled-engine@5.16.14':
+    resolution: {integrity: sha512-UAiMPZABZ7p8mUW4akDV6O7N3+4DatStpXMZwPlt+H/dA0lt67qawN021MNND+4QTpjaiMYxbhKZeQcyWCbuKw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+
   '@mui/styled-engine@5.16.6':
     resolution: {integrity: sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==}
     engines: {node: '>=12.0.0'}
@@ -5159,13 +5213,29 @@ packages:
       '@emotion/styled':
         optional: true
 
-  '@mui/styles@6.4.0':
-    resolution: {integrity: sha512-F9itethjoG/urwu5aCr0irGhwW84EZj+jw4pXsJmYCwk53GZ3dJQSdqETjP3UGOODXLGvuyN4jDdJME6taZBZw==}
-    engines: {node: '>=14.0.0'}
+  '@mui/styles@5.16.14':
+    resolution: {integrity: sha512-J3iE718GbU06mnD9qu57/Fx+TosuBlhzs8nk1Q87QRQ76xo6qzLc3ek9n3dUPourGXWVenTxv1YX8lTOAnbHBA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/system@5.16.14':
+    resolution: {integrity: sha512-KBxMwCb8mSIABnKvoGbvM33XHyT+sN0BzEBG+rsSc0lLQGzs7127KWkCA6/H8h6LZ00XpBEME5MAj8mZLiQ1tw==}
+    engines: {node: '>=12.0.0'}
     peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
       '@types/react':
         optional: true
 
@@ -5217,6 +5287,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/utils@5.16.14':
+    resolution: {integrity: sha512-wn1QZkRzSmeXD1IguBVvJJHV3s6rxJrfb6YuC9Kk6Noh9f8Fb54nUs5JRkKm+BOerRhj5fLg05Dhx/H3Ofb8Mg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/utils@5.16.6':
     resolution: {integrity: sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==}
     engines: {node: '>=12.0.0'}
@@ -16595,10 +16675,10 @@ snapshots:
   '@colors/colors@1.5.0':
     optional: true
 
-  '@commons-ui/core@0.1.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@6.4.0(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))':
+  '@commons-ui/core@0.1.0(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/styles@5.16.14(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(simplebar-react@3.2.6(react@18.3.1))':
     dependencies:
-      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/styles': 6.4.0(@types/react@18.3.12)(react@18.3.1)
+      '@mui/material': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/styles': 5.16.14(@types/react@18.3.12)(react@18.3.1)
       clsx: 1.2.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -17629,8 +17709,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/core-downloads-tracker@5.16.14': {}
+
   '@mui/core-downloads-tracker@6.4.0': {}
 
+  '@mui/icons-material@5.16.14(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/material': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@mui/icons-material@6.4.0(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -17639,11 +17729,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
-  '@mui/lab@5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/lab@5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@mui/base': 5.0.0-beta.40(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/system': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/types': 7.2.19(@types/react@18.3.12)
       '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
@@ -17667,6 +17757,27 @@ snapshots:
       '@emotion/server': 11.11.0(@emotion/css@11.13.4)
       '@types/react': 18.3.12
 
+  '@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/core-downloads-tracker': 5.16.14
+      '@mui/system': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@mui/utils': 5.16.14(@types/react@18.3.12)(react@18.3.1)
+      '@popperjs/core': 2.11.8
+      '@types/react-transition-group': 4.4.12(@types/react@18.3.12)
+      clsx: 2.1.1
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 19.0.0
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+    optionalDependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@types/react': 18.3.12
+
   '@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -17688,6 +17799,15 @@ snapshots:
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@types/react': 18.3.12
 
+  '@mui/private-theming@5.16.14(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/utils': 5.16.14(@types/react@18.3.12)(react@18.3.1)
+      prop-types: 15.8.1
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@mui/private-theming@5.16.6(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -17706,6 +17826,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/styled-engine@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@emotion/cache': 11.14.0
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 18.3.1
+    optionalDependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+
   '@mui/styled-engine@5.16.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -17730,13 +17861,13 @@ snapshots:
       '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
 
-  '@mui/styles@6.4.0(@types/react@18.3.12)(react@18.3.1)':
+  '@mui/styles@5.16.14(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@emotion/hash': 0.9.2
-      '@mui/private-theming': 6.4.0(@types/react@18.3.12)(react@18.3.1)
+      '@mui/private-theming': 5.16.14(@types/react@18.3.12)(react@18.3.1)
       '@mui/types': 7.2.21(@types/react@18.3.12)
-      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 5.16.14(@types/react@18.3.12)(react@18.3.1)
       clsx: 2.1.1
       csstype: 3.1.3
       hoist-non-react-statics: 3.3.2
@@ -17753,6 +17884,22 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/system@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/private-theming': 5.16.14(@types/react@18.3.12)(react@18.3.1)
+      '@mui/styled-engine': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@mui/utils': 5.16.14(@types/react@18.3.12)(react@18.3.1)
+      clsx: 2.1.1
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 18.3.1
+    optionalDependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@types/react': 18.3.12
+
   '@mui/system@5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -17793,11 +17940,23 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/utils@5.16.14(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@types/prop-types': 15.7.14
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-is: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@mui/utils@5.16.6(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@types/prop-types': 15.7.13
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@types/prop-types': 15.7.14
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -17845,10 +18004,10 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@mui/x-tree-view@7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/x-tree-view@7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/system': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
@@ -24214,19 +24373,19 @@ snapshots:
     dependencies:
       fetch-blob: 3.2.0
 
-  formik-mui-lab@1.0.0(2udarizgs3bv3sgnz346lqfjvm):
+  formik-mui-lab@1.0.0(vclvzoittxbab22ewvctc3dwgi):
     dependencies:
       '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
-      '@mui/lab': 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/lab': 5.0.0-alpha.173(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       formik: 2.4.6(react@18.3.1)
       react: 18.3.1
       tiny-warning: 1.0.3
 
-  formik-mui@5.0.0-alpha.1(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3):
+  formik-mui@5.0.0-alpha.1(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(formik@2.4.6(react@18.3.1))(react@18.3.1)(tiny-warning@1.0.3):
     dependencies:
-      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/material': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       formik: 2.4.6(react@18.3.1)
       react: 18.3.1
       tiny-warning: 1.0.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 98db67b63..6bd63b845 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -202,8 +202,8 @@ catalogs:
   # @see: https://mui.com/system/styles/basics/
   # climatemappedafrica, pesayetu and promisetracker still use @mui/styles
   mui-styles:
-    "@mui/icons-material": ^6.4.0
+    "@mui/icons-material": ^5.16.6
     "@mui/lab": ^5.0.0-alpha.155
-    "@mui/material": ^6.4.0
-    "@mui/styles": ^6.4.0
-    "@mui/utils": ^6.4.0
+    "@mui/material": ^5.16.6
+    "@mui/styles": ^5.16.6
+    "@mui/utils": ^5.16.6

From 3ec0e592e289fcd5c30fa576b9ba74c8034e70d2 Mon Sep 17 00:00:00 2001
From: Kevin Koech <kevinkoech@MacBook-Pro.local>
Date: Thu, 23 Jan 2025 14:11:03 +0300
Subject: [PATCH 5/6] Refactor MUI integration: remove deprecated @mui/styles
 in climatemapped, update component snapshots

---
 apps/climatemappedafrica/package.json         |   7 +-
 .../components/AboutTeam/AboutTeam.snap.js    |   2 +-
 .../src/components/Card/Card.snap.js          |   3 +-
 .../DataIndicators/DataIndicators.snap.js     |   7 +-
 .../DropdownSearch/DropdownSearch.snap.js     |  18 +--
 .../HURUmap/TreeView/TreeView.snap.js         |  22 +--
 .../src/components/Hero/Hero.snap.js          |  20 +--
 .../src/components/Summary/Summary.snap.js    |   4 +-
 apps/climatemappedafrica/src/pages/_app.js    |   9 +-
 .../src/pages/_document.js                    |  23 ++-
 pnpm-lock.yaml                                | 133 ++++++++----------
 pnpm-workspace.yaml                           |   2 +-
 12 files changed, 125 insertions(+), 125 deletions(-)

diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json
index 46ac7bfda..fab765f6f 100644
--- a/apps/climatemappedafrica/package.json
+++ b/apps/climatemappedafrica/package.json
@@ -37,13 +37,14 @@
     "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
     "@commons-ui/payload": "workspace:*",
+    "@emotion/cache": "catalog:",
     "@emotion/react": "catalog:",
     "@emotion/styled": "catalog:",
+    "@emotion/server": "catalog:",
     "@hurumap/core": "workspace:*",
     "@hurumap/next": "workspace:*",
-    "@mui/material": "catalog:mui-styles",
-    "@mui/styles": "catalog:mui-styles",
-    "@mui/utils": "catalog:mui-styles",
+    "@mui/material": "catalog:",
+    "@mui/utils": "catalog:",
     "@mui/x-tree-view": "catalog:",
     "@next/env": "catalog:",
     "@payloadcms/bundler-webpack": "catalog:",
diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
index dac30ea15..d2aaa9a1b 100644
--- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
+++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
@@ -9,7 +9,7 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
     >
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-7i7a1w-MuiTypography-root"
       >
         About Team
       </h4>
diff --git a/apps/climatemappedafrica/src/components/Card/Card.snap.js b/apps/climatemappedafrica/src/components/Card/Card.snap.js
index faa79b3df..64dae7242 100644
--- a/apps/climatemappedafrica/src/components/Card/Card.snap.js
+++ b/apps/climatemappedafrica/src/components/Card/Card.snap.js
@@ -3,7 +3,8 @@
 exports[`<Card /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-s2nibj-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1mxzk6x-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   />
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
index 630de530f..2a9fa2039 100644
--- a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
+++ b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
@@ -40,7 +40,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-18bgkre-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-72d9li-MuiButtonBase-root"
+              class="MuiButtonBase-root css-58ah25-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
@@ -55,13 +55,10 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
                 />
               </div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1eogcpa-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-1euzdtt-MuiTypography-root"
               >
                 Overview
               </p>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
index c39ff95ea..90818578b 100644
--- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
+++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -7,34 +7,36 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
     id="location-search"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
     >
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-wn8n2y-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-19ymigm-MuiInputBase-root"
     >
       <input
         aria-label="search"
-        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
         placeholder="Search for a location"
         type="text"
         value=""
       />
       <button
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
+        id=":r0:"
+        root="[object Object]"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
       </button>
     </div>
     <div
diff --git a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
index 952ff48de..1eaabbed0 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js
@@ -7,7 +7,7 @@ exports[`<TreeView /> renders unchanged 1`] = `
   >
     <ul
       aria-multiselectable="false"
-      class="MuiSimpleTreeView-root css-rejl51-MuiSimpleTreeView-root"
+      class="MuiSimpleTreeView-root css-1o8c9x7-MuiSimpleTreeView-root"
       id="mui-tree-view-1"
       role="tree"
       style="--TreeView-itemChildrenIndentation: 12px;"
@@ -15,25 +15,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-1uhp40g-MuiTreeItem2-root"
+        class="css-ezfdyn-MuiTreeItem2-root"
         id="mui-tree-view-1-annual-temperature"
         role="treeitem"
         tabindex="0"
       >
         <div
-          class="content css-tbaszv-MuiTreeItem2-content"
+          class="content css-df642v-MuiTreeItem2-content"
         >
           <div
-            class="css-d6m21r-MuiTreeItem2-label"
+            class="css-13p7y6r-MuiTreeItem2-label"
           >
             Annual Temperature
           </div>
           <div
-            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+            class="css-1qa0aux-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
@@ -42,25 +42,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-1uhp40g-MuiTreeItem2-root"
+        class="css-ezfdyn-MuiTreeItem2-root"
         id="mui-tree-view-1-temperature-variation"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="content css-tbaszv-MuiTreeItem2-content"
+          class="content css-df642v-MuiTreeItem2-content"
         >
           <div
-            class="css-d6m21r-MuiTreeItem2-label"
+            class="css-13p7y6r-MuiTreeItem2-label"
           >
             Temperature Variation
           </div>
           <div
-            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+            class="css-1qa0aux-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index 31a1ed5f8..25dfc1a73 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -20,7 +20,7 @@ exports[`<Hero /> renders unchanged 1`] = `
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hqp65g-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-ljvmaf-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-15wb4z1-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kvfo90-MuiGrid-root"
@@ -62,34 +62,36 @@ exports[`<Hero /> renders unchanged 1`] = `
                 id="location-search"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
                 >
                   Search for a location
                 </p>
                 <div
-                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-14f5sin-MuiInputBase-root"
+                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1c0cgss-MuiInputBase-root"
                 >
                   <input
                     aria-label="search"
-                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
                     placeholder="Search for a location"
                     type="text"
                     value=""
                   />
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
+                    id=":r0:"
+                    root="[object Object]"
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
                       focusable="false"
                       viewBox="0 0 48 48"
                     />
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </div>
                 <div
diff --git a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
index ca3a169fd..723d10f14 100644
--- a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
+++ b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
@@ -15,12 +15,12 @@ exports[`<Summary /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-u2oqkr-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h2 css-yrv1vq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-1vtq9iq-MuiTypography-root"
           >
             History
           </h2>
           <h5
-            class="MuiTypography-root MuiTypography-h5 css-1fb4hg2-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5 css-z49wvx-MuiTypography-root"
           >
             The ClimateMapped.AFRICA project by the CfA Datalab team is a data storytelling initiative designed to make 120 years of climate sampling data accessible to experts, journalists, concerned citizens, and researchers. This project chronicles Africa's climate history, using data storytelling techniques to present temperature trends and analysis at both national and sub-national levels
           </h5>
diff --git a/apps/climatemappedafrica/src/pages/_app.js b/apps/climatemappedafrica/src/pages/_app.js
index 4bf3bf937..9adb0844f 100644
--- a/apps/climatemappedafrica/src/pages/_app.js
+++ b/apps/climatemappedafrica/src/pages/_app.js
@@ -1,6 +1,5 @@
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
-import { ThemeProvider as StyledThemeProvider } from "@mui/styles";
 import { useRouter } from "next/router";
 import { DefaultSeo } from "next-seo";
 import PropTypes from "prop-types";
@@ -45,11 +44,9 @@ export default function MyApp(props) {
       <DefaultSeo {...SEO} />
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
-          <StyledThemeProvider theme={theme}>
-            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-            <CssBaseline />
-            <Component {...pageProps} />
-          </StyledThemeProvider>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <Component {...pageProps} />
         </ThemeProvider>
       </StyledEngineProvider>
     </>
diff --git a/apps/climatemappedafrica/src/pages/_document.js b/apps/climatemappedafrica/src/pages/_document.js
index 8b01ac564..721fe93e0 100644
--- a/apps/climatemappedafrica/src/pages/_document.js
+++ b/apps/climatemappedafrica/src/pages/_document.js
@@ -1,9 +1,14 @@
-import ServerStyleSheets from "@mui/styles/ServerStyleSheets";
+import createCache from "@emotion/cache";
+import createEmotionServer from "@emotion/server/create-instance";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import React from "react";
 
 import theme from "@/climatemappedafrica/theme";
 
+function createEmotionCache() {
+  return createCache({ key: "css", prepend: true });
+}
+
 export default class MyDocument extends Document {
   render() {
     return (
@@ -80,22 +85,32 @@ MyDocument.getInitialProps = async (ctx) => {
   // 4. page.render
 
   // Render app and page and get the context of the page with collected side effects.
-  const sheets = new ServerStyleSheets();
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache);
   const originalRenderPage = ctx.renderPage;
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+      enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,
     });
 
   const initialProps = await Document.getInitialProps(ctx);
 
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(" ")}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
   return {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
     styles: [
       ...React.Children.toArray(initialProps.styles),
-      sheets.getStyleElement(),
+      ...emotionStyleTags,
     ],
   };
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 883246df0..9fbef259b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -828,7 +828,7 @@ importers:
         version: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1)
       eslint-plugin-import:
         specifier: 'catalog:'
-        version: 2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
+        version: 2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
       identity-obj-proxy:
         specifier: 'catalog:'
         version: 3.0.0
@@ -1073,9 +1073,15 @@ importers:
       '@commons-ui/payload':
         specifier: workspace:*
         version: link:../../packages/commons-ui-payload
+      '@emotion/cache':
+        specifier: 'catalog:'
+        version: 11.13.1
       '@emotion/react':
         specifier: 'catalog:'
         version: 11.13.3(@types/react@18.3.12)(react@18.3.1)
+      '@emotion/server':
+        specifier: 'catalog:'
+        version: 11.11.0(@emotion/css@11.13.4)
       '@emotion/styled':
         specifier: 'catalog:'
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
@@ -1086,17 +1092,14 @@ importers:
         specifier: workspace:*
         version: link:../../packages/hurumap-next
       '@mui/material':
-        specifier: catalog:mui-styles
-        version: 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/styles':
-        specifier: catalog:mui-styles
-        version: 5.16.14(@types/react@18.3.12)(react@18.3.1)
+        specifier: 'catalog:'
+        version: 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/utils':
-        specifier: catalog:mui-styles
-        version: 5.16.6(@types/react@18.3.12)(react@18.3.1)
+        specifier: 'catalog:'
+        version: 6.4.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-tree-view':
         specifier: 'catalog:'
-        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@next/env':
         specifier: 'catalog:'
         version: 15.0.3
@@ -1500,7 +1503,7 @@ importers:
         version: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
       eslint-plugin-import:
         specifier: 'catalog:'
-        version: 2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
+        version: 2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
       identity-obj-proxy:
         specifier: 'catalog:'
         version: 3.0.0
@@ -1735,7 +1738,7 @@ importers:
         version: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1(esbuild@0.24.0))
       eslint-plugin-import:
         specifier: 'catalog:'
-        version: 2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
+        version: 2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
       eslint-plugin-module-resolver:
         specifier: 'catalog:'
         version: 1.5.0
@@ -1919,7 +1922,7 @@ importers:
         version: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1)
       eslint-plugin-import:
         specifier: 'catalog:'
-        version: 2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
+        version: 2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
       identity-obj-proxy:
         specifier: 'catalog:'
         version: 3.0.0
@@ -1988,31 +1991,31 @@ importers:
         version: 15.0.3(next@15.0.3(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)
       '@payloadcms/bundler-webpack':
         specifier: 'catalog:'
-        version: 1.0.7(@swc/core@1.8.0(@swc/helpers@0.5.13))(ajv@8.17.1)(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))(sass@1.69.4)
+        version: 1.0.7(@swc/core@1.8.0(@swc/helpers@0.5.13))(ajv@8.17.1)(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1))(sass@1.69.4)
       '@payloadcms/db-mongodb':
         specifier: 'catalog:'
-        version: 1.7.3(@aws-sdk/client-sso-oidc@3.682.0(@aws-sdk/client-sts@3.682.0))(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))
+        version: 1.7.3(@aws-sdk/client-sso-oidc@3.682.0(@aws-sdk/client-sts@3.682.0))(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1))
       '@payloadcms/live-preview-react':
         specifier: 'catalog:'
         version: 0.2.0(react@18.3.1)
       '@payloadcms/plugin-cloud-storage':
         specifier: 'catalog:'
-        version: 1.2.0(@aws-sdk/client-s3@3.685.0)(@aws-sdk/lib-storage@3.685.0(@aws-sdk/client-s3@3.685.0))(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))
+        version: 1.2.0(@aws-sdk/client-s3@3.685.0)(@aws-sdk/lib-storage@3.685.0(@aws-sdk/client-s3@3.685.0))(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1))
       '@payloadcms/plugin-nested-docs':
         specifier: 'catalog:'
-        version: 1.0.12(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))
+        version: 1.0.12(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1))
       '@payloadcms/plugin-sentry':
         specifier: 'catalog:'
-        version: 0.0.6(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))(react@18.3.1)
+        version: 0.0.6(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1))(react@18.3.1)
       '@payloadcms/plugin-seo':
         specifier: 'catalog:'
-        version: 2.3.2(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))(react@18.3.1)
+        version: 2.3.2(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1))(react@18.3.1)
       '@payloadcms/richtext-slate':
         specifier: 'catalog:'
-        version: 1.5.2(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.5.2(payload@2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: 'catalog:'
-        version: 8.36.0(@opentelemetry/core@1.27.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.27.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.0.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
+        version: 8.36.0(@opentelemetry/core@1.27.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.27.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.0.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.69.4))(react@18.3.1)(webpack@5.96.1)
       ace-builds:
         specifier: 'catalog:'
         version: 1.36.3
@@ -2039,7 +2042,7 @@ importers:
         version: 1.0.3
       payload:
         specifier: 'catalog:'
-        version: 2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
+        version: 2.30.0(@swc/helpers@0.5.13)(@types/react@18.3.12)(encoding@0.1.13)(typescript@5.6.3)(webpack@5.96.1)
       react:
         specifier: 'catalog:'
         version: 18.3.1
@@ -2109,7 +2112,7 @@ importers:
         version: 3.6.3(@typescript-eslint/parser@8.16.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint-plugin-import@2.31.0)(eslint@9.14.0(jiti@1.21.6))
       eslint-import-resolver-webpack:
         specifier: 'catalog:'
-        version: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
+        version: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1)
       eslint-plugin-import:
         specifier: 'catalog:'
         version: 2.31.0(@typescript-eslint/parser@8.16.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
@@ -2233,7 +2236,7 @@ importers:
         version: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1)
       eslint-plugin-import:
         specifier: 'catalog:'
-        version: 2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
+        version: 2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
       eslint-plugin-mdx:
         specifier: 'catalog:'
         version: 3.1.5(eslint@9.14.0(jiti@1.21.6))
@@ -2351,7 +2354,7 @@ importers:
         version: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1)
       eslint-plugin-import:
         specifier: 'catalog:'
-        version: 2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
+        version: 2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
       prettier:
         specifier: 'catalog:'
         version: 3.3.3
@@ -16953,7 +16956,7 @@ snapshots:
     dependencies:
       '@emotion/memoize': 0.9.0
       '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.1
+      '@emotion/utils': 1.4.2
       '@emotion/weak-memoize': 0.4.0
       stylis: 4.2.0
 
@@ -17017,7 +17020,7 @@ snapshots:
 
   '@emotion/server@11.11.0(@emotion/css@11.13.4)':
     dependencies:
-      '@emotion/utils': 1.4.1
+      '@emotion/utils': 1.4.2
       html-tokenize: 2.0.1
       multipipe: 1.0.2
       through: 2.3.8
@@ -17699,8 +17702,8 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.26.0
       '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@mui/utils': 5.16.14(@types/react@18.3.12)(react@18.3.1)
       '@popperjs/core': 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -17736,7 +17739,7 @@ snapshots:
       '@mui/material': 5.16.14(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/system': 5.16.7(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 5.16.14(@types/react@18.3.12)(react@18.3.1)
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -17811,7 +17814,7 @@ snapshots:
   '@mui/private-theming@5.16.6(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 5.16.14(@types/react@18.3.12)(react@18.3.1)
       prop-types: 15.8.1
       react: 18.3.1
     optionalDependencies:
@@ -17840,7 +17843,7 @@ snapshots:
   '@mui/styled-engine@5.16.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@emotion/cache': 11.13.1
+      '@emotion/cache': 11.14.0
       csstype: 3.1.3
       prop-types: 15.8.1
       react: 18.3.1
@@ -17905,8 +17908,8 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@mui/private-theming': 5.16.6(@types/react@18.3.12)(react@18.3.1)
       '@mui/styled-engine': 5.16.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1)
+      '@mui/types': 7.2.21(@types/react@18.3.12)
+      '@mui/utils': 5.16.14(@types/react@18.3.12)(react@18.3.1)
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -18023,6 +18026,25 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  '@mui/x-tree-view@7.22.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/material': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/system': 6.4.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.4.0(@types/react@18.3.12)(react@18.3.1)
+      '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
+      '@types/react-transition-group': 4.4.11
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+    optionalDependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@next/env@15.0.3': {}
 
   '@next/eslint-plugin-next@15.0.3':
@@ -23445,7 +23467,7 @@ snapshots:
     dependencies:
       debug: 3.2.7
       enhanced-resolve: 0.9.1
-      eslint-plugin-import: 2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
       find-root: 1.1.0
       hasown: 2.0.2
       interpret: 1.4.0
@@ -23462,7 +23484,7 @@ snapshots:
     dependencies:
       debug: 3.2.7
       enhanced-resolve: 0.9.1
-      eslint-plugin-import: 2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
       find-root: 1.1.0
       hasown: 2.0.2
       interpret: 1.4.0
@@ -23504,7 +23526,7 @@ snapshots:
       eslint: 9.14.0(jiti@1.21.6)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.16.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint-plugin-import@2.31.0)(eslint@9.14.0(jiti@1.21.6))
-      eslint-import-resolver-webpack: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
+      eslint-import-resolver-webpack: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -23527,7 +23549,7 @@ snapshots:
       eslint: 9.14.0(jiti@1.21.6)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.16.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint-plugin-import@2.31.0)(eslint@9.14.0(jiti@1.21.6))
-      eslint-import-resolver-webpack: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1(@swc/core@1.8.0(@swc/helpers@0.5.13)))
+      eslint-import-resolver-webpack: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -23542,16 +23564,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6)):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      eslint: 9.14.0(jiti@1.21.6)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-webpack: 0.13.9(eslint-plugin-import@2.31.0)(webpack@5.96.1)
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.12.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       '@rtsao/scc': 1.1.0
@@ -23666,33 +23678,6 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6)):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.5
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 9.14.0(jiti@1.21.6)
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9)(eslint@9.14.0(jiti@1.21.6))
-      hasown: 2.0.2
-      is-core-module: 2.15.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.0
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.8
-      tsconfig-paths: 3.15.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
   eslint-plugin-jest-dom@5.4.0(@testing-library/dom@10.4.0)(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       '@babel/runtime': 7.26.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6bd63b845..65bcbb973 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -200,7 +200,7 @@ catalogs:
   # @mui/styles was deprecated with the release of MUI Core v5 in late 2021
   # @mui/styles is not compatible with React.StrictMode or React 18, and it will not be updated.
   # @see: https://mui.com/system/styles/basics/
-  # climatemappedafrica, pesayetu and promisetracker still use @mui/styles
+  # pesayetu and promisetracker still use @mui/styles
   mui-styles:
     "@mui/icons-material": ^5.16.6
     "@mui/lab": ^5.0.0-alpha.155

From 563bc92f0ba549e4fd3d4342dc29ff1d217f0b10 Mon Sep 17 00:00:00 2001
From: Kevin Koech <kevinkoech@MacBook-Pro.local>
Date: Fri, 24 Jan 2025 10:57:44 +0300
Subject: [PATCH 6/6] Update import paths for CustomSelectComponent and adjust
 NavigationList component structure

---
 .../src/payload/fields/customSelect/currentApp.js  |  2 +-
 .../src/payload/fields/customSelect/defaultApp.js  |  2 +-
 apps/climatemappedafrica/next.config.js            |  2 +-
 .../Navigation/MobileNavigation/NavigationList.js  | 14 ++++----------
 docker-compose.yml                                 |  2 +-
 5 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/apps/civicsignalblog/src/payload/fields/customSelect/currentApp.js b/apps/civicsignalblog/src/payload/fields/customSelect/currentApp.js
index e639217f9..7f2a68d28 100644
--- a/apps/civicsignalblog/src/payload/fields/customSelect/currentApp.js
+++ b/apps/civicsignalblog/src/payload/fields/customSelect/currentApp.js
@@ -1,4 +1,4 @@
-import CustomSelectComponent from "#civicsignalblog/payload/components/allowedAppSelect";
+import CustomSelectComponent from "#civicsignalblog/payload/components/allowedAppSelect/index";
 
 const CurrentAppSelectField = {
   name: "currentApp",
diff --git a/apps/civicsignalblog/src/payload/fields/customSelect/defaultApp.js b/apps/civicsignalblog/src/payload/fields/customSelect/defaultApp.js
index 269822fef..2ba2d669e 100644
--- a/apps/civicsignalblog/src/payload/fields/customSelect/defaultApp.js
+++ b/apps/civicsignalblog/src/payload/fields/customSelect/defaultApp.js
@@ -1,4 +1,4 @@
-import CustomSelectComponent from "#civicsignalblog/payload/components/allowedAppSelect";
+import CustomSelectComponent from "#civicsignalblog/payload/components/allowedAppSelect/index";
 
 const DefaultAppSelectField = {
   name: "defaultApp",
diff --git a/apps/climatemappedafrica/next.config.js b/apps/climatemappedafrica/next.config.js
index 80cee9b09..1ae322ad7 100644
--- a/apps/climatemappedafrica/next.config.js
+++ b/apps/climatemappedafrica/next.config.js
@@ -6,7 +6,7 @@ const outputFileTracingRoot = PROJECT_ROOT
   : undefined;
 
 module.exports = {
-  experimental: {
+  experimental: outputFileTracingRoot && {
     outputFileTracingRoot,
   },
   images: {
diff --git a/apps/promisetracker/src/components/Navigation/MobileNavigation/NavigationList.js b/apps/promisetracker/src/components/Navigation/MobileNavigation/NavigationList.js
index 5ba092364..5a871d1b3 100644
--- a/apps/promisetracker/src/components/Navigation/MobileNavigation/NavigationList.js
+++ b/apps/promisetracker/src/components/Navigation/MobileNavigation/NavigationList.js
@@ -1,12 +1,5 @@
 import { Link } from "@commons-ui/next";
-import {
-  Grid,
-  ListItemButton,
-  List,
-  ListItem,
-  Collapse,
-  Typography,
-} from "@mui/material";
+import { Grid, List, ListItem, Collapse, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
@@ -109,8 +102,9 @@ function NavigationList({ onNavigate, open: openProp, navigation, ...props }) {
 
         {analysisMenuNavigation?.length > 0 ? (
           <>
-            <ListItemButton
+            <ListItem
               autoFocus={false}
+              button
               onClick={handleClick}
               className={classes.listItem}
             >
@@ -120,7 +114,7 @@ function NavigationList({ onNavigate, open: openProp, navigation, ...props }) {
               >
                 {analysisMenu.title}
               </Typography>
-            </ListItemButton>
+            </ListItem>
 
             <Collapse in={open} timeout="auto">
               <List component="nav" className={classes.collapse}>
diff --git a/docker-compose.yml b/docker-compose.yml
index ec3bc9ee7..8537d5029 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -41,7 +41,7 @@ services:
       S3_SECRET_ACCESS_KEY: ${S3_SECRET_ACCESS_KEY}
       S3_BUCKET: ${S3_BUCKET}
       S3_REGION: ${S3_REGION}
-      MONGO_URL: mongodb://${MONGO_INITDB_ROOT_USERNAME:-root}:${MONGO_INITDB_ROOT_PASSWORD:-rootpassword}@host.docker.internal:${MONGODB_PORT:-27017}/codeforafrica?authSource=admin&directConnection=true
+      MONGO_URL: mongodb://${MONGO_INITDB_ROOT_USERNAME:-root}:${MONGO_INITDB_ROOT_PASSWORD:-rootpassword}@host.docker.internal:${MONGODB_PORT:-27017}/civicsignalblog?authSource=admin&directConnection=true
       PAYLOAD_SECRET: ${PAYLOAD_SECRET}
       SENTRY_ORG: ${SENTRY_ORG}
       SENTRY_ENVIRONMENT: ${SENTRY_ENVIRONMENT}