diff --git a/src/systems/systems.component.tsx b/src/systems/systems.component.tsx
index 0279490b0..2601ce11f 100644
--- a/src/systems/systems.component.tsx
+++ b/src/systems/systems.component.tsx
@@ -35,7 +35,7 @@ import {
   useMaterialReactTable,
 } from 'material-react-table';
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { System } from '../api/api.types';
 import { useGetSystems } from '../api/systems';
 import { usePreservedTableState } from '../common/preservedTableState.component';
@@ -49,7 +49,19 @@ import { DeleteSystemDialog } from './deleteSystemDialog.component';
 import SystemDetails from './systemDetails.component';
 import SystemDialog from './systemDialog.component';
 import { SystemDirectoryDialog } from './systemDirectoryDialog.component';
-import { useNavigateToSystem } from './systemsLayout.component';
+
+/* Returns function that navigates to a specific system id (or to the root of all systems
+   if given null) */
+export const useNavigateToSystem = () => {
+  const navigate = useNavigate();
+
+  return React.useCallback(
+    (newId: string | null) => {
+      navigate(`/systems${newId ? `/${newId}` : ''}`);
+    },
+    [navigate]
+  );
+};
 
 export type SystemMenuDialogType = 'edit' | 'duplicate' | 'delete';
 
diff --git a/src/systems/systemsLayout.component.tsx b/src/systems/systemsLayout.component.tsx
index 96f1bc9f3..239789152 100644
--- a/src/systems/systemsLayout.component.tsx
+++ b/src/systems/systemsLayout.component.tsx
@@ -1,59 +1,19 @@
-import { Box, Grid } from '@mui/material';
-import React from 'react';
-import { Outlet, useNavigate, useParams } from 'react-router-dom';
+import { Outlet, useParams } from 'react-router-dom';
 import { useGetSystemsBreadcrumbs } from '../api/systems';
-import Breadcrumbs from '../view/breadcrumbs.component';
-
-/* Returns function that navigates to a specific system id (or to the root of all systems
-   if given null) */
-export const useNavigateToSystem = () => {
-  const navigate = useNavigate();
-
-  return React.useCallback(
-    (newId: string | null) => {
-      navigate(`/systems${newId ? `/${newId}` : ''}`);
-    },
-    [navigate]
-  );
-};
+import BaseLayoutHeader from '../common/baseLayoutHeader.component';
 
 function SystemsLayout() {
   const { system_id: systemId } = useParams();
-  const navigateToSystem = useNavigateToSystem();
 
   const { data: systemsBreadcrumbs } = useGetSystemsBreadcrumbs(systemId);
 
   return (
-    <>
-      <Box height="100%">
-        <Grid
-          container
-          alignItems="center"
-          justifyContent="space-between"
-          sx={{
-            display: 'flex',
-            paddingLeft: '4px',
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              paddingTop: '20px',
-              paddingBottom: '20px',
-            }}
-          >
-            <Breadcrumbs
-              breadcrumbsInfo={systemsBreadcrumbs}
-              onChangeNode={navigateToSystem}
-              onChangeNavigateHome={() => navigateToSystem(null)}
-              homeLocation="Systems"
-            />
-          </div>
-        </Grid>
-        <Outlet />
-      </Box>
-    </>
+    <BaseLayoutHeader
+      homeLocation="Systems"
+      breadcrumbsInfo={systemsBreadcrumbs}
+    >
+      <Outlet />
+    </BaseLayoutHeader>
   );
 }