diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_1.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_1.html
index 0ef1a8886e1..a5b86ff0f89 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_1.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_1.html
@@ -8,7 +8,7 @@
 
     <p class="mt-5 mb-lg-5 pb-lg-5">
       {% blocktrans trimmed %}
-      The YouTube Regrets our volunteers flagged had tons of views, but it’s impossible to tell how many of those views came from YouTube’s recommendation algorithm, because <span class="fw-bold">YouTube won’t release this information</span>.
+      The YouTube Regrets our volunteers flagged had tons of views, but it’s impossible to tell how many of those views came from YouTube’s recommendation algorithm, because <span class="tw-font-bold">YouTube won’t release this information</span>.
       {% endblocktrans %}
     </p>
 
@@ -17,8 +17,8 @@
       {% trans "Reported Videos" as reported_videos %}
       {% trans "Other Videos" as other_videos %}
       {% trans "views per day" as view_per_day %}
-      {% include "./standout-stat.html" with heading=reported_videos number=5794 label=view_per_day classes="mb-5" id="reported-views-per-day-count-up" %}
-      {% include "./standout-stat.html" with heading=other_videos number=3312 label=view_per_day id="other-views-per-day-count-up" %}
+      {% include "./standout-stat.html" with heading=reported_videos number=5794 label=view_per_day classes="mb-5" id="reported-views-per-day-count-up" prefix="~" %}
+      {% include "./standout-stat.html" with heading=other_videos number=3312 label=view_per_day id="other-views-per-day-count-up" prefix="~" %}
     </div>
     <div class="col-12 col-lg-6 offset-lg-1 mt-3 mt-lg-3">
       <h2 class="heading-2 mb-4">{% trans "What we do know is that reported videos seemed to accumulate views faster than those that were not." %}</h2>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_2.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_2.html
index 5834e4cc211..ae939729b14 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_2.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_2.html
@@ -5,7 +5,7 @@
 
   <p class="mt-5 mb-lg-5 pb-lg-5">
     {% blocktrans trimmed %}
-    What we do know is at the time they were reported they had racked up a collective 160 million views, an average of 760 thousand views per video, accrued over an average of 5 months that the videos had been up at the time they were reported. It is impossible to tell how many of these views were a result of recommendations, because <span class="fw-bold">YouTube won’t release this information</span>.
+    What we do know is at the time they were reported they had racked up a collective 160 million views, an average of 760 thousand views per video, accrued over an average of 5 months that the videos had been up at the time they were reported. It is impossible to tell how many of these views were a result of recommendations, because <span class="tw-font-bold">YouTube won’t release this information</span>.
     {% endblocktrans %}
   </p>
 
@@ -17,6 +17,6 @@
   </div>
   <div class="col-12 col-xl-5 mt-3 mt-xl-0 ml-xl-10">
     {% trans "views per video" as views_per_video %}
-    {% include "./standout-stat.html" with number=760 label=views_per_video classes="mb-5" id="views-per-video-count-up" %}
+    {% include "./standout-stat.html" with number=760 label=views_per_video classes="mb-5" id="views-per-video-count-up" prefix="~" suffix="K" %}
   </div>
 </div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_3.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_3.html
index 9512e72e46c..dbae8f64de8 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_3.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion_section_3.html
@@ -2,7 +2,7 @@
 
 <p class="mb-5 pb-3">
   {% blocktrans trimmed %}
-  When YouTube is called out for recommending borderline content, the company usually boasts that their policy changes have led to a “70% average drop in watch time of this content coming from non-subscribed recommendations in the U.S.” <span class="fw-bold">But what about the rest of the world?</span>
+  When YouTube is called out for recommending borderline content, the company usually boasts that their policy changes have led to a “70% average drop in watch time of this content coming from non-subscribed recommendations in the U.S.” <span class="tw-font-bold">But what about the rest of the world?</span>
   {% endblocktrans %}
 </p>
 
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/hero.html
index 37c435c60f6..37b70c602aa 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/hero.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/hero.html
@@ -9,7 +9,7 @@
           <h1 class="mb-3 hero-heading">{% trans "YouTube Regrets" %}</h1>
           <p class="tw-body-large">
             {% blocktrans trimmed %}
