From 4f3a262837f06764fc165e791409ab443572b508 Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Wed, 27 Nov 2024 12:17:08 -0500
Subject: [PATCH 1/8] Increase tables to full size width

---
 .../AdminContentWrapper.tsx                   | 19 ++++++++++++++++---
 .../IndexClassificationPage.tsx               |  8 +++-----
 .../IndexCommunityPage/IndexCommunityPage.tsx |  9 ++++-----
 .../pages/Departments/IndexDepartmentPage.tsx |  9 ++++-----
 .../AllPoolCandidatesPage.tsx                 |  9 +++------
 .../IndexPoolCandidatePage.tsx                |  5 ++---
 .../Pools/IndexPoolPage/IndexPoolPage.tsx     |  9 +++------
 .../IndexSearchRequestPage.tsx                |  9 +++------
 .../SkillFamilies/IndexSkillFamilyPage.tsx    |  9 ++++-----
 apps/web/src/pages/Skills/IndexSkillPage.tsx  |  9 ++++-----
 .../Teams/IndexTeamPage/IndexTeamPage.tsx     |  8 ++++----
 .../IndexTrainingOpportunitiesPage.tsx        |  8 +++-----
 .../Users/IndexUserPage/IndexUserPage.tsx     |  8 ++++----
 13 files changed, 57 insertions(+), 62 deletions(-)

diff --git a/apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx b/apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx
index 14f601ae331..6d9d17d9135 100644
--- a/apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx
+++ b/apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx
@@ -1,12 +1,25 @@
 import { ReactNode } from "react";
 
 interface AdminContentWrapperProps {
+  table?: boolean;
   children: ReactNode;
 }
 
-const AdminContentWrapper = ({ children }: AdminContentWrapperProps) => (
-  <div data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
-    <div data-h2-padding="base(0, 0, x3, 0)">{children}</div>
+const AdminContentWrapper = ({ table, children }: AdminContentWrapperProps) => (
+  <div
+    {...(table
+      ? {
+          "data-h2-wrapper":
+            "base(center, full, x1) p-tablet(center, full, x2)",
+          "data-h2-padding": "base(x3, 0)",
+        }
+      : {
+          "data-h2-wrapper":
+            "base(center, large, x1) p-tablet(center, large, x2)",
+          "data-h2-padding": "base(0, 0, x3, 0)",
+        })}
+  >
+    {children}
   </div>
 );
 
diff --git a/apps/web/src/pages/Classifications/IndexClassificationPage.tsx b/apps/web/src/pages/Classifications/IndexClassificationPage.tsx
index c4a50bf632b..42ded864b36 100644
--- a/apps/web/src/pages/Classifications/IndexClassificationPage.tsx
+++ b/apps/web/src/pages/Classifications/IndexClassificationPage.tsx
@@ -8,6 +8,7 @@ import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
+import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 
 import ClassificationTableApi from "./components/ClassificationTable";
 
@@ -30,12 +31,9 @@ export const IndexClassificationPage = () => {
     <>
       <SEO title={formattedPageTitle} />
       <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
-      <div
-        data-h2-margin="base(x3 0)"
-        data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)"
-      >
+      <AdminContentWrapper table>
         <ClassificationTableApi title={formattedPageTitle} />
-      </div>
+      </AdminContentWrapper>
     </>
   );
 };
diff --git a/apps/web/src/pages/Communities/IndexCommunityPage/IndexCommunityPage.tsx b/apps/web/src/pages/Communities/IndexCommunityPage/IndexCommunityPage.tsx
index 1284f235051..74526d8a589 100644
--- a/apps/web/src/pages/Communities/IndexCommunityPage/IndexCommunityPage.tsx
+++ b/apps/web/src/pages/Communities/IndexCommunityPage/IndexCommunityPage.tsx
@@ -8,6 +8,7 @@ import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
 import Hero from "~/components/Hero";
+import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 
 import CommunityTableApi from "./components/CommunityTable/CommunityTable";
 
@@ -29,11 +30,9 @@ const IndexCommunityPage = () => {
     <>
       <SEO title={formattedPageTitle} />
       <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
-      <div data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
-        <div data-h2-padding="base(x3, 0)">
-          <CommunityTableApi title={formattedPageTitle} />
-        </div>
-      </div>
+      <AdminContentWrapper table>
+        <CommunityTableApi title={formattedPageTitle} />
+      </AdminContentWrapper>
     </>
   );
 };
diff --git a/apps/web/src/pages/Departments/IndexDepartmentPage.tsx b/apps/web/src/pages/Departments/IndexDepartmentPage.tsx
index ac29d426d89..157a62749a9 100644
--- a/apps/web/src/pages/Departments/IndexDepartmentPage.tsx
+++ b/apps/web/src/pages/Departments/IndexDepartmentPage.tsx
@@ -8,6 +8,7 @@ import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
 import Hero from "~/components/Hero";
+import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 
 import DepartmentTableApi from "./components/DepartmentTable";
 
@@ -29,11 +30,9 @@ export const DepartmentPage = () => {
     <>
       <SEO title={formattedPageTitle} />
       <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
-      <div data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
-        <div data-h2-padding="base(x3, 0)">
-          <DepartmentTableApi title={formattedPageTitle} />
-        </div>
-      </div>
+      <AdminContentWrapper table>
+        <DepartmentTableApi title={formattedPageTitle} />
+      </AdminContentWrapper>
     </>
   );
 };
