diff --git a/assets/_base.scss b/assets/_base.scss
index d3dae4c5..8946c7ad 100644
--- a/assets/_base.scss
+++ b/assets/_base.scss
@@ -1,23 +1,25 @@
+@import 'sparc-design-system-components-2/src/assets/_variables.scss';
+
 h1 {
-  font-size: 2.875em;
-  font-weight: normal;
+  font-size:2rem;
+  font-weight:500;
   margin: 0;
-  line-height: 3.75rem;
+  line-height:2.75rem;
   padding: 0;
 }
 
 h2 {
-  font-size: 2.25em;
-  font-weight: normal;
-  line-height: 3rem;
-  margin: 0 0 1rem;
+  font-size:1.5rem;
+  font-weight:500;
+  line-height:2.25rem;
+  margin: 0 0 .5rem;
   padding: 0;
 }
 
 h3 {
-  font-size: 1.75em;
-  font-weight: normal;
-  line-height: 2.75rem;
+  font-size:1rem;
+  font-weight:500;
+  line-height:1.875rem;
   margin: 0 0 0.5rem;
   padding: 0;
 }
@@ -47,12 +49,12 @@ h6 {
 }
 
 a {
-  color: #8300bf;
+  color: $purple;
   text-decoration: underline;
 }
 
 p {
-  margin: 0 0 1rem;
+  margin: 0 0 .5rem;
 }
 
 hr {
diff --git a/components/DatasetDetails/DatasetFilesInfo.vue b/components/DatasetDetails/DatasetFilesInfo.vue
index 5012e420..ce4f732b 100644
--- a/components/DatasetDetails/DatasetFilesInfo.vue
+++ b/components/DatasetDetails/DatasetFilesInfo.vue
@@ -9,11 +9,11 @@
       SPARC consortium. During embargo, the
       public will be able to view basic
       metadata about these datasets as well
-      as their release date. The embargoed release 
-      date for this dataset is <b>{{ embargoedReleaseDate }}</b> 
+      as their release date. The embargoed release
+      date for this dataset is <b>{{ embargoedReleaseDate }}</b>
       and will become available to the public on that day.
       <a class="sign-in-link" @click="showLoginDialog = true">
-      Sign in</a> to the SPARC Portal to request
+        Sign in</a> to the SPARC Portal to request
       access to or view the status of an access request to embargoed data.
       <div>
         <sparc-tooltip content="Sign in to request access" placement="top-center">
@@ -26,10 +26,10 @@
       </div>
     </div>
     <div v-else-if="embargoed && requestPending">
-      Your access request is pending. The author has received your 
-      request and an email confirming or denying your request will 
-      be sent to you once the author has made a decision. The embargoed 
-      release date for this dataset is <b>{{ embargoedReleaseDate }}</b> 
+      Your access request is pending. The author has received your
+      request and an email confirming or denying your request will
+      be sent to you once the author has made a decision. The embargoed
+      release date for this dataset is <b>{{ embargoedReleaseDate }}</b>
       and will become available to the public on that day.
       <div>
         <sparc-tooltip content="Access request is pending" placement="top-center">
@@ -49,17 +49,13 @@
       SPARC consortium. During embargo, the
       public will be able to view basic
       metadata about these datasets as well
-      as their release date. The embargoed release 
-      date for this dataset is <b>{{ embargoedReleaseDate }}</b> 
-      and will become available to the public on that day. 
+      as their release date. The embargoed release
+      date for this dataset is <b>{{ embargoedReleaseDate }}</b>
+      and will become available to the public on that day.
       Click 'Request Access' to request permission from
       the author to view the embargoed data.
       <div>
-        <el-button
-          class="my-8"
-          :disabled="embargoAccess != null && agreementId != null"
-          @click="openAgreementPopup()"
-        >
+        <el-button class="my-8" :disabled="embargoAccess != null && agreementId != null" @click="openAgreementPopup()">
           Request Access
         </el-button>
       </div>
@@ -71,16 +67,18 @@
       <el-row class="bx--row">
         <el-col :md="12" class="bx--col-sm-4 bx--col-md-8 bx--col left-column">
           <div v-if="!isDatasetSizeLarge">
-            <div><span class="label4">Option 1 - Direct download: </span>Download a zip archive of all the files and metadata directly to your computer free of charge. Please note that the files will be compressed upon download.</div>
+            <div><span class="label4">Option 1 - Direct download: </span>Download a zip archive of all the files and
+              metadata directly to your computer free of charge. Please note that the files will be compressed upon
+              download.</div>
             <a :href="downloadUrl">
               <el-button @click="sendGtmEvent" class="my-16">Download Full Dataset</el-button>
             </a>
           </div>
           <div v-else>
-            <div><span class="label4">Option 1 - Direct download: </span>Direct downloads are only available free of charge for datasets that are 5GB or smaller. Datasets bigger than 5GB will need to be downloaded via AWS. </div>
-            <sparc-tooltip
-              placement="left-center"
-            >
+            <div><span class="label4">Option 1 - Direct download: </span>Direct downloads are only available free of
+              charge for datasets that are 5GB or smaller. Datasets bigger than 5GB will need to be downloaded via AWS.
+            </div>
+            <sparc-tooltip placement="left-center">
               <template #data>
                 <div>
                   Dataset size is over 5GB. To download, use <b>Option 2 - AWS download</b>
@@ -91,11 +89,7 @@
               </template>
             </sparc-tooltip>
           </div>
-          <a
-            v-show="sdsViewer"
-            :href="sdsViewer"
-            target="_blank"
-          >
+          <a v-show="sdsViewer" :href="sdsViewer" target="_blank">
             <el-button class="secondary" @click="onSdsButtonClick">
               Explore in SDS Viewer
             </el-button>
@@ -104,7 +98,8 @@
         <el-col :md="12" class="bx--col-sm-4 bx--col-md-8 bx--col aws-download-column">
           <div class="mb-8">
             <span class="label4">Option 2 - AWS download: </span>
-            Download or transfer the dataset to your AWS Account. The files and metadata are stored in an AWS S3 Requester Pays bucket. You can learn more about downloading data from AWS on our
+            Download or transfer the dataset to your AWS Account. The files and metadata are stored in an AWS S3
+            Requester Pays bucket. You can learn more about downloading data from AWS on our
             <a href="https://docs.sparc.science/docs/accessing-public-datasets" target="_blank">Help Page</a>.
           </div>
           <div class="aws-block mb-16 px-16 pb-16 pt-8">
@@ -130,7 +125,9 @@
                 Requesting Access to Download from AWS
               </div>
               <p>
-                In order to request access to download this dataset, we ask that you please submit a rehydration request. This button will take you to a form where you can submit your request.
+                In order to request access to download this dataset, we ask that you please submit a 
+                <a href="https://docs.sparc.science/docs/requesting-access-to-older-versions-of-a-public-dataset">rehydration
+                request</a>. This button will take you to a form where you can submit your request.
               </p>
               <el-button :style="'display: flex; margin: auto'" @click="showRehydrationModal = true">
                 Request Access
@@ -138,8 +135,10 @@
             </template>
           </div>
           <div>
-            * Requester pays means that any costs associated with downloading the data will be charged to your AWS account.
-            For transfer pricing information, visit the <a href="https://aws.amazon.com/s3/pricing/" target="blank">AWS Pricing documentation.</a>
+            * Requester pays means that any costs associated with downloading the data will be charged to your AWS
+            account.
+            For transfer pricing information, visit the <a href="https://aws.amazon.com/s3/pricing/" target="blank">AWS
+              Pricing documentation.</a>
           </div>
         </el-col>
       </el-row>
@@ -152,34 +151,18 @@
           <span class="label4">Dataset size: </span>{{ formatMetric(datasetInfo.size) }}
         </span>
         <span class="dataset-link inline">
-          <a
-            href="https://docs.sparc.science/docs/navigating-a-sparc-dataset"
-            class="dataset-link"
-            target="_blank"
-          >
+          <a href="https://docs.sparc.science/docs/navigating-a-sparc-dataset" class="dataset-link" target="_blank">
             How to navigate datasets
           </a>
         </span>
       </div>
-      <files-table :osparc-viewers="osparcViewers" :dataset-scicrunch="datasetScicrunch"/>
+      <files-table :osparc-viewers="osparcViewers" :dataset-scicrunch="datasetScicrunch" />
     </div>
-    <data-use-agreement-popup
-      :show-dialog="showAgreementPopup"
-      @agreement-loaded="agreementLoaded"
-      @dialog-closed="showAgreementPopup = false"
-      @agreement-signed="requestAccess"
-    />
-    <login-modal
-      :show-dialog="showLoginDialog"
-      @dialog-closed="showLoginDialog = false"
-    />
-    <rehydration-modal
-      v-model="showRehydrationModal"
-      append-to-body
-      @close-rehydration-dialog="showRehydrationModal = false"
-      :version="versionId"
-      :dataset-id="datasetId"
-    />
+    <data-use-agreement-popup :show-dialog="showAgreementPopup" @agreement-loaded="agreementLoaded"
+      @dialog-closed="showAgreementPopup = false" @agreement-signed="requestAccess" />
+    <login-modal :show-dialog="showLoginDialog" @dialog-closed="showLoginDialog = false" />
+    <rehydration-modal v-model="showRehydrationModal" append-to-body
+      @close-rehydration-dialog="showRehydrationModal = false" :version="versionId" :dataset-id="datasetId" />
   </div>
 </template>
 
diff --git a/components/RehydrationModal/RehydrationModal.vue b/components/RehydrationModal/RehydrationModal.vue
index 50fc12d3..f6a1d742 100644
--- a/components/RehydrationModal/RehydrationModal.vue
+++ b/components/RehydrationModal/RehydrationModal.vue
@@ -1,5 +1,6 @@
 <template>
-  <el-dialog class="px-16 pb-24" :style="{ maxWidth: '36rem', minWidth: '22rem' }" :visible="visible" @close="closeDialog">
+  <el-dialog class="px-16 pb-24" :style="{ maxWidth: '36rem', minWidth: '22rem' }" :visible="visible"
+    @close="closeDialog">
     <template #header>
       <div class="heading2">Request Access</div>
     </template>
@@ -10,13 +11,16 @@
           dataset.
         </div>
         <p v-if="authenticatedUserEmail">
-          Once you submit your request, the version of the dataset you've
+          Once you submit your
+          <a href="https://docs.sparc.science/docs/requesting-access-to-older-versions-of-a-public-dataset">rehydration
+          request</a>, the version of the dataset you've
           requested will be extracted into an S3 folder. An email notification
           will be sent to <b>{{ authenticatedUserEmail }}</b> within 24 hours of initiating the process. The rehydrated
           dataset will then be available for 14 days.
         </p>
         <p v-else>
-          Once you submit your request, the version of the dataset you've
+          Once you submit your <a href="https://docs.sparc.science/docs/requesting-access-to-older-versions-of-a-public-dataset">
+          rehydration request</a>, the version of the dataset you've
           requested will be extracted into an S3 folder. An email notification
           will be sent within 24 hours of initiating the process. The rehydrated
           dataset will then be available for 14 days.
diff --git a/pages/about/[aboutDetailsId].vue b/pages/about/[aboutDetailsId].vue
index be9ce2a5..9f886691 100644
--- a/pages/about/[aboutDetailsId].vue
+++ b/pages/about/[aboutDetailsId].vue
@@ -18,7 +18,7 @@
         <share-links />
       </div>
       <div v-if="aboutDetailsItem.fields.learnMore" class="subpage">
-        <h1 class="heading1 mb-16">Learn More</h1>
+        <div class="heading2 mb-16">Learn More</div>
         <template v-for="(item, index) in aboutDetailsItem.fields.learnMore" :key="item + index">
           <div>
             <learn-more-card
diff --git a/pages/about/consortia/[id].vue b/pages/about/consortia/[id].vue
index 5de196af..48fea177 100644
--- a/pages/about/consortia/[id].vue
+++ b/pages/about/consortia/[id].vue
@@ -12,16 +12,16 @@
           :button-link="ourResearchButtonLink" />
       </div>
       <div v-if="featuredDataset?.title" class="featured-dataset-container p-16 mt-32">
-        <div class="mb-16">Here is a dataset you might be interested in:</div>
+        <div class="heading2 mb-16">Here is a dataset you might be interested in:</div>
         <projects-and-datasets-card :title="featuredDataset.title" :description="featuredDataset.description"
           :banner="featuredDataset.banner" :link="featuredDatasetLink" button-text="View Dataset" />
       </div>
       <div v-if="highlights.length > 0" class="gallery-items-container p-32 mt-32">
-        <div class="heading1 mb-16">Highlights</div>
+        <div class="heading2 mb-16">Highlights</div>
         <gallery galleryItemType="highlights" :cardWidth="68" :items="highlights" />
       </div>
       <div v-if="learnMore.length > 0" class="subpage">
-        <h1 class="heading1 mb-16">Learn More</h1>
+        <div class="heading2 mb-16">Learn More</div>
         <template v-for="(item, index) in learnMore" :key="index">
           <div>
             <learn-more-card :about-details-item="item" />
@@ -205,7 +205,7 @@ export default {
 @import 'sparc-design-system-components-2/src/assets/_variables.scss';
 .featured-dataset-container {
   border: solid $lineColor1 1px;
-  background-color: $background;
+  background-color: white;
 }
 
 .row-item {
diff --git a/pages/about/index.vue b/pages/about/index.vue
index 2bf56919..0ef9f793 100644
--- a/pages/about/index.vue
+++ b/pages/about/index.vue
@@ -9,7 +9,7 @@
       <paper class="row mt-32" :text="parseMarkdown(sparcPortal)" button-text="View The Roadmap"
         button-link-external="https://docs.sparc.science/docs/sparc-portal-roadmap" />
       <div :v-if="whoWeSpport?.length > 0" class="who-we-support-container p-32 mt-32">
-        <div class="heading1 mb-16">Who We Support</div>
+        <div class="heading2">Who We Support</div>
         <div class="body1 mb-16">The SPARC Portal currently supports {{ whoWeSupport.length }} consortia. Visit the
           consortia page to find out more about them.</div>
         <div class="data-wrap">
@@ -37,7 +37,7 @@
       </div>
 
       <div class="gallery-items-container p-32 mt-32">
-        <div class="heading1 mb-16">Portal Metrics</div>
+        <div class="heading2 mb-16">Portal Metrics</div>
         <gallery galleryItemType="metrics" :items="metricsItems" />
         <nuxt-link to="/about/metrics">
           <el-button class="secondary mt-16">
@@ -47,7 +47,7 @@
       </div>
 
       <div class="gallery-items-container p-32 mt-32">
-        <div class="heading1 mb-16">Highlights</div>
+        <div class="heading2 mb-16">Highlights</div>
         <gallery galleryItemType="highlights" :cardWidth="68" :items="highlights" />
       </div>
 
diff --git a/pages/index.vue b/pages/index.vue
index c817fa7b..40413ce0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-data">
-    <page-hero class="py-24">
+    <page-hero>
       <h1 v-if="heroHeading">
         {{ heroHeading }}
       </h1>
diff --git a/pages/share-data/index.vue b/pages/share-data/index.vue
index fbff720d..28c170f4 100644
--- a/pages/share-data/index.vue
+++ b/pages/share-data/index.vue
@@ -15,7 +15,7 @@
         </div>
       </div>
       <div v-if="learnMore" class="subpage px-32 mb-0">
-        <div class="heading1 mb-16">Learn More</div>
+        <div class="heading2 mb-16">Learn More</div>
         <div v-for="(item, i) in learnMore" :key="item.sys.id">
           <learn-more-card :about-details-item="item" :parent-path="slug" />
           <hr v-if="i < learnMore.length - 1" />