-            Mozilla and 37,380 YouTube users conducted a study to better understand harmful YouTube recommendations. <span class="fst-italic">This is what we learned</span>.
+            Mozilla and 37,380 YouTube users conducted a study to better understand harmful YouTube recommendations. <span class="tw-italic">This is what we learned</span>.
             {% endblocktrans %}
           </p>
           <a href="{% yt2021report %}" class="tw-btn btn-download" download>{% trans "Download Full Report" %}</a>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/intro.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/intro.html
index 5544e2d3a48..e7dc2109e5a 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/intro.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/intro.html
@@ -1,28 +1,28 @@
 {% load i18n %}
-<div class="container tw-dark mb-3">
+<section class="container tw-dark mb-3">
   <div class="row justify-content-center">
     <div class="col-12 col-md-8">
       <p>
-        {% blocktrans with stories_link='class="fw-bold" href="https://foundation.mozilla.org/campaigns/youtube-regrets/"' trimmed %}
+        {% blocktrans with stories_link='class="tw-font-bold" href="https://foundation.mozilla.org/campaigns/youtube-regrets/"' trimmed %}
         In 2019, Mozilla collected <a {{stories_link}}>countless stories</a> from people whose lives were impacted by YouTube’s recommendation algorithm. People had been exposed to misinformation, developed unhealthy body images, and became trapped in bizarre rabbit holes. The more stories we read, the more we realized how central YouTube has become to the lives of so many people — and just how much YouTube recommendations can impact their wellbeing.
         {% endblocktrans %}
       </p>
       <p class="mb-5 pb-4">
         {% blocktrans with routine_response_url="https://foundation.mozilla.org/blog/congratulations-youtube-now-show-your-work/" trimmed %}
-        Yet when confronted about its recommendation algorithm, <span class="fw-bold">YouTube’s <a href="{{routine_response_url}}">routine response</a> is to deny and deflect</span>.
+        Yet when confronted about its recommendation algorithm, <span class="tw-font-bold">YouTube’s <a href="{{routine_response_url}}">routine response</a> is to deny and deflect</span>.
         {% endblocktrans %}
       </p>
       <p>
-        {% blocktrans with reporter_link='class="fw-bold" href="https://foundation.mozilla.org/campaigns/regrets-reporter/"' trimmed %}
+        {% blocktrans with reporter_link='class="tw-font-bold" href="https://foundation.mozilla.org/campaigns/regrets-reporter/"' trimmed %}
         Faced with YouTube’s continuous refusal to engage, Mozilla built a browser extension, <a {{reporter_link}}>RegretsReporter</a>, that allows people to donate data about the YouTube videos they regret watching on the platform.
         Through one of the biggest crowdsourced investigations into YouTube, we’ve uncovered new information that warrants urgent attention and action from lawmakers and the public.
         {% endblocktrans %}
       </p>
-      <p class="fw-bold">
+      <p class="tw-font-bold">
         {% blocktrans trimmed %}
         We now know that YouTube is recommending videos that violate their very own content policies and harm people around the world — and that needs to stop.
         {% endblocktrans %}
       </p>
     </div>
   </div>
-</div>
+</section>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/our-research.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/our-research.html
index 546e17c73b3..aa7feff8657 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/our-research.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/our-research.html
@@ -9,7 +9,7 @@
         <h2 class="heading-1 ">{% trans "Our research is powered by real YouTube users." %}</h2>
         <p class="mb-5">
           {% blocktrans trimmed %}
-            Specifically: <span class="fw-bold">37,380 volunteers</span> across <span class="fw-bold">190 countries</span> installed Mozilla’s RegretsReporter browser extensions for Firefox and Chrome.
+            Specifically: <span class="tw-font-bold">37,380 volunteers</span> across <span class="tw-font-bold">190 countries</span> installed Mozilla’s RegretsReporter browser extensions for Firefox and Chrome.
           {% endblocktrans %}
         </p>
         <h2 class="heading-4 mb-4">{% trans "For this report, We gathered from" %}</h2>
@@ -17,37 +17,49 @@ <h2 class="heading-4 mb-4">{% trans "For this report, We gathered from" %}</h2>
     </div>
 
     {% with reports_count=3362 volunteers_count=1662 countries_count=91 %}
