diff --git a/packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx b/packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx
index 8dcad74bb..6cf4d40bf 100644
--- a/packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx
+++ b/packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import { Button, Col, Row, Form, Input, Radio, Select } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { sendErrorNotification } from '@opensrp/notifications';
 import {
   FormFields,
@@ -51,105 +51,109 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
     { label: t('Inactive'), value: 'inactive' },
   ];
 
-  return (
-    <Row className="content-section user-group">
-      {/** If email is provided render edit group otherwise add group */}
-      <SimplePageHeader
-        title={
-          initialValues.id
-            ? t('Edit Care Team | {{name}}', { name: initialValues.name })
-            : t('Create Care Team')
-        }
-      />
+  const pageTitle = initialValues.id
+    ? t('Edit Care Team | {{name}}', { name: initialValues.name })
+    : t('Create Care Team');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
-      <Col className="bg-white p-3" span={24}>
-        <Form
-          {...formItemLayout}
-          form={form}
-          initialValues={initialValues}
-          onFinish={(values: FormFields) => {
-            setIsSubmitting(true);
-            submitForm(values, initialValues, fhirBaseURL, organizations, practitioners, t)
-              .catch(() => {
-                if (initialValues.id) {
-                  sendErrorNotification(t('There was a problem updating the Care Team'));
-                } else {
-                  sendErrorNotification(t('There was a problem creating the Care Team'));
-                }
-              })
-              .finally(() => setIsSubmitting(false));
-          }}
-        >
-          <Form.Item id={'id'} hidden={true} name={id} label={t('ID')}>
-            <Input />
-          </Form.Item>
+  return (
+    <BodyLayout headerProps={headerProps}>
+      <Row className="user-group">
+        {/** If email is provided render edit group otherwise add group */}
+        <Col className="bg-white p-3" span={24}>
+          <Form
+            {...formItemLayout}
+            form={form}
+            initialValues={initialValues}
+            onFinish={(values: FormFields) => {
+              setIsSubmitting(true);
+              submitForm(values, initialValues, fhirBaseURL, organizations, practitioners, t)
+                .catch(() => {
+                  if (initialValues.id) {
+                    sendErrorNotification(t('There was a problem updating the Care Team'));
+                  } else {
+                    sendErrorNotification(t('There was a problem creating the Care Team'));
+                  }
+                })
+                .finally(() => setIsSubmitting(false));
+            }}
+          >
+            <Form.Item id={'id'} hidden={true} name={id} label={t('ID')}>
+              <Input />
+            </Form.Item>
 
-          <Form.Item id={'uuid'} hidden={true} name={uuid} label={t('UUID')}>
-            <Input />
-          </Form.Item>
+            <Form.Item id={'uuid'} hidden={true} name={uuid} label={t('UUID')}>
+              <Input />
+            </Form.Item>
 
-          <Form.Item
-            name={name}
-            id="name"
-            label={t('Name')}
-            rules={[{ required: true, message: t('Name is Required') }]}
-          >
-            <Input />
-          </Form.Item>
+            <Form.Item
+              name={name}
+              id="name"
+              label={t('Name')}
+              rules={[{ required: true, message: t('Name is Required') }]}
+            >
+              <Input />
+            </Form.Item>
 
-          <Form.Item id="status" name={status} label={t('Status')}>
-            <Radio.Group name="status">
-              {statusOptions.map((e) => (
-                <Radio name="status" key={e.label} value={e.value}>
-                  {e.label}
-                </Radio>
-              ))}
-            </Radio.Group>
-          </Form.Item>
+            <Form.Item id="status" name={status} label={t('Status')}>
+              <Radio.Group name="status">
+                {statusOptions.map((e) => (
+                  <Radio name="status" key={e.label} value={e.value}>
+                    {e.label}
+                  </Radio>
+                ))}
+              </Radio.Group>
+            </Form.Item>
 
-          <Form.Item
-            data-testid="practitioners"
-            name={practitionerParticipants}
-            id="practitionerParticipants"
-            label={t('Practitioner Participant')}
-          >
-            <Select
-              placeholder={t('Select practitioners to assign to this Care Team')}
-              allowClear
-              mode="multiple"
-              showSearch
-              options={practOptions}
-              filterOption={selectFilterFunction}
-            />
-          </Form.Item>
+            <Form.Item
+              data-testid="practitioners"
+              name={practitionerParticipants}
+              id="practitionerParticipants"
+              label={t('Practitioner Participant')}
+            >
+              <Select
+                placeholder={t('Select practitioners to assign to this Care Team')}
+                allowClear
+                mode="multiple"
+                showSearch
+                options={practOptions}
+                filterOption={selectFilterFunction}
+              />
+            </Form.Item>
 
-          <Form.Item
-            name={managingOrganizations}
-            id="managingOrganizations"
-            label={t('Managing organizations')}
-            tooltip={t('Select one or more managing organizations')}
-          >
-            <Select
-              options={orgOptions}
-              mode="multiple"
-              allowClear
-              showSearch
-              placeholder={t('Select a managing Organization')}
-              filterOption={selectFilterFunction}
-            />
-          </Form.Item>
+            <Form.Item
+              name={managingOrganizations}
+              id="managingOrganizations"
+              label={t('Managing organizations')}
+              tooltip={t('Select one or more managing organizations')}
+            >
+              <Select
+                options={orgOptions}
+                mode="multiple"
+                allowClear
+                showSearch
+                placeholder={t('Select a managing Organization')}
+                filterOption={selectFilterFunction}
+              />
+            </Form.Item>
 
-          <Form.Item {...tailLayout}>
-            <Button type="primary" htmlType="submit" className="create-group">
-              {isSubmitting ? t('Saving') : t('Save')}
-            </Button>
-            <Button onClick={() => history.push(URL_CARE_TEAM)} className="cancel-care-team">
-              {t('Cancel')}
-            </Button>
-          </Form.Item>
-        </Form>
-      </Col>
-    </Row>
+            <Form.Item {...tailLayout}>
+              <Button type="primary" htmlType="submit" className="create-group">
+                {isSubmitting ? t('Saving') : t('Save')}
+              </Button>
+              <Button onClick={() => history.push(URL_CARE_TEAM)} className="cancel-care-team">
+                {t('Cancel')}
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/fhir-care-team/src/components/ListView/index.tsx b/packages/fhir-care-team/src/components/ListView/index.tsx
index ff16bd1a1..25a9c78cf 100644
--- a/packages/fhir-care-team/src/components/ListView/index.tsx
+++ b/packages/fhir-care-team/src/components/ListView/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Button, Divider, Dropdown, Popconfirm } from 'antd';
 import type { MenuProps } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
 import { RouteComponentProps } from 'react-router';
 import { useHistory, Link } from 'react-router-dom';
@@ -174,13 +174,19 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
     loading: isFetching || isLoading,
     pagination: tablePaginationProps,
   };
+  const pageTitle = t('FHIR Care Team');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
-        <title>{t('FHIR Care Team')}</title>
+        <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={t('FHIR Care Team')} />
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
@@ -198,6 +204,6 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
         </Col>
         {resourceId && <ViewDetails careTeamId={resourceId} fhirBaseURL={fhirBaseURL} />}
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-client/src/components/PatientsList/index.tsx b/packages/fhir-client/src/components/PatientsList/index.tsx
index 9b35cd2cd..1df92ae07 100644
--- a/packages/fhir-client/src/components/PatientsList/index.tsx
+++ b/packages/fhir-client/src/components/PatientsList/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Column, TableLayout } from '@opensrp/react-utils';
 import { BrokenPage, SearchForm } from '@opensrp/react-utils';
 import { useSimpleTabularView } from '@opensrp/react-utils';
@@ -82,13 +82,19 @@ export const PatientsList = (props: PatientListProps) => {
       }
     },
   };
+  const pageTitle = 'Patients';
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{t('Patients')}</title>
       </Helmet>
-      <SimplePageHeader title={t('Patients')} />
       <Row className="list-view">
         <Col className={'main-content'} span={24}>
           <div className="main-content__header">
