diff --git a/src/styles/isomer-template/components/homepage/_announcements.scss b/src/styles/isomer-template/components/homepage/_announcements.scss
index c79517330..90117097d 100644
--- a/src/styles/isomer-template/components/homepage/_announcements.scss
+++ b/src/styles/isomer-template/components/homepage/_announcements.scss
@@ -9,33 +9,6 @@
   color: #f9f9f9;
 }
 
-.announcements-announcement-title {
-  font-size: 1.625rem;
-  font-weight: 700;
-  line-height: 2rem;
-}
-
-.announcements-announcement-subtitle {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.375rem;
-}
-
-.announcements-announcement-link {
-  color: var(--site-secondary-color);
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.5rem;
-  letter-spacing: 0.27px;
-  text-decoration-line: underline;
-  text-transform: capitalize;
-  text-underline-offset: 0.25rem;
-}
-
-.announcements-announcement-link:hover {
-  color: var(--site-secondary-color-hover);
-}
-
-a[target="_blank"].announcements-announcement-link::after {
+a[target="_blank"].link::after {
   content: unset;
 }
diff --git a/src/styles/isomer-template/theme/_colors.scss b/src/styles/isomer-template/theme/_colors.scss
index 59b281fe3..7618ab721 100644
--- a/src/styles/isomer-template/theme/_colors.scss
+++ b/src/styles/isomer-template/theme/_colors.scss
@@ -1,5 +1,5 @@
 $canvas-base: #ffffff;
-$content-base: #000000;
+$content-base: #344054;
 $utility-theme-color: var(--site-primary-color);
 $canvas-inverse: #000000;
 $content-inverse: #ffffff;
diff --git a/src/styles/isomer-template/theme/_layout.scss b/src/styles/isomer-template/theme/_layout.scss
index b33ef8217..ed0d82bf1 100644
--- a/src/styles/isomer-template/theme/_layout.scss
+++ b/src/styles/isomer-template/theme/_layout.scss
@@ -1,3 +1,7 @@
 .flex-end {
   justify-content: flex-end;
 }
+
+.w-100 {
+  width: 100%;
+}
diff --git a/src/templates/homepage/AnnouncementsSection.tsx b/src/templates/homepage/AnnouncementsSection.tsx
index 69bd6d87a..acc3fcff4 100644
--- a/src/templates/homepage/AnnouncementsSection.tsx
+++ b/src/templates/homepage/AnnouncementsSection.tsx
@@ -47,134 +47,132 @@ export const TemplateAnnouncementsSection = forwardRef<
               "is-flex",
             ])}
           >
-            <div className={editorStyles.row}>
-              <div className={getClassNames(editorStyles, ["col", "is-full"])}>
-                <>
-                  {subtitle && (
-                    <p
-                      className={getClassNames(editorStyles, [
-                        "eyebrow",
-                        "is-uppercase",
-                        "mb-2",
-                        "has-text-centered",
-                      ])}
-                    >
-                      {subtitle}
-                    </p>
-                  )}
-                  {title && (
-                    <h1
-                      className={getClassNames(editorStyles, [
-                        "has-text-secondary",
-                        "mb-12",
-                        "has-text-centered",
-                      ])}
-                    >
-                      <b>{title}</b>
-                    </h1>
-                  )}
+            {subtitle && (
+              <p
+                className={getClassNames(editorStyles, [
+                  "subtitle-2",
+                  "eyebrow",
+                  "is-uppercase",
+                  "mb-2",
+                  "has-text-centered",
+                ])}
+              >
+                {subtitle}
+              </p>
+            )}
+            {title && (
+              <h1
+                className={getClassNames(editorStyles, [
+                  "h1",
+                  "has-text-secondary",
+                  "mb-12",
+                  "has-text-centered",
+                ])}
+              >
+                {title}
+              </h1>
+            )}
 
-                  <hr
-                    className={getClassNames(editorStyles, [
-                      "mb-2",
-                      "mt-0",
-                      "announcements-divider",
-                    ])}
-                  />
+            <div
+              className={getClassNames(editorStyles, ["row", "w-100", "m-0"])}
+            >
+              <div
+                className={getClassNames(editorStyles, [
+                  "col",
+                  "is-full",
+                  "p-0",
+                ])}
+              >
+                <hr
+                  className={getClassNames(editorStyles, [
+                    "mb-2",
+                    "mt-0",
+                    "announcements-divider",
+                  ])}
+                />
 