-    <div class="row align-items-center mb-5">
-      <div class="col-md-4 col-xs-12 stat">
-        <p class="stat__number" id="reports-count-up">{{ reports_count|intcomma }}</p>
-        <p class="stat__label">{% trans "Reports" %}</p>
-      </div>
-      <div class="col-md-4 col-xs-12 stat">
-        <p class="stat__number" id="volunteers-count-up">{{ volunteers_count|intcomma }}</p>
-        <p class="stat__label">{% trans "Volunteers" %}</p>
-      </div>
-      <div class="col-md-4 col-xs-12 stat">
-        <p class="stat__number" id="countries-count-up">{{ countries_count|intcomma }}</p>
-        <p class="stat__label">{% trans "Countries" %}</p>
+      <div class="row align-items-center mb-5">
+        <div class="col-md-4 col-xs-12 stat">
+          <p class="stat__number" id="reports-count-up" data-stat="{{ reports_count }}">{{ reports_count|intcomma }}</p>
+          <p class="stat__label">{% trans "Reports" %}</p>
+        </div>
+        <div class="col-md-4 col-xs-12 stat">
+          <p class="stat__number"
+             id="volunteers-count-up"
+             data-stat="{{ volunteers_count }}"
+             data-stat-delay="250">
+            {{ volunteers_count|intcomma }}
+          </p>
+          <p class="stat__label">{% trans "Volunteers" %}</p>
+        </div>
+        <div class="col-md-4 col-xs-12 stat">
+          <p class="stat__number"
+             id="countries-count-up"
+             data-stat="{{ countries_count }}"
+             data-stat-delay="500">
+            {{ countries_count|intcomma }}
+          </p>
+          <p class="stat__label">{% trans "Countries" %}</p>
+        </div>
       </div>
-    </div>
     {% endwith %}
 
     <div class="row justify-content-center mb-5">
       <div class="col-12 col-md-8 text-center">
-          <p>
-            {% blocktrans trimmed %}
-            Reports were submitted between <span class="fw-bold">July 2020 - May 2021</span>. Volunteers who downloaded the extension but did <span class="fw-bold">not</span> file a report were an important part of our study. Their data — for example, how often they use YouTube — was essential to our understanding of how frequent regrettable experiences are on YouTube and how this varies between countries.
-            {% endblocktrans %}
-          </p>
-          <p class="mb-5 pb-5">
-            {% blocktrans with research_link="https://foundation.mozilla.org/blog/28-reasons-why-youtube-must-change/" trimmed %}
-            After delving into the data with a team of research assistants from the University of Exeter, Mozilla came away with three major criticisms of YouTube recommendations: from a problematic algorithm to poor corporate oversight to geographic disparities. And our <a href="{{research_link}}">past research</a> shows that these problems can inflict lasting harm on people.
-            {% endblocktrans %}
-          </p>
+        <p>
+          {% blocktrans trimmed %}
+            Reports were submitted between <span class="tw-font-bold">July 2020 - May 2021</span>. Volunteers who downloaded the extension but did <span class="tw-font-bold">not</span> file a report were an important part of our study.
+            Their data — for example, how often they use YouTube — was essential to our understanding of how frequent regrettable experiences are on YouTube and how this varies between countries.
+          {% endblocktrans %}
+        </p>
+        <p class="mb-5 pb-5">
+          {% blocktrans with research_link="https://foundation.mozilla.org/blog/28-reasons-why-youtube-must-change/" trimmed %}
+            After delving into the data with a team of research assistants from the University of Exeter, Mozilla came away with three major criticisms of YouTube recommendations: from a problematic algorithm to poor corporate oversight to
+            geographic disparities. And our <a href="{{ research_link }}">past research</a> shows that these problems can inflict lasting harm on people.
+          {% endblocktrans %}
+        </p>
 
         <h2 class="mb-1">{% trans "Here’s what we found" %}</h2>
-        <p class="our-research__teaser mb-1 text-uppercase fst-italic">{% trans "(Click to read more)" %}</p>
+        <p class="our-research__teaser mb-1 text-uppercase tw-italic">{% trans "(Click to read more)" %}</p>
         <img class="mx-auto d-block" src="{% static "_images/youtube-regrets/regrets-reporter/arrow.svg" %}" alt="">
       </div>
     </div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/quote.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/quote.html
index 898b1461368..9868d5b73c9 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/quote.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/quote.html
@@ -4,7 +4,7 @@
     <div class="col-12 col-md-8">
       <img class="mb-3" src="{% static "_images/youtube-regrets/regrets-reporter/quotation-mark.svg" %}" alt="">
       <blockquote class="tw-quote">
