diff --git a/apps/tup-ui/src/pages/Projects/Projects.tsx b/apps/tup-ui/src/pages/Projects/Projects.tsx
index 4cf5174a1..4af9301d1 100644
--- a/apps/tup-ui/src/pages/Projects/Projects.tsx
+++ b/apps/tup-ui/src/pages/Projects/Projects.tsx
@@ -20,7 +20,7 @@ const Layout: React.FC = () => {
       <section className={styles['project-section']}>
         <PageLayout
           top={
-            <SectionHeader actions={<NewProject />}>
+            <SectionHeader actions={<NewProject />} isNestedHeader>
               Projects & Allocations
             </SectionHeader>
           }
diff --git a/libs/core-components/src/lib/SectionHeader/SectionHeader.jsx b/libs/core-components/src/lib/SectionHeader/SectionHeader.jsx
index a0aed4bda..0c340d43b 100644
--- a/libs/core-components/src/lib/SectionHeader/SectionHeader.jsx
+++ b/libs/core-components/src/lib/SectionHeader/SectionHeader.jsx
@@ -42,9 +42,11 @@ function SectionHeader({
   isForForm,
   isForTable,
   isForList,
+  isNestedHeader,
 }) {
   let styleName = '';
   const styleNameList = [styles['root']];
+  const HeaderTagName = isNestedHeader ? 'div' : 'header';
   const HeadingTagName = isForForm || isForTable || isForList ? 'h2' : 'h1';
 
   if (isForForm) styleNameList.push(styles['for-form']);
@@ -55,14 +57,14 @@ function SectionHeader({
   styleName = styleNameList.join(' ');
 
   return (
-    <header className={`${className} ${styleName}`}>
+    <HeaderTagName className={`${className} ${styleName}`}>
       {children && (
         <HeadingTagName className={styles['heading']}>
           {children}
         </HeadingTagName>
       )}
       {actions}
-    </header>
+    </HeaderTagName>
   );
 }
 SectionHeader.propTypes = {
diff --git a/libs/tup-components/src/projects/header/ProjectHeader/ProjectHeader.tsx b/libs/tup-components/src/projects/header/ProjectHeader/ProjectHeader.tsx
index 5496fa259..1e7aec2c8 100644
--- a/libs/tup-components/src/projects/header/ProjectHeader/ProjectHeader.tsx
+++ b/libs/tup-components/src/projects/header/ProjectHeader/ProjectHeader.tsx
@@ -86,7 +86,7 @@ export const ProjectHeader: React.FC<{ projectId: number }> = ({
 
   return (
     <div className={styles['project-header']}>
-      <SectionHeader>
+      <SectionHeader isNestedHeader>
         {isActive && <Link to={'/projects?show=active'}>Active Projects </Link>}
         {!isActive && (
           <Link to={'/projects?show=inactive'}>Inactive Projects </Link>
diff --git a/libs/tup-components/src/system-status/details/SystemStatusHeader.tsx b/libs/tup-components/src/system-status/details/SystemStatusHeader.tsx
index 541553c4b..4d93d1c2d 100644
--- a/libs/tup-components/src/system-status/details/SystemStatusHeader.tsx
+++ b/libs/tup-components/src/system-status/details/SystemStatusHeader.tsx
@@ -17,7 +17,7 @@ export const SystemStatusHeader: React.FC<SystemDetailProps> = ({
 
   if (error)
     return (
-      <SectionHeader>
+      <SectionHeader isNestedHeader>
         <InlineMessage type="warn">
           System Status / Unable to retrieve system name
         </InlineMessage>
@@ -25,6 +25,8 @@ export const SystemStatusHeader: React.FC<SystemDetailProps> = ({
     );
 
   return (
-    <SectionHeader>System Status / {dataBySystem?.display_name}</SectionHeader>
+    <SectionHeader isNestedHeader>
+      System Status / {dataBySystem?.display_name}
+    </SectionHeader>
   );
 };