-                  {announcementItems &&
-                    announcementItems.map((announcement, index) => {
-                      return (
-                        <div ref={announcementScrollRefs[index]}>
+                {announcementItems &&
+                  announcementItems.map((announcement, index) => {
+                    return (
+                      <div ref={announcementScrollRefs[index]}>
+                        <div
+                          className={getClassNames(editorStyles, [
+                            "row",
+                            "is-desktop",
+                            "px-0",
+                            "py-6",
+                            "py-lg-0",
+                            "m-0",
+                          ])}
+                        >
                           <div
                             className={getClassNames(editorStyles, [
-                              "row",
-                              "is-desktop",
-                              "px-0",
-                              "py-6",
-                              "py-lg-0",
-                              "m-0",
+                              "col",
+                              "is-4-desktop",
+                              "p-0",
+                              "p-lg-6",
+                              "mb-6",
+                              "mb-lg-0",
+                              "mr-lg-6",
                             ])}
                           >
-                            <div
+                            <h3
                               className={getClassNames(editorStyles, [
-                                "col",
-                                "is-4-desktop",
-                                "p-0",
-                                "p-lg-6",
-                                "mb-6",
-                                "mb-lg-0",
-                                "mr-lg-6",
+                                "h3",
+                                "mb-2",
+                                "mb-lg-4",
                               ])}
                             >
-                              <h3
+                              {announcement.title}
+                            </h3>
+                            <p className={editorStyles["subtitle-1"]}>
+                              {announcement.date}
+                            </p>
+                          </div>
+                          <div
+                            className={getClassNames(editorStyles, [
+                              "col",
+                              "p-0",
+                              "p-lg-6",
+                            ])}
+                          >
+                            <p className={editorStyles["body-1"]}>
+                              {announcement.announcement}
+                            </p>
+                            {announcement.link_text && announcement.link_url && (
+                              <div
                                 className={getClassNames(editorStyles, [
-                                  "announcements-announcement-title",
-                                  "mb-2",
-                                  "mb-lg-4",
+                                  "mt-6",
+                                  "mt-lg-4",
                                 ])}
                               >
-                                <b>{announcement.title}</b>
-                              </h3>
-                              <p
-                                className={
-                                  editorStyles[
-                                    "announcements-announcement-subtitle"
-                                  ]
-                                }
-                              >
-                                {announcement.date}
-                              </p>
-                            </div>
-                            <div
-                              className={getClassNames(editorStyles, [
-                                "col",
-                                "p-0",
-                                "p-lg-6",
-                              ])}
-                            >
-                              <p>{announcement.announcement}</p>
-                              {announcement.link_text && announcement.link_url && (
-                                <div
-                                  className={getClassNames(editorStyles, [
-                                    "mt-6",
-                                    "mt-lg-4",
-                                  ])}
-                                >
-                                  <div
-                                    className={
-                                      editorStyles[
-                                        "announcements-announcement-link"
-                                      ]
-                                    }
-                                  >
-                                    <span>{announcement.link_text}</span>
-                                  </div>
+                                <div className={editorStyles.link}>
+                                  <span>{announcement.link_text}</span>
                                 </div>
-                              )}
-                            </div>
+                              </div>
+                            )}
                           </div>
-                          {announcementItems &&
-                          announcementItems.length === index + 1 ? (
-                            <hr
-                              className={getClassNames(editorStyles, [
-                                "mt-2",
-                                "mb-0",
-                                "announcements-divider",
-                              ])}
-                            />
-                          ) : (
-                            <hr
-                              className={getClassNames(editorStyles, [
-                                "my-2",
-                                "announcements-divider",
-                              ])}
-                            />
-                          )}
                         </div>
-                      )
-                    })}
-                </>
+                        {announcementItems &&
+                        announcementItems.length === index + 1 ? (
+                          <hr
+                            className={getClassNames(editorStyles, [
+                              "mt-2",
+                              "mb-0",
+                              "announcements-divider",
+                            ])}
+                          />
+                        ) : (
+                          <hr
+                            className={getClassNames(editorStyles, [
+                              "my-2",
+                              "announcements-divider",
+                            ])}
+                          />
+                        )}
+                      </div>
+                    )
+                  })}
               </div>
             </div>
           </div>