diff --git a/package.json b/package.json
index a94223adda..60d0f50c1f 100644
--- a/package.json
+++ b/package.json
@@ -207,6 +207,7 @@
   },
   "private": true,
   "dependencies": {
+    "@department-of-veterans-affairs/css-library": "^0.9.8",
     "@department-of-veterans-affairs/vagov-platform": "^0.0.1",
     "aws-sdk": "^2.1441.0",
     "blob-polyfill": "^4.0.20200601",
@@ -272,4 +273,4 @@
     "**/ansi-regex": "^4.1.1",
     "**/@babel/core": "^7.23.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/site/assets/sass/style.scss b/src/site/assets/sass/style.scss
index 10c9cf3e33..0794c9be98 100644
--- a/src/site/assets/sass/style.scss
+++ b/src/site/assets/sass/style.scss
@@ -1,6 +1,8 @@
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins";
+
 // Add CSS and imports here.
 .feedback-button {
-  background-color: var(color-primary);
+  background-color: var(--vads-color-primary);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1;
@@ -263,6 +265,7 @@
     }
   }
 }
+
 // fix for sidenav btn
 .va-sidenav-btn-close {
   background-size: 0.625rem 0.625rem;
@@ -282,4 +285,185 @@
   }
 }
 
-// END: Styles for mobile app promo banner  
\ No newline at end of file
+// END: Styles for mobile app promo banner
+
+.bio-paragraph-image {
+  border-radius: 50%;
+  position: relative;
+  height: 110px;
+  width: 110px;
+}
+
+.va-facility-page {
+  .va-address-block {
+    margin-left: 0.625rem;
+    border-left: none;
+  }
+}
+
+.media-list-images {
+  @media (min-width: var(--small-screen)) {
+    max-width: 50%;
+  }
+}
+
+.va-c-position-top-right-corner {
+  right: 0;
+  top: 0;
+}
+
+.va-c-margin-top--auto {
+  margin-top: auto;
+}
+
+// The below styles are still used in home.html, which is the legacy home page
+// so technically these are "unused" but the template still exists so the styles will until it goes away
+.homepage-hub {
+  @include linear-gradient-background(var(--vads-color-primary), var(--vads-color-primary-darker));
+  padding-top: 1.5em;
+
+  @include media(var(--medium-screen)) {
+    padding-top: 3em;
+  }
+}
+
+.homepage-hub-container {
+  max-width: 62.5rem;
+
+  @include media(var(--medium-screen)) {
+    margin: auto;
+    width: 85%;
+  }
+
+  @include media(var(--large-screen)) {
+    margin: auto;
+    width: 64%;
+  }
+}
+
+.homepage-image-wrapper {
+  width: 100%;
+  height: 0;
+  padding-bottom: 65%;
+  /* You define this doing height / width * 100% */
+  position: relative;
+
+  > .lazy {
+    width: 100%;
+    position: absolute;
+  }
+}
+
+.homepage-news-story-title {
+  margin-top: 1em;
+  margin-bottom: 0;
+
+  @include media(var(--medium-screen)) {
+    margin-top: 1.5em;
+    margin-bottom: inherit;
+  }
+}
+
+.homepage-news-story-desc {
+  margin-top: 0.5em;
+  margin-bottom: 0;
+
+  @include media(var(--medium-screen)) {
+    margin-bottom: inherit;
+  }
+}
+
+.homepage-news-story {
+  margin-bottom: 2em;
+
+  @include media(var(--medium-screen)) {
+    margin-bottom: 0em;
+  }
+}
+
+.homepage-button {
+  width: 100%;
+  height: 85px;
+  padding: 0;
+  margin: 0 0 16px;
+  display: inline-block;
+  color: var(--vads-color-white);
+  background-color: var(--vads-color-primary);
+  text-decoration: none;
+  border-radius: 5px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  transition-property: background-color;
+
+  &:hover,
+  &:active {
+    background-color: var(--vads-color-primary-dark);
+    outline-offset: 2px;
+
+    .icon-wrapper {
+      background-color: var(--vads-color-primary-darker);
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &:visited {
+    color: var(--vads-color-white);
+    text-decoration: none;
+    outline-offset: 2px;
+  }
+
+  &.vcl {
+    background-color: var(--vads-color-secondary-dark);
+
+    &:hover,
+    &:active {
+      background-color: var(--vads-color-secondary-darkest);
+      outline-offset: 2px;
+
+      .icon-wrapper {
+        background-color: var(--vads-color-secondary-dark);
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  .icon-wrapper {
+    width: 55px;
+    height: 100%;
+    float: left;
+    background-color: var(--vads-color-primary-dark);
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
+    transition-property: background-color;
+
+    &.vcl {
+      content: "";
+      background: url(../img/VCL-icon-white.svg) no-repeat;
+      background-size: 2em auto;
+      background-position: center;
+      background-color: var(--vads-color-secondary-darkest);
+    }
+  }
+
+  .button-inner {
+    margin-left: 55px;
+    height: 100%;
+    padding: 1em;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+// end home.html styles
\ No newline at end of file
diff --git a/src/site/facilities/facility_social_links.drupal.liquid b/src/site/facilities/facility_social_links.drupal.liquid
index 3ed9d972e1..bbdbf6aec5 100644
--- a/src/site/facilities/facility_social_links.drupal.liquid
+++ b/src/site/facilities/facility_social_links.drupal.liquid
@@ -1,6 +1,6 @@
 <section data-template="facilities/facility_social_links" class="feature vads-u-background-color--gray-lightest vads-u-margin-top--4 small-screen:vads-u-margin-top--6 vads-u-padding-x--3 vads-u-padding-y--2p5">
     <h2 class="vads-u-margin-bottom--2">Get updates from {{ regionNickname }}</h2>
-    <div class="va-c-list-link-teasers usa-grid usa-grid-full">
+    <div class="usa-grid usa-grid-full">
 
         {% if fieldGovdeliveryIdEmerg != empty or if fieldGovdeliveryIdNews != empty %}
             <div class="usa-width-one-half">
diff --git a/src/site/facilities/vba_social_links.drupal.liquid b/src/site/facilities/vba_social_links.drupal.liquid
index cf218a7848..380332099e 100644
--- a/src/site/facilities/vba_social_links.drupal.liquid
+++ b/src/site/facilities/vba_social_links.drupal.liquid
@@ -1,6 +1,6 @@
 <section data-template="facilities/facility_social_links" class="feature vads-u-background-color--gray-lightest vads-u-margin-top--4 small-screen:vads-u-margin-top--6 vads-u-padding-x--3 vads-u-padding-y--2p5">
   <h2 class="vads-u-margin-bottom--2">Get updates from {{ regionNickname }}</h2>
-  <div class="va-c-list-link-teasers usa-grid usa-grid-full">
+  <div class="usa-grid usa-grid-full">
     {% if fieldGovdeliveryIdEmerg != empty or fieldNews != empty %}
       <div class="usa-width-one-half">
         {% if fieldNews != empty %}
diff --git a/src/site/layouts/event_listing.drupal.liquid b/src/site/layouts/event_listing.drupal.liquid
index a8ffc68d8d..3295f27d51 100644
--- a/src/site/layouts/event_listing.drupal.liquid
+++ b/src/site/layouts/event_listing.drupal.liquid
@@ -17,7 +17,7 @@
 				<h1 id="article-heading">{{ title }}</h1>
 				<div class="va-introtext">
 					{% if fieldIntroText %}
-						<p class="events-show" id="office-events-description">
+						<p id="office-events-description">
 							{{ fieldIntroText }}
 						</p>
 					{% endif %}
diff --git a/src/site/layouts/health_care_region_page.drupal.liquid b/src/site/layouts/health_care_region_page.drupal.liquid
index 3d8daa5819..a3be5f11d8 100644
--- a/src/site/layouts/health_care_region_page.drupal.liquid
+++ b/src/site/layouts/health_care_region_page.drupal.liquid
@@ -17,7 +17,7 @@
 
           <div
             class="duotone darken lighten medium-screen:vads-u-margin-bottom--0p5">
-            <img class="system-img" src="{{ image.derivative.url }}" aria-hidden="true" role="presentation" alt="" width="100%">
+            <img src="{{ image.derivative.url }}" aria-hidden="true" role="presentation" alt="" width="100%">
           </div>
 
           <div
diff --git a/src/site/layouts/health_services_listing.drupal.liquid b/src/site/layouts/health_services_listing.drupal.liquid
index 87895657e4..ed7ea9fe70 100644
--- a/src/site/layouts/health_services_listing.drupal.liquid
+++ b/src/site/layouts/health_services_listing.drupal.liquid
@@ -15,7 +15,7 @@
             {{title}}</h1>
           <div class="va-introtext">
             {% if fieldIntroText %}
-              <p class="events-show" id="office-events-description">
+              <p id="office-events-description">
                 {{ fieldIntroText }}
               </p>
             {% endif %}
@@ -31,7 +31,7 @@
           <va-on-this-page></va-on-this-page>
 
           {% if fieldFeaturedContentHealthser %}
-          <section class="featured-services" id="featured-services">
+          <section>
             <h2>In the spotlight</h2>
             <div class="vads-u-display--flex vads-u-flex-direction--column vads-u-justify-content--space-between medium-screen:vads-u-flex-direction--row vads-u-margin-bottom--4">
               {% for featuredService in fieldFeaturedContentHealthser %}
diff --git a/src/site/layouts/home.html b/src/site/layouts/home.html
index 2690af9fcb..fa87625fca 100644
--- a/src/site/layouts/home.html
+++ b/src/site/layouts/home.html
@@ -9,7 +9,7 @@
       <h1 class="heading-level-2 homepage-heading">{{ heading }}</h1>
 
       <!-- top row -->
-      <div class="hub-links-row">
+      <div>
         {% for card in cards %}
         <div class="hub-links-container" data-e2e="bucket">
           <h2 class="heading-level-3 vads-u-margin-top--0">{{
@@ -26,7 +26,7 @@ <h2 class="heading-level-3 vads-u-margin-top--0">{{
         </div>
         {% if card.end_row == true and forloop.last != true %}
       </div>
-      <div class="hub-links-row">
+      <div>
         {% endif %}
         {% endfor %}
       </div>
@@ -42,7 +42,8 @@ <h2 class="heading-level-3 vads-u-margin-top--0">{{
       <div class="usa-grid usa-grid-full homepage-benefits-row">
         {% for hub in hubs %}
         <div class="usa-width-one-third" data-e2e="hub">
-          <h3 class="heading-level-4"><a href="{{ hub.url }}" onclick="recordEvent({ event: 'nav-linkslist' });">{{hub.heading}}</a>
+          <h3 class="heading-level-4"><a href="{{ hub.url }}"
+              onclick="recordEvent({ event: 'nav-linkslist' });">{{hub.heading}}</a>
             </h4>
             <p class="vads-u-margin-top--0">{{hub.description}}</p>
         </div>
diff --git a/src/site/layouts/media_list_images.drupal.liquid b/src/site/layouts/media_list_images.drupal.liquid
index 84700f2f6d..47f2b798d8 100644
--- a/src/site/layouts/media_list_images.drupal.liquid
+++ b/src/site/layouts/media_list_images.drupal.liquid
@@ -59,19 +59,19 @@
                         </{{ image_title_tag }}>
                       </dt>
 
-                      <dd class="va-c-position--relative">
+                      <dd class="vads-u-position--relative">
                         <picture>
                           {% if mediaImage.entity.image.url == empty %}
                             <img
                               alt="{{ alt }}"
-                              class="alt-text-container vads-u-background-color--gray-lightest vads-u-display--block vads-u-border--1px vads-u-border-color--gray-light"
+                              class="vads-u-background-color--gray-lightest vads-u-display--block vads-u-border--1px vads-u-border-color--gray-light"
                               height="{{ mediaImage.entity.image.height }}"
                               width="{{ mediaImage.entity.image.width }}"
                             />
                           {% else %}
                             <a
                               aria-label="Open image in new tab"
-                              class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button va-c-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
+                              class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button vads-u-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
                               href="{{ mediaImage.entity.image.url }}"
                               target="_blank"
                             >
@@ -110,19 +110,19 @@
                               <{{image_title_tag}} class="{{image_title_classes }} medium-screen:vads-u-margin-top--0">{{ remainingImage.entity.entityLabel }}</{{image_title_tag}}>
                             </dt>
 
-                            <dd class="va-c-position--relative">
+                            <dd class="vads-u-position--relative">
                               <picture>
                                 {% if remainingImage.entity.image.url == empty %}
                                   <img
                                     alt="{{ alt }}"
-                                    class="alt-text-container vads-u-background-color--gray-lightest vads-u-display--block vads-u-border--1px vads-u-border-color--gray-light"
+                                    class="vads-u-background-color--gray-lightest vads-u-display--block vads-u-border--1px vads-u-border-color--gray-light"
                                     height="{{ remainingImage.entity.image.height }}"
                                     width="{{ remainingImage.entity.image.width }}"
                                   />
                                 {% else %}
                                   <a
                                     aria-label="Open image in new tab"
-                                    class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button va-c-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
+                                    class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button vads-u-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
                                     href="{{ remainingImage.entity.image.url }}"
                                     target="_blank"
                                   >
diff --git a/src/site/layouts/press_releases_listing.drupal.liquid b/src/site/layouts/press_releases_listing.drupal.liquid
index 80d2d8b460..db3c970ca8 100644
--- a/src/site/layouts/press_releases_listing.drupal.liquid
+++ b/src/site/layouts/press_releases_listing.drupal.liquid
@@ -66,7 +66,7 @@ larger space in the Fayette Plaza at 627 Pittsburgh Road, Suite 2, Uniontown,
           <div class="vads-l-grid-container--full">
             <div class="va-introtext">
               {% if fieldIntroText %}
-              <p class="events-show" id="office-events-description">
+              <p id="office-events-description">
                 {{ fieldIntroText }}
               </p>
               {% endif %}
diff --git a/src/site/layouts/story_listing.drupal.liquid b/src/site/layouts/story_listing.drupal.liquid
index faafc3f51a..ec9dfebbfb 100644
--- a/src/site/layouts/story_listing.drupal.liquid
+++ b/src/site/layouts/story_listing.drupal.liquid
@@ -16,7 +16,7 @@
             <div class="vads-l-grid-container--full">
               <div class="va-introtext">
                 {% if fieldIntroText %}
-                <p class="events-show" id="office-events-description">
+                <p id="office-events-description">
                   {{ fieldIntroText }}
                 </p>
                 {% endif %}
diff --git a/src/site/paragraphs/facilities/list_of_link_teasers_facility.drupal.liquid b/src/site/paragraphs/facilities/list_of_link_teasers_facility.drupal.liquid
index 4183377a1e..b79f325527 100644
--- a/src/site/paragraphs/facilities/list_of_link_teasers_facility.drupal.liquid
+++ b/src/site/paragraphs/facilities/list_of_link_teasers_facility.drupal.liquid
@@ -15,45 +15,43 @@
         {% endif %}
     </h2>
 
-    <div class="va-c-list-link-teasers">
-      <div class="usa-grid usa-grid-full">
-        {% assign linkTeasers = paragraph.fieldVaParagraphs %}
-        {% comment %}
-            Max number of links allowed = 8
-        {% endcomment %}
-        {% if linkTeasers.length > 8 %}
-          {% assign linkTeasers = linkTeasers | sliceArray: 0, 8 %}
-        {% endif %}
-        
-        {% comment %}
-            If there are less than or exactly 6 links, 3 items per column
-            If there are more than 6 links, 4 items per column
-        {% endcomment %}
-        {% if linkTeasers.length > 6 %}
-          {% assign linkWrapperStartIndex = 5 %}
-          {% assign linkWrapperEndIndex = 4 %}
-        {%  else %}
-          {% assign linkWrapperStartIndex = 4 %}
-          {% assign linkWrapperEndIndex = 3 %}
+    <div class="usa-grid usa-grid-full">
+      {% assign linkTeasers = paragraph.fieldVaParagraphs %}
+      {% comment %}
+          Max number of links allowed = 8
+      {% endcomment %}
+      {% if linkTeasers.length > 8 %}
+        {% assign linkTeasers = linkTeasers | sliceArray: 0, 8 %}
+      {% endif %}
+      
+      {% comment %}
+          If there are less than or exactly 6 links, 3 items per column
+          If there are more than 6 links, 4 items per column
+      {% endcomment %}
+      {% if linkTeasers.length > 6 %}
+        {% assign linkWrapperStartIndex = 5 %}
+        {% assign linkWrapperEndIndex = 4 %}
+      {%  else %}
+        {% assign linkWrapperStartIndex = 4 %}
+        {% assign linkWrapperEndIndex = 3 %}
+      {% endif %}
+      {% for linkTeaser in linkTeasers %}
+        {% assign link = linkTeaser.entity.fieldLink %}
+        {% if forloop.last == true %}
+          {% assign spacing = "" %}
+        {% else %}
+          {% assign spacing = " vads-u-margin-bottom--2" %}
         {% endif %}
-        {% for linkTeaser in linkTeasers %}
-          {% assign link = linkTeaser.entity.fieldLink %}
-          {% if forloop.last == true %}
-            {% assign spacing = "" %}
-          {% else %}
-            {% assign spacing = " vads-u-margin-bottom--2" %}
-          {% endif %}
 
-          <va-link
-            disable-analytics
-            onclick="recordEvent({ event: 'nav-featured-content-link-click', 'featured-content-header': '{{ paragraph.fieldTitle }}', 'featured-content-click-label': '{{ link.title }}' });" 
-            class="other-services-links vads-u-display--block{{ spacing }}"
-            href="{{ link.url.path }}"
-            text="{{ link.title }}"
-          >
-          </va-link>
-        {% endfor %}
-      </div>
+        <va-link
+          disable-analytics
+          onclick="recordEvent({ event: 'nav-featured-content-link-click', 'featured-content-header': '{{ paragraph.fieldTitle }}', 'featured-content-click-label': '{{ link.title }}' });" 
+          class="other-services-links vads-u-display--block{{ spacing }}"
+          href="{{ link.url.path }}"
+          text="{{ link.title }}"
+        >
+        </va-link>
+      {% endfor %}
     </div>
 
   </section>
diff --git a/src/site/paragraphs/media.drupal.liquid b/src/site/paragraphs/media.drupal.liquid
index a5bb0c79d1..757a01bc50 100644
--- a/src/site/paragraphs/media.drupal.liquid
+++ b/src/site/paragraphs/media.drupal.liquid
@@ -20,11 +20,11 @@
 {% endcomment %}
 {% if entity.fieldMedia.entity.image.url != empty %}
   <div data-template="paragraphs/media" data-entity-id="{{ entity.entityId }}" class="vads-u-display--block">
-    <div class="va-c-position--relative vads-u-display--inline-block vads-u-margin-y--1p5">
+    <div class="vads-u-position--relative vads-u-display--inline-block vads-u-margin-y--1p5">
       {% if entity.fieldAllowClicksOnThisImage %}
         <a
           aria-label="Open image in new tab"
-          class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button va-c-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
+          class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button vads-u-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
           href="{{ entity.fieldMedia.entity.image.url }}"
           target="_blank"
         >
diff --git a/src/site/paragraphs/staff_profile.drupal.liquid b/src/site/paragraphs/staff_profile.drupal.liquid
index e15f3ca347..7df6a58955 100644
--- a/src/site/paragraphs/staff_profile.drupal.liquid
+++ b/src/site/paragraphs/staff_profile.drupal.liquid
@@ -6,12 +6,12 @@
     <div
         class="vads-u-flex--auto medium-screen:vads-u-margin-right--3 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0">
       {% if bio.fieldMedia == emtpy %}
-        <div class="circular-profile-image bio-paragraph-image vads-u-position--relative vads-u-background-color--gray-lightest vads-u-display--block">
+        <div class="bio-paragraph-image vads-u-position--relative vads-u-background-color--gray-lightest vads-u-display--block">
             <div class="circular-profile-missing-icon"><va-icon size="6" icon="person"></va-icon></div>
         </div>
       {% else %}
         {% assign image = bio.fieldMedia.entity.image %}
-        <img class="circular-profile-image bio-paragraph-image" src="{{ image.derivative.url }}" alt="{{ image.alt }}"
+        <img class="bio-paragraph-image" src="{{ image.derivative.url }}" alt="{{ image.alt }}"
              title="{{ image.title }}">
       {% endif %}
     </div>
@@ -24,7 +24,7 @@
             vads-u-margin-bottom--0
             vads-u-font-size--md">
           {% if bio.fieldCompleteBiographyCreate %}
-          <a class="bioLink" href="{{ bio.entityUrl.path }}">{{ bio.fieldNameFirst }}
+          <a href="{{ bio.entityUrl.path }}">{{ bio.fieldNameFirst }}
             {{ bio.fieldLastName }} {{ bio.fieldSuffix }}</a>
           {% else %}
             {{ bio.fieldNameFirst }} {{ bio.fieldLastName }} {{ bio.fieldSuffix }}
diff --git a/src/site/paragraphs/wysiwyg.drupal.liquid b/src/site/paragraphs/wysiwyg.drupal.liquid
index 14d1a33c2d..0aa5903f16 100644
--- a/src/site/paragraphs/wysiwyg.drupal.liquid
+++ b/src/site/paragraphs/wysiwyg.drupal.liquid
@@ -9,7 +9,7 @@
   }
 {% endcomment %}
 
-<div data-template="paragraphs/wysiwyg" data-entity-id="{{ entity.entityId }}" class="processed-content">
+<div data-template="paragraphs/wysiwyg" data-entity-id="{{ entity.entityId }}">
   <div itemprop="text">
     {% if entity.fieldWysiwyg.processed %}
       {{ entity.fieldWysiwyg.processed | drupalToVaPath | phoneLinks }}