@@ -97,6 +103,6 @@ export const PatientsList = (props: PatientListProps) => {
           <TableLayout {...tableProps} />
         </Col>
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-client/src/components/PatientsList/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-client/src/components/PatientsList/tests/__snapshots__/index.test.tsx.snap
index e3fa78cef..4215fd926 100644
--- a/packages/fhir-client/src/components/PatientsList/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/fhir-client/src/components/PatientsList/tests/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly in list view: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  Patients
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="Patients"
+      >
+        Patients
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly in list view: table row 1 page 1 1`] = `
diff --git a/packages/fhir-client/src/components/PatientsList/tests/index.test.tsx b/packages/fhir-client/src/components/PatientsList/tests/index.test.tsx
index 7de5629be..512aa8b3e 100644
--- a/packages/fhir-client/src/components/PatientsList/tests/index.test.tsx
+++ b/packages/fhir-client/src/components/PatientsList/tests/index.test.tsx
@@ -117,7 +117,7 @@ test('renders correctly in list view', async () => {
 
   await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   document.querySelectorAll('tr').forEach((tr, idx) => {
     tr.querySelectorAll('td').forEach((td) => {
diff --git a/packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx b/packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx
index 75ef97abc..13f8a0519 100644
--- a/packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx
+++ b/packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Button } from 'antd';
-import { SimplePageHeader, useSimpleTabularView } from '@opensrp/react-utils';
+import { BodyLayout, useSimpleTabularView } from '@opensrp/react-utils';
 import { parseGroup, ViewDetailsProps, ViewDetailsWrapper } from '../GroupDetail';
 import { PlusOutlined } from '@ant-design/icons';
 import { groupResourceType } from '../../../constants';
@@ -97,13 +97,18 @@ export function BaseListView<TableData extends ExtendableTableData = DefaultTabl
     loading: isFetching || isLoading,
     pagination: tablePaginationProps,
   };
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
@@ -127,6 +132,6 @@ export function BaseListView<TableData extends ExtendableTableData = DefaultTabl
           />
         )}
       </Row>
-    </div>
+    </BodyLayout>
   );
 }
diff --git a/packages/fhir-group-management/src/components/CommodityAddEdit/Default/index.tsx b/packages/fhir-group-management/src/components/CommodityAddEdit/Default/index.tsx
index 709d1bc7f..facc59b06 100644
--- a/packages/fhir-group-management/src/components/CommodityAddEdit/Default/index.tsx
+++ b/packages/fhir-group-management/src/components/CommodityAddEdit/Default/index.tsx
@@ -14,7 +14,7 @@ import {
   productImage,
 } from '../../../constants';
 import { Spin } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { useQuery } from 'react-query';
 import { FHIRServiceClass, BrokenPage } from '@opensrp/react-utils';
 import { IGroup } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IGroup';
@@ -66,13 +66,18 @@ export const CommodityAddEdit = (props: GroupAddEditProps) => {
     : t('Create commodity');
 
   const postSuccess = updateListReferencesFactory(fhirBaseUrl, listId);
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <div className="bg-white p-5">
         <CommodityForm
           hidden={[
@@ -96,6 +101,6 @@ export const CommodityAddEdit = (props: GroupAddEditProps) => {
           }}
         />
       </div>
-    </section>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-group-management/src/components/CommodityAddEdit/Eusm/index.tsx b/packages/fhir-group-management/src/components/CommodityAddEdit/Eusm/index.tsx
index e3c3e64d5..79dacf419 100644
--- a/packages/fhir-group-management/src/components/CommodityAddEdit/Eusm/index.tsx
+++ b/packages/fhir-group-management/src/components/CommodityAddEdit/Eusm/index.tsx
@@ -4,7 +4,7 @@ import { CommodityForm } from '../../ProductForm';
 import { useParams } from 'react-router';
 import { LIST_COMMODITY_URL, unitOfMeasure } from '../../../constants';
 import { Spin } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { BrokenPage } from '@opensrp/react-utils';
 import { IGroup } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IGroup';
 import {
@@ -56,13 +56,18 @@ export const CommodityAddEdit = (props: GroupAddEditProps) => {
     : t('Create commodity');
 
   const postSuccess = updateListReferencesFactory(fhirBaseUrl, listId, binaryQuery.data);
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <div className="bg-white p-5">
         <CommodityForm<
           { group: IGroup; binary?: IBinary; binaryChanged: boolean },
@@ -90,6 +95,6 @@ export const CommodityAddEdit = (props: GroupAddEditProps) => {
           }}
         />
       </div>
-    </section>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-group-management/src/components/CommodityList/Default/tests/__snapshots__/list.test.tsx.snap b/packages/fhir-group-management/src/components/CommodityList/Default/tests/__snapshots__/list.test.tsx.snap
index 1b90313b2..2e7951129 100644
--- a/packages/fhir-group-management/src/components/CommodityList/Default/tests/__snapshots__/list.test.tsx.snap
+++ b/packages/fhir-group-management/src/components/CommodityList/Default/tests/__snapshots__/list.test.tsx.snap
@@ -40,11 +40,24 @@ exports[`renders correctly when listing resources 5`] = `
 `;
 
 exports[`renders correctly when listing resources: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  Commodity List
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="Commodity List"
+      >
+        Commodity List
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly when listing resources: table row 1 page 1 1`] = `
diff --git a/packages/fhir-group-management/src/components/CommodityList/Default/tests/list.test.tsx b/packages/fhir-group-management/src/components/CommodityList/Default/tests/list.test.tsx
index efe5585f6..78dcf9061 100644
--- a/packages/fhir-group-management/src/components/CommodityList/Default/tests/list.test.tsx
+++ b/packages/fhir-group-management/src/components/CommodityList/Default/tests/list.test.tsx
@@ -129,7 +129,7 @@ test('renders correctly when listing resources', async () => {
     </title>
   `);
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   document.querySelectorAll('tr').forEach((tr, idx) => {
     tr.querySelectorAll('td').forEach((td) => {
diff --git a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/__snapshots__/list.test.tsx.snap b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/__snapshots__/list.test.tsx.snap
index 8b9ef1533..8f73f1caf 100644
--- a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/__snapshots__/list.test.tsx.snap
+++ b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/__snapshots__/list.test.tsx.snap
@@ -118,11 +118,24 @@ exports[`renders correctly when listing resources 11`] = `
 `;
 
 exports[`renders correctly when listing resources: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  Commodity List
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="Commodity List"
+      >
+        Commodity List
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly when listing resources: table row 1 page 1 1`] = `
diff --git a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/list.test.tsx b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/list.test.tsx
index 1b066461c..618916a9e 100644
--- a/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/list.test.tsx
+++ b/packages/fhir-group-management/src/components/CommodityList/Eusm/tests/list.test.tsx
@@ -129,7 +129,7 @@ test('renders correctly when listing resources', async () => {
     </title>
   `);
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   document.querySelectorAll('tr').forEach((tr, idx) => {
     tr.querySelectorAll('td').forEach((td) => {
diff --git a/packages/fhir-group-management/src/components/GroupList/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-group-management/src/components/GroupList/tests/__snapshots__/index.test.tsx.snap
index ed4fc6567..50579dcd7 100644
--- a/packages/fhir-group-management/src/components/GroupList/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/fhir-group-management/src/components/GroupList/tests/__snapshots__/index.test.tsx.snap
@@ -53,11 +53,24 @@ exports[`renders correctly when listing resources 6`] = `
 `;
 
 exports[`renders correctly when listing resources: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  Groups List
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="Groups List"
+      >
+        Groups List
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly when listing resources: Search 1 page 1 1`] = `
diff --git a/packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx b/packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx
index 3ad477575..6ce070b29 100644
--- a/packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx
+++ b/packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx
@@ -128,7 +128,7 @@ test('renders correctly when listing resources', async () => {
   const addGroupBtn = screen.queryByText(/Add Group/);
   expect(addGroupBtn).not.toBeInTheDocument();
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   document.querySelectorAll('tr').forEach((tr, idx) => {
     tr.querySelectorAll('td').forEach((td) => {
diff --git a/packages/fhir-group-management/src/components/LocationInventory/index.tsx b/packages/fhir-group-management/src/components/LocationInventory/index.tsx
index 0a4c08fab..3a3aae6a2 100644
--- a/packages/fhir-group-management/src/components/LocationInventory/index.tsx
+++ b/packages/fhir-group-management/src/components/LocationInventory/index.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from '../../mls';
 import { Helmet } from 'react-helmet';
-import { BrokenPage, FHIRServiceClass, SimplePageHeader } from '@opensrp/react-utils';
+import { BrokenPage, FHIRServiceClass, BodyLayout } from '@opensrp/react-utils';
 import { AddLocationInventoryForm } from './form';
 import { useParams } from 'react-router';
 import { groupResourceType, locationResourceType } from '../../constants';
@@ -78,13 +78,18 @@ export const AddLocationInventory = (props: AddLocationInventoryProps) => {
     servicePointObj: servicePoint.data as ILocation,
     commodityListId,
   };
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <div className="bg-white p-5">
         {isLoading ? (
           <Spin size="large" className="custom-spinner"></Spin>
@@ -92,6 +97,6 @@ export const AddLocationInventory = (props: AddLocationInventoryProps) => {
           <AddLocationInventoryForm {...formProps} />
         )}
       </div>
-    </section>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-healthcare-service/src/components/HealthCareAddEdit/index.tsx b/packages/fhir-healthcare-service/src/components/HealthCareAddEdit/index.tsx
index a56494436..427a8ede4 100644
--- a/packages/fhir-healthcare-service/src/components/HealthCareAddEdit/index.tsx
+++ b/packages/fhir-healthcare-service/src/components/HealthCareAddEdit/index.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'react-router';
 import { healthCareServiceResourceType, LIST_HEALTHCARE_URL } from '../../constants';
 import { organizationResourceType } from '@opensrp/fhir-team-management';
 import { sendErrorNotification } from '@opensrp/notifications';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Spin } from 'antd';
 import { useQuery } from 'react-query';
 import {
@@ -65,13 +65,18 @@ export const HealthCareAddEdit = (props: HealthCareAddEditProps) => {
   const pageTitle = healthCareService.data
     ? t('Edit team | {{name}}', { name: healthCareService.data.name ?? '' })
     : t('Create team');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <div className="bg-white p-5">
         <HealthCareForm
           fhirBaseUrl={fhirBaseUrl}
@@ -81,6 +86,6 @@ export const HealthCareAddEdit = (props: HealthCareAddEditProps) => {
           successUrl={LIST_HEALTHCARE_URL}
         />
       </div>
-    </section>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-healthcare-service/src/components/HealthCareList/index.tsx b/packages/fhir-healthcare-service/src/components/HealthCareList/index.tsx
index 0f1bb8c4f..dc3d55db5 100644
--- a/packages/fhir-healthcare-service/src/components/HealthCareList/index.tsx
+++ b/packages/fhir-healthcare-service/src/components/HealthCareList/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Button, Divider, Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
 import { healthCareServiceResourceType, ADD_EDIT_HEALTHCARE_SERVICE_URL } from '../../constants';
 import { Link, useHistory } from 'react-router-dom';
@@ -116,13 +116,18 @@ export const HealthCareList: React.FC<HealthCareListProps> = (props: HealthCareL
   };
 
   const pageTitle = t('HealthCare service list');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
@@ -136,6 +141,6 @@ export const HealthCareList: React.FC<HealthCareListProps> = (props: HealthCareL
         </Col>
         <ViewDetailsWrapper resourceId={resourceId} fhirBaseURL={fhirBaseURL} />
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-healthcare-service/src/components/HealthCareList/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-healthcare-service/src/components/HealthCareList/tests/__snapshots__/index.test.tsx.snap
index 29be8c557..c7dce908d 100644
--- a/packages/fhir-healthcare-service/src/components/HealthCareList/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/fhir-healthcare-service/src/components/HealthCareList/tests/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly when listing resources: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  HealthCare service list
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="HealthCare service list"
+      >
+        HealthCare service list
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly when listing resources: Search 1 page 1 1`] = `
diff --git a/packages/fhir-healthcare-service/src/components/HealthCareList/tests/index.test.tsx b/packages/fhir-healthcare-service/src/components/HealthCareList/tests/index.test.tsx
index e742565bc..6b08a92ca 100644
--- a/packages/fhir-healthcare-service/src/components/HealthCareList/tests/index.test.tsx
+++ b/packages/fhir-healthcare-service/src/components/HealthCareList/tests/index.test.tsx
@@ -123,7 +123,7 @@ test('renders correctly when listing resources', async () => {
 
   await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   document.querySelectorAll('tr').forEach((tr, idx) => {
     tr.querySelectorAll('td').forEach((td) => {
diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx
index d96bff6bc..f1f1f6085 100644
--- a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx
+++ b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx
@@ -14,7 +14,7 @@ import { getTableColumns } from './tableColumns';
 import { useHistory, useLocation, useRouteMatch } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useQuery } from 'react-query';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { getExtraData } from '@onaio/session-reducer';
 import { KeycloakUser } from '@opensrp/user-management';
 import { useSelector } from 'react-redux';
@@ -96,13 +96,18 @@ export const UserList = (props: OrganizationListProps) => {
   };
 
   const title = t('User Management');
+  const headerProps = {
+    pageHeaderProps: {
+      title,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{title}</title>
       </Helmet>
-      <SimplePageHeader title={title} />
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
@@ -117,6 +122,6 @@ export const UserList = (props: OrganizationListProps) => {
           <TableLayout {...tableProps} />
         </Col>
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/__snapshots__/index.test.tsx.snap
index 683c4ba37..ff793ca49 100644
--- a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/__snapshots__/index.test.tsx.snap
@@ -1,19 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`View details navigates correctly: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  User Management
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="User Management"
+      >
+        User Management
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly when listing resources: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  User Management
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="User Management"
+      >
+        User Management
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly when listing resources: Search 1 page 1 1`] = `
diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/index.test.tsx b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/index.test.tsx
index 75fc45839..0296690a3 100644
--- a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/index.test.tsx
+++ b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/tests/index.test.tsx
@@ -145,7 +145,7 @@ test('renders correctly when listing resources', async () => {
     'http://test-keycloak.server.org/users?max=15',
   ]);
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   document.querySelectorAll('tr').forEach((tr, idx) => {
     tr.querySelectorAll('td').forEach((td) => {
@@ -319,7 +319,7 @@ test('View details navigates correctly', async () => {
     expect(spin).toBeNull();
   });
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   // view details
 
diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/Viewdetails/index.tsx b/packages/fhir-keycloak-user-management/src/components/UserList/Viewdetails/index.tsx
index 20ca29e72..1bcf7b706 100644
--- a/packages/fhir-keycloak-user-management/src/components/UserList/Viewdetails/index.tsx
+++ b/packages/fhir-keycloak-user-management/src/components/UserList/Viewdetails/index.tsx
@@ -4,10 +4,10 @@ import { Spin } from 'antd';
 import { useTranslation } from '../../../mls';
 import { useHistory, useParams } from 'react-router';
 import {
+  BodyLayout,
   BrokenPage,
   FHIRServiceClass,
   Resource404,
-  RichPageHeader,
   RichPageHeaderProps,
   getResourcesFromBundle,
 } from '@opensrp/react-utils';
@@ -126,128 +126,116 @@ export const UserDetails = (props: UserDetailProps) => {
   };
 
   return (
-    <div className="details-full-view">
-      <RichPageHeader {...richPageHeaderProps} />
-      <div className="content-body">
-        <div className="content-box" data-testid="user-profile">
-          <PageHeader
-            ghost={false}
-            title={user.username}
-            subTitle={
-              enabled ? (
-                <Tag color="green">{t('Enabled')}</Tag>
-              ) : (
-                <Tag color="green">{t('Disabled')}</Tag>
-              )
-            }
-            extra={[
-              <RbacCheck permissions={['iam_user.delete']} key="user-delete-btn">
-                <UserDeleteBtn
-                  fhirBaseUrl={fhirBaseUrl}
-                  keycloakBaseUrl={keycloakBaseUrl}
-                  resourceId={resourceId}
-                  afterActions={userDeleteAfterAction}
-                />
-              </RbacCheck>,
-              <RbacCheck permissions={['iam_user.update']} key="edit-user">
-                <Button
-                  type="primary"
-                  onClick={() => history.push(`${URL_USER_EDIT}/${resourceId}`)}
-                >
-                  {t('Edit')}
-                </Button>
-              </RbacCheck>,
-            ]}
-          >
+    <BodyLayout headerProps={richPageHeaderProps}>
+      <div className="content-box" data-testid="user-profile">
+        <PageHeader
+          ghost={false}
+          title={user.username}
+          subTitle={
+            enabled ? (
+              <Tag color="green">{t('Enabled')}</Tag>
+            ) : (
+              <Tag color="green">{t('Disabled')}</Tag>
+            )
+          }
+          extra={[
+            <RbacCheck permissions={['iam_user.delete']} key="user-delete-btn">
+              <UserDeleteBtn
+                fhirBaseUrl={fhirBaseUrl}
+                keycloakBaseUrl={keycloakBaseUrl}
+                resourceId={resourceId}
+                afterActions={userDeleteAfterAction}
+              />
+            </RbacCheck>,
+            <RbacCheck permissions={['iam_user.update']} key="edit-user">
+              <Button type="primary" onClick={() => history.push(`${URL_USER_EDIT}/${resourceId}`)}>
+                {t('Edit')}
+              </Button>
+            </RbacCheck>,
+          ]}
+        >
+          <Descriptions size="small" column={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 4 }}>
+            {Object.entries(userDetails).map(([key, value]) => {
+              return (
+                <Descriptions.Item key={key} label={key}>
+                  {value}
+                </Descriptions.Item>
+              );
+            })}
+          </Descriptions>
+          <Divider orientation="center">Attributes</Divider>
+          {attributesArray.length === 0 ? (
+            <Alert message={t('This user does not have any attributes')} type="info" />
+          ) : (
             <Descriptions size="small" column={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 4 }}>
-              {Object.entries(userDetails).map(([key, value]) => {
+              {attributesArray.map(([key, value]) => {
                 return (
                   <Descriptions.Item key={key} label={key}>
-                    {value}
+                    {JSON.stringify(value)}
                   </Descriptions.Item>
                 );
               })}
             </Descriptions>
-            <Divider orientation="center">Attributes</Divider>
-            {attributesArray.length === 0 ? (
-              <Alert message={t('This user does not have any attributes')} type="info" />
-            ) : (
-              <Descriptions size="small" column={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 4 }}>
-                {attributesArray.map(([key, value]) => {
-                  return (
-                    <Descriptions.Item key={key} label={key}>
-                      {JSON.stringify(value)}
-                    </Descriptions.Item>
-                  );
-                })}
-              </Descriptions>
-            )}
-          </PageHeader>
-        </div>
-        <RbacCheck permissions={['PractitionerDetail.read']}>
-          <div className="details-tab">
-            <Tabs
-              defaultActiveKey="1"
-              size={'small'}
-              items={[
-                {
-                  label: t('User groups'),
-                  key: 'Groups',
-                  children: (
-                    <KeycloakGroupDetails
-                      keycloakBaseUrl={keycloakBaseUrl}
-                      resourceId={resourceId}
-                    />
-                  ),
-                },
-                {
-                  label: t('User roles'),
-                  key: 'Roles',
-                  children: (
-                    <KeycloakRoleDetails
-                      keycloakBaseUrl={keycloakBaseUrl}
-                      resourceId={resourceId}
-                    />
-                  ),
-                },
-                {
-                  label: t('Practitioners'),
-                  key: 'Practitioners',
-                  children: (
-                    <PractitionerDetailsView
-                      loading={detailsLoading}
-                      practitionerDetails={practDetailsByResName}
-                      error={detailsError}
-                    />
-                  ),
-                },
-                {
-                  label: t('CareTeams'),
-                  key: 'CareTeams',
-                  children: (
-                    <CareTeamDetailsView
-                      loading={detailsLoading}
-                      practitionerDetails={practDetailsByResName}
-                      error={detailsError}
-                    />
-                  ),
-                },
-                {
-                  label: t('Organizations'),
-                  key: 'Organizations',
-                  children: (
-                    <OrganizationDetailsView
-                      loading={detailsLoading}
-                      practitionerDetails={practDetailsByResName}
-                      error={detailsError}
-                    />
-                  ),
-                },
-              ]}
-            />
-          </div>
-        </RbacCheck>
+          )}
+        </PageHeader>
       </div>
-    </div>
+      <RbacCheck permissions={['PractitionerDetail.read']}>
+        <div className="details-tab">
+          <Tabs
+            defaultActiveKey="1"
+            size={'small'}
+            items={[
+              {
+                label: t('User groups'),
+                key: 'Groups',
+                children: (
+                  <KeycloakGroupDetails keycloakBaseUrl={keycloakBaseUrl} resourceId={resourceId} />
+                ),
+              },
+              {
+                label: t('User roles'),
+                key: 'Roles',
+                children: (
+                  <KeycloakRoleDetails keycloakBaseUrl={keycloakBaseUrl} resourceId={resourceId} />
+                ),
+              },
+              {
+                label: t('Practitioners'),
+                key: 'Practitioners',
+                children: (
+                  <PractitionerDetailsView
+                    loading={detailsLoading}
+                    practitionerDetails={practDetailsByResName}
+                    error={detailsError}
+                  />
+                ),
+              },
+              {
+                label: t('CareTeams'),
+                key: 'CareTeams',
+                children: (
+                  <CareTeamDetailsView
+                    loading={detailsLoading}
+                    practitionerDetails={practDetailsByResName}
+                    error={detailsError}
+                  />
+                ),
+              },
+              {
+                label: t('Organizations'),
+                key: 'Organizations',
+                children: (
+                  <OrganizationDetailsView
+                    loading={detailsLoading}
+                    practitionerDetails={practDetailsByResName}
+                    error={detailsError}
+                  />
+                ),
+              },
+            ]}
+          />
+        </div>
+      </RbacCheck>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx b/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx
index 3a39e0456..96c71e408 100644
--- a/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx
+++ b/packages/fhir-location-management/src/components/AddEditLocationUnit/base.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { RouteComponentProps, useHistory, useLocation, useParams } from 'react-router';
 import { LocationFormProps, LocationForm } from '../LocationForm';
 import { defaultValidationRulesFactory, getLocationFormFields } from '../LocationForm/utils';
-import { Row, Col, Spin } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { Col, Spin } from 'antd';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Helmet } from 'react-helmet';
 import { BrokenPage, Resource404 } from '@opensrp/react-utils';
 import { useGetLocation, useGetLocationHierarchy } from '../../helpers/utils';
@@ -100,16 +100,21 @@ export const BaseNewEditLocationUnit = (props: BaseNewEditLocationUnitProps) =>
   const pageTitle = locData
     ? t('Edit > {{name}}', { name: initialValues.name })
     : t('Add Location Unit');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <Row className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <Col className="bg-white p-4" span={24}>
         <LocationForm {...locationFormProps} />
       </Col>
-    </Row>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-location-management/src/components/AllLocationListFlat/base.tsx b/packages/fhir-location-management/src/components/AllLocationListFlat/base.tsx
index 2456064e0..d04d040ed 100644
--- a/packages/fhir-location-management/src/components/AllLocationListFlat/base.tsx
+++ b/packages/fhir-location-management/src/components/AllLocationListFlat/base.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode, useMemo } from 'react';
 import { useSimpleTabularView, NoData, Column } from '@opensrp/react-utils';
 import { RouteComponentProps } from 'react-router';
 import { locationResourceType } from '../../constants';
-import { BrokenPage, TableLayout, SimplePageHeader, SearchForm } from '@opensrp/react-utils';
+import { BrokenPage, TableLayout, BodyLayout, SearchForm } from '@opensrp/react-utils';
 import { Helmet } from 'react-helmet';
 import { useMls } from '../../mls';
 import { Row, Col } from 'antd';
@@ -85,13 +85,18 @@ export const BaseAllLocationListFlat: React.FC<BaseAllLocationListFlatProps> = (
     pagination: tablePaginationProps,
     locale: getTableLocale(),
   };
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div id="all-locations" className="content-section">
+    <BodyLayout headerProps={headerProps} id="all-locations">
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
@@ -101,6 +106,6 @@ export const BaseAllLocationListFlat: React.FC<BaseAllLocationListFlatProps> = (
           <TableLayout {...tableProps} />
         </Col>
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-location-management/src/components/LocationUnitList/index.tsx b/packages/fhir-location-management/src/components/LocationUnitList/index.tsx
index c67fd70bc..4d94532e3 100644
--- a/packages/fhir-location-management/src/components/LocationUnitList/index.tsx
+++ b/packages/fhir-location-management/src/components/LocationUnitList/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { get } from 'lodash';
 import { Row, Col, Button, Spin, Alert } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { PlusOutlined } from '@ant-design/icons';
 import { useHistory } from 'react-router-dom';
 import { BrokenPage, Resource404 } from '@opensrp/react-utils';
@@ -114,6 +114,12 @@ export const LocationUnitList: React.FC<LocationUnitListProps> = (props: Locatio
   }
   const tableDispData = parseTableData(tableNodes);
   const pageTitle = t('Location Unit Management');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
     <>
@@ -128,11 +134,10 @@ export const LocationUnitList: React.FC<LocationUnitListProps> = (props: Locatio
           showIcon
         />
       )}
-      <section className="content-section">
+      <BodyLayout headerProps={headerProps}>
         <Helmet>
           <title>{pageTitle}</title>
         </Helmet>
-        <SimplePageHeader title={pageTitle} />
         <Row>
           <Col className="bg-white p-3" span={6}>
             <Tree
@@ -174,7 +179,7 @@ export const LocationUnitList: React.FC<LocationUnitListProps> = (props: Locatio
             </div>
           </Col>
         </Row>
-      </section>
+      </BodyLayout>
     </>
   );
 };
diff --git a/packages/fhir-location-management/src/components/RootLocationWizard/index.tsx b/packages/fhir-location-management/src/components/RootLocationWizard/index.tsx
index 93a8e8555..336f15d2e 100644
--- a/packages/fhir-location-management/src/components/RootLocationWizard/index.tsx
+++ b/packages/fhir-location-management/src/components/RootLocationWizard/index.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { Alert, Button, Card, Col, Popconfirm, Row, Space, Spin, Typography } from 'antd';
 import { Helmet } from 'react-helmet';
-import { SimplePageHeader, loadAllResources } from '@opensrp/react-utils';
+import { BodyLayout, loadAllResources } from '@opensrp/react-utils';
 import { useMls } from '../../mls';
 import { URL_LOCATION_UNIT, locationResourceType } from '../../constants';
 import { useHistory } from 'react-router';
@@ -43,13 +43,18 @@ export const RootLocationWizard = (props: RootLocationWizardProps) => {
   );
 
   const pageTitle = t('Location Unit Management');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
 
       <Row className="list-view">
         <Col className="main-content">
@@ -70,7 +75,7 @@ export const RootLocationWizard = (props: RootLocationWizardProps) => {
           </Card>
         </Col>
       </Row>
-    </section>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/fhir-location-management/src/components/ViewDetails/index.tsx b/packages/fhir-location-management/src/components/ViewDetails/index.tsx
index 33e5b7de0..14308add6 100644
--- a/packages/fhir-location-management/src/components/ViewDetails/index.tsx
+++ b/packages/fhir-location-management/src/components/ViewDetails/index.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { useQuery } from 'react-query';
 import { useParams } from 'react-router';
-import { BrokenPage, SimplePageHeader, Resource404 } from '@opensrp/react-utils';
+import { BrokenPage, BodyLayout, Resource404 } from '@opensrp/react-utils';
 import { Spin } from 'antd';
 import { ViewDetailsTabs } from './DetailsTabs';
 import { getLocationsAncestors } from './utils';
@@ -49,13 +49,18 @@ export const ViewDetails = (props: ViewDetailsProps) => {
   const normalizedData = data;
   const theInterestingLoc = normalizedData[normalizedData.length - 1];
   const pageTitle = t(`View details | {{locName}}`, { locName: theInterestingLoc.name });
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle} </title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <div
         style={{
           display: 'flex',
@@ -71,6 +76,6 @@ export const ViewDetails = (props: ViewDetailsProps) => {
         <LocationDetails location={theInterestingLoc} />
         <ViewDetailsTabs fhirBaseUrl={fhirBaseURL} location={theInterestingLoc} />
       </div>
-    </section>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-team-management/src/components/AddEditOrganization/index.tsx b/packages/fhir-team-management/src/components/AddEditOrganization/index.tsx
index aa35dc5e8..9be0c1200 100644
--- a/packages/fhir-team-management/src/components/AddEditOrganization/index.tsx
+++ b/packages/fhir-team-management/src/components/AddEditOrganization/index.tsx
@@ -10,7 +10,7 @@ import {
 } from '../../constants';
 import { sendErrorNotification } from '@opensrp/notifications';
 import { Spin } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { useQuery } from 'react-query';
 import {
   FHIRServiceClass,
@@ -99,13 +99,18 @@ export const AddEditOrganization = (props: AddEditOrganizationProps) => {
   const pageTitle = organization.data
     ? t('Edit team | {{teamName}}', { teamName: organization.data.name ?? '' })
     : t('Create team');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <div className="bg-white p-5">
         <OrganizationForm
           fhirBaseUrl={fhirBaseUrl}
@@ -118,7 +123,7 @@ export const AddEditOrganization = (props: AddEditOrganizationProps) => {
           configuredPractAssignmentStrategy={configuredPractAssignmentStrategy}
         />
       </div>
-    </section>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/fhir-team-management/src/components/OrganizationAffiliation/index.tsx b/packages/fhir-team-management/src/components/OrganizationAffiliation/index.tsx
index 9c810f912..7f11878d8 100644
--- a/packages/fhir-team-management/src/components/OrganizationAffiliation/index.tsx
+++ b/packages/fhir-team-management/src/components/OrganizationAffiliation/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Row, Col, Spin } from 'antd';
 import { BrokenPage, Resource404 } from '@opensrp/react-utils';
 import AffiliationTable from './Table';
@@ -63,12 +63,17 @@ export const AffiliationList: React.FC<LocationUnitListProps> = (props: Location
   }
 
   const pageTitle = t('Team Assignment');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <Row>
         <Col className="bg-white p-3" span={6}>
           <Tree
@@ -88,6 +93,6 @@ export const AffiliationList: React.FC<LocationUnitListProps> = (props: Location
           </div>
         </Col>
       </Row>
-    </section>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-team-management/src/components/OrganizationList/ListView/index.tsx b/packages/fhir-team-management/src/components/OrganizationList/ListView/index.tsx
index e9d5100a0..08c8e0d0b 100644
--- a/packages/fhir-team-management/src/components/OrganizationList/ListView/index.tsx
+++ b/packages/fhir-team-management/src/components/OrganizationList/ListView/index.tsx
@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Row, Col, Button, Divider, Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
@@ -115,12 +115,17 @@ export const OrganizationList = (props: OrganizationListProps) => {
   };
 
   const pageTitle = t('Organization list');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
 
       <Row className="list-view">
         <Col className="main-content">
@@ -137,6 +142,6 @@ export const OrganizationList = (props: OrganizationListProps) => {
         </Col>
         <ViewDetailsWrapper resourceId={resourceId} fhirBaseURL={fhirBaseURL} />
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/__snapshots__/index.test.tsx.snap
index e3bcb211a..ae4eb5df9 100644
--- a/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly when listing organizations: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  Organization list
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="Organization list"
+      >
+        Organization list
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly when listing organizations: Search 1 page 1 1`] = `
diff --git a/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/index.test.tsx b/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/index.test.tsx
index d822e04ed..257a54d0e 100644
--- a/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/index.test.tsx
+++ b/packages/fhir-team-management/src/components/OrganizationList/ListView/tests/index.test.tsx
@@ -146,7 +146,7 @@ test('renders correctly when listing organizations', async () => {
     </title>
   `);
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   document.querySelectorAll('tr').forEach((tr, idx) => {
     tr.querySelectorAll('td').forEach((td) => {
diff --git a/packages/fhir-views/src/QuestionnaireList/index.tsx b/packages/fhir-views/src/QuestionnaireList/index.tsx
index 568178918..3a345557c 100644
--- a/packages/fhir-views/src/QuestionnaireList/index.tsx
+++ b/packages/fhir-views/src/QuestionnaireList/index.tsx
@@ -9,7 +9,7 @@ import {
 import { Column } from '@opensrp/react-utils';
 import { IQuestionnaire } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IQuestionnaire';
 import { useSimpleTabularView } from '@opensrp/react-utils';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Row, Col, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { Helmet } from 'react-helmet';
@@ -128,13 +128,18 @@ const QuestionnaireList = (props: QuestionnaireListProps) => {
     return <BrokenPage errorMessage={(error as Error).message} />;
   }
   const pageTitle = t('Questionnaire list view');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section fhir-resource-container">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
 
       <Row className="list-view">
         <Col className="main-content">
@@ -150,7 +155,7 @@ const QuestionnaireList = (props: QuestionnaireListProps) => {
           <TableLayout {...tableProps} />
         </Col>
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx b/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx
index e5c82a0ca..b6d1e767b 100644
--- a/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx
+++ b/packages/keycloak-user-management/src/components/CreateEditUserGroup/Form.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import { Button, Col, Row, Form, Input, Transfer } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import reducerRegistry from '@onaio/redux-reducer-registry';
 import { sendErrorNotification } from '@opensrp/notifications';
 import { URL_USER_GROUPS } from '../../constants';
@@ -152,78 +152,87 @@ const UserGroupForm: React.FC<UserGroupFormProps> = (props: UserGroupFormProps)
   }));
 
   const { name } = initialValues;
+  const pageTitle = props.initialValues.id
+    ? t('Edit User Group | {{name}}', { name })
+    : t('New User Group');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <Row className="content-section user-group">
-      {/** If email is provided render edit group otherwise add group */}
-      <SimplePageHeader
-        title={
-          props.initialValues.id ? t('Edit User Group | {{name}}', { name }) : t('New User Group')
-        }
-      />
-      <Col className="bg-white p-3" span={24}>
-        <Form
-          {...layout}
-          form={form}
-          initialValues={{
-            ...initialValues,
-          }}
-          onFinish={(values: KeycloakUserGroup & { roles?: string[] }) => {
-            // remove roles array from payload
-            delete values.roles;
-            setIsSubmitting(true);
-            submitForm({ ...initialValues, ...values }, keycloakBaseURL, setIsSubmitting, t).catch(
-              () => sendErrorNotification(t('There was a problem submitting the form'))
-            );
-          }}
-        >
-          <Form.Item
-            name="name"
-            id="name"
-            label={t('Name')}
-            rules={[{ required: true, message: t('Name is required') }]}
+    <BodyLayout headerProps={headerProps}>
+      <Row className="content-section user-group">
+        {/** If email is provided render edit group otherwise add group */}
+        <Col className="bg-white p-3" span={24}>
+          <Form
+            {...layout}
+            form={form}
+            initialValues={{
+              ...initialValues,
+            }}
+            onFinish={(values: KeycloakUserGroup & { roles?: string[] }) => {
+              // remove roles array from payload
+              delete values.roles;
+              setIsSubmitting(true);
+              submitForm(
+                { ...initialValues, ...values },
+                keycloakBaseURL,
+                setIsSubmitting,
+                t
+              ).catch(() => sendErrorNotification(t('There was a problem submitting the form')));
+            }}
           >
-            <Input />
-          </Form.Item>
-          {initialValues.id ? (
-            <Form.Item name="roles" id="roles" label={t('Realm Roles')}>
-              <Transfer
-                dataSource={data}
-                titles={[t('Available Roles'), t('Assigned Roles')]}
-                listStyle={{
-                  minWidth: 300,
-                  minHeight: 300,
-                }}
-                targetKeys={
-                  targetKeys.length
-                    ? targetKeys
-                    : assignedRoles.map((role: KeycloakUserRole) => role.id)
-                }
-                selectedKeys={[...sourceSelectedKeys, ...targetSelectedKeys]}
-                render={(item) => <div>{item.title}</div>}
-                disabled={false}
-                onChange={onChange}
-                onSelectChange={onSelectChange}
-                locale={{
-                  notFoundContent: t('The list is empty'),
-                  searchPlaceholder: t('Search'),
-                }}
-              />
+            <Form.Item
+              name="name"
+              id="name"
+              label={t('Name')}
+              rules={[{ required: true, message: t('Name is required') }]}
+            >
+              <Input />
+            </Form.Item>
+            {initialValues.id ? (
+              <Form.Item name="roles" id="roles" label={t('Realm Roles')}>
+                <Transfer
+                  dataSource={data}
+                  titles={[t('Available Roles'), t('Assigned Roles')]}
+                  listStyle={{
+                    minWidth: 300,
+                    minHeight: 300,
+                  }}
+                  targetKeys={
+                    targetKeys.length
+                      ? targetKeys
+                      : assignedRoles.map((role: KeycloakUserRole) => role.id)
+                  }
+                  selectedKeys={[...sourceSelectedKeys, ...targetSelectedKeys]}
+                  render={(item) => <div>{item.title}</div>}
+                  disabled={false}
+                  onChange={onChange}
+                  onSelectChange={onSelectChange}
+                  locale={{
+                    notFoundContent: t('The list is empty'),
+                    searchPlaceholder: t('Search'),
+                  }}
+                />
+              </Form.Item>
+            ) : (
+              ''
+            )}
+            <Form.Item {...tailLayout}>
+              <Button type="primary" htmlType="submit" className="create-group">
+                {isSubmitting ? t('Saving') : t('Save')}
+              </Button>
+              <Button onClick={() => history.push(URL_USER_GROUPS)} className="cancel-group">
+                {t('Cancel')}
+              </Button>
             </Form.Item>
-          ) : (
-            ''
-          )}
-          <Form.Item {...tailLayout}>
-            <Button type="primary" htmlType="submit" className="create-group">
-              {isSubmitting ? t('Saving') : t('Save')}
-            </Button>
-            <Button onClick={() => history.push(URL_USER_GROUPS)} className="cancel-group">
-              {t('Cancel')}
-            </Button>
-          </Form.Item>
-        </Form>
-      </Col>
-    </Row>
+          </Form>
+        </Col>
+      </Row>
+    </BodyLayout>
   );
 };
 UserGroupForm.defaultProps = defaultProps;
diff --git a/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/Form.test.tsx b/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/Form.test.tsx
index dff9f8269..76fbe1d10 100644
--- a/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/Form.test.tsx
+++ b/packages/keycloak-user-management/src/components/CreateEditUserGroup/tests/Form.test.tsx
@@ -58,7 +58,7 @@ describe('components/forms/UserFroupForm', () => {
 
   it('renders correctly', async () => {
     const wrapper = mount(<UserGroupForm {...props} />);
-    expect(wrapper.find('Row').at(0).text()).toMatchSnapshot();
+    expect(wrapper.find('div').at(0).text()).toMatchSnapshot();
     wrapper.unmount();
   });
 
@@ -243,7 +243,7 @@ describe('components/forms/UserFroupForm', () => {
       wrapper.update();
     });
 
-    expect(wrapper.find('SimplePageHeader').text()).toMatchInlineSnapshot(
+    expect(wrapper.find('RichPageHeader').text()).toMatchInlineSnapshot(
       `"Edit User Group | Admin"`
     );
     wrapper.unmount();
diff --git a/packages/keycloak-user-management/src/components/Credentials/index.tsx b/packages/keycloak-user-management/src/components/Credentials/index.tsx
index 02ccc5e63..7e933fb19 100644
--- a/packages/keycloak-user-management/src/components/Credentials/index.tsx
+++ b/packages/keycloak-user-management/src/components/Credentials/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Form, Col, Row, Input } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { RouteComponentProps, useHistory } from 'react-router';
 import reducerRegistry from '@onaio/redux-reducer-registry';
 import { KeycloakService, HTTPError } from '@opensrp/keycloak-service';
@@ -129,66 +129,73 @@ const UserCredentials: React.FC<CredentialsPropsTypes> = (props: CredentialsProp
   };
   const history = useHistory();
   const heading = `${t('User Credentials')} | ${username}`;
+  const headerProps = {
+    pageHeaderProps: {
+      title: heading,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <Row className="content-section">
-      <SimplePageHeader title={heading} />
-      <Col className="bg-white p-3" span={24}>
-        <div className="form-container">
-          <Form
-            {...layout}
-            onFinish={(values: UserCredentialsFormFields) =>
-              submitForm(values, userId, serviceClass, keycloakBaseURL, t)
-            }
-          >
-            <Form.Item
-              name="password"
-              label={t('Password')}
-              rules={[
-                {
-                  required: true,
-                  message: t('Password is required'),
-                },
-              ]}
-              hasFeedback
+    <BodyLayout headerProps={headerProps}>
+      <Row>
+        <Col className="bg-white p-3" span={24}>
+          <div className="form-container">
+            <Form
+              {...layout}
+              onFinish={(values: UserCredentialsFormFields) =>
+                submitForm(values, userId, serviceClass, keycloakBaseURL, t)
+              }
             >
-              <Input.Password />
-            </Form.Item>
+              <Form.Item
+                name="password"
+                label={t('Password')}
+                rules={[
+                  {
+                    required: true,
+                    message: t('Password is required'),
+                  },
+                ]}
+                hasFeedback
+              >
+                <Input.Password />
+              </Form.Item>
 
-            <Form.Item
-              name="confirm"
-              label={t('Confirm Password')}
-              dependencies={['password']}
-              hasFeedback
-              rules={[
-                {
-                  required: true,
-                  message: t('Confirm Password is required'),
-                },
-                ({ getFieldValue }) => ({
-                  validator(rule, value) {
-                    if (!value || getFieldValue('password') === value) {
-                      return Promise.resolve();
-                    }
-                    return Promise.reject(t('The two passwords that you entered do not match!'));
+              <Form.Item
+                name="confirm"
+                label={t('Confirm Password')}
+                dependencies={['password']}
+                hasFeedback
+                rules={[
+                  {
+                    required: true,
+                    message: t('Confirm Password is required'),
                   },
-                }),
-              ]}
-            >
-              <Input.Password />
-            </Form.Item>
-            <Form.Item {...tailLayout}>
-              <Button type="primary" htmlType="submit" className="reset-password">
-                {t('Set password')}
-              </Button>
-              <Button onClick={() => props.cancelUserHandler(history)} className="cancel-user">
-                {t('Cancel')}
-              </Button>
-            </Form.Item>
-          </Form>
-        </div>
-      </Col>
-    </Row>
+                  ({ getFieldValue }) => ({
+                    validator(rule, value) {
+                      if (!value || getFieldValue('password') === value) {
+                        return Promise.resolve();
+                      }
+                      return Promise.reject(t('The two passwords that you entered do not match!'));
+                    },
+                  }),
+                ]}
+              >
+                <Input.Password />
+              </Form.Item>
+              <Form.Item {...tailLayout}>
+                <Button type="primary" htmlType="submit" className="reset-password">
+                  {t('Set password')}
+                </Button>
+                <Button onClick={() => props.cancelUserHandler(history)} className="cancel-user">
+                  {t('Cancel')}
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
+        </Col>
+      </Row>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/keycloak-user-management/src/components/Credentials/tests/__snapshots__/index.test.tsx.snap b/packages/keycloak-user-management/src/components/Credentials/tests/__snapshots__/index.test.tsx.snap
index 2169f0729..43d399a55 100644
--- a/packages/keycloak-user-management/src/components/Credentials/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/keycloak-user-management/src/components/Credentials/tests/__snapshots__/index.test.tsx.snap
@@ -3,131 +3,142 @@
 exports[`components/Credentials renders correctly: row props 1`] = `
 Object {
   "children": Array [
-    <SimplePageHeader
-      title="User Credentials | opensrp"
+    <RichPageHeader
+      pageHeaderProps={
+        Object {
+          "onBack": undefined,
+          "title": "User Credentials | opensrp",
+        }
+      }
     />,
-    <Col
-      className="bg-white p-3"
-      span={24}
+    <div
+      className="content-body"
     >
-      <div
-        className="form-container"
-      >
-        <ForwardRef(InternalForm)
-          labelCol={
-            Object {
-              "lg": Object {
-                "offset": 0,
-                "span": 8,
-              },
-              "md": Object {
-                "offset": 0,
-                "span": 12,
-              },
-              "sm": Object {
-                "offset": 2,
-                "span": 10,
-              },
-              "xs": Object {
-                "offset": 0,
-                "span": 16,
-              },
-            }
-          }
-          onFinish={[Function]}
-          wrapperCol={
-            Object {
-              "lg": Object {
-                "span": 10,
-              },
-              "md": Object {
-                "span": 12,
-              },
-              "sm": Object {
-                "span": 14,
-              },
-              "xs": Object {
-                "span": 24,
-              },
-            }
-          }
+      <Row>
+        <Col
+          className="bg-white p-3"
+          span={24}
         >
-          <InternalFormItem
-            hasFeedback={true}
-            label="Password"
-            name="password"
-            rules={
-              Array [
-                Object {
-                  "message": "Password is required",
-                  "required": true,
-                },
-              ]
-            }
+          <div
+            className="form-container"
           >
-            <Password />
-          </InternalFormItem>
-          <InternalFormItem
-            dependencies={
-              Array [
-                "password",
-              ]
-            }
-            hasFeedback={true}
-            label="Confirm Password"
-            name="confirm"
-            rules={
-              Array [
+            <ForwardRef(InternalForm)
+              labelCol={
                 Object {
-                  "message": "Confirm Password is required",
-                  "required": true,
-                },
-                [Function],
-              ]
-            }
-          >
-            <Password />
-          </InternalFormItem>
-          <InternalFormItem
-            wrapperCol={
-              Object {
-                "lg": Object {
-                  "offset": 8,
-                  "span": 14,
-                },
-                "md": Object {
-                  "offset": 10,
-                  "span": 16,
-                },
-                "sm": Object {
-                  "offset": 12,
-                  "span": 24,
-                },
-                "xs": Object {
-                  "offset": 0,
-                  "span": 16,
-                },
+                  "lg": Object {
+                    "offset": 0,
+                    "span": 8,
+                  },
+                  "md": Object {
+                    "offset": 0,
+                    "span": 12,
+                  },
+                  "sm": Object {
+                    "offset": 2,
+                    "span": 10,
+                  },
+                  "xs": Object {
+                    "offset": 0,
+                    "span": 16,
+                  },
+                }
+              }
+              onFinish={[Function]}
+              wrapperCol={
+                Object {
+                  "lg": Object {
+                    "span": 10,
+                  },
+                  "md": Object {
+                    "span": 12,
+                  },
+                  "sm": Object {
+                    "span": 14,
+                  },
+                  "xs": Object {
+                    "span": 24,
+                  },
+                }
               }
-            }
-          >
-            <Button
-              className="reset-password"
-              htmlType="submit"
-              type="primary"
-            >
-              Set password
-            </Button>
-            <Button
-              className="cancel-user"
-              onClick={[Function]}
             >
-              Cancel
-            </Button>
-          </InternalFormItem>
-        </ForwardRef(InternalForm)>
-      </div>
-    </Col>,
+              <InternalFormItem
+                hasFeedback={true}
+                label="Password"
+                name="password"
+                rules={
+                  Array [
+                    Object {
+                      "message": "Password is required",
+                      "required": true,
+                    },
+                  ]
+                }
+              >
+                <Password />
+              </InternalFormItem>
+              <InternalFormItem
+                dependencies={
+                  Array [
+                    "password",
+                  ]
+                }
+                hasFeedback={true}
+                label="Confirm Password"
+                name="confirm"
+                rules={
+                  Array [
+                    Object {
+                      "message": "Confirm Password is required",
+                      "required": true,
+                    },
+                    [Function],
+                  ]
+                }
+              >
+                <Password />
+              </InternalFormItem>
+              <InternalFormItem
+                wrapperCol={
+                  Object {
+                    "lg": Object {
+                      "offset": 8,
+                      "span": 14,
+                    },
+                    "md": Object {
+                      "offset": 10,
+                      "span": 16,
+                    },
+                    "sm": Object {
+                      "offset": 12,
+                      "span": 24,
+                    },
+                    "xs": Object {
+                      "offset": 0,
+                      "span": 16,
+                    },
+                  }
+                }
+              >
+                <Button
+                  className="reset-password"
+                  htmlType="submit"
+                  type="primary"
+                >
+                  Set password
+                </Button>
+                <Button
+                  className="cancel-user"
+                  onClick={[Function]}
+                >
+                  Cancel
+                </Button>
+              </InternalFormItem>
+            </ForwardRef(InternalForm)>
+          </div>
+        </Col>
+      </Row>
+    </div>,
   ],
-  "className": "content-section",
+  "className": "details-full-view",
 }
 `;
diff --git a/packages/keycloak-user-management/src/components/Credentials/tests/index.test.tsx b/packages/keycloak-user-management/src/components/Credentials/tests/index.test.tsx
index d6f3269a1..d82d7f012 100644
--- a/packages/keycloak-user-management/src/components/Credentials/tests/index.test.tsx
+++ b/packages/keycloak-user-management/src/components/Credentials/tests/index.test.tsx
@@ -119,7 +119,7 @@ describe('components/Credentials', () => {
         <AppWrapper {...props} />
       </Router>
     );
-    expect(wrapper.find('Row').at(0).props()).toMatchSnapshot('row props');
+    expect(wrapper.find('div').at(0).props()).toMatchSnapshot('row props');
     wrapper.unmount();
   });
 
diff --git a/packages/keycloak-user-management/src/components/UserGroupsList/index.tsx b/packages/keycloak-user-management/src/components/UserGroupsList/index.tsx
index 292a8c487..024b17a66 100644
--- a/packages/keycloak-user-management/src/components/UserGroupsList/index.tsx
+++ b/packages/keycloak-user-management/src/components/UserGroupsList/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Row, Col, Button, Spin, Divider, Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
 import { Link } from 'react-router-dom';
@@ -184,13 +184,19 @@ export const UserGroupsList: React.FC<UserGroupListTypes> = (props: UserGroupLis
       ),
     },
   ];
+  const pageTitle = t('User Groups');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
-        <title>{t('User Groups')}</title>
+        <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={t('User Groups')} />
       <Row className="list-view">
         <Col className={'main-content'}>
           <div className="main-content__header">
@@ -249,7 +255,7 @@ export const UserGroupsList: React.FC<UserGroupListTypes> = (props: UserGroupLis
           </Col>
         ) : null}
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/keycloak-user-management/src/components/UserList/index.tsx b/packages/keycloak-user-management/src/components/UserList/index.tsx
index 3bb437010..58994467a 100644
--- a/packages/keycloak-user-management/src/components/UserList/index.tsx
+++ b/packages/keycloak-user-management/src/components/UserList/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Row, Col, Button, Space } from 'antd';
 import { KeycloakService } from '@opensrp/keycloak-service';
 import { Store } from 'redux';
@@ -178,10 +178,16 @@ const UserList = (props: UserListTypes): JSX.Element => {
     setUserDetails(null);
     setOpenDetails(false);
   };
+  const pageTitle = t('User Management');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
-      <SimplePageHeader title={t('User Management')} />
+    <BodyLayout headerProps={headerProps}>
       <Row className="list-view">
         <Col className="main-content" span={openDetails ? 19 : 24}>
           <div className="main-content__header">
@@ -255,7 +261,7 @@ const UserList = (props: UserListTypes): JSX.Element => {
           </Col>
         ) : null}
       </Row>
-    </section>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/keycloak-user-management/src/components/UserRolesList/index.tsx b/packages/keycloak-user-management/src/components/UserRolesList/index.tsx
index dc6420341..feada5d83 100644
--- a/packages/keycloak-user-management/src/components/UserRolesList/index.tsx
+++ b/packages/keycloak-user-management/src/components/UserRolesList/index.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Spin } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { RouteComponentProps } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
 import reducerRegistry from '@onaio/redux-reducer-registry';
@@ -97,12 +97,17 @@ export const UserRolesList: React.FC<Props & RouteComponentProps> = (
   ];
 
   const pageTitle = t('User roles');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
@@ -116,7 +121,7 @@ export const UserRolesList: React.FC<Props & RouteComponentProps> = (
           />
         </Col>
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/keycloak-user-management/src/components/forms/UserForm/index.tsx b/packages/keycloak-user-management/src/components/forms/UserForm/index.tsx
index 76ff5c0a7..b38c3b2bc 100644
--- a/packages/keycloak-user-management/src/components/forms/UserForm/index.tsx
+++ b/packages/keycloak-user-management/src/components/forms/UserForm/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, FC } from 'react';
 import { useHistory } from 'react-router';
 import { Button, Col, Row, Form, Select, Input, Radio } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import {
   compositionUrlFilter,
   getCompositionOptions,
@@ -101,170 +101,174 @@ const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
       ]);
     }
   }, [form, initialValues, userEnabled]);
+  const pageTitle = props.initialValues.id
+    ? t('Edit User | {{username}}', { username: initialValues.username })
+    : t('Add User');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <Row className="content-section">
-      {/** If email is provided render edit user otherwise add user */}
-      <SimplePageHeader
-        title={
-          props.initialValues.id
-            ? t('Edit User | {{username}}', { username: initialValues.username })
-            : t('Add User')
-        }
-      />
-      <Col className="bg-white p-3" span={24}>
-        <Form
-          {...layout}
-          form={form}
-          initialValues={initialValues}
-          onFinish={(values) => {
-            setSubmitting(true);
-            submitForm(
-              { ...initialValues, ...values },
-              keycloakBaseURL,
-              userGroups,
-              initialValues.userGroups as string[],
-              practitionerUpdater,
-              t
-            )
-              .catch((_: Error) => {
-                if (props.initialValues.id) {
-                  sendErrorNotification(t('There was a problem updating user details'));
-                }
-                sendErrorNotification(t('There was a problem creating User'));
-              })
-              .finally(() => setSubmitting(false));
-          }}
-        >
-          <Form.Item
-            name="firstName"
-            id="firstName"
-            label={t('First Name')}
-            rules={[{ required: true, message: t('First Name is required') }]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            name="lastName"
-            id="lastName"
-            label={t('Last Name')}
-            rules={[{ required: true, message: t('Last Name is required') }]}
+    <BodyLayout headerProps={headerProps}>
+      <Row>
+        {/** If email is provided render edit user otherwise add user */}
+        <Col className="bg-white p-3" span={24}>
+          <Form
+            {...layout}
+            form={form}
+            initialValues={initialValues}
+            onFinish={(values) => {
+              setSubmitting(true);
+              submitForm(
+                { ...initialValues, ...values },
+                keycloakBaseURL,
+                userGroups,
+                initialValues.userGroups as string[],
+                practitionerUpdater,
+                t
+              )
+                .catch((_: Error) => {
+                  if (props.initialValues.id) {
+                    sendErrorNotification(t('There was a problem updating user details'));
+                  }
+                  sendErrorNotification(t('There was a problem creating User'));
+                })
+                .finally(() => setSubmitting(false));
+            }}
           >
-            <Input />
-          </Form.Item>
-          <Form.Item name="email" id="email" label={t('Email')}>
-            <Input />
-          </Form.Item>
-          <Form.Item
-            name="username"
-            id="username"
-            label={t('Username')}
-            rules={[{ required: true, message: t('Username is required') }]}
-          >
-            <Input disabled={initialValues.id ? true : false} />
-          </Form.Item>
-
-          {shouldRender(CONTACT_FORM_FIELD) ? (
             <Form.Item
-              id={CONTACT_FORM_FIELD}
-              rules={[
-                {
-                  type: 'string',
-                  pattern: /^0\d{9}$/,
-                  message: t('Contact should be 10 digits and start with 0'),
-                },
-                {
-                  required: !isHidden(CONTACT_FORM_FIELD),
-                  message: t('Contact is required'),
-                },
-              ]}
-              hidden={isHidden(CONTACT_FORM_FIELD)}
-              name={CONTACT_FORM_FIELD}
-              label={t('Contact')}
+              name="firstName"
+              id="firstName"
+              label={t('First Name')}
+              rules={[{ required: true, message: t('First Name is required') }]}
             >
-              <Input></Input>
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="lastName"
+              id="lastName"
+              label={t('Last Name')}
+              rules={[{ required: true, message: t('Last Name is required') }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item name="email" id="email" label={t('Email')}>
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="username"
+              id="username"
+              label={t('Username')}
+              rules={[{ required: true, message: t('Username is required') }]}
+            >
+              <Input disabled={initialValues.id ? true : false} />
             </Form.Item>
-          ) : null}
 
-          {isFHIRInstance ? (
-            <Form.Item id="userType" name="userType" label={t('User Type')}>
-              <Radio.Group
-                options={[
-                  { label: t('Practitioner'), value: PRACTITIONER },
-                  { label: t('Supervisor'), value: SUPERVISOR },
+            {shouldRender(CONTACT_FORM_FIELD) ? (
+              <Form.Item
+                id={CONTACT_FORM_FIELD}
+                rules={[
+                  {
+                    type: 'string',
+                    pattern: /^0\d{9}$/,
+                    message: t('Contact should be 10 digits and start with 0'),
+                  },
+                  {
+                    required: !isHidden(CONTACT_FORM_FIELD),
+                    message: t('Contact is required'),
+                  },
                 ]}
-                name="userType"
+                hidden={isHidden(CONTACT_FORM_FIELD)}
+                name={CONTACT_FORM_FIELD}
+                label={t('Contact')}
+              >
+                <Input></Input>
+              </Form.Item>
+            ) : null}
+
+            {isFHIRInstance ? (
+              <Form.Item id="userType" name="userType" label={t('User Type')}>
+                <Radio.Group
+                  options={[
+                    { label: t('Practitioner'), value: PRACTITIONER },
+                    { label: t('Supervisor'), value: SUPERVISOR },
+                  ]}
+                  name="userType"
+                ></Radio.Group>
+              </Form.Item>
+            ) : null}
+
+            <Form.Item id="enabled" name="enabled" label={t('Enable user')}>
+              <Radio.Group
+                options={status}
+                name="enabled"
+                // watch user's status
+                onChange={(e) => setUserEnabled(e.target.value)}
               ></Radio.Group>
             </Form.Item>
-          ) : null}
 
-          <Form.Item id="enabled" name="enabled" label={t('Enable user')}>
-            <Radio.Group
-              options={status}
-              name="enabled"
-              // watch user's status
-              onChange={(e) => setUserEnabled(e.target.value)}
-            ></Radio.Group>
-          </Form.Item>
+            {initialValues.id && initialValues.id !== extraData.user_id ? (
+              <Form.Item id="practitionerToggle" name="active" label={t('Mark as Practitioner')}>
+                <Radio.Group name="active">
+                  {status.map((e) => (
+                    <Radio
+                      name="active"
+                      key={e.label}
+                      value={e.value}
+                      // disable field if user is disabled
+                      disabled={!userEnabled}
+                    >
+                      {e.label}
+                    </Radio>
+                  ))}
+                </Radio.Group>
+              </Form.Item>
+            ) : null}
 
-          {initialValues.id && initialValues.id !== extraData.user_id ? (
-            <Form.Item id="practitionerToggle" name="active" label={t('Mark as Practitioner')}>
-              <Radio.Group name="active">
-                {status.map((e) => (
-                  <Radio
-                    name="active"
-                    key={e.label}
-                    value={e.value}
-                    // disable field if user is disabled
-                    disabled={!userEnabled}
-                  >
-                    {e.label}
-                  </Radio>
-                ))}
-              </Radio.Group>
+            <Form.Item name="userGroups" id="userGroups" label={t('Keycloak User Group')}>
+              <Select<SelectOption[]>
+                mode="multiple"
+                allowClear
+                placeholder={t('Please select')}
+                style={{ width: '100%' }}
+                options={getUserGroupsOptions(userGroups)}
+                filterOption={userGroupOptionsFilter as SelectProps<SelectOption[]>['filterOption']}
+              ></Select>
             </Form.Item>
-          ) : null}
 
-          <Form.Item name="userGroups" id="userGroups" label={t('Keycloak User Group')}>
-            <Select<SelectOption[]>
-              mode="multiple"
-              allowClear
-              placeholder={t('Please select')}
-              style={{ width: '100%' }}
-              options={getUserGroupsOptions(userGroups)}
-              filterOption={userGroupOptionsFilter as SelectProps<SelectOption[]>['filterOption']}
-            ></Select>
-          </Form.Item>
+            {isFHIRInstance ? (
+              <Form.Item
+                id="fhirCoreAppId"
+                name="fhirCoreAppId"
+                label={t('Application ID')}
+                rules={[{ required: true, message: t('Application Id is required') }]}
+                data-testid="fhirCoreAppId"
+              >
+                <PaginatedAsyncSelect<IComposition>
+                  baseUrl={baseUrl}
+                  resourceType={compositionResourceType}
+                  transformOption={getCompositionOptions}
+                  extraQueryParams={compositionUrlFilter}
+                  showSearch={true}
+                ></PaginatedAsyncSelect>
+              </Form.Item>
+            ) : null}
 
-          {isFHIRInstance ? (
-            <Form.Item
-              id="fhirCoreAppId"
-              name="fhirCoreAppId"
-              label={t('Application ID')}
-              rules={[{ required: true, message: t('Application Id is required') }]}
-              data-testid="fhirCoreAppId"
-            >
-              <PaginatedAsyncSelect<IComposition>
-                baseUrl={baseUrl}
-                resourceType={compositionResourceType}
-                transformOption={getCompositionOptions}
-                extraQueryParams={compositionUrlFilter}
-                showSearch={true}
-              ></PaginatedAsyncSelect>
+            <Form.Item {...tailLayout}>
+              <Button type="primary" htmlType="submit" className="create-user">
+                {isSubmitting ? t('SAVING') : t('Save')}
+              </Button>
+              <Button onClick={() => history.goBack()} className="cancel-user">
+                {t('Cancel')}
+              </Button>
             </Form.Item>
-          ) : null}
-
-          <Form.Item {...tailLayout}>
-            <Button type="primary" htmlType="submit" className="create-user">
-              {isSubmitting ? t('SAVING') : t('Save')}
-            </Button>
-            <Button onClick={() => history.goBack()} className="cancel-user">
-              {t('Cancel')}
-            </Button>
-          </Form.Item>
-        </Form>
-      </Col>
-    </Row>
+          </Form>
+        </Col>
+      </Row>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/keycloak-user-management/src/components/forms/UserForm/tests/index.test.tsx b/packages/keycloak-user-management/src/components/forms/UserForm/tests/index.test.tsx
index a21559181..a3e06a4fa 100644
--- a/packages/keycloak-user-management/src/components/forms/UserForm/tests/index.test.tsx
+++ b/packages/keycloak-user-management/src/components/forms/UserForm/tests/index.test.tsx
@@ -495,7 +495,7 @@ describe('components/forms/UserForm', () => {
       wrapper.update();
     });
 
-    expect(wrapper.find('SimplePageHeader').text()).toEqual(`Edit User | ${keycloakUser.username}`);
+    expect(wrapper.find('RichPageHeader').text()).toEqual(`Edit User | ${keycloakUser.username}`);
   });
 
   it('show practitioner toggle when editing user and practitioner is null', async () => {
diff --git a/packages/location-management/src/components/EditLocationUnit/index.tsx b/packages/location-management/src/components/EditLocationUnit/index.tsx
index 08fad56d5..2be473ce7 100644
--- a/packages/location-management/src/components/EditLocationUnit/index.tsx
+++ b/packages/location-management/src/components/EditLocationUnit/index.tsx
@@ -14,7 +14,7 @@ import { RouteComponentProps, useHistory } from 'react-router';
 import { LocationFormProps, LocationForm } from '../LocationForm';
 import { FormInstances, getLocationFormFields } from '../LocationForm/utils';
 import { Spin, Row, Col } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { getUser } from '@onaio/session-reducer';
 import { useTranslation } from '../../mls';
 import { Helmet } from 'react-helmet';
@@ -224,17 +224,24 @@ const EditLocationUnit = (props: EditLocationUnitProps) => {
     disabledTreeNodesCallback,
   };
   const pageTitle = t('Edit > {{name}}', { name: thisLocation.properties.name });
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <Row className="content-section">
-      <Helmet>
-        <title>{pageTitle}</title>
-      </Helmet>
-      <SimplePageHeader title={pageTitle} />
-      <Col className="bg-white p-4" span={24}>
-        <LocationForm {...locationFormProps} />
-      </Col>
-    </Row>
+    <BodyLayout headerProps={headerProps}>
+      <Row>
+        <Helmet>
+          <title>{pageTitle}</title>
+        </Helmet>
+        <Col className="bg-white p-4" span={24}>
+          <LocationForm {...locationFormProps} />
+        </Col>
+      </Row>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/location-management/src/components/EditLocationUnit/tests/index.test.tsx b/packages/location-management/src/components/EditLocationUnit/tests/index.test.tsx
index 2e2d8b9b9..dfb46a768 100644
--- a/packages/location-management/src/components/EditLocationUnit/tests/index.test.tsx
+++ b/packages/location-management/src/components/EditLocationUnit/tests/index.test.tsx
@@ -108,7 +108,7 @@ describe('EditLocationUnit', () => {
     expect(helmet.title).toEqual('Edit > Kenya');
 
     // rendered page including title
-    expect(wrapper.find('SimplePageHeader').text()).toMatchInlineSnapshot(`"Edit > Kenya"`);
+    expect(wrapper.find('RichPageHeader').text()).toMatchInlineSnapshot(`"Edit > Kenya"`);
 
     expect(wrapper.find('LocationForm').text()).toMatchSnapshot('form rendered');
 
diff --git a/packages/location-management/src/components/LocationUnitGroupAddEdit/index.tsx b/packages/location-management/src/components/LocationUnitGroupAddEdit/index.tsx
index 455b786ae..076f4e397 100644
--- a/packages/location-management/src/components/LocationUnitGroupAddEdit/index.tsx
+++ b/packages/location-management/src/components/LocationUnitGroupAddEdit/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import reducerRegistry from '@onaio/redux-reducer-registry';
 import { locationUnitsReducer, locationUnitsReducerName } from '../../ducks/location-units';
 import Form from './Form';
@@ -16,24 +16,28 @@ export const LocationUnitGroupAddEdit: React.FC<Props> = (props: Props) => {
   const params: { id: string } = useParams();
   const { t } = useTranslation();
   const { opensrpBaseURL } = props;
+  const pageTitle = params.id
+    ? t('Edit Location Unit Group | {{title}}', { title })
+    : t('Add Location Unit Group');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <Row className="content-section">
-      <Helmet>
-        <title>{params.id ? t('Edit Location Unit Group') : t('Add Location Unit Group')}</title>
-      </Helmet>
-      <SimplePageHeader
-        title={
-          params.id
-            ? t('Edit Location Unit Group | {{title}}', { title })
-            : t('Add Location Unit Group')
-        }
-      />
+    <BodyLayout headerProps={headerProps}>
+      <Row>
+        <Helmet>
+          <title>{params.id ? t('Edit Location Unit Group') : t('Add Location Unit Group')}</title>
+        </Helmet>
 
-      <Col className="bg-white p-4" span={24}>
-        <Form setEditTitle={setTitle} opensrpBaseURL={opensrpBaseURL} id={params.id} />
-      </Col>
-    </Row>
+        <Col className="bg-white p-4" span={24}>
+          <Form setEditTitle={setTitle} opensrpBaseURL={opensrpBaseURL} id={params.id} />
+        </Col>
+      </Row>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/Form.test.tsx b/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/Form.test.tsx
index b9aad8225..c7c10fe8a 100644
--- a/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/Form.test.tsx
+++ b/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/Form.test.tsx
@@ -289,7 +289,7 @@ describe('location-management/src/components/LocationUnitGroupAddEdit', () => {
       wrapper.update();
     });
     wrapperLocationUnitGroup.update();
-    expect(wrapperLocationUnitGroup.find('SimplePageHeader').text()).toEqual(
+    expect(wrapperLocationUnitGroup.find('RichPageHeader').text()).toEqual(
       `Edit Location Unit Group | ${fixtures.sampleLocationUnitGroupPayload.name}`
     );
   });
diff --git a/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/__snapshots__/index.test.tsx.snap b/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/__snapshots__/index.test.tsx.snap
index 94918950a..b54ef307a 100644
--- a/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/__snapshots__/index.test.tsx.snap
@@ -2,49 +2,71 @@
 
 exports[`location-management/src/components/LocationUnitGroupAddEdit/tests render with id without crashing 1`] = `
 Array [
-  <HelmetWrapper
-    defer={true}
-    encodeSpecialCharacters={true}
-  >
-    <title>
-      Edit Location Unit Group
-    </title>
-  </HelmetWrapper>,
-  <SimplePageHeader
-    title="Edit Location Unit Group | "
+  <RichPageHeader
+    pageHeaderProps={
+      Object {
+        "onBack": undefined,
+        "title": "Edit Location Unit Group | ",
+      }
+    }
   />,
-  <Col
-    className="bg-white p-4"
-    span={24}
+  <div
+    className="content-body"
   >
-    <Form
-      id="54"
-      setEditTitle={[Function]}
-    />
-  </Col>,
+    <Row>
+      <HelmetWrapper
+        defer={true}
+        encodeSpecialCharacters={true}
+      >
+        <title>
+          Edit Location Unit Group
+        </title>
+      </HelmetWrapper>
+      <Col
+        className="bg-white p-4"
+        span={24}
+      >
+        <Form
+          id="54"
+          setEditTitle={[Function]}
+        />
+      </Col>
+    </Row>
+  </div>,
 ]
 `;
 
 exports[`location-management/src/components/LocationUnitGroupAddEdit/tests renders without crashing 1`] = `
 Array [
-  <HelmetWrapper
-    defer={true}
-    encodeSpecialCharacters={true}
-  >
-    <title>
-      Add Location Unit Group
-    </title>
-  </HelmetWrapper>,
-  <SimplePageHeader
-    title="Add Location Unit Group"
+  <RichPageHeader
+    pageHeaderProps={
+      Object {
+        "onBack": undefined,
+        "title": "Add Location Unit Group",
+      }
+    }
   />,
-  <Col
-    className="bg-white p-4"
-    span={24}
+  <div
+    className="content-body"
   >
-    <Form
-      setEditTitle={[Function]}
-    />
-  </Col>,
+    <Row>
+      <HelmetWrapper
+        defer={true}
+        encodeSpecialCharacters={true}
+      >
+        <title>
+          Add Location Unit Group
+        </title>
+      </HelmetWrapper>
+      <Col
+        className="bg-white p-4"
+        span={24}
+      >
+        <Form
+          setEditTitle={[Function]}
+        />
+      </Col>
+    </Row>
+  </div>,
 ]
 `;
diff --git a/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/index.test.tsx b/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/index.test.tsx
index 63c7b5d5e..71594f4c2 100644
--- a/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/index.test.tsx
+++ b/packages/location-management/src/components/LocationUnitGroupAddEdit/tests/index.test.tsx
@@ -17,7 +17,7 @@ describe('location-management/src/components/LocationUnitGroupAddEdit/tests', ()
       </Provider>
     );
 
-    expect(wrapper.find('Row').first().prop('children')).toMatchSnapshot();
+    expect(wrapper.find('div').first().prop('children')).toMatchSnapshot();
   });
 
   it('render with id without crashing', () => {
@@ -29,6 +29,6 @@ describe('location-management/src/components/LocationUnitGroupAddEdit/tests', ()
       </Provider>
     );
 
-    expect(wrapper.find('Row').first().prop('children')).toMatchSnapshot();
+    expect(wrapper.find('div').first().prop('children')).toMatchSnapshot();
   });
 });
diff --git a/packages/location-management/src/components/LocationUnitGroupList/index.tsx b/packages/location-management/src/components/LocationUnitGroupList/index.tsx
index 530483845..c018c3a4b 100644
--- a/packages/location-management/src/components/LocationUnitGroupList/index.tsx
+++ b/packages/location-management/src/components/LocationUnitGroupList/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { ChangeEvent, useEffect, useState } from 'react';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Button, Input, Spin } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
@@ -62,13 +62,19 @@ const LocationUnitGroupList: React.FC<Props> = (props: Props) => {
   };
 
   if (isLoading) return <Spin className="custom-spinner" size={'large'} />;
+  const pageTitle = t('Location Unit Group Management');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{t('Location Unit Group')}</title>
       </Helmet>
-      <SimplePageHeader title={t('Location Unit Group Management')} />
       <Row>
         <Col className="bg-white p-3 border-left" span={detail ? 19 : 24}>
           <div className="mb-3 d-flex justify-content-between p-3">
@@ -103,7 +109,7 @@ const LocationUnitGroupList: React.FC<Props> = (props: Props) => {
           ''
         )}
       </Row>
-    </section>
+    </BodyLayout>
   );
 };
 export default LocationUnitGroupList;
diff --git a/packages/location-management/src/components/LocationUnitList/index.tsx b/packages/location-management/src/components/LocationUnitList/index.tsx
index 8c55bcc8d..8e6462147 100644
--- a/packages/location-management/src/components/LocationUnitList/index.tsx
+++ b/packages/location-management/src/components/LocationUnitList/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Row, Col, Button, Spin } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import LocationUnitDetail, { Props as LocationDetailData } from '../LocationUnitDetail';
@@ -142,13 +142,19 @@ export const LocationUnitList: React.FC<Props> = (props: Props) => {
   ) {
     return <Spin size="large" className="custom-spinner" />;
   }
+  const pageTitle = 'Location Unit Management';
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <section className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{t('Location Unit')}</title>
       </Helmet>
-      <SimplePageHeader title={t('Location Unit Management')} />
       <Row>
         <Col className="bg-white p-3" span={6}>
           <Tree
@@ -189,7 +195,7 @@ export const LocationUnitList: React.FC<Props> = (props: Props) => {
           ''
         )}
       </Row>
-    </section>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/location-management/src/components/NewLocationUnit/index.tsx b/packages/location-management/src/components/NewLocationUnit/index.tsx
index bdc73ff82..ff83818c1 100644
--- a/packages/location-management/src/components/NewLocationUnit/index.tsx
+++ b/packages/location-management/src/components/NewLocationUnit/index.tsx
@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { RouteComponentProps, useHistory } from 'react-router';
 import { LocationFormProps, LocationForm } from '../LocationForm';
 import { FormInstances, getLocationFormFields, LocationFormFields } from '../LocationForm/utils';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Spin, Row, Col } from 'antd';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from '../../mls';
@@ -146,16 +146,23 @@ const NewLocationUnit = (props: NewLocationUnitProps) => {
   };
 
   const pageTitle = t('Add Location Unit');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
   return (
-    <Row className="content-section">
-      <Helmet>
-        <title>{pageTitle}</title>
-      </Helmet>
-      <SimplePageHeader title={pageTitle} />
-      <Col className="bg-white p-4" span={24}>
-        <LocationForm {...locationFormProps} />
-      </Col>
-    </Row>
+    <BodyLayout headerProps={headerProps}>
+      <Row>
+        <Helmet>
+          <title>{pageTitle}</title>
+        </Helmet>
+        <Col className="bg-white p-4" span={24}>
+          <LocationForm {...locationFormProps} />
+        </Col>
+      </Row>
+    </BodyLayout>
   );
 };
 
diff --git a/packages/location-management/src/components/NewLocationUnit/tests/index.test.tsx b/packages/location-management/src/components/NewLocationUnit/tests/index.test.tsx
index a9abec723..9abc8ac5a 100644
--- a/packages/location-management/src/components/NewLocationUnit/tests/index.test.tsx
+++ b/packages/location-management/src/components/NewLocationUnit/tests/index.test.tsx
@@ -194,7 +194,7 @@ describe('NewLocationUnit', () => {
     expect(helmet.title).toEqual('Add Location Unit');
 
     // rendered page including title
-    expect(wrapper.find('SimplePageHeader').text()).toMatchInlineSnapshot(`"Add Location Unit"`);
+    expect(wrapper.find('RichPageHeader').text()).toMatchInlineSnapshot(`"Add Location Unit"`);
 
     expect(wrapper.find('LocationForm').text()).toMatchSnapshot('form rendered');
   });
@@ -235,7 +235,7 @@ describe('NewLocationUnit', () => {
     expect(helmet.title).toEqual('Add Location Unit');
 
     // rendered page including title
-    expect(wrapper.find('SimplePageHeader').text()).toMatchInlineSnapshot(`"Add Location Unit"`);
+    expect(wrapper.find('RichPageHeader').text()).toMatchInlineSnapshot(`"Add Location Unit"`);
 
     wrapper.unmount();
   });
diff --git a/packages/react-utils/src/index.tsx b/packages/react-utils/src/index.tsx
index 1bbecf188..f72b068bd 100644
--- a/packages/react-utils/src/index.tsx
+++ b/packages/react-utils/src/index.tsx
@@ -24,3 +24,4 @@ export * from './components/fhirDataTypes';
 export * from './components/NoData';
 export * from './components/AsyncSelect';
 export * from './components/GenericDetailsView';
+export * from './components/BodyLayout';