-        <p class="quote__text fw-bold mb-3">
+        <p class="quote__text tw-font-bold mb-3">
           {% blocktrans trimmed %}
             We set <span class="quote__highlight">a high bar</span> for what videos we display prominently in our recommendations on the YouTube homepage or through the 'Up next' panel.
           {% endblocktrans %}
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/standout-stat.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/standout-stat.html
index 4b033379f8d..cea8c8944f7 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/standout-stat.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/standout-stat.html
@@ -6,7 +6,14 @@
   {% endif %}
 
   <div class="standout-stat__wrap text-center p-4">
-    <p class="standout-stat__number mb-2 {% if smaller %}standout-stat__number--smaller{% endif %}" {% if id %}id="{{ id }}"{% endif %}>{{ number|intcomma }}</p>
+    <p class="standout-stat__number mb-2 {% if smaller %}standout-stat__number--smaller{% endif %}"
+       {% if id %}id="{{ id }}"{% endif %}
+       data-stat="{{ number }}"
+       data-stat-suffix="{{ suffix }}"
+       data-stat-prefix="{{ prefix }}"
+    >
+      {{ number|intcomma }}
+    </p>
     <p class="standout-stat__label mb-0 text-uppercase">{{ label }}</p>
   </div>
 </div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/youtube_regrets_2021.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/youtube_regrets_2021.html
index 355c1288588..e5c59449771 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/youtube_regrets_2021.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2021/youtube_regrets_2021.html
@@ -2,7 +2,7 @@
 {% load wagtailcore_tags %}
 
 {% block body_id %}youtube-regrets-2021{% endblock %}
-{% block bodyclass %}youtube-regrets-2021{% endblock %}
+{% block bodyclass %}youtube-regrets-2021 youtube-regrets-shared{% endblock %}
 
 {% block extended_head %}
   <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/hero.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/hero.html