diff --git a/apps/web/src/pages/PoolCandidates/AllPoolCandidatesPage/AllPoolCandidatesPage.tsx b/apps/web/src/pages/PoolCandidates/AllPoolCandidatesPage/AllPoolCandidatesPage.tsx
index 35b52bf33a5..736941d1351 100644
--- a/apps/web/src/pages/PoolCandidates/AllPoolCandidatesPage/AllPoolCandidatesPage.tsx
+++ b/apps/web/src/pages/PoolCandidates/AllPoolCandidatesPage/AllPoolCandidatesPage.tsx
@@ -10,10 +10,10 @@ import useRoutes from "~/hooks/useRoutes";
 import PoolCandidatesTable from "~/components/PoolCandidatesTable/PoolCandidatesTable";
 import SEO from "~/components/SEO/SEO";
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
+import Hero from "~/components/Hero";
 
 export const AllPoolCandidatesPage = () => {
   const intl = useIntl();
@@ -37,11 +37,8 @@ export const AllPoolCandidatesPage = () => {
   return (
     <>
       <SEO title={formattedPageTitle} />
-      <AdminHero
-        title={formattedPageTitle}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
-      />
-      <AdminContentWrapper>
+      <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
+      <AdminContentWrapper table>
         <PoolCandidatesTable
           title={formattedPageTitle}
           initialFilterInput={{
diff --git a/apps/web/src/pages/PoolCandidates/IndexPoolCandidatePage/IndexPoolCandidatePage.tsx b/apps/web/src/pages/PoolCandidates/IndexPoolCandidatePage/IndexPoolCandidatePage.tsx
index 0a51f52b610..308ba1a2ea4 100644
--- a/apps/web/src/pages/PoolCandidates/IndexPoolCandidatePage/IndexPoolCandidatePage.tsx
+++ b/apps/web/src/pages/PoolCandidates/IndexPoolCandidatePage/IndexPoolCandidatePage.tsx
@@ -12,7 +12,6 @@ import { ROLE_NAME } from "@gc-digital-talent/auth";
 
 import PoolCandidatesTable from "~/components/PoolCandidatesTable/PoolCandidatesTable";
 import SEO from "~/components/SEO/SEO";
-import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 import adminMessages from "~/messages/adminMessages";
 import useRequiredParams from "~/hooks/useRequiredParams";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
@@ -53,7 +52,7 @@ export const IndexPoolCandidatePage = () => {
   const currentPool = data?.pool ?? null;
 
   return (
-    <AdminContentWrapper>
+    <>
       <SEO
         title={intl.formatMessage({
           defaultMessage: "Talent placement",
@@ -81,7 +80,7 @@ export const IndexPoolCandidatePage = () => {
           title={pageTitle}
         />
       </Pending>
-    </AdminContentWrapper>
+    </>
   );
 };
 
diff --git a/apps/web/src/pages/Pools/IndexPoolPage/IndexPoolPage.tsx b/apps/web/src/pages/Pools/IndexPoolPage/IndexPoolPage.tsx
index c12d80dd554..f6459c582e6 100644
--- a/apps/web/src/pages/Pools/IndexPoolPage/IndexPoolPage.tsx
+++ b/apps/web/src/pages/Pools/IndexPoolPage/IndexPoolPage.tsx
@@ -5,10 +5,10 @@ import { ROLE_NAME } from "@gc-digital-talent/auth";
 import useRoutes from "~/hooks/useRoutes";
 import SEO from "~/components/SEO/SEO";
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
+import Hero from "~/components/Hero";
 
 import PoolTableApi from "./components/PoolTable";
 
@@ -30,11 +30,8 @@ export const PoolPage = () => {
   return (
     <>
       <SEO title={formattedPageTitle} />
-      <AdminHero
-        title={formattedPageTitle}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
-      />
-      <AdminContentWrapper>
+      <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
+      <AdminContentWrapper table>
         <PoolTableApi title={formattedPageTitle} />
       </AdminContentWrapper>
     </>
diff --git a/apps/web/src/pages/SearchRequests/IndexSearchRequestPage/IndexSearchRequestPage.tsx b/apps/web/src/pages/SearchRequests/IndexSearchRequestPage/IndexSearchRequestPage.tsx
index e46b913c7a5..08b5b1a6046 100644
--- a/apps/web/src/pages/SearchRequests/IndexSearchRequestPage/IndexSearchRequestPage.tsx
+++ b/apps/web/src/pages/SearchRequests/IndexSearchRequestPage/IndexSearchRequestPage.tsx
@@ -6,10 +6,10 @@ import SEO from "~/components/SEO/SEO";
 import SearchRequestTable from "~/components/SearchRequestTable/SearchRequestTable";
 import useRoutes from "~/hooks/useRoutes";
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
+import Hero from "~/components/Hero";
 
 export const IndexSearchRequestPage = () => {
   const intl = useIntl();
@@ -29,11 +29,8 @@ export const IndexSearchRequestPage = () => {
   return (
     <>
       <SEO title={formattedPageTitle} />
-      <AdminHero
-        title={formattedPageTitle}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
-      />
-      <AdminContentWrapper>
+      <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
+      <AdminContentWrapper table>
         <SearchRequestTable title={formattedPageTitle} />
       </AdminContentWrapper>
     </>
diff --git a/apps/web/src/pages/SkillFamilies/IndexSkillFamilyPage.tsx b/apps/web/src/pages/SkillFamilies/IndexSkillFamilyPage.tsx
index ff53d170cfd..bd96c917273 100644
--- a/apps/web/src/pages/SkillFamilies/IndexSkillFamilyPage.tsx
+++ b/apps/web/src/pages/SkillFamilies/IndexSkillFamilyPage.tsx
@@ -8,6 +8,7 @@ import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
 import Hero from "~/components/Hero";
+import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 
 import SkillFamilyTableApi from "./components/SkillFamilyTable";
 
@@ -30,11 +31,9 @@ const IndexSkillFamilyPage = () => {
     <>
       <SEO title={formattedPageTitle} />
       <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
-      <div data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
-        <div data-h2-padding="base(x3, 0)">
-          <SkillFamilyTableApi title={formattedPageTitle} />
-        </div>
-      </div>
+      <AdminContentWrapper table>
+        <SkillFamilyTableApi title={formattedPageTitle} />
+      </AdminContentWrapper>
     </>
   );
 };
diff --git a/apps/web/src/pages/Skills/IndexSkillPage.tsx b/apps/web/src/pages/Skills/IndexSkillPage.tsx
index 0e98aec2c8d..6d6703f9942 100644
--- a/apps/web/src/pages/Skills/IndexSkillPage.tsx
+++ b/apps/web/src/pages/Skills/IndexSkillPage.tsx
@@ -8,6 +8,7 @@ import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
 import Hero from "~/components/Hero";
+import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 
 import SkillTableApi from "./components/SkillTable";
 
@@ -30,11 +31,9 @@ export const IndexSkillPage = () => {
     <>
       <SEO title={formattedPageTitle} />
       <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
-      <div data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
-        <div data-h2-padding="base(x3, 0)">
-          <SkillTableApi title={formattedPageTitle} addButton />
-        </div>
-      </div>
+      <AdminContentWrapper table>
+        <SkillTableApi title={formattedPageTitle} addButton />
+      </AdminContentWrapper>
     </>
   );
 };
diff --git a/apps/web/src/pages/Teams/IndexTeamPage/IndexTeamPage.tsx b/apps/web/src/pages/Teams/IndexTeamPage/IndexTeamPage.tsx
index 4bbbc8aee10..30d78ce38fb 100644
--- a/apps/web/src/pages/Teams/IndexTeamPage/IndexTeamPage.tsx
+++ b/apps/web/src/pages/Teams/IndexTeamPage/IndexTeamPage.tsx
@@ -5,10 +5,10 @@ import { ROLE_NAME } from "@gc-digital-talent/auth";
 import useRoutes from "~/hooks/useRoutes";
 import SEO from "~/components/SEO/SEO";
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
+import Hero from "~/components/Hero";
 
 import TeamTableApi from "./components/TeamTable/TeamTable";
 
@@ -38,12 +38,12 @@ const IndexTeamPage = () => {
   return (
     <>
       <SEO title={formattedPageTitle} description={formattedSubTitle} />
-      <AdminHero
+      <Hero
         title={formattedPageTitle}
         subtitle={formattedSubTitle}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
+        crumbs={navigationCrumbs}
       />
-      <AdminContentWrapper>
+      <AdminContentWrapper table>
         <TeamTableApi title={formattedPageTitle} />
       </AdminContentWrapper>
     </>
diff --git a/apps/web/src/pages/TrainingOpportunities/IndexTrainingOpportunitiesPage.tsx b/apps/web/src/pages/TrainingOpportunities/IndexTrainingOpportunitiesPage.tsx
index dc933693d38..1da00e83473 100644
--- a/apps/web/src/pages/TrainingOpportunities/IndexTrainingOpportunitiesPage.tsx
+++ b/apps/web/src/pages/TrainingOpportunities/IndexTrainingOpportunitiesPage.tsx
@@ -8,6 +8,7 @@ import SEO from "~/components/SEO/SEO";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import pageTitles from "~/messages/pageTitles";
+import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 
 import TrainingOpportunitiesTable from "./components/TrainingOpportunitiesTable";
 
@@ -32,12 +33,9 @@ export const IndexTrainingOpportunitiesPage = () => {
     <>
       <SEO title={formattedPageTitle} />
       <Hero title={formattedPageTitle} crumbs={navigationCrumbs} />
-      <div
-        data-h2-margin="base(x3 0)"
-        data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)"
-      >
+      <AdminContentWrapper table>
         <TrainingOpportunitiesTable title={formattedPageTitle} />
-      </div>
+      </AdminContentWrapper>
     </>
   );
 };
diff --git a/apps/web/src/pages/Users/IndexUserPage/IndexUserPage.tsx b/apps/web/src/pages/Users/IndexUserPage/IndexUserPage.tsx
index fd57ad82d5c..3859f8b2e2b 100644
--- a/apps/web/src/pages/Users/IndexUserPage/IndexUserPage.tsx
+++ b/apps/web/src/pages/Users/IndexUserPage/IndexUserPage.tsx
@@ -5,10 +5,10 @@ import { ROLE_NAME } from "@gc-digital-talent/auth";
 import SEO from "~/components/SEO/SEO";
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 import useRoutes from "~/hooks/useRoutes";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
+import Hero from "~/components/Hero";
 
 import UserTable from "./components/UserTable";
 
@@ -38,12 +38,12 @@ export const IndexUserPage = () => {
   return (
     <>
       <SEO title={formattedPageTitle} description={formattedSubTitle} />
-      <AdminHero
+      <Hero
         title={formattedPageTitle}
         subtitle={formattedSubTitle}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
+        crumbs={navigationCrumbs}
       />
-      <AdminContentWrapper>
+      <AdminContentWrapper table>
         <UserTable title={formattedPageTitle} />
       </AdminContentWrapper>
     </>

From faee3f5b37212f650e167dc6365ccadfec23ca44 Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Fri, 29 Nov 2024 09:51:52 -0500
Subject: [PATCH 2/8] Update screening and evaluation table width

---
 .../ScreeningAndEvaluationPage/ScreeningAndEvaluationPage.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/pages/Pools/ScreeningAndEvaluationPage/ScreeningAndEvaluationPage.tsx b/apps/web/src/pages/Pools/ScreeningAndEvaluationPage/ScreeningAndEvaluationPage.tsx
index ddce3dc20e1..4f2730fd466 100644
--- a/apps/web/src/pages/Pools/ScreeningAndEvaluationPage/ScreeningAndEvaluationPage.tsx
+++ b/apps/web/src/pages/Pools/ScreeningAndEvaluationPage/ScreeningAndEvaluationPage.tsx
@@ -161,7 +161,7 @@ const ScreeningAndEvaluationPage = () => {
   }, [lastPage]);
 
   return (
-    <AdminContentWrapper>
+    <AdminContentWrapper table data-h2-margin-top="base(-x3)">
       <Pending fetching={fetching} error={error}>
         {data?.pool ? (
           <AssessmentStepTracker

From 615be6a7f271871bee432c2821916c42a622db49 Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Mon, 2 Dec 2024 10:28:59 -0500
Subject: [PATCH 3/8] Update heros and remaining tables

---
 .../AdminContentWrapper.tsx                   |   2 +-
 apps/web/src/components/Hero/Hero.tsx         |  24 ++-
 .../IndexPoolCandidatePage.tsx                |  41 ++---
 .../ViewPoolCandidatePage.tsx                 |  18 +--
 .../ProfileDetails/ProfileDetails.tsx         |   2 +-
 .../AssessmentPlanBuilderPage.tsx             |  88 +++++------
 .../Pools/CreatePoolPage/CreatePoolPage.tsx   |   6 +-
 .../ManageAccessPage/ManageAccessPage.tsx     |  31 ++--
 apps/web/src/pages/Pools/PoolLayout.tsx       |  34 ++---
 .../pages/Pools/ViewPoolPage/ViewPoolPage.tsx |   7 +-
 .../components/ViewSearchRequest.tsx          |   8 +-
 .../Teams/CreateTeamPage/CreateTeamPage.tsx   |   6 +-
 apps/web/src/pages/Teams/TeamLayout.tsx       |  14 +-
 .../pages/Teams/ViewTeamPage/ViewTeamPage.tsx |   2 +-
 .../Users/UpdateUserPage/UpdateUserPage.tsx   | 140 +++++++++---------
 .../UserInformationPage.tsx                   |   2 +-
 apps/web/src/pages/Users/UserLayout.tsx       |  14 +-
 17 files changed, 232 insertions(+), 207 deletions(-)

diff --git a/apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx b/apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx
index 6d9d17d9135..309751710a6 100644
--- a/apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx
+++ b/apps/web/src/components/AdminContentWrapper/AdminContentWrapper.tsx
@@ -16,7 +16,7 @@ const AdminContentWrapper = ({ table, children }: AdminContentWrapperProps) => (
       : {
           "data-h2-wrapper":
             "base(center, large, x1) p-tablet(center, large, x2)",
-          "data-h2-padding": "base(0, 0, x3, 0)",
+          "data-h2-padding": "base(x3, 0)",
         })}
   >
     {children}
diff --git a/apps/web/src/components/Hero/Hero.tsx b/apps/web/src/components/Hero/Hero.tsx
index c7a03597027..15795e01e8a 100644
--- a/apps/web/src/components/Hero/Hero.tsx
+++ b/apps/web/src/components/Hero/Hero.tsx
@@ -30,7 +30,7 @@ const paddingMap = {
 
 interface NavTab {
   url: string;
-  label: string;
+  label: ReactNode;
 }
 
 interface HeroSharedProps {
@@ -41,6 +41,8 @@ interface HeroSharedProps {
   buttonLinks?: ButtonLinkType[];
   children?: ReactNode;
   centered?: boolean;
+  status?: ReactNode;
+  additionalContent?: ReactNode;
 }
 
 type HeroWithNavTabsProps = HeroSharedProps & {
@@ -63,6 +65,8 @@ const Hero = (props: HeroWithNavTabsProps | HeroWithOverlapProps) => {
     buttonLinks,
     children,
     centered = false,
+    status,
+    additionalContent,
   } = props;
   // conditional props
   const navTabs = "navTabs" in props ? props.navTabs : null;
@@ -217,6 +221,24 @@ const Hero = (props: HeroWithNavTabsProps | HeroWithOverlapProps) => {
             </div>
           ) : null}
         </div>
+        <div
+          data-h2-position="base(absolute)"
+          data-h2-top="base(x1) p-tablet(x1.5)"
+          data-h2-right="base(x1) p-tablet(x5)"
+        >
+          {status}
+        </div>
+        {additionalContent ? (
+          <>
+            <div
+              data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)"
+              data-h2-position="base(relative)"
+              data-h2-z-index="base(3)"
+            >
+              {additionalContent}
+            </div>
+          </>
+        ) : null}
       </div>
       {children ? (
         <>
diff --git a/apps/web/src/pages/PoolCandidates/IndexPoolCandidatePage/IndexPoolCandidatePage.tsx b/apps/web/src/pages/PoolCandidates/IndexPoolCandidatePage/IndexPoolCandidatePage.tsx
index 308ba1a2ea4..8985b05e735 100644
--- a/apps/web/src/pages/PoolCandidates/IndexPoolCandidatePage/IndexPoolCandidatePage.tsx
+++ b/apps/web/src/pages/PoolCandidates/IndexPoolCandidatePage/IndexPoolCandidatePage.tsx
@@ -15,6 +15,7 @@ import SEO from "~/components/SEO/SEO";
 import adminMessages from "~/messages/adminMessages";
 import useRequiredParams from "~/hooks/useRequiredParams";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
+import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 
 interface RouteParams extends Record<string, string> {
   poolId: Scalars["ID"]["output"];
@@ -61,25 +62,27 @@ export const IndexPoolCandidatePage = () => {
         })}
         description={formattedSubTitle}
       />
-      <Pending fetching={fetching} error={error}>
-        <p data-h2-margin="base(x1, 0)">{formattedSubTitle}</p>
-        <PoolCandidatesTable
-          hidePoolFilter
-          initialFilterInput={{
-            applicantFilter: { pools: [{ id: poolId || "" }] },
-            suspendedStatus: CandidateSuspendedFilter.Active,
-            expiryStatus: CandidateExpiryFilter.Active,
-          }}
-          currentPool={
-            currentPool
-              ? {
-                  id: currentPool.id,
-                }
-              : null
-          }
-          title={pageTitle}
-        />
-      </Pending>
+      <AdminContentWrapper table>
+        <Pending fetching={fetching} error={error}>
+          <p data-h2-margin="base(x1, 0)">{formattedSubTitle}</p>
+          <PoolCandidatesTable
+            hidePoolFilter
+            initialFilterInput={{
+              applicantFilter: { pools: [{ id: poolId || "" }] },
+              suspendedStatus: CandidateSuspendedFilter.Active,
+              expiryStatus: CandidateExpiryFilter.Active,
+            }}
+            currentPool={
+              currentPool
+                ? {
+                    id: currentPool.id,
+                  }
+                : null
+            }
+            title={pageTitle}
+          />
+        </Pending>
+      </AdminContentWrapper>
     </>
   );
 };
diff --git a/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/ViewPoolCandidatePage.tsx b/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/ViewPoolCandidatePage.tsx
index 5a605eb441c..53681e59a27 100644
--- a/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/ViewPoolCandidatePage.tsx
+++ b/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/ViewPoolCandidatePage.tsx
@@ -38,6 +38,7 @@ import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import ErrorBoundary from "~/components/ErrorBoundary/ErrorBoundary";
 import pageTitles from "~/messages/pageTitles";
 import { JobPlacementOptionsFragmentType } from "~/components/PoolCandidatesTable/JobPlacementDialog";
+import Hero from "~/components/Hero";
 
 import CareerTimelineSection from "./components/CareerTimelineSection/CareerTimelineSection";
 import ApplicationInformation from "./components/ApplicationInformation/ApplicationInformation";
@@ -188,10 +189,10 @@ export const ViewPoolCandidate = ({
 
   return (
     <>
-      <AdminHero
+      <Hero
         title={candidateName}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
-        contentRight={
+        crumbs={navigationCrumbs}
+        status={
           <Chips>
             <Chip
               key="status"
@@ -223,13 +224,12 @@ export const ViewPoolCandidate = ({
             ) : null}
           </Chips>
         }
-      >
-        <ProfileDetails userQuery={poolCandidate.user} />
-      </AdminHero>
-      <AdminContentWrapper>
+        additionalContent={<ProfileDetails userQuery={poolCandidate.user} />}
+      />
+      <AdminContentWrapper table>
         <Sidebar.Wrapper>
           <Sidebar.Sidebar>
-            <Heading size="h3">
+            <Heading size="h3" data-h2-margin-top="base(0)">
               {intl.formatMessage({
                 defaultMessage: "More actions",
                 id: "QaMkP7",
@@ -291,7 +291,7 @@ export const ViewPoolCandidate = ({
               <Heading
                 Icon={ExclamationTriangleIcon}
                 color="quaternary"
-                data-h2-margin="base(x.75, 0, x1, 0)"
+                data-h2-margin="base(0, 0, x1, 0)"
               >
                 {intl.formatMessage(screeningAndAssessmentTitle)}
               </Heading>
diff --git a/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/components/ProfileDetails/ProfileDetails.tsx b/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/components/ProfileDetails/ProfileDetails.tsx
index cda1fed8e99..1dcf3b29b67 100644
--- a/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/components/ProfileDetails/ProfileDetails.tsx
+++ b/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/components/ProfileDetails/ProfileDetails.tsx
@@ -59,7 +59,7 @@ const ProfileDetails = ({ userQuery }: ProfileDetailsProps) => {
       data-h2-gap="base(0, x.5)"
       data-h2-color="base(black)"
       data-h2-background="base(linear-gradient(92deg, rgba(175, 103, 255, 0.10) 1.42%, rgba(0, 195, 183, 0.10) 98.58%))"
-      data-h2-margin="base(x1, 0)"
+      data-h2-margin-top="base(x1)"
     >
       <p>
         <span data-h2-font-size="base(caption)">
diff --git a/apps/web/src/pages/Pools/AssessmentPlanBuilderPage/AssessmentPlanBuilderPage.tsx b/apps/web/src/pages/Pools/AssessmentPlanBuilderPage/AssessmentPlanBuilderPage.tsx
index d664d67bff5..70ae13ac3db 100644
--- a/apps/web/src/pages/Pools/AssessmentPlanBuilderPage/AssessmentPlanBuilderPage.tsx
+++ b/apps/web/src/pages/Pools/AssessmentPlanBuilderPage/AssessmentPlanBuilderPage.tsx
@@ -97,43 +97,37 @@ export const AssessmentPlanBuilder = ({
   });
 
   return (
-    <>
-      <SEO
-        title={intl.formatMessage(pageTitle)}
-        description={intl.formatMessage(pageSubtitle)}
-      />
-      <TableOfContents.Wrapper>
-        <TableOfContents.Navigation>
-          <TableOfContents.List>
-            <TableOfContents.ListItem>
-              <TableOfContents.AnchorLink
-                id={PAGE_SECTION_ID.ORGANIZE_ASSESSMENT_APPROACH}
-              >
-                {intl.formatMessage(organizeSectionTitle)}
-              </TableOfContents.AnchorLink>
-            </TableOfContents.ListItem>
-            <TableOfContents.ListItem>
-              <TableOfContents.AnchorLink id={PAGE_SECTION_ID.SKILL_SUMMARY}>
-                {intl.formatMessage(skillSummarySectionTitle)}
-              </TableOfContents.AnchorLink>
-            </TableOfContents.ListItem>
-          </TableOfContents.List>
-          <Link mode="solid" color="secondary" href={routes.poolView(pool.id)}>
-            {intl.formatMessage({
-              defaultMessage: "Back to process details",
-              id: "nPPUMW",
-              description: "Link text to go back to the process details page",
-            })}
-          </Link>
-        </TableOfContents.Navigation>
+    <TableOfContents.Wrapper>
+      <TableOfContents.Navigation>
+        <TableOfContents.List>
+          <TableOfContents.ListItem>
+            <TableOfContents.AnchorLink
+              id={PAGE_SECTION_ID.ORGANIZE_ASSESSMENT_APPROACH}
+            >
+              {intl.formatMessage(organizeSectionTitle)}
+            </TableOfContents.AnchorLink>
+          </TableOfContents.ListItem>
+          <TableOfContents.ListItem>
+            <TableOfContents.AnchorLink id={PAGE_SECTION_ID.SKILL_SUMMARY}>
+              {intl.formatMessage(skillSummarySectionTitle)}
+            </TableOfContents.AnchorLink>
+          </TableOfContents.ListItem>
+        </TableOfContents.List>
+        <Link mode="solid" color="secondary" href={routes.poolView(pool.id)}>
+          {intl.formatMessage({
+            defaultMessage: "Back to process details",
+            id: "nPPUMW",
+            description: "Link text to go back to the process details page",
+          })}
+        </Link>
+      </TableOfContents.Navigation>
 
-        <TableOfContents.Content>
-          <OrganizeSection poolQuery={pool} pageIsLoading={pageIsLoading} />
-          <SkillSummarySection poolQuery={pool} />
-          <Separator space="lg" />
-        </TableOfContents.Content>
-      </TableOfContents.Wrapper>
-    </>
+      <TableOfContents.Content>
+        <OrganizeSection poolQuery={pool} pageIsLoading={pageIsLoading} />
+        <SkillSummarySection poolQuery={pool} />
+        <Separator space="lg" />
+      </TableOfContents.Content>
+    </TableOfContents.Wrapper>
   );
 };
 
@@ -239,14 +233,20 @@ export const AssessmentPlanBuilderPage = () => {
   };
 
   return (
-    <AdminContentWrapper>
-      <Pending
-        fetching={queryFetching || !authorization.isLoaded}
-        error={queryError}
-      >
-        {content()}
-      </Pending>
-    </AdminContentWrapper>
+    <>
+      <SEO
+        title={intl.formatMessage(pageTitle)}
+        description={intl.formatMessage(pageSubtitle)}
+      />
+      <AdminContentWrapper>
+        <Pending
+          fetching={queryFetching || !authorization.isLoaded}
+          error={queryError}
+        >
+          {content()}
+        </Pending>
+      </AdminContentWrapper>
+    </>
   );
 };
 
diff --git a/apps/web/src/pages/Pools/CreatePoolPage/CreatePoolPage.tsx b/apps/web/src/pages/Pools/CreatePoolPage/CreatePoolPage.tsx
index 3bb37a86a4e..e823076b6b7 100644
--- a/apps/web/src/pages/Pools/CreatePoolPage/CreatePoolPage.tsx
+++ b/apps/web/src/pages/Pools/CreatePoolPage/CreatePoolPage.tsx
@@ -26,12 +26,12 @@ import {
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 import SEO from "~/components/SEO/SEO";
 import useRoutes from "~/hooks/useRoutes";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
 import messages from "~/messages/adminMessages";
 import permissionConstants from "~/constants/permissionConstants";
+import Hero from "~/components/Hero";
 
 const CreatePoolClassification_Fragment = graphql(/* GraphQL */ `
   fragment CreatePoolClassification on Classification {
@@ -395,10 +395,10 @@ const CreatePoolPage = () => {
   return (
     <>
       <SEO title={formattedPageTitle} description={formattedSubTitle} />
-      <AdminHero
+      <Hero
         title={formattedPageTitle}
         subtitle={formattedSubTitle}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
+        crumbs={navigationCrumbs}
       />
       <AdminContentWrapper>
         <Pending fetching={fetching} error={error}>
diff --git a/apps/web/src/pages/Pools/ManageAccessPage/ManageAccessPage.tsx b/apps/web/src/pages/Pools/ManageAccessPage/ManageAccessPage.tsx
index e296d38e23e..27f93fa7a38 100644
--- a/apps/web/src/pages/Pools/ManageAccessPage/ManageAccessPage.tsx
+++ b/apps/web/src/pages/Pools/ManageAccessPage/ManageAccessPage.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { useIntl } from "react-intl";
+import { defineMessage, useIntl } from "react-intl";
 import { useQuery } from "urql";
 
 import { Pending, ThrowNotFound } from "@gc-digital-talent/ui";
@@ -28,6 +28,12 @@ import { ManageAccessPageFragment, PoolTeamMember } from "./components/types";
 import { ManageAccessPage_PoolFragment } from "./components/operations";
 import AddPoolMembershipDialog from "./components/AddPoolMembershipDialog";
 
+const pageTitle = defineMessage({
+  defaultMessage: "Process members",
+  id: "wYohzF",
+  description: "Page title for the manage process members page",
+});
+
 const columnHelper = createColumnHelper<PoolTeamMember>();
 
 interface ManageAccessPoolProps {
@@ -50,12 +56,6 @@ const ManageAccessPool = ({ poolQuery }: ManageAccessPoolProps) => {
     [pool.roleAssignments],
   );
 
-  const pageTitle = intl.formatMessage({
-    defaultMessage: "Process members",
-    id: "wYohzF",
-    description: "Page title for the manage process members page",
-  });
-
   let columns = [
     columnHelper.accessor(
       (member) => getFullNameLabel(member.firstName, member.lastName, intl),
@@ -105,9 +105,8 @@ const ManageAccessPool = ({ poolQuery }: ManageAccessPoolProps) => {
 
   return (
     <>
-      <SEO title={pageTitle} />
       <Table
-        caption={pageTitle}
+        caption={intl.formatMessage(pageTitle)}
         data={data}
         columns={columns}
         sort={{
@@ -159,6 +158,7 @@ interface RouteParams extends Record<string, string> {
 }
 
 const ManageAccessPoolPage = () => {
+  const intl = useIntl();
   const { poolId } = useRequiredParams<RouteParams>("poolId");
   const [{ data, fetching, error }] = useQuery({
     query: ManageAccessPage_PoolQuery,
@@ -168,11 +168,14 @@ const ManageAccessPoolPage = () => {
   const pool = data?.pool;
 
   return (
-    <AdminContentWrapper>
-      <Pending fetching={fetching} error={error}>
-        {pool ? <ManageAccessPool poolQuery={pool} /> : <ThrowNotFound />}
-      </Pending>
-    </AdminContentWrapper>
+    <>
+      <SEO title={intl.formatMessage(pageTitle)} />
+      <AdminContentWrapper table>
+        <Pending fetching={fetching} error={error}>
+          {pool ? <ManageAccessPool poolQuery={pool} /> : <ThrowNotFound />}
+        </Pending>
+      </AdminContentWrapper>
+    </>
   );
 };
 
diff --git a/apps/web/src/pages/Pools/PoolLayout.tsx b/apps/web/src/pages/Pools/PoolLayout.tsx
index 0d02d8048bd..6808546e709 100644
--- a/apps/web/src/pages/Pools/PoolLayout.tsx
+++ b/apps/web/src/pages/Pools/PoolLayout.tsx
@@ -29,10 +29,10 @@ import {
 } from "~/utils/poolUtils";
 import { PageNavKeys } from "~/types/pool";
 import useRequiredParams from "~/hooks/useRequiredParams";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import { PageNavInfo } from "~/types/pages";
 import { getAssessmentPlanStatus } from "~/validators/pool/assessmentPlan";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
+import Hero from "~/components/Hero";
 
 export const PoolLayout_Fragment = graphql(/* GraphQL */ `
   fragment PoolLayout on Pool {
@@ -153,28 +153,22 @@ const PoolHeader = ({ poolQuery }: PoolHeaderProps) => {
   return (
     <>
       <SEO title={currentPage?.title} description={subTitle} />
-      <AdminHero
+      <Hero
         title={heroTitleValue}
         subtitle={heroSubtitleValue}
-        nav={
-          // Pages with crumbs are sub-pages and don't show up as tabs
-          currentPage?.crumbs
-            ? {
-                mode: "crumbs",
-                items: currentPage.crumbs,
-              }
-            : {
-                mode: "subNav",
-                items: Array.from(pages.values())
-                  .filter((page) => !page.crumbs)
-                  .map((page) => ({
-                    label: page.link.label ?? page.title,
-                    url: page.link.url,
-                  })),
-              }
+        crumbs={currentPage?.crumbs ?? undefined}
+        navTabs={
+          !currentPage?.crumbs
+            ? Array.from(pages.values())
+                .filter((page) => !page.crumbs)
+                .map((page) => ({
+                  label: page.link.label ?? page.title,
+                  url: page.link.url,
+                }))
+            : undefined
         }
-        contentRight={
-          (currentPage?.link.url.includes("edit") ??
+        status={
+          (currentPage?.link.url.includes("edit") ||
             currentPage?.link.url.includes("plan")) &&
           badge.label && (
             <Chip color={badge.color} data-h2-flex-shrink="base(0)">
diff --git a/apps/web/src/pages/Pools/ViewPoolPage/ViewPoolPage.tsx b/apps/web/src/pages/Pools/ViewPoolPage/ViewPoolPage.tsx
index 25977ae615c..f3faa8e5b34 100644
--- a/apps/web/src/pages/Pools/ViewPoolPage/ViewPoolPage.tsx
+++ b/apps/web/src/pages/Pools/ViewPoolPage/ViewPoolPage.tsx
@@ -203,7 +203,12 @@ export const ViewPool = ({
     <>
       <SEO title={pageTitle} description={pageSubtitle} />
       <div data-h2-wrapper="base(left, large, 0)">
-        <Heading level="h2" Icon={UserGroupIcon} color="primary">
+        <Heading
+          level="h2"
+          Icon={UserGroupIcon}
+          color="primary"
+          data-h2-margin-top="base(0)"
+        >
           {pageTitle}
         </Heading>
         <p data-h2-margin="base(x1 0)">
diff --git a/apps/web/src/pages/SearchRequests/ViewSearchRequestPage/components/ViewSearchRequest.tsx b/apps/web/src/pages/SearchRequests/ViewSearchRequestPage/components/ViewSearchRequest.tsx
index 5e6eb0996dc..645a85a3256 100644
--- a/apps/web/src/pages/SearchRequests/ViewSearchRequestPage/components/ViewSearchRequest.tsx
+++ b/apps/web/src/pages/SearchRequests/ViewSearchRequestPage/components/ViewSearchRequest.tsx
@@ -26,11 +26,11 @@ import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWr
 import useRoutes from "~/hooks/useRoutes";
 import adminMessages from "~/messages/adminMessages";
 import FilterBlock from "~/components/SearchRequestFilters/FilterBlock";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import SEO from "~/components/SEO/SEO";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import pageTitles from "~/messages/pageTitles";
 import talentRequestMessages from "~/messages/talentRequestMessages";
+import Hero from "~/components/Hero";
 
 import SingleSearchRequestTableApi from "./SearchRequestCandidatesTable";
 import UpdateSearchRequest from "./UpdateSearchRequest";
@@ -55,7 +55,7 @@ const ManagerInfo = ({
 
   return (
     <>
-      <Heading level="h2" size="h4">
+      <Heading level="h2" size="h4" data-h2-margin-top="base(0)">
         {intl.formatMessage({
           defaultMessage: "Manager Information",
           id: "UEsexn",
@@ -476,10 +476,10 @@ export const ViewSearchRequest = ({
   return (
     <>
       <SEO title={formattedPageTitle} description={subTitle} />
-      <AdminHero
+      <Hero
         title={formattedPageTitle}
         subtitle={subTitle}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
+        crumbs={navigationCrumbs}
       />
       <AdminContentWrapper>
         {wasEmpty && (
diff --git a/apps/web/src/pages/Teams/CreateTeamPage/CreateTeamPage.tsx b/apps/web/src/pages/Teams/CreateTeamPage/CreateTeamPage.tsx
index 8aed0b83b3f..b06c4383fb6 100644
--- a/apps/web/src/pages/Teams/CreateTeamPage/CreateTeamPage.tsx
+++ b/apps/web/src/pages/Teams/CreateTeamPage/CreateTeamPage.tsx
@@ -9,10 +9,10 @@ import { ROLE_NAME } from "@gc-digital-talent/auth";
 import SEO from "~/components/SEO/SEO";
 import useRoutes from "~/hooks/useRoutes";
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import pageTitles from "~/messages/pageTitles";
+import Hero from "~/components/Hero";
 
 import CreateTeamForm from "./components/CreateTeamForm";
 
@@ -87,10 +87,10 @@ const CreateTeamPage = () => {
   return (
     <>
       <SEO title={formattedPageTitle} description={formattedSubTitle} />
-      <AdminHero
+      <Hero
         title={formattedPageTitle}
         subtitle={formattedSubTitle}
-        nav={{ mode: "crumbs", items: navigationCrumbs }}
+        crumbs={navigationCrumbs}
       />
       <AdminContentWrapper>
         <Pending fetching={fetching} error={error}>
diff --git a/apps/web/src/pages/Teams/TeamLayout.tsx b/apps/web/src/pages/Teams/TeamLayout.tsx
index 559074c3ab1..1f016800033 100644
--- a/apps/web/src/pages/Teams/TeamLayout.tsx
+++ b/apps/web/src/pages/Teams/TeamLayout.tsx
@@ -16,6 +16,7 @@ import useRoutes from "~/hooks/useRoutes";
 import useCurrentPage from "~/hooks/useCurrentPage";
 import useRequiredParams from "~/hooks/useRequiredParams";
 import { PageNavInfo } from "~/types/pages";
+import Hero from "~/components/Hero";
 
 import RequireAuth from "../../components/RequireAuth/RequireAuth";
 
@@ -98,16 +99,13 @@ const TeamHeader = ({ teamQuery }: TeamHeaderProps) => {
   return (
     <>
       <SEO title={currentPage?.title} description={teamName} />
-      <AdminHero
+      <Hero
         title={currentPage?.title}
         subtitle={teamName}
-        nav={{
-          mode: "subNav",
-          items: Array.from(pages.values()).map((page) => ({
-            label: page.link.label ?? page.title,
-            url: page.link.url,
-          })),
-        }}
+        navTabs={Array.from(pages.values()).map((page) => ({
+          label: page.link.label ?? page.title,
+          url: page.link.url,
+        }))}
       />
     </>
   );
diff --git a/apps/web/src/pages/Teams/ViewTeamPage/ViewTeamPage.tsx b/apps/web/src/pages/Teams/ViewTeamPage/ViewTeamPage.tsx
index 3ccf52b28ea..6538ff91a9d 100644
--- a/apps/web/src/pages/Teams/ViewTeamPage/ViewTeamPage.tsx
+++ b/apps/web/src/pages/Teams/ViewTeamPage/ViewTeamPage.tsx
@@ -35,7 +35,7 @@ export const ViewTeamContent = ({ teamQuery }: ViewTeamContentProps) => {
     <>
       <SEO title={pageTitle} />
       <ViewTeam teamQuery={teamQuery} />
-      <Separator data-h2-margin="base(x2, 0, 0, 0)" />
+      <Separator data-h2-margin="base(x1.75, 0, 0, 0)" />
     </>
   );
 };
diff --git a/apps/web/src/pages/Users/UpdateUserPage/UpdateUserPage.tsx b/apps/web/src/pages/Users/UpdateUserPage/UpdateUserPage.tsx
index 32ec4360039..f14f7af6279 100644
--- a/apps/web/src/pages/Users/UpdateUserPage/UpdateUserPage.tsx
+++ b/apps/web/src/pages/Users/UpdateUserPage/UpdateUserPage.tsx
@@ -410,7 +410,7 @@ const UpdateUserPage = () => {
   const availableRoles = unpackMaybes(data?.roles);
 
   return (
-    <AdminContentWrapper>
+    <>
       <SEO
         title={intl.formatMessage({
           defaultMessage: "Update user",
@@ -418,74 +418,76 @@ const UpdateUserPage = () => {
           description: "Page title for the user edit page",
         })}
       />
-      <Pending fetching={fetching} error={error}>
-        {data?.user ? (
-          <>
-            <UpdateUserForm
-              initialUser={data.user}
-              handleUpdateUser={handleUpdateUser}
-            />
-            <UpdateUserSubForm
-              authInfo={data.user?.authInfo}
-              onUpdateSub={handleUpdateUserSub}
-            />
-            <Heading level="h2" size="h3" data-h2-font-weight="base(700)">
-              {intl.formatMessage(adminMessages.rolesAndPermissions)}
-            </Heading>
-            <UserRoleTable
-              user={data.user}
-              authInfo={data.user?.authInfo}
-              availableRoles={availableRoles}
-              onUpdateUserRoles={handleUpdateUserRoles}
-            />
-            <TeamRoleTable
-              user={data.user}
-              authInfo={data.user?.authInfo}
-              availableRoles={availableRoles}
-              onUpdateUserRoles={handleUpdateUserRoles}
-            />
-            <CommunityRoleTable
-              user={data.user}
-              authInfo={data.user?.authInfo}
-              availableRoles={availableRoles}
-              onUpdateUserRoles={handleUpdateUserRoles}
-            />
-            <ProcessRoleTable
-              user={data.user}
-              authInfo={data.user?.authInfo}
-              availableRoles={availableRoles}
-              onUpdateUserRoles={handleUpdateUserRoles}
-            />
-            <Heading level="h2" size="h3" data-h2-font-weight="base(700)">
-              {intl.formatMessage({
-                defaultMessage: "Advanced tools",
-                id: "KoKXUw",
-                description: "Heading for making major changes to a user",
-              })}
-            </Heading>
-            <DeleteUserSection
-              user={data.user}
-              onDeleteUser={handleDeleteUser}
-            />
-          </>
-        ) : (
-          <NotFound
-            headingMessage={intl.formatMessage(commonMessages.notFound)}
-          >
-            <p>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "User {userId} not found.",
-                  id: "0SoKjt",
-                  description: "Message displayed for user not found.",
-                },
-                { userId },
-              )}
-            </p>
-          </NotFound>
-        )}
-      </Pending>
-    </AdminContentWrapper>
+      <AdminContentWrapper>
+        <Pending fetching={fetching} error={error}>
+          {data?.user ? (
+            <>
+              <UpdateUserForm
+                initialUser={data.user}
+                handleUpdateUser={handleUpdateUser}
+              />
+              <UpdateUserSubForm
+                authInfo={data.user?.authInfo}
+                onUpdateSub={handleUpdateUserSub}
+              />
+              <Heading level="h2" size="h3" data-h2-font-weight="base(700)">
+                {intl.formatMessage(adminMessages.rolesAndPermissions)}
+              </Heading>
+              <UserRoleTable
+                user={data.user}
+                authInfo={data.user?.authInfo}
+                availableRoles={availableRoles}
+                onUpdateUserRoles={handleUpdateUserRoles}
+              />
+              <TeamRoleTable
+                user={data.user}
+                authInfo={data.user?.authInfo}
+                availableRoles={availableRoles}
+                onUpdateUserRoles={handleUpdateUserRoles}
+              />
+              <CommunityRoleTable
+                user={data.user}
+                authInfo={data.user?.authInfo}
+                availableRoles={availableRoles}
+                onUpdateUserRoles={handleUpdateUserRoles}
+              />
+              <ProcessRoleTable
+                user={data.user}
+                authInfo={data.user?.authInfo}
+                availableRoles={availableRoles}
+                onUpdateUserRoles={handleUpdateUserRoles}
+              />
+              <Heading level="h2" size="h3" data-h2-font-weight="base(700)">
+                {intl.formatMessage({
+                  defaultMessage: "Advanced tools",
+                  id: "KoKXUw",
+                  description: "Heading for making major changes to a user",
+                })}
+              </Heading>
+              <DeleteUserSection
+                user={data.user}
+                onDeleteUser={handleDeleteUser}
+              />
+            </>
+          ) : (
+            <NotFound
+              headingMessage={intl.formatMessage(commonMessages.notFound)}
+            >
+              <p>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "User {userId} not found.",
+                    id: "0SoKjt",
+                    description: "Message displayed for user not found.",
+                  },
+                  { userId },
+                )}
+              </p>
+            </NotFound>
+          )}
+        </Pending>
+      </AdminContentWrapper>
+    </>
   );
 };
 
diff --git a/apps/web/src/pages/Users/UserInformationPage/UserInformationPage.tsx b/apps/web/src/pages/Users/UserInformationPage/UserInformationPage.tsx
index e89c80fd923..da319858236 100644
--- a/apps/web/src/pages/Users/UserInformationPage/UserInformationPage.tsx
+++ b/apps/web/src/pages/Users/UserInformationPage/UserInformationPage.tsx
@@ -427,7 +427,7 @@ export const UserInformation = ({
   ];
 
   return (
-    <TableOfContents.Wrapper data-h2-margin-top="base(x3)">
+    <TableOfContents.Wrapper>
       <TableOfContents.Navigation>
         <TableOfContents.List>
           {items.map((item) => (
diff --git a/apps/web/src/pages/Users/UserLayout.tsx b/apps/web/src/pages/Users/UserLayout.tsx
index 4eb5cdb62d5..4212bc02a72 100644
--- a/apps/web/src/pages/Users/UserLayout.tsx
+++ b/apps/web/src/pages/Users/UserLayout.tsx
@@ -17,6 +17,7 @@ import { getFullNameHtml } from "~/utils/nameUtils";
 import { PageNavInfo } from "~/types/pages";
 import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
+import Hero from "~/components/Hero";
 
 type PageNavKeys = "profile" | "info" | "edit";
 
@@ -85,16 +86,13 @@ const UserHeader = ({ user }: UserHeaderProps) => {
   return (
     <>
       <SEO title={currentPage?.title} />
-      <AdminHero
+      <Hero
         title={currentPage?.title}
         subtitle={userName}
-        nav={{
-          mode: "subNav",
-          items: Array.from(pages.values()).map((page) => ({
-            label: page.link.label ?? page.title,
-            url: page.link.url,
-          })),
-        }}
+        navTabs={Array.from(pages.values()).map((page) => ({
+          label: page.link.label ?? page.title,
+          url: page.link.url,
+        }))}
       />
       {userDeleted ? (
         <Alert.Root

From 422120ca149595e67a9727b9766a67a21bda0293 Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Tue, 3 Dec 2024 09:41:21 -0500
Subject: [PATCH 4/8] Update admin dashboard page

---
 apps/web/src/pages/AdminDashboardPage/AdminDashboardPage.tsx | 4 ++--
 apps/web/src/pages/Users/UserLayout.tsx                      | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/AdminDashboardPage/AdminDashboardPage.tsx b/apps/web/src/pages/AdminDashboardPage/AdminDashboardPage.tsx
index fd45e40ca1f..98989b7f339 100644
--- a/apps/web/src/pages/AdminDashboardPage/AdminDashboardPage.tsx
+++ b/apps/web/src/pages/AdminDashboardPage/AdminDashboardPage.tsx
@@ -39,10 +39,10 @@ import SEO from "~/components/SEO/SEO";
 import { getFullNameHtml } from "~/utils/nameUtils";
 import useRoutes from "~/hooks/useRoutes";
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import adminMessages from "~/messages/adminMessages";
 import permissionConstants from "~/constants/permissionConstants";
+import Hero from "~/components/Hero";
 
 import { orderRoles } from "../Communities/CommunityMembersPage/helpers";
 
@@ -231,7 +231,7 @@ export const DashboardPage = ({ currentUser }: DashboardPageProps) => {
         title={intl.formatMessage(pageTitles.dashboard)}
         description={intl.formatMessage(subTitle)}
       />
-      <AdminHero
+      <Hero
         title={intl.formatMessage(
           {
             defaultMessage: "Welcome back, {name}",
diff --git a/apps/web/src/pages/Users/UserLayout.tsx b/apps/web/src/pages/Users/UserLayout.tsx
index 3936b8ac861..b6001107219 100644
--- a/apps/web/src/pages/Users/UserLayout.tsx
+++ b/apps/web/src/pages/Users/UserLayout.tsx
@@ -15,7 +15,6 @@ import useRequiredParams from "~/hooks/useRequiredParams";
 import useCurrentPage from "~/hooks/useCurrentPage";
 import { getFullNameHtml } from "~/utils/nameUtils";
 import { PageNavInfo } from "~/types/pages";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import Hero from "~/components/Hero";
 

From bd4e5bba26777c2f63e949e56123c4b04f8fbc73 Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Tue, 3 Dec 2024 13:54:58 -0500
Subject: [PATCH 5/8] Replace all usage of deprecated Hero component

---
 .../HeroDeprecated/HeroDeprecated.stories.tsx |  62 -----
 .../HeroDeprecated/HeroDeprecated.tsx         | 247 ------------------
 .../src/components/HeroDeprecated/index.ts    |   3 -
 .../AccessibilityStatementPage.tsx            |   2 +-
 .../pages/Applications/ApplicationLayout.tsx  |   2 +-
 .../EmployeeInformationPage.tsx               |   2 +-
 .../GettingStartedPage/GettingStartedPage.tsx |   2 +-
 ...gistrationContactEmailVerificationPage.tsx |   2 +-
 .../RegistrationWorkEmailVerificationPage.tsx |   2 +-
 .../src/pages/Auth/SignInPage/SignInPage.tsx  |   2 +-
 .../src/pages/Auth/SignUpPage/SignUpPage.tsx  |   2 +-
 .../Auth/SignedOutPage/SignedOutPage.tsx      |   2 +-
 ...alServicesContractingQuestionnairePage.tsx |   2 +-
 .../src/pages/DirectivePage/DirectivePage.tsx |   2 +-
 .../ProfileContactEmailVerificationPage.tsx   |   2 +-
 .../ProfileWorkEmailVerificationPage.tsx      |   2 +-
 .../InclusivityEquityPage.tsx                 |   2 +-
 .../ItTrainingFundPage/ItTrainingFundPage.tsx |   2 +-
 .../JobPosterTemplatePage.tsx                 |   2 +-
 .../JobPosterTemplatesPage.tsx                |   2 +-
 .../ManagerDashboardPage.tsx                  |   2 +-
 .../NotificationsPage/NotificationsPage.tsx   |   2 +-
 .../ViewPoolCandidatePage.tsx                 |   1 -
 .../Pools/BrowsePoolsPage/BrowsePoolsPage.tsx |   2 +-
 .../PoolAdvertisementPage.tsx                 |   2 +-
 .../src/pages/PrivacyPolicy/PrivacyPolicy.tsx |   2 +-
 .../AccountSettings/AccountSettingsPage.tsx   |   2 +-
 .../CareerTimelineAndRecruitment.tsx          |   2 +-
 .../ExperienceFormPage/ExperienceFormPage.tsx |   2 +-
 .../pages/Profile/ProfilePage/ProfilePage.tsx |   2 +-
 .../ProfileAndApplicationsHeading.tsx         |   5 +-
 .../RequestConfirmationPage.tsx               |   2 +-
 .../RequestPage/RequestPage.tsx               |   2 +-
 .../SearchRequests/SearchPage/SearchPage.tsx  |   2 +-
 apps/web/src/pages/Skills/SkillPage.tsx       |   2 +-
 .../src/pages/Skills/SkillPortfolioPage.tsx   |   2 +-
 .../src/pages/Skills/SkillShowcasePage.tsx    |   2 +-
 .../src/pages/Skills/UpdateUserSkillPage.tsx  |   2 +-
 .../Skills/components/UpdateSkillShowcase.tsx |   2 +-
 .../web/src/pages/SupportPage/SupportPage.tsx |   2 +-
 apps/web/src/pages/Teams/TeamLayout.tsx       |   1 -
 .../TermsAndConditions/TermsAndConditions.tsx |   2 +-
 42 files changed, 39 insertions(+), 352 deletions(-)
 delete mode 100644 apps/web/src/components/HeroDeprecated/HeroDeprecated.stories.tsx
 delete mode 100644 apps/web/src/components/HeroDeprecated/HeroDeprecated.tsx
 delete mode 100644 apps/web/src/components/HeroDeprecated/index.ts

diff --git a/apps/web/src/components/HeroDeprecated/HeroDeprecated.stories.tsx b/apps/web/src/components/HeroDeprecated/HeroDeprecated.stories.tsx
deleted file mode 100644
index 9db52fa4cf2..00000000000
--- a/apps/web/src/components/HeroDeprecated/HeroDeprecated.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { StoryFn, Meta } from "@storybook/react";
-
-import { allModes } from "@gc-digital-talent/storybook-helpers";
-
-import Hero from "./HeroDeprecated";
-
-export default {
-  component: Hero,
-  args: {
-    title: "Hero",
-    subtitle: "Subtitle",
-    crumbs: [
-      {
-        label: "Home",
-        url: "#home",
-      },
-      {
-        label: "One",
-        url: "#one",
-      },
-      {
-        label: "Two",
-        url: "#two",
-      },
-      {
-        label: "Three",
-        url: "#three",
-      },
-    ],
-  },
-  parameters: {
-    chromatic: {
-      modes: {
-        light: allModes.light,
-        "light mobile": allModes["light mobile"],
-        dark: allModes.dark,
-        "light iap": allModes["light iap desktop"],
-        "dark iap": allModes["dark iap desktop"],
-      },
-    },
-  },
-} as Meta<typeof Hero>;
-
-const Template: StoryFn<typeof Hero> = (args) => <Hero {...args} />;
-
-export const Default = Template.bind({});
-
-export const Overlap = Template.bind({});
-Overlap.args = {
-  centered: true,
-  children: (
-    <div
-      data-h2-background-color="base(white)"
-      data-h2-radius="base(rounded)"
-      data-h2-padding="base(x2, x1)"
-      data-h2-shadow="base(s)"
-      data-h2-text-align="base(center)"
-    >
-      <p data-h2-font-size="base(h4)">Replace Me</p>
-    </div>
-  ),
-};
diff --git a/apps/web/src/components/HeroDeprecated/HeroDeprecated.tsx b/apps/web/src/components/HeroDeprecated/HeroDeprecated.tsx
deleted file mode 100644
index e724c8398f3..00000000000
--- a/apps/web/src/components/HeroDeprecated/HeroDeprecated.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import { ReactNode, useEffect, useRef } from "react";
-import { useIntl } from "react-intl";
-
-import {
-  Heading,
-  type HeadingRef,
-  Breadcrumbs,
-  type BreadcrumbsProps,
-  Flourish,
-  Crumb,
-} from "@gc-digital-talent/ui";
-import { uiMessages } from "@gc-digital-talent/i18n";
-
-import BackgroundGraphic from "./BackgroundPattern";
-
-const paddingMap = new Map([
-  [
-    "default",
-    {
-      "data-h2-padding": "base(x4, 0)",
-    },
-  ],
-  [
-    "image",
-    {
-      "data-h2-padding":
-        "base(x3, 0, 50vh, 0) p-tablet(x3, 0, 60vh, 0) l-tablet(x4, 0)",
-    },
-  ],
-  [
-    "overlap",
-    {
-      "data-h2-padding": "base(x4, 0, x8, 0)",
-    },
-  ],
-]);
-
-interface HeroProps {
-  imgPath?: string;
-  title: ReactNode;
-  subtitle?: ReactNode;
-  crumbs?: BreadcrumbsProps["crumbs"];
-  simpleCrumbs?: boolean;
-  children?: ReactNode;
-  centered?: boolean;
-  linkSlot?: ReactNode;
-}
-
-const HeroDeprecated = ({
-  imgPath,
-  title,
-  subtitle,
-  crumbs,
-  children,
-  linkSlot,
-  centered = false,
-  simpleCrumbs = false,
-}: HeroProps) => {
-  const intl = useIntl();
-  const headingRef = useRef<HeadingRef>(null);
-  const showImg = imgPath && !centered && !children;
-  const breadCrumbs =
-    crumbs && crumbs.length > 0 ? <Breadcrumbs crumbs={crumbs} /> : null;
-  const textAlignment = centered
-    ? {
-        "data-h2-text-align": "base(center)",
-      }
-    : {
-        "data-h2-text-align": "base(center) l-tablet(left)",
-      };
-  let padding = paddingMap.get("default");
-  if (showImg) {
-    padding = paddingMap.get("image");
-  } else if (children) {
-    padding = paddingMap.get("overlap");
-  }
-
-  useEffect(() => {
-    if (headingRef.current) {
-      headingRef.current.focus();
-    }
-  }, []);
-
-  return (
-    <>
-      <div
-        data-h2-background="base(rgba(0, 0, 0, 1)) base:iap(linear-gradient(90deg, primary, rgb(104, 23, 53)))"
-        data-h2-overflow="base(hidden)"
-        data-h2-position="base(relative)"
-        {...padding}
-      >
-        <div
-          data-h2-display="base(none) base:iap(block)"
-          data-h2-position="base(absolute)"
-          data-h2-location="base(auto, 0, 0, auto)"
-          data-h2-transform="base(translate(65%, 75%))"
-        >
-          <div
-            data-h2-height="base(x30)"
-            data-h2-width="base(x30)"
-            data-h2-background-color="base:all(secondary.darker)"
-            data-h2-radius="base(circle)"
-          >
-            &nbsp;
-          </div>
-        </div>
-        <div
-          data-h2-display="base(none) base:iap(block)"
-          data-h2-position="base(absolute)"
-          data-h2-location="base(0, auto, auto, 0)"
-          data-h2-transform="base(translate(-75%, -65%))"
-        >
-          <div
-            data-h2-height="base(x30)"
-            data-h2-width="base(x30)"
-            data-h2-border="base:all(x.25 solid secondary.darker)"
-            data-h2-radius="base(circle)"
-          />
-          <div
-            data-h2-height="base(x25)"
-            data-h2-width="base(x25)"
-            data-h2-border="base:all(x.25 solid secondary.darker)"
-            data-h2-radius="base(circle)"
-            data-h2-position="base(center)"
-          />
-          <div
-            data-h2-height="base(x20)"
-            data-h2-width="base(x20)"
-            data-h2-border="base:all(x.25 solid secondary.darker)"
-            data-h2-radius="base(circle)"
-            data-h2-position="base(center)"
-          >
-            &nbsp;
-          </div>
-        </div>
-        <div
-          data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)"
-          data-h2-layer="base(3, relative)"
-        >
-          <div
-            data-h2-color="base:all(white)"
-            {...textAlignment}
-            {...(showImg && {
-              "data-h2-margin-right": "l-tablet(x18)",
-            })}
-          >
-            <Heading
-              ref={headingRef}
-              tabIndex={-1}
-              data-h2-outline="base(none)"
-              level="h1"
-              size="h2"
-              data-h2-margin="base(0)"
-            >
-              {title}
-            </Heading>
-            {subtitle && (
-              <p
-                data-h2-font-size="base(h5, 1.4)"
-                data-h2-margin="base(x1, 0, 0, 0)"
-              >
-                {subtitle}
-              </p>
-            )}
-            {linkSlot && (
-              <div
-                data-h2-display="base(flex)"
-                data-h2-align-items="base(flex-start)"
-                data-h2-margin="base(x1.5, 0, 0, 0)"
-                data-h2-gap="base(x1)"
-                data-h2-justify-content="base(center) p-tablet(flex-start)"
-                data-h2-flex-wrap="base(wrap) p-tablet(initial)"
-              >
-                {linkSlot}
-              </div>
-            )}
-            {simpleCrumbs && crumbs && (
-              <nav
-                aria-label={intl.formatMessage(uiMessages.breadcrumbs)}
-                data-h2-padding-top="base(x2)"
-              >
-                <ol
-                  data-h2-list-style="base(none)"
-                  data-h2-display="base(flex) base:children[>li](inline-block)"
-                  data-h2-flex-wrap="base(wrap)"
-                  data-h2-gap="base(x.5)"
-                  data-h2-padding="base(0)"
-                >
-                  {crumbs.map((crumb, index) => (
-                    <Crumb
-                      key={crumb.url}
-                      url={crumb.url}
-                      isCurrent={index + 1 === crumbs.length}
-                    >
-                      {crumb.label}
-                    </Crumb>
-                  ))}
-                </ol>
-              </nav>
-            )}
-          </div>
-        </div>
-        {showImg ? (
-          <div
-            data-h2-position="base(absolute)"
-            data-h2-location="base(0)"
-            data-h2-height="base(auto)"
-            data-h2-width="base(100%)"
-            data-h2-z-index="base(2)"
-            data-h2-background-position="base(50% 110%) l-tablet(calc(50% + 25rem) 50%)"
-            data-h2-background-size="base(auto 50vh) p-tablet(auto 60vh) l-tablet(auto 110%)"
-            data-h2-background-repeat="base(no-repeat)"
-            style={{ backgroundImage: `url('${imgPath}')` }}
-          />
-        ) : (
-          <BackgroundGraphic
-            aria-hidden="true"
-            data-h2-display="base(block) base:iap(none)"
-            data-h2-position="base(absolute)"
-            data-h2-location="base(0, 0, auto, auto)"
-            data-h2-height="base(auto)"
-            data-h2-min-width="base(x20)"
-            data-h2-width="base(75%)"
-            data-h2-z-index="base(1)"
-          />
-        )}
-      </div>
-      {children ? (
-        <>
-          <Flourish />
-          <div
-            data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)"
-            data-h2-position="base(relative)"
-            data-h2-margin="base(-x5, auto, 0, auto)"
-            data-h2-z-index="base(4)"
-          >
-            {children}
-          </div>
-        </>
-      ) : (
-        breadCrumbs
-      )}
-    </>
-  );
-};
-
-export default HeroDeprecated;
diff --git a/apps/web/src/components/HeroDeprecated/index.ts b/apps/web/src/components/HeroDeprecated/index.ts
deleted file mode 100644
index 8dc32a4f3c6..00000000000
--- a/apps/web/src/components/HeroDeprecated/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Hero from "./HeroDeprecated";
-
-export default Hero;
diff --git a/apps/web/src/pages/AccessibilityStatementPage/AccessibilityStatementPage.tsx b/apps/web/src/pages/AccessibilityStatementPage/AccessibilityStatementPage.tsx
index 1ce7f438a8a..f3a89819294 100644
--- a/apps/web/src/pages/AccessibilityStatementPage/AccessibilityStatementPage.tsx
+++ b/apps/web/src/pages/AccessibilityStatementPage/AccessibilityStatementPage.tsx
@@ -4,7 +4,7 @@ import { ReactNode } from "react";
 import { Heading, Link, TableOfContents } from "@gc-digital-talent/ui";
 import { getLocale, Locales } from "@gc-digital-talent/i18n";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import { wrapAbbr } from "~/utils/nameUtils";
diff --git a/apps/web/src/pages/Applications/ApplicationLayout.tsx b/apps/web/src/pages/Applications/ApplicationLayout.tsx
index 283489fd28e..b8b7dd8df5b 100644
--- a/apps/web/src/pages/Applications/ApplicationLayout.tsx
+++ b/apps/web/src/pages/Applications/ApplicationLayout.tsx
@@ -16,7 +16,7 @@ import { FragmentType, getFragment, graphql } from "@gc-digital-talent/graphql";
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import IapContactDialog from "~/components/Dialog/IapContactDialog";
 import useRoutes from "~/hooks/useRoutes";
 import useCurrentPage from "~/hooks/useCurrentPage";
diff --git a/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
index 067117fa418..716ad5ec102 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
@@ -36,7 +36,7 @@ import {
 } from "@gc-digital-talent/i18n";
 import { getFromSessionStorage } from "@gc-digital-talent/storage";
 
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SEO from "~/components/SEO/SEO";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import useRoutes from "~/hooks/useRoutes";
diff --git a/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
index 01e15222008..a702b59e2fb 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
@@ -28,7 +28,7 @@ import {
 } from "@gc-digital-talent/graphql";
 import { getFromSessionStorage } from "@gc-digital-talent/storage";
 
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SEO from "~/components/SEO/SEO";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 import useRoutes from "~/hooks/useRoutes";
diff --git a/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
index 716e6fd74bd..6d2e16544ef 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
@@ -4,7 +4,7 @@ import { createSearchParams, useNavigate, useSearchParams } from "react-router";
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 import { EmailType } from "@gc-digital-talent/graphql";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
diff --git a/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
index f8053adce76..f9d7fde2872 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "urql";
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 import { EmailType, graphql } from "@gc-digital-talent/graphql";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
diff --git a/apps/web/src/pages/Auth/SignInPage/SignInPage.tsx b/apps/web/src/pages/Auth/SignInPage/SignInPage.tsx
index 68ac06d54f9..abff1d29f93 100644
--- a/apps/web/src/pages/Auth/SignInPage/SignInPage.tsx
+++ b/apps/web/src/pages/Auth/SignInPage/SignInPage.tsx
@@ -10,7 +10,7 @@ import { useApiRoutes } from "@gc-digital-talent/auth";
 import { getLocale } from "@gc-digital-talent/i18n";
 import { useTheme } from "@gc-digital-talent/theme";
 
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SEO from "~/components/SEO/SEO";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
diff --git a/apps/web/src/pages/Auth/SignUpPage/SignUpPage.tsx b/apps/web/src/pages/Auth/SignUpPage/SignUpPage.tsx
index 3513622c61a..44a4b0b00cd 100644
--- a/apps/web/src/pages/Auth/SignUpPage/SignUpPage.tsx
+++ b/apps/web/src/pages/Auth/SignUpPage/SignUpPage.tsx
@@ -9,7 +9,7 @@ import { useApiRoutes } from "@gc-digital-talent/auth";
 import { getLocale } from "@gc-digital-talent/i18n";
 import { useTheme } from "@gc-digital-talent/theme";
 
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SEO from "~/components/SEO/SEO";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
diff --git a/apps/web/src/pages/Auth/SignedOutPage/SignedOutPage.tsx b/apps/web/src/pages/Auth/SignedOutPage/SignedOutPage.tsx
index 540abf0eba8..754f444eb89 100644
--- a/apps/web/src/pages/Auth/SignedOutPage/SignedOutPage.tsx
+++ b/apps/web/src/pages/Auth/SignedOutPage/SignedOutPage.tsx
@@ -15,7 +15,7 @@ import {
 } from "@gc-digital-talent/auth";
 import { commonMessages, getLocale } from "@gc-digital-talent/i18n";
 
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SEO from "~/components/SEO/SEO";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
diff --git a/apps/web/src/pages/DirectiveForms/DigitalServicesContractingQuestionnaire/DigitalServicesContractingQuestionnairePage.tsx b/apps/web/src/pages/DirectiveForms/DigitalServicesContractingQuestionnaire/DigitalServicesContractingQuestionnairePage.tsx
index 463f4ee0ef7..e7fef8d0d02 100644
--- a/apps/web/src/pages/DirectiveForms/DigitalServicesContractingQuestionnaire/DigitalServicesContractingQuestionnairePage.tsx
+++ b/apps/web/src/pages/DirectiveForms/DigitalServicesContractingQuestionnaire/DigitalServicesContractingQuestionnairePage.tsx
@@ -17,7 +17,7 @@ import { ROLE_NAME } from "@gc-digital-talent/auth";
 
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
 
 import { pageTitle as directiveHomePageTitle } from "../../DirectivePage/DirectivePage";
diff --git a/apps/web/src/pages/DirectivePage/DirectivePage.tsx b/apps/web/src/pages/DirectivePage/DirectivePage.tsx
index a1795658d40..87b3143df83 100644
--- a/apps/web/src/pages/DirectivePage/DirectivePage.tsx
+++ b/apps/web/src/pages/DirectivePage/DirectivePage.tsx
@@ -22,7 +22,7 @@ import {
   getLocale,
 } from "@gc-digital-talent/i18n";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import SEO from "~/components/SEO/SEO";
diff --git a/apps/web/src/pages/EmailVerificationPages/ProfileContactEmailVerificationPage.tsx b/apps/web/src/pages/EmailVerificationPages/ProfileContactEmailVerificationPage.tsx
index ad5452c236a..0a3144f7ccc 100644
--- a/apps/web/src/pages/EmailVerificationPages/ProfileContactEmailVerificationPage.tsx
+++ b/apps/web/src/pages/EmailVerificationPages/ProfileContactEmailVerificationPage.tsx
@@ -8,7 +8,7 @@ import { EmailType } from "@gc-digital-talent/graphql";
 // importing from a shared file, not the page itself
 // eslint-disable-next-line no-restricted-imports
 import profilePageMessages from "~/pages/Profile/ProfilePage/messages";
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
diff --git a/apps/web/src/pages/EmailVerificationPages/ProfileWorkEmailVerificationPage.tsx b/apps/web/src/pages/EmailVerificationPages/ProfileWorkEmailVerificationPage.tsx
index 936691cd02e..8f76ea70017 100644
--- a/apps/web/src/pages/EmailVerificationPages/ProfileWorkEmailVerificationPage.tsx
+++ b/apps/web/src/pages/EmailVerificationPages/ProfileWorkEmailVerificationPage.tsx
@@ -9,7 +9,7 @@ import { EmailType, graphql } from "@gc-digital-talent/graphql";
 // importing from a shared file, not the page itself
 // eslint-disable-next-line no-restricted-imports
 import profilePageMessages from "~/pages/Profile/ProfilePage/messages";
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
diff --git a/apps/web/src/pages/InclusivityEquityPage/InclusivityEquityPage.tsx b/apps/web/src/pages/InclusivityEquityPage/InclusivityEquityPage.tsx
index 5135130dc81..337c20f21ad 100644
--- a/apps/web/src/pages/InclusivityEquityPage/InclusivityEquityPage.tsx
+++ b/apps/web/src/pages/InclusivityEquityPage/InclusivityEquityPage.tsx
@@ -7,7 +7,7 @@ import LightBulbIcon from "@heroicons/react/24/outline/LightBulbIcon";
 import { Link, TableOfContents } from "@gc-digital-talent/ui";
 import { Locales, commonMessages, getLocale } from "@gc-digital-talent/i18n";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoute from "~/hooks/useRoutes";
 
diff --git a/apps/web/src/pages/ItTrainingFundPage/ItTrainingFundPage.tsx b/apps/web/src/pages/ItTrainingFundPage/ItTrainingFundPage.tsx
index 432ff665bcb..385ffc54d40 100644
--- a/apps/web/src/pages/ItTrainingFundPage/ItTrainingFundPage.tsx
+++ b/apps/web/src/pages/ItTrainingFundPage/ItTrainingFundPage.tsx
@@ -7,7 +7,7 @@ import { ReactNode } from "react";
 import { CardBasic, CardFlat, Heading, Link } from "@gc-digital-talent/ui";
 import { getLocale } from "@gc-digital-talent/i18n";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import image1 from "~/assets/img/it-training-fund-1.webp";
diff --git a/apps/web/src/pages/JobPosterTemplates/JobPosterTemplatePage/JobPosterTemplatePage.tsx b/apps/web/src/pages/JobPosterTemplates/JobPosterTemplatePage/JobPosterTemplatePage.tsx
index 652aa1ad694..bbbf436a2dd 100644
--- a/apps/web/src/pages/JobPosterTemplates/JobPosterTemplatePage/JobPosterTemplatePage.tsx
+++ b/apps/web/src/pages/JobPosterTemplates/JobPosterTemplatePage/JobPosterTemplatePage.tsx
@@ -19,7 +19,7 @@ import { commonMessages, getLocalizedName } from "@gc-digital-talent/i18n";
 
 import useRequiredParams from "~/hooks/useRequiredParams";
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 
diff --git a/apps/web/src/pages/JobPosterTemplates/JobPosterTemplatesPage/JobPosterTemplatesPage.tsx b/apps/web/src/pages/JobPosterTemplates/JobPosterTemplatesPage/JobPosterTemplatesPage.tsx
index 8fc6c9d6888..e6c1121422b 100644
--- a/apps/web/src/pages/JobPosterTemplates/JobPosterTemplatesPage/JobPosterTemplatesPage.tsx
+++ b/apps/web/src/pages/JobPosterTemplates/JobPosterTemplatesPage/JobPosterTemplatesPage.tsx
@@ -40,7 +40,7 @@ import {
   getLocalizedName,
 } from "@gc-digital-talent/i18n";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SEO from "~/components/SEO/SEO";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
diff --git a/apps/web/src/pages/Manager/ManagerDashboardPage/ManagerDashboardPage.tsx b/apps/web/src/pages/Manager/ManagerDashboardPage/ManagerDashboardPage.tsx
index 1978f5bf0df..4c1238bdd13 100644
--- a/apps/web/src/pages/Manager/ManagerDashboardPage/ManagerDashboardPage.tsx
+++ b/apps/web/src/pages/Manager/ManagerDashboardPage/ManagerDashboardPage.tsx
@@ -22,7 +22,7 @@ import { notEmpty } from "@gc-digital-talent/helpers";
 import SEO from "~/components/SEO/SEO";
 import profileMessages from "~/messages/profileMessages";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import useMainNavLinks from "~/components/NavMenu/useMainNavLinks";
diff --git a/apps/web/src/pages/Notifications/NotificationsPage/NotificationsPage.tsx b/apps/web/src/pages/Notifications/NotificationsPage/NotificationsPage.tsx
index 069cd5924e6..dcf0ffbe4cd 100644
--- a/apps/web/src/pages/Notifications/NotificationsPage/NotificationsPage.tsx
+++ b/apps/web/src/pages/Notifications/NotificationsPage/NotificationsPage.tsx
@@ -6,7 +6,7 @@ import { CardBasic, Heading, Link, Sidebar } from "@gc-digital-talent/ui";
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import NotificationList from "~/components/NotificationList/NotificationList";
diff --git a/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/ViewPoolCandidatePage.tsx b/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/ViewPoolCandidatePage.tsx
index 53681e59a27..c0077a929b7 100644
--- a/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/ViewPoolCandidatePage.tsx
+++ b/apps/web/src/pages/PoolCandidates/ViewPoolCandidatePage/ViewPoolCandidatePage.tsx
@@ -27,7 +27,6 @@ import useRoutes from "~/hooks/useRoutes";
 import useRequiredParams from "~/hooks/useRequiredParams";
 import AdminContentWrapper from "~/components/AdminContentWrapper/AdminContentWrapper";
 import PoolStatusTable from "~/components/PoolStatusTable/PoolStatusTable";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import { getCandidateStatusChip } from "~/utils/poolCandidate";
 import { getFullPoolTitleLabel } from "~/utils/poolUtils";
 import { getFullNameLabel } from "~/utils/nameUtils";
diff --git a/apps/web/src/pages/Pools/BrowsePoolsPage/BrowsePoolsPage.tsx b/apps/web/src/pages/Pools/BrowsePoolsPage/BrowsePoolsPage.tsx
index 9a92d0a5093..6a515fc4da4 100644
--- a/apps/web/src/pages/Pools/BrowsePoolsPage/BrowsePoolsPage.tsx
+++ b/apps/web/src/pages/Pools/BrowsePoolsPage/BrowsePoolsPage.tsx
@@ -22,7 +22,7 @@ import {
 import { unpackMaybes } from "@gc-digital-talent/helpers";
 
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import { wrapAbbr } from "~/utils/nameUtils";
diff --git a/apps/web/src/pages/Pools/PoolAdvertisementPage/PoolAdvertisementPage.tsx b/apps/web/src/pages/Pools/PoolAdvertisementPage/PoolAdvertisementPage.tsx
index ed305554e2c..b38941eed9e 100644
--- a/apps/web/src/pages/Pools/PoolAdvertisementPage/PoolAdvertisementPage.tsx
+++ b/apps/web/src/pages/Pools/PoolAdvertisementPage/PoolAdvertisementPage.tsx
@@ -54,7 +54,7 @@ import {
   isAdvertisementVisible,
 } from "~/utils/poolUtils";
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import EducationRequirements from "~/components/EducationRequirements/EducationRequirements";
diff --git a/apps/web/src/pages/PrivacyPolicy/PrivacyPolicy.tsx b/apps/web/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
index 86cb9ccdb6a..3d8fbf54341 100644
--- a/apps/web/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/apps/web/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
@@ -4,7 +4,7 @@ import { ReactNode } from "react";
 import { Flourish, Heading, Link } from "@gc-digital-talent/ui";
 import { Locales, getLocale } from "@gc-digital-talent/i18n";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 
diff --git a/apps/web/src/pages/Profile/AccountSettings/AccountSettingsPage.tsx b/apps/web/src/pages/Profile/AccountSettings/AccountSettingsPage.tsx
index 9d18d8e6403..750998227d1 100644
--- a/apps/web/src/pages/Profile/AccountSettings/AccountSettingsPage.tsx
+++ b/apps/web/src/pages/Profile/AccountSettings/AccountSettingsPage.tsx
@@ -16,7 +16,7 @@ import { unpackMaybes } from "@gc-digital-talent/helpers";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import profileMessages from "~/messages/profileMessages";
 
 import AccountManagement from "./AccountManagement";
diff --git a/apps/web/src/pages/Profile/CareerTimelineAndRecruitmentPage/components/CareerTimelineAndRecruitment.tsx b/apps/web/src/pages/Profile/CareerTimelineAndRecruitmentPage/components/CareerTimelineAndRecruitment.tsx
index b74b915a548..95c8db4cd0a 100644
--- a/apps/web/src/pages/Profile/CareerTimelineAndRecruitmentPage/components/CareerTimelineAndRecruitment.tsx
+++ b/apps/web/src/pages/Profile/CareerTimelineAndRecruitmentPage/components/CareerTimelineAndRecruitment.tsx
@@ -16,7 +16,7 @@ import {
 } from "@gc-digital-talent/graphql";
 
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import { PAGE_SECTION_ID, titles } from "~/constants/sections/careerTimeline";
diff --git a/apps/web/src/pages/Profile/ExperienceFormPage/ExperienceFormPage.tsx b/apps/web/src/pages/Profile/ExperienceFormPage/ExperienceFormPage.tsx
index 6e8fae82d0e..1ccb52b9657 100644
--- a/apps/web/src/pages/Profile/ExperienceFormPage/ExperienceFormPage.tsx
+++ b/apps/web/src/pages/Profile/ExperienceFormPage/ExperienceFormPage.tsx
@@ -42,7 +42,7 @@ import type {
   ExperienceMutationResponse,
 } from "~/types/experience";
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import ErrorSummary from "~/components/ExperienceFormFields/ErrorSummary";
 import ExperienceDetails from "~/components/ExperienceFormFields/ExperienceDetails";
 import AdditionalDetails from "~/components/ExperienceFormFields/AdditionalDetails";
diff --git a/apps/web/src/pages/Profile/ProfilePage/ProfilePage.tsx b/apps/web/src/pages/Profile/ProfilePage/ProfilePage.tsx
index 256ff7fac3e..355faf7c4bc 100644
--- a/apps/web/src/pages/Profile/ProfilePage/ProfilePage.tsx
+++ b/apps/web/src/pages/Profile/ProfilePage/ProfilePage.tsx
@@ -6,7 +6,7 @@ import { navigationMessages } from "@gc-digital-talent/i18n";
 import { FragmentType, getFragment, graphql } from "@gc-digital-talent/graphql";
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useRoutes from "~/hooks/useRoutes";
 import profileMessages from "~/messages/profileMessages";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
diff --git a/apps/web/src/pages/ProfileAndApplicationsPage/components/ProfileAndApplicationsHeading.tsx b/apps/web/src/pages/ProfileAndApplicationsPage/components/ProfileAndApplicationsHeading.tsx
index 4ff6f68d9a0..f5c66cf17c1 100644
--- a/apps/web/src/pages/ProfileAndApplicationsPage/components/ProfileAndApplicationsHeading.tsx
+++ b/apps/web/src/pages/ProfileAndApplicationsPage/components/ProfileAndApplicationsHeading.tsx
@@ -21,7 +21,7 @@ import {
 import { navigationMessages } from "@gc-digital-talent/i18n";
 import { FragmentType, getFragment, graphql } from "@gc-digital-talent/graphql";
 
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useRoutes, {
   FromIapDraftQueryKey,
   FromIapSuccessQueryKey,
@@ -245,7 +245,6 @@ const DashboardHeading = ({ userQuery }: DashboardHeadingProps) => {
 
   return (
     <Hero
-      centered
       title={intl.formatMessage(
         {
           defaultMessage: "Welcome back, {firstName}",
@@ -284,6 +283,8 @@ const DashboardHeading = ({ userQuery }: DashboardHeadingProps) => {
             ),
         },
       )}
+      overlap
+      centered
     >
       {searchParams.get(FromIapDraftQueryKey) === "true" && (
         <Alert.Root
diff --git a/apps/web/src/pages/SearchRequests/RequestConfirmationPage/RequestConfirmationPage.tsx b/apps/web/src/pages/SearchRequests/RequestConfirmationPage/RequestConfirmationPage.tsx
index 047cb9b6de4..bf739fbc6f9 100644
--- a/apps/web/src/pages/SearchRequests/RequestConfirmationPage/RequestConfirmationPage.tsx
+++ b/apps/web/src/pages/SearchRequests/RequestConfirmationPage/RequestConfirmationPage.tsx
@@ -11,7 +11,7 @@ import {
 } from "@gc-digital-talent/ui";
 import { Scalars } from "@gc-digital-talent/graphql";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SEO from "~/components/SEO/SEO";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
diff --git a/apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx b/apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx
index dd7f2ffb6ff..f823213b1bf 100644
--- a/apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx
+++ b/apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx
@@ -6,7 +6,7 @@ import {
   Classification,
 } from "@gc-digital-talent/graphql";
 
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import { FormValues as SearchFormValues } from "~/types/searchRequest";
 
 import CreateRequest from "./components/RequestForm";
diff --git a/apps/web/src/pages/SearchRequests/SearchPage/SearchPage.tsx b/apps/web/src/pages/SearchRequests/SearchPage/SearchPage.tsx
index 98c3fda039a..1e605bcc719 100644
--- a/apps/web/src/pages/SearchRequests/SearchPage/SearchPage.tsx
+++ b/apps/web/src/pages/SearchRequests/SearchPage/SearchPage.tsx
@@ -4,7 +4,7 @@ import { navigationMessages } from "@gc-digital-talent/i18n";
 
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SEO from "~/components/SEO/SEO";
 
 import SearchFormApi from "./components/SearchForm";
diff --git a/apps/web/src/pages/Skills/SkillPage.tsx b/apps/web/src/pages/Skills/SkillPage.tsx
index 328c4691fd5..0c6b5a611f4 100644
--- a/apps/web/src/pages/Skills/SkillPage.tsx
+++ b/apps/web/src/pages/Skills/SkillPage.tsx
@@ -6,7 +6,7 @@ import { navigationMessages } from "@gc-digital-talent/i18n";
 
 import SEO from "~/components/SEO/SEO";
 import useRoutes from "~/hooks/useRoutes";
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import { INITIAL_STATE } from "~/components/Table/ResponsiveTable/constants";
 import skillBrowserMessages from "~/components/SkillBrowser/messages";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
diff --git a/apps/web/src/pages/Skills/SkillPortfolioPage.tsx b/apps/web/src/pages/Skills/SkillPortfolioPage.tsx
index 724da2b57c0..c0bd4faacfe 100644
--- a/apps/web/src/pages/Skills/SkillPortfolioPage.tsx
+++ b/apps/web/src/pages/Skills/SkillPortfolioPage.tsx
@@ -10,7 +10,7 @@ import { FragmentType, graphql } from "@gc-digital-talent/graphql";
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import RequireAuth from "~/components/RequireAuth/RequireAuth";
diff --git a/apps/web/src/pages/Skills/SkillShowcasePage.tsx b/apps/web/src/pages/Skills/SkillShowcasePage.tsx
index ce04199eb70..3b57c9a0aad 100644
--- a/apps/web/src/pages/Skills/SkillShowcasePage.tsx
+++ b/apps/web/src/pages/Skills/SkillShowcasePage.tsx
@@ -16,7 +16,7 @@ import { FragmentType, getFragment, graphql } from "@gc-digital-talent/graphql";
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SkillRankCard from "~/components/SkillRankCard/SkillRankCard";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
diff --git a/apps/web/src/pages/Skills/UpdateUserSkillPage.tsx b/apps/web/src/pages/Skills/UpdateUserSkillPage.tsx
index 70f32ddab2f..8cf6554ba01 100644
--- a/apps/web/src/pages/Skills/UpdateUserSkillPage.tsx
+++ b/apps/web/src/pages/Skills/UpdateUserSkillPage.tsx
@@ -35,7 +35,7 @@ import {
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import UserSkillFormFields from "~/components/UserSkillFormFields/UserSkillFormFields";
 import ExperienceCard from "~/components/ExperienceCard/ExperienceCard";
 import ExperienceSkillFormDialog from "~/components/ExperienceSkillFormDialog/ExperienceSkillFormDialog";
diff --git a/apps/web/src/pages/Skills/components/UpdateSkillShowcase.tsx b/apps/web/src/pages/Skills/components/UpdateSkillShowcase.tsx
index a9a6036fb26..6516bd394b3 100644
--- a/apps/web/src/pages/Skills/components/UpdateSkillShowcase.tsx
+++ b/apps/web/src/pages/Skills/components/UpdateSkillShowcase.tsx
@@ -23,7 +23,7 @@ import {
 } from "@gc-digital-talent/graphql";
 
 import SEO from "~/components/SEO/SEO";
-import Hero from "~/components/HeroDeprecated/HeroDeprecated";
+import Hero from "~/components/Hero";
 import SkillBrowserDialog from "~/components/SkillBrowser/SkillBrowserDialog";
 import { FormValues as SkillBrowserDialogFormValues } from "~/components/SkillBrowser/types";
 
diff --git a/apps/web/src/pages/SupportPage/SupportPage.tsx b/apps/web/src/pages/SupportPage/SupportPage.tsx
index 972ad03f0f2..c092ab2211b 100644
--- a/apps/web/src/pages/SupportPage/SupportPage.tsx
+++ b/apps/web/src/pages/SupportPage/SupportPage.tsx
@@ -2,7 +2,7 @@ import { useIntl } from "react-intl";
 
 import { useTheme } from "@gc-digital-talent/theme";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import flourishTopLight from "~/assets/img/support_top_light.webp";
diff --git a/apps/web/src/pages/Teams/TeamLayout.tsx b/apps/web/src/pages/Teams/TeamLayout.tsx
index af03da4cdd1..5f1ce503aa9 100644
--- a/apps/web/src/pages/Teams/TeamLayout.tsx
+++ b/apps/web/src/pages/Teams/TeamLayout.tsx
@@ -11,7 +11,6 @@ import { FragmentType, getFragment, graphql } from "@gc-digital-talent/graphql";
 import { ROLE_NAME } from "@gc-digital-talent/auth";
 
 import SEO from "~/components/SEO/SEO";
-import AdminHero from "~/components/HeroDeprecated/AdminHero";
 import useRoutes from "~/hooks/useRoutes";
 import useCurrentPage from "~/hooks/useCurrentPage";
 import useRequiredParams from "~/hooks/useRequiredParams";
diff --git a/apps/web/src/pages/TermsAndConditions/TermsAndConditions.tsx b/apps/web/src/pages/TermsAndConditions/TermsAndConditions.tsx
index 68dae7cb67f..f390bd16e54 100644
--- a/apps/web/src/pages/TermsAndConditions/TermsAndConditions.tsx
+++ b/apps/web/src/pages/TermsAndConditions/TermsAndConditions.tsx
@@ -10,7 +10,7 @@ import {
 } from "@gc-digital-talent/ui";
 import { Locales, getLocale } from "@gc-digital-talent/i18n";
 
-import Hero from "~/components/HeroDeprecated";
+import Hero from "~/components/Hero";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import useRoutes from "~/hooks/useRoutes";
 import heroImg from "~/assets/img/accessibility-statement-header.webp";

From 875da05226b8b975218bb0d8e019f40ad08cadc0 Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Tue, 3 Dec 2024 16:39:06 -0500
Subject: [PATCH 6/8] Fix linting errors

---
 .../EmployeeInformationPage.tsx               |  1 -
 .../GettingStartedPage/GettingStartedPage.tsx |  1 -
 ...gistrationContactEmailVerificationPage.tsx |  1 -
 .../RegistrationWorkEmailVerificationPage.tsx |  1 -
 .../src/pages/DirectivePage/DirectivePage.tsx | 34 ++++++++-----------
 5 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
index 716ad5ec102..c2e1d7dccec 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
@@ -524,7 +524,6 @@ export const EmployeeInformationForm = ({
         title={intl.formatMessage(messages.title)}
         subtitle={intl.formatMessage(messages.subtitle)}
         crumbs={crumbs}
-        simpleCrumbs
       >
         <section data-h2-padding="base(0, 0, x3, 0)">
           <div
diff --git a/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
index a702b59e2fb..dcea44cf5a9 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
@@ -290,7 +290,6 @@ export const GettingStartedForm = ({
         title={intl.formatMessage(messages.title)}
         subtitle={intl.formatMessage(messages.subtitle)}
         crumbs={crumbs}
-        simpleCrumbs
       >
         <section data-h2-padding="base(0, 0, x3, 0)">
           <div
diff --git a/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
index 6d2e16544ef..282afb6c043 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
@@ -49,7 +49,6 @@ const RegistrationContactEmailVerificationPage = () => {
       title={intl.formatMessage(messages.title)}
       subtitle={intl.formatMessage(messages.subtitle)}
       crumbs={crumbs}
-      simpleCrumbs
     >
       <div
         data-h2-padding="base(x2) "
diff --git a/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
index f9d7fde2872..7e6fe410fd4 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
@@ -56,7 +56,6 @@ const RegistrationWorkEmailVerificationPage = () => {
       title={intl.formatMessage(messages.title)}
       subtitle={intl.formatMessage(messages.subtitle)}
       crumbs={crumbs}
-      simpleCrumbs
     >
       <div
         data-h2-padding="base(x2) "
diff --git a/apps/web/src/pages/DirectivePage/DirectivePage.tsx b/apps/web/src/pages/DirectivePage/DirectivePage.tsx
index 87b3143df83..ec3a34b866d 100644
--- a/apps/web/src/pages/DirectivePage/DirectivePage.tsx
+++ b/apps/web/src/pages/DirectivePage/DirectivePage.tsx
@@ -119,26 +119,20 @@ export const Component = () => {
         title={intl.formatMessage(pageTitle)}
         subtitle={intl.formatMessage(pageSubtitle)}
         crumbs={crumbs}
-        linkSlot={
-          <>
-            <Link
-              mode="cta"
-              href={directiveUrl}
-              color="quaternary"
-              icon={NewspaperIcon}
-            >
-              {readDirectiveMessage}
-            </Link>
-            <Link
-              mode="cta"
-              href={paths.search()}
-              color="secondary"
-              icon={MagnifyingGlassCircleIcon}
-            >
-              {intl.formatMessage(navigationMessages.findTalent)}
-            </Link>
-          </>
-        }
+        buttonLinks={[
+          {
+            icon: NewspaperIcon,
+            text: readDirectiveMessage,
+            url: directiveUrl,
+            color: "quaternary",
+          },
+          {
+            icon: MagnifyingGlassCircleIcon,
+            text: intl.formatMessage(navigationMessages.findTalent),
+            url: paths.search(),
+            color: "secondary",
+          },
+        ]}
       />
       <div data-h2-padding="base(x3, 0)">
         <div

From cda97fb57850b0aa415150753a1515290eee8084 Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Fri, 6 Dec 2024 12:36:25 -0500
Subject: [PATCH 7/8] overlap content for getting started pages

---
 .../EmployeeInformationPage/EmployeeInformationPage.tsx          | 1 +
 .../RegistrationPages/GettingStartedPage/GettingStartedPage.tsx  | 1 +
 .../RegistrationContactEmailVerificationPage.tsx                 | 1 +
 .../RegistrationPages/RegistrationWorkEmailVerificationPage.tsx  | 1 +
 4 files changed, 4 insertions(+)

diff --git a/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
index c2e1d7dccec..91ff03e397b 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/EmployeeInformationPage/EmployeeInformationPage.tsx
@@ -524,6 +524,7 @@ export const EmployeeInformationForm = ({
         title={intl.formatMessage(messages.title)}
         subtitle={intl.formatMessage(messages.subtitle)}
         crumbs={crumbs}
+        overlap
       >
         <section data-h2-padding="base(0, 0, x3, 0)">
           <div
diff --git a/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
index dcea44cf5a9..5ae0041ba40 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/GettingStartedPage/GettingStartedPage.tsx
@@ -290,6 +290,7 @@ export const GettingStartedForm = ({
         title={intl.formatMessage(messages.title)}
         subtitle={intl.formatMessage(messages.subtitle)}
         crumbs={crumbs}
+        overlap
       >
         <section data-h2-padding="base(0, 0, x3, 0)">
           <div
diff --git a/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
index 282afb6c043..7bde324ad4e 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/RegistrationContactEmailVerificationPage.tsx
@@ -49,6 +49,7 @@ const RegistrationContactEmailVerificationPage = () => {
       title={intl.formatMessage(messages.title)}
       subtitle={intl.formatMessage(messages.subtitle)}
       crumbs={crumbs}
+      overlap
     >
       <div
         data-h2-padding="base(x2) "
diff --git a/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx b/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
index 7e6fe410fd4..c006eda3935 100644
--- a/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
+++ b/apps/web/src/pages/Auth/RegistrationPages/RegistrationWorkEmailVerificationPage.tsx
@@ -56,6 +56,7 @@ const RegistrationWorkEmailVerificationPage = () => {
       title={intl.formatMessage(messages.title)}
       subtitle={intl.formatMessage(messages.subtitle)}
       crumbs={crumbs}
+      overlap
     >
       <div
         data-h2-padding="base(x2) "

From cd26b7bad4d5b95275e7c8106f25e49a072f1b3e Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Fri, 6 Dec 2024 12:44:51 -0500
Subject: [PATCH 8/8] Fix hero on request page

---
 apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx b/apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx
index f823213b1bf..0bfd35ccb5b 100644
--- a/apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx
+++ b/apps/web/src/pages/SearchRequests/RequestPage/RequestPage.tsx
@@ -31,7 +31,6 @@ export const Component = () => {
   return (
     <div data-h2-padding-bottom="base(x1) p-tablet(x3)">
       <Hero
-        centered
         title={intl.formatMessage({
           defaultMessage: "Find digital talent",
           id: "9Jkoms",
@@ -43,6 +42,8 @@ export const Component = () => {
           description:
             "Subtitle displayed on hero for Search and Request pages.",
         })}
+        centered
+        overlap
       >
         <div
           data-h2-background-color="base(foreground)"