new file mode 100644
index 00000000000..8936e9adf15
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/hero.html
@@ -0,0 +1,26 @@
+{% load static i18n youtube_tags %}
+<div class="container tw-dark tw-py-[40px]">
+  <div class="tw-relative medium:tw-min-h-[600px] large:tw-min-h-[850px] tw-grid medium:tw-grid-cols-2">
+
+    {# images swapped on mobile and desktop #}
+    <div>
+      <img class="medium:tw-hidden" src="{% static "_images/youtube-regrets/regrets-reporter/report-findings-hero-mobile.png" %}" alt="">
+      <img class="tw-hidden medium:tw-block tw-absolute medium:tw-left-[-10%] medium:tw-top-1/2 medium:tw--translate-y-1/2 tw-w-full" src="{% static "_images/youtube-regrets/regrets-reporter/report-findings-hero-desktop.png" %}" alt="">
+    </div>
+
+    <div class="tw-relative tw-space-y-5 medium:tw-space-y-6 tw-flex tw-flex-col tw-justify-center tw-items-start">
+      <h1 class="tw-mb-0 tw-leading-none tw-font-bold tw-text-4xl medium:tw-text-[3.25rem]">{% trans "Does this button work?" %}</h1>
+      <p class="tw-body-large large:tw-text-2xl">
+        {% blocktrans trimmed %}
+          <span class="tw-font-bold">Investigating YouTube's ineffective user controls</span> powered by 22,722 volunteers, Mozilla scrutinized YouTube to determine how much control people actually have over the platform’s recommendation algorithm.
+          <span class="tw-italic">This is what we learned</span>.
+        {% endblocktrans %}
+      </p>
+      <a href="https://foundation.mozilla.org/research/library/user-controls/report/" class="btn btn-with-icon btn-red">
+        <svg aria-hidden="true" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.395h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2v-15ZM22 3.395h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7v-15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        {% trans "Read the Full Report" %}
+      </a>
+    </div>
+  </div>
+</div>
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/intro.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/intro.html
new file mode 100644
index 00000000000..496853bd7a4
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/intro.html
@@ -0,0 +1,48 @@
+{% load i18n static %}
+<section class="tw-relative tw-mt-6 medium:tw-mt-7">
+  <img class="tw-hidden large:tw-block tw-absolute tw-right-0 tw-bottom-0 large:tw-max-w-[200px] xlarge:tw-max-w-[250px] 2xl:tw-max-w-[300px] tw-z-0" src="{% static "_images/youtube-regrets/regrets-reporter/what-is-a-youtube-regret-desktop.png" %}" alt="">
+  <img class="tw-hidden large:tw-block tw-absolute tw-left-0 tw-bottom-0 large:tw-max-w-[200px] xlarge:tw-max-w-[250px] 2xl:tw-max-w-[300px] tw-z-0" src="{% static "_images/youtube-regrets/regrets-reporter/what-is-a-youtube-regret-desktop.png" %}" alt="">
+
+  <div class="container tw-dark rich-text tw-relative tw-z-10">
+    <div class="tw-space-y-4 tw-max-w-3xl tw-mx-auto">
+      <h2>{% trans 'People feel like they don’t have control over their YouTube recommendations...' %}</h2>
+      <p>
+        {% blocktrans with 2021_report_link='https://assets.mofoprod.net/network/documents/Mozilla_YouTube_Regrets_Report.pdf' trimmed %}
+          Our <a href="{{ 2021_report_link }}">2021 investigation into YouTube’s recommender system</a> uncovered a range of problems on the platform: an opaque algorithm, inconsistent oversight, and geographic inequalities. We also learned that people feel they don’t have control over their YouTube experience — particularly the videos that are recommended to them.
+        {% endblocktrans %}
+      </p>
+      <p>
+        {% blocktrans with tools_link="https://support.google.com/youtube/answer/6342839" trimmed %}
+          YouTube says that people can manage their video recommendations through <a href="{{ tools_link }}">the feedback tools the platform offers.</a> But do YouTube’s user controls actually work?
+        {% endblocktrans %}
+      </p>
+
+      {# This acts as a section separator #}
+      <h2 class="tw-py-6 medium:tw-pt-[60px] medium:tw-pb-[115px]">{% trans 'and our study shows that they really don’t.' %}</h2>
+
+      {# mobile only image #}
+      <img class="w-full large:tw-hidden" src="{% static "_images/youtube-regrets/regrets-reporter/what-is-a-youtube-regret-mobile.png" %}" alt="">
+
+      <p class="tw-h4-heading tw-font-sans medium:tw-text-[1.625rem] tw-font-light">
+        {% trans 'Our work is the first-ever experimental audit of YouTube by independent researchers, powered by Mozilla’s RegretsReporter.' %}
+      </p>
+      <p>
+        {% blocktrans with reporter_link='https://foundation.mozilla.org/campaigns/regrets-reporter/' trimmed %}
+          Using <a href="{{ reporter_link }}">RegretsReporter</a>, an open source tool Mozilla built to study YouTube’s recommendation algorithm, we were able to independently audit YouTube.
+        {% endblocktrans %}
+      </p>
+      <ul>
+        <li>
+          {% trans 'We combined qualitative and quantitative insights to paint a more complete picture of the effectiveness — or rather, ineffectiveness — of YouTube’s controls.' %}
+        </li>
+        <li>
+          {% trans 'We leveraged a massive-scale community to collect our data.' %}
+        </li>
+        <li>
+          {% trans 'We applied rigorous and powerful research methods including a randomized controlled experiment and a machine learning model.' %}
+        </li>
+      </ul>
+    </div>
+  </div>
+
+</section>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/stats.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/stats.html
new file mode 100644
index 00000000000..dab2ce6e9b1
--- /dev/null
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/fragments/stats.html
@@ -0,0 +1,20 @@
+{% load static i18n l10n humanize %}
+
+<div class="container tw-dark tw-my-5 medium:tw-my-7">
+   {% with participants=22722 videos_analyzed=567880195 people_surveyed=2758 %}
+    <div class="tw-flex tw-gap-6 tw-flex-col medium:tw-flex-wrap medium:tw-flex-row tw-justify-evenly tw-mb-5">
+      <div class="stat tw-text-white" >
+        <p class="stat__number" id="participants-count" data-stat="{{ participants }}">{{ participants|intcomma }}</p>
+        <p class="stat__label">{% trans "Participants" %}</p>
+      </div>
+      <div class="stat tw-text-white">
+        <p class="stat__number" id="videos-analyzed-count" data-stat="{{ videos_analyzed }}" data-stat-delay="250">{{ videos_analyzed|intcomma }}</p>
+        <p class="stat__label">{% trans "Videos Analyzed" %}</p>
+      </div>
+      <div class="stat tw-text-white">
+        <p class="stat__number" id="people-surveyed-count" data-stat="{{ people_surveyed }}" data-stat-delay="500">{{ people_surveyed|intcomma }}</p>
+        <p class="stat__label">{% trans "People Surveyed" %}</p>
+      </div>
+    </div>
+    {% endwith %}
+</div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html
index af48499de57..d81934ff319 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html
@@ -2,7 +2,7 @@
 {% load wagtailcore_tags %}
 
 {% block body_id %}youtube-regrets-2022{% endblock %}
-{% block bodyclass %}youtube-regrets-2022{% endblock %}
+{% block bodyclass %}youtube-regrets-2022 youtube-regrets-shared{% endblock %}
 
 {% block extended_head %}
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -16,6 +16,13 @@
 {% block content_wrapped %}
   <main>
     {% block main %}
+      <div class="transition-bg">
+        {% include './fragments/hero.html' %}
+
+        {% include './fragments/intro.html' %}
+
+        {% include './fragments/stats.html' %}
+      </div>
     {% endblock %}
   </main>
 {% endblock %}
diff --git a/source/js/foundation/pages/youtube-regrets/count-up.js b/source/js/foundation/pages/youtube-regrets/count-up.js
index eaa578cf8ec..a28e9fa0fd9 100644
--- a/source/js/foundation/pages/youtube-regrets/count-up.js
+++ b/source/js/foundation/pages/youtube-regrets/count-up.js
@@ -2,57 +2,59 @@ import { CountUp } from "countup.js";
 
 /**
  * Rendering and animating the numbers that "count up" using countup.js.
+ *
+ *  Attrs:
+ *  data-stat - {Required} Value of the stat
+ *  data-stat-delay - {Optional} delay number eg. 250
+ *  data-stat-prefix - {optional} Prefix on the stat eg. ~
+ *  data-stat-suffix - {optional} Suffix on the stat eg. % or K
  */
 
 export const initYoutubeRegretsResearchCountUp = () => {
   if ("IntersectionObserver" in window) {
     const localeSeparator = get_format("THOUSAND_SEPARATOR");
-    const localizedSuffix = gettext("K");
-    const reportCountUp = new CountUp("reports-count-up", 3362, {
-      separator: localeSeparator,
-    });
-    const volunteersCountUp = new CountUp("volunteers-count-up", 1662, {
-      separator: localeSeparator,
-    });
-    const countriesCountUp = new CountUp("countries-count-up", 91);
-    const reportedViewsPerDayCountUp = new CountUp(
-      "reported-views-per-day-count-up",
-      5794,
-      { prefix: "~", separator: localeSeparator }
-    );
-    const otherViewsPerDayCountUp = new CountUp(
-      "other-views-per-day-count-up",
-      3312,
-      { prefix: "~", separator: localeSeparator }
-    );
-    const views160DaysCountUp = new CountUp(
-      "views-160days-count-up",
-      160000000,
-      { separator: localeSeparator }
-    );
-    const viewsPerVideoCountUp = new CountUp("views-per-video-count-up", 760, {
-      prefix: "~",
-      suffix: localizedSuffix,
-    });
+    const stats = document.querySelectorAll("[data-stat]");
+    let state = {
+      stats: {},
+    };
+
+    // Creates and returns a CountUp object
+    const createCountUp = (element) => {
+      const statValue = element.dataset.stat;
+      const prefix = element.dataset.statPrefix;
+      const suffix = window.gettext(element.dataset.statSuffix); // localized
+      const delay = element.dataset.statDelay || null;
+
+      const countUpObj = new CountUp(element, statValue, {
+        separator: localeSeparator,
+        ...(prefix && { prefix }),
+        ...(suffix && { suffix }),
+      });
+
+      return {
+        countUpObj: countUpObj,
+        delay: delay,
+      };
+    };
 
     let observer = new IntersectionObserver(
       (entries, observer) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            //todo: count ups inside the accordion need further work to reliably run when the accordion is open and the stat is visible - currently working in chrome but not reliably cross-browser
-            views160DaysCountUp.start();
-            viewsPerVideoCountUp.start();
-            reportedViewsPerDayCountUp.start();
-            otherViewsPerDayCountUp.start();
-            reportCountUp.start();
-
-            setTimeout(() => {
-              volunteersCountUp.start();
-            }, 250);
+            /*  TODO: count ups inside the accordion on youtube_regrets_2021 need further work
+             *  to reliably run when the accordion is open and the stat is visible
+             *  currently working in chrome but not reliably cross-browser
+             *  Hint: listen to the openDrawer event on the accordion.
+             */
+            const { countUpObj, delay } = state.stats[entry.target.id];
 
-            setTimeout(() => {
-              countriesCountUp.start();
-            }, 500);
+            if (delay) {
+              setTimeout(() => {
+                countUpObj.start();
+              }, delay);
+            } else {
+              countUpObj.start();
+            }
 
             observer.unobserve(entry.target);
           }
@@ -61,7 +63,10 @@ export const initYoutubeRegretsResearchCountUp = () => {
       { rootMargin: "0px 0px -10% 0px" }
     );
 
-    document.querySelectorAll(".stat").forEach((stat) => {
+    stats.forEach((stat) => {
+      // Get all stats elements and create CountUp objects with el ID as the key,
+      // so we can access them in IntersectionObserver
+      state.stats[stat.id] = createCountUp(stat);
       observer.observe(stat);
     });
   }
diff --git a/source/js/main.js b/source/js/main.js
index 61c125a45b3..5d2a07548bf 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -136,12 +136,16 @@ let main = {
       initYouTubeRegretsCategoriesBarChart();
       initYouTubeRegretsRegretRatesChart();
       initYoutubeRegretsReadMoreCategories();
-      initYoutubeRegretsResearchCountUp();
       initYoutubeRegretsAccordions();
       initYouTubeRegretsRecommendationsPieChart();
       initYoutubeRegretsCarousel();
     }
 
+    // Shared YouTube Regrets Pages
+    if (document.querySelector(".youtube-regrets-shared")) {
+      initYoutubeRegretsResearchCountUp();
+    }
+
     // YouTube Regrets Reporter page
     if (document.querySelector("#view-youtube-regrets-reporter")) {
       new YouTubeRegretsTunnel();
diff --git a/source/sass/main.scss b/source/sass/main.scss
index 650efbcb43d..36708592ec5 100755
--- a/source/sass/main.scss
+++ b/source/sass/main.scss
@@ -70,6 +70,7 @@
 @import "./views/youtube-regrets-intro";
 @import "./views/youtube-regrets";
 @import "./views/youtube-regrets-reporter";
+@import "./views/youtube-regrets-shared";
 @import "./views/youtube-regrets-2021";
 @import "./views/dear-internet";
 @import "./views/publication";
diff --git a/source/sass/views/youtube-regrets-2021.scss b/source/sass/views/youtube-regrets-2021.scss
index 9a6d5823f6a..705cacc0c9d 100644
--- a/source/sass/views/youtube-regrets-2021.scss
+++ b/source/sass/views/youtube-regrets-2021.scss
@@ -3,14 +3,6 @@
   $font-nunito: "Nunito Sans", sans-serif;
   $font-zilla: "Zilla Slab", sans-serif;
 
-  .fw-bold {
-    font-weight: 700;
-  }
-
-  .fst-italic {
-    font-style: italic;
-  }
-
   & main p {
     font-weight: 300;
 
@@ -26,6 +18,11 @@
     /* stylelint-enable */
   }
 
+  .tw-body {
+    font-size: 18px;
+    line-height: calc(27 / 18);
+  }
+
   .hero-heading {
     font-size: 38px;
     line-height: 1;
@@ -38,59 +35,6 @@
     font-weight: 700;
   }
 
-  h1,
-  .heading-1 {
-    font-size: 42px;
-    line-height: calc(48 / 42);
-
-    @media screen and (min-width: $bp-md) {
-      font-size: 52px;
-      line-height: calc(48 / 52);
-    }
-    font-family: $font-changa;
-    font-weight: 700;
-  }
-
-  h2,
-  .heading-2 {
-    font-size: 30px;
-    line-height: calc(34 / 30);
-
-    @media screen and (min-width: $bp-md) {
-      font-size: 38px;
-      line-height: calc(34 / 38);
-    }
-    font-family: $font-changa;
-    font-weight: 600;
-  }
-
-  h3,
-  .heading-3 {
-    font-size: 36px;
-    line-height: 1;
-    font-weight: 300;
-  }
-
-  h4,
-  .heading-4 {
-    font-size: 22px;
-    line-height: 1;
-    font-family: $font-nunito;
-    text-transform: uppercase;
-    font-weight: 700;
-  }
-
-  h5,
-  .heading-5 {
-    font-size: 20px;
-    line-height: 1;
-    font-family: $font-changa;
-  }
-
-  .tw-body {
-    font-size: 18px;
-    line-height: calc(27 / 18);
-  }
 
   .tw-body-large {
     font-size: 26px;
@@ -168,18 +112,6 @@
     }
   }
 
-  .transition-bg {
-    background: linear-gradient(
-        180deg,
-        $youtube-regrets-dark-blue 26.46%,
-        $black 57.83%,
-        $black 100%
-      ),
-      linear-gradient(0deg, $black, $black);
-    border-radius: 0 0 30px 30px;
-    overflow: hidden;
-  }
-
   .hero {
     &__image {
       &--desktop {
@@ -311,27 +243,6 @@
     }
   }
 
-  .stat {
-    text-align: center;
-
-    &__number {
-      font-size: 52px;
-      line-height: calc(48 / 52);
-
-      @media screen and (min-width: $bp-md) {
-        font-size: 60px;
-        line-height: calc(48 / 60);
-      }
-
-      font-family: $font-changa;
-      font-weight: 700;
-    }
-
-    &__label {
-      text-transform: uppercase;
-    }
-  }
-
   .our-research-teaser {
     font-size: 14px;
     line-height: 1;
diff --git a/source/sass/views/youtube-regrets-shared.scss b/source/sass/views/youtube-regrets-shared.scss
new file mode 100644
index 00000000000..b7c6dd76264
--- /dev/null
+++ b/source/sass/views/youtube-regrets-shared.scss
@@ -0,0 +1,125 @@
+// These are the shared styles between 2021 and 2022
+
+.youtube-regrets-shared {
+  $font-changa: "Changa", sans-serif;
+  $font-nunito: "Nunito Sans", sans-serif;
+  $font-zilla: "Zilla Slab", sans-serif;
+
+  .transition-bg {
+    background: linear-gradient(
+        180deg,
+        $youtube-regrets-dark-blue 26.46%,
+        $black 57.83%,
+        $black 100%
+    ),
+    linear-gradient(0deg, $black, $black);
+    border-radius: 0 0 30px 30px;
+    overflow: hidden;
+  }
+
+  h1,
+  .heading-1 {
+    font-size: 42px;
+    line-height: calc(48 / 42);
+
+    @media screen and (min-width: $bp-md) {
+      font-size: 52px;
+      line-height: calc(48 / 52);
+    }
+    font-family: $font-changa;
+    font-weight: 700;
+  }
+
+  h2,
+  .heading-2 {
+    font-size: 30px;
+    line-height: calc(34 / 30);
+
+    @media screen and (min-width: $bp-md) {
+      font-size: 38px;
+      line-height: calc(34 / 38);
+    }
+    font-family: $font-changa;
+    font-weight: 600;
+  }
+
+  h3,
+  .heading-3 {
+    font-size: 36px;
+    line-height: 1;
+    font-weight: 300;
+  }
+
+  h4,
+  .heading-4 {
+    font-size: 22px;
+    line-height: 1;
+    font-family: $font-nunito;
+    text-transform: uppercase;
+    font-weight: 700;
+  }
+
+  h5,
+  .heading-5 {
+    font-size: 20px;
+    line-height: 1;
+    font-family: $font-changa;
+  }
+
+  .btn {
+    padding: 12px 20px;
+  }
+
+  .btn-with-icon {
+    display: inline-flex;
+    align-items: center;
+    padding: 12px 20px 12px 25px;
+
+    > svg {
+      margin-right: 10px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .btn-red {
+    background: $youtube-regrets-dark-red;
+    color: $white;
+
+    @include hover-focus-active {
+      background: $white;
+      color: $youtube-regrets-dark-red;
+    }
+  }
+
+  .btn-white {
+    background: $white;
+    color: $youtube-regrets-dark-red;
+
+    @include hover-focus-active {
+      background: $youtube-regrets-dark-red;
+      color: $white;
+    }
+  }
+
+  .stat {
+    text-align: center;
+
+    &__number {
+      font-size: 52px;
+      line-height: calc(48 / 52);
+
+      @media screen and (min-width: $bp-md) {
+        font-size: 60px;
+        line-height: calc(48 / 60);
+      }
+
+      font-family: $font-changa;
+      font-weight: 700;
+    }
+
+    &__label {
+      text-transform: uppercase;
+    }
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index f123508d112..d6296d9759b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,7 +32,7 @@ module.exports = {
         },
         ".popout": {
           "box-shadow": "10px 10px rgba(0,0,0)",
-          "border": "1px solid #000000",
+          border: "1px solid #000000",
         },
       };
       addUtilities(newUtilities);
@@ -87,6 +87,7 @@ module.exports = {
       medium: "768px",
       large: "992px",
       xlarge: "1200px",
+      "2xl": "1400px",
     },
     fontFamily: {
       sans: ["Nunito Sans", "Helvetica", "Arial", "sans-serif"],