diff --git a/src/Components/Assets/AssetConfigure.tsx b/src/Components/Assets/AssetConfigure.tsx
index 4e5866c1af5..1d71770d3cc 100644
--- a/src/Components/Assets/AssetConfigure.tsx
+++ b/src/Components/Assets/AssetConfigure.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback } from "react";
 import Loading from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
 import { AssetData } from "./AssetTypes";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { useDispatch } from "react-redux";
@@ -8,6 +7,7 @@ import { getAsset } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import HL7Monitor from "./AssetType/HL7Monitor";
 import ONVIFCamera from "./AssetType/ONVIFCamera";
+import Page from "../Common/components/Page";
 
 interface AssetConfigureProps {
   assetId: string;
@@ -49,37 +49,35 @@ const AssetConfigure = (props: AssetConfigureProps) => {
 
   if (isLoading) return <Loading />;
   return (
-    <div>
+    <>
       {assetType === "HL7MONITOR" ? (
-        <>
-          <PageTitle
-            title={`Configure HL7 Monitor: ${asset?.name}`}
-            crumbsReplacements={{
-              [facilityId]: { name: asset?.location_object.facility.name },
-              assets: { uri: `/assets?facility=${facilityId}` },
-              [assetId]: { name: asset?.name },
-            }}
-          />
+        <Page
+          title={`Configure HL7 Monitor: ${asset?.name}`}
+          crumbsReplacements={{
+            [facilityId]: { name: asset?.location_object.facility.name },
+            assets: { uri: `/assets?facility=${facilityId}` },
+            [assetId]: { name: asset?.name },
+          }}
+        >
           <HL7Monitor asset={asset} assetId={assetId} facilityId={facilityId} />
-        </>
+        </Page>
       ) : (
-        <>
-          <PageTitle
-            title={`Configure ONVIF Camera: ${asset?.name}`}
-            crumbsReplacements={{
-              [facilityId]: { name: asset?.location_object.facility.name },
-              assets: { uri: `/assets?facility=${facilityId}` },
-              [assetId]: { name: asset?.name },
-            }}
-          />
+        <Page
+          title={`Configure ONVIF Camera: ${asset?.name}`}
+          crumbsReplacements={{
+            [facilityId]: { name: asset?.location_object.facility.name },
+            assets: { uri: `/assets?facility=${facilityId}` },
+            [assetId]: { name: asset?.name },
+          }}
+        >
           <ONVIFCamera
             asset={asset}
             assetId={assetId}
             facilityId={facilityId}
           />
-        </>
+        </Page>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 775f014f74f..d2f528ff5f5 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -20,7 +20,7 @@ import ButtonV2 from "../Common/components/ButtonV2";
 import { UserRole, USER_TYPES } from "../../Common/constants";
 import moment from "moment";
 import ConfirmDialogV2 from "../Common/ConfirmDialogV2";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface AssetManageProps {
@@ -201,17 +201,16 @@ const AssetManage = (props: AssetManageProps) => {
   };
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title="Asset Details"
-        crumbsReplacements={{
-          [facilityId]: { name: asset?.location_object.facility.name },
-          assets: { uri: `/assets?facility=${facilityId}` },
-          [assetId]: {
-            name: asset?.name,
-          },
-        }}
-      />
+    <Page
+      title="Asset Details"
+      crumbsReplacements={{
+        [facilityId]: { name: asset?.location_object.facility.name },
+        assets: { uri: `/assets?facility=${facilityId}` },
+        [assetId]: {
+          name: asset?.name,
+        },
+      }}
+    >
       <ConfirmDialogV2
         title="Delete Asset"
         description="Are you sure you want to delete this asset?"
@@ -404,7 +403,7 @@ const AssetManage = (props: AssetManageProps) => {
           />
         </div>
       )}
-    </div>
+    </Page>
   );
 };
 
diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index eda93c2dea0..1c9c7405df2 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -2,7 +2,6 @@ import { useDispatch } from "react-redux";
 import QrReader from "react-qr-reader";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import * as Notification from "../../Utils/Notifications.js";
-import PageTitle from "../Common/PageTitle";
 import {
   getAnyFacility,
   listAssets,
@@ -29,6 +28,7 @@ import AuthorizeFor from "../../Utils/AuthorizeFor";
 import ButtonV2 from "../Common/components/ButtonV2";
 import FacilitiesSelectDialogue from "../ExternalResult/FacilitiesSelectDialogue";
 import ExportMenu from "../Common/Export";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
 
@@ -265,52 +265,57 @@ const AssetsList = () => {
   }
 
   return (
-    <div className="px-6">
-      <div className="flex justify-between items-center">
-        <PageTitle title="Assets" breadcrumbs={false} hideBack />
-        {authorizedForImportExport && (
-          <div className="tooltip">
-            {!facility && (
-              <span className="tooltip-text tooltip-bottom -translate-x-2/3 flex flex-col items-center">
-                <p>Select a facility from the Facilities</p>
-                <p>page and click 'View Assets' from the</p>
-                <p>Manage Facility dropdown</p>
-              </span>
-            )}
-            {/* TODO: ask for facility select dialog instead of disabling */}
-            <ExportMenu
-              disabled={!facility || importAssetModalOpen}
-              label={importAssetModalOpen ? "Importing..." : "Import/Export"}
-              exportItems={[
-                {
-                  label: "Import Assets",
-                  // action: () => setImportAssetModalOpen(true),
-                  options: {
-                    icon: <CareIcon className="care-l-import" />,
-                    onClick: () => setImportAssetModalOpen(true),
+    <Page
+      title="Assets"
+      breadcrumbs={false}
+      hideBack
+      options={
+        <>
+          {authorizedForImportExport && (
+            <div className="tooltip">
+              {!facility && (
+                <span className="tooltip-text tooltip-bottom -translate-x-2/3 flex flex-col items-center">
+                  <p>Select a facility from the Facilities</p>
+                  <p>page and click 'View Assets' from the</p>
+                  <p>Manage Facility dropdown</p>
+                </span>
+              )}
+              {/* TODO: ask for facility select dialog instead of disabling */}
+              <ExportMenu
+                disabled={!facility || importAssetModalOpen}
+                label={importAssetModalOpen ? "Importing..." : "Import/Export"}
+                exportItems={[
+                  {
+                    label: "Import Assets",
+                    // action: () => setImportAssetModalOpen(true),
+                    options: {
+                      icon: <CareIcon className="care-l-import" />,
+                      onClick: () => setImportAssetModalOpen(true),
+                    },
                   },
-                },
-                {
-                  label: "Export Assets",
-                  action: () =>
-                    authorizedForImportExport &&
-                    listAssets({
-                      ...qParams,
-                      json: true,
-                      limit: totalCount,
-                    }),
-                  type: "json",
-                  filePrefix: `assets_${facility?.name}`,
-                  options: {
-                    icon: <CareIcon className="care-l-export" />,
-                    disabled: totalCount === 0 || !authorizedForImportExport,
+                  {
+                    label: "Export Assets",
+                    action: () =>
+                      authorizedForImportExport &&
+                      listAssets({
+                        ...qParams,
+                        json: true,
+                        limit: totalCount,
+                      }),
+                    type: "json",
+                    filePrefix: `assets_${facility?.name}`,
+                    options: {
+                      icon: <CareIcon className="care-l-export" />,
+                      disabled: totalCount === 0 || !authorizedForImportExport,
+                    },
                   },
-                },
-              ]}
-            />
-          </div>
-        )}
-      </div>
+                ]}
+              />
+            </div>
+          )}
+        </>
+      }
+    >
       <div className="lg:flex mt-5 space-y-2">
         <div className="bg-white overflow-hidden shadow rounded-lg flex-1 md:mr-2">
           <div className="px-4 py-5 sm:p-6">
@@ -385,7 +390,7 @@ const AssetsList = () => {
             ]}
           />
           <div className="grow">
-            <div className="py-8 md:px-5">
+            <div className="py-8 md:px-6">
               {manageAssets}
               <Pagination totalCount={totalCount} />
             </div>
@@ -409,7 +414,7 @@ const AssetsList = () => {
           setSelectedFacility({ name: "" });
         }}
       />
-    </div>
+    </Page>
   );
 };
 
diff --git a/src/Components/Common/Export.tsx b/src/Components/Common/Export.tsx
index 58e56a03ee1..68e27cb381e 100644
--- a/src/Components/Common/Export.tsx
+++ b/src/Components/Common/Export.tsx
@@ -71,7 +71,7 @@ export const ExportButton = ({
       <ButtonV2
         disabled={isExporting || props.disabled}
         onClick={() => exportFile(props.action, props.filenamePrefix, type)}
-        className="mx-2 tooltip p-4 text-lg text-secondary-800 disabled:text-secondary-500 disabled:bg-transparent"
+        className="mx-2 tooltip px-4 text-lg text-secondary-800 disabled:text-secondary-500 disabled:bg-transparent"
         variant="secondary"
         ghost
         circle
diff --git a/src/Components/Common/PageTitle.tsx b/src/Components/Common/PageTitle.tsx
index 6ed7c442344..006258d83cb 100644
--- a/src/Components/Common/PageTitle.tsx
+++ b/src/Components/Common/PageTitle.tsx
@@ -3,12 +3,12 @@ import Breadcrumbs from "./Breadcrumbs";
 import PageHeadTitle from "./PageHeadTitle";
 import { classNames, goBack } from "../../Utils/utils";
 
-interface PageTitleProps {
+export interface PageTitleProps {
   title: string;
   hideBack?: boolean;
   backUrl?: string;
   backButtonCB?: () => number | void;
-  className?: string;
+  // className?: string;
   componentRight?: React.ReactNode;
   justifyContents?:
     | "justify-center"
@@ -27,7 +27,7 @@ export default function PageTitle({
   hideBack = false,
   backUrl,
   backButtonCB,
-  className = "",
+  // className = "",
   componentRight = <></>,
   breadcrumbs = true,
   crumbsReplacements = {},
@@ -46,13 +46,13 @@ export default function PageTitle({
     backButtonCB ? goBack(backButtonCB()) : goBack(backUrl);
 
   return (
-    <div ref={divRef} className={`pt-4 mb-4 ${className}`}>
+    <div ref={divRef}>
       <PageHeadTitle title={title} />
       <div className={classNames("flex items-center", justifyContents)}>
         <div className="flex items-center">
           {!hideBack && (
             <button onClick={onBackButtonClick}>
-              <i className="fas fa-chevron-left text-2xl rounded-md p-2 hover:bg-gray-200 mr-1">
+              <i className="fas fa-chevron-left text-base rounded-md p-2 hover:bg-gray-300 mr-1">
                 {" "}
               </i>
             </button>
diff --git a/src/Components/Common/components/Page.tsx b/src/Components/Common/components/Page.tsx
new file mode 100644
index 00000000000..0ae9741c08a
--- /dev/null
+++ b/src/Components/Common/components/Page.tsx
@@ -0,0 +1,38 @@
+import { RefObject } from "react";
+import PageTitle, { PageTitleProps } from "../PageTitle";
+
+interface PageProps extends PageTitleProps {
+  children: any;
+  options?: any;
+  className?: string;
+  noImplicitPadding?: boolean;
+  ref?: RefObject<HTMLDivElement>;
+}
+
+export default function Page(props: PageProps) {
+  let padding = "";
+  if (!props.noImplicitPadding) {
+    if (!props.hideBack || props.componentRight) padding = "px-6 py-3.5";
+    else padding = "px-6 py-5";
+  }
+
+  return (
+    <div className={`${padding} ${props.className}`} ref={props.ref}>
+      <div className="flex flex-col md:flex-row justify-between md:items-center md:gap-6 gap-2">
+        <PageTitle
+          title={props.title}
+          breadcrumbs={props.breadcrumbs}
+          backUrl={props.backUrl}
+          hideBack={props.hideBack}
+          justifyContents={props.justifyContents}
+          componentRight={props.componentRight}
+          crumbsReplacements={props.crumbsReplacements}
+          focusOnLoad={props.focusOnLoad}
+          backButtonCB={props.backButtonCB}
+        />
+        {props.options}
+      </div>
+      {props.children}
+    </div>
+  );
+}
diff --git a/src/Components/Dashboard/HubDashboard.tsx b/src/Components/Dashboard/HubDashboard.tsx
index 34a099ff9ca..e15dd6da41f 100644
--- a/src/Components/Dashboard/HubDashboard.tsx
+++ b/src/Components/Dashboard/HubDashboard.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PageTitle from "../Common/PageTitle";
 import LiveFeedTile from "../Hub/LiveFeedTile";
 
 export default function HubDashboard() {
diff --git a/src/Components/ExternalResult/ExternalResultUpload.tsx b/src/Components/ExternalResult/ExternalResultUpload.tsx
index 040fe25b39f..06f8beab215 100644
--- a/src/Components/ExternalResult/ExternalResultUpload.tsx
+++ b/src/Components/ExternalResult/ExternalResultUpload.tsx
@@ -1,4 +1,3 @@
-import loadable from "@loadable/component";
 import _ from "lodash";
 import { navigate } from "raviger";
 import { useState } from "react";
@@ -6,7 +5,7 @@ import CSVReader from "react-csv-reader";
 import { useDispatch } from "react-redux";
 import { externalResultUploadCsv } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 
 export default function ExternalResultUpload() {
   const dispatch: any = useDispatch();
@@ -58,12 +57,7 @@ export default function ExternalResultUpload() {
   };
 
   return (
-    <div className="px-4">
-      <PageTitle
-        title="Upload External Results"
-        backUrl="/external_results"
-        className="mt-4"
-      />
+    <Page title="Upload External Results" backUrl="/external_results">
       <div className="max-w-3xl mx-auto mt-6">
         <div className="py-4">
           <div className="block text-sm leading-5 font-medium text-gray-700 sm:mt-px sm:pt-2">
@@ -139,6 +133,6 @@ export default function ExternalResultUpload() {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/ExternalResult/ResultItem.tsx b/src/Components/ExternalResult/ResultItem.tsx
index e04d2f83de8..7218fe7eba5 100644
--- a/src/Components/ExternalResult/ResultItem.tsx
+++ b/src/Components/ExternalResult/ResultItem.tsx
@@ -6,13 +6,13 @@ import { externalResult, deleteExternalResult } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { navigate } from "raviger";
 import AlertDialog from "../Common/AlertDialog";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function ResultItem(props: any) {
   const dispatch: any = useDispatch();
-  let initialData: any = {};
+  const initialData: any = {};
   const [data, setData] = useState(initialData);
   const [isLoading, setIsLoading] = useState(true);
   const [showDeleteAlert, setShowDeleteAlert] = useState(false);
@@ -59,9 +59,7 @@ export default function ResultItem(props: any) {
   }
 
   return (
-    <div>
-      <PageTitle title={"Result details"} className="px-6 mb-2" />
-
+    <Page title={"Result details"}>
       {showDeleteAlert && (
         <AlertDialog
           title="Confirm Delete"
@@ -72,7 +70,7 @@ export default function ResultItem(props: any) {
         />
       )}
 
-      <div className="mx-3 md:mx-8 mb-10 mt-4">
+      <div className="mb-10 mt-4">
         <div className="flex flex-col md:flex-row gap-2 justify-end">
           <button
             className="btn-primary btn mr-2 w-full md:w-auto"
@@ -218,6 +216,6 @@ export default function ResultItem(props: any) {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/ExternalResult/ResultList.tsx b/src/Components/ExternalResult/ResultList.tsx
index 93a4a77e836..d74a5ca3da8 100644
--- a/src/Components/ExternalResult/ResultList.tsx
+++ b/src/Components/ExternalResult/ResultList.tsx
@@ -15,9 +15,9 @@ import useFilters from "../../Common/hooks/useFilters";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import ExportMenu from "../Common/Export";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function ResultList() {
   const dispatch: any = useDispatch();
@@ -215,20 +215,11 @@ export default function ResultList() {
   }
 
   return (
-    <div className="px-6">
-      <FacilitiesSelectDialogue
-        show={showDialog}
-        setSelected={(e) => setSelectedFacility(e)}
-        selectedFacility={selectedFacility}
-        handleOk={() =>
-          navigate(`facility/${selectedFacility.id}/patient`, {
-            query: { extId: resultId },
-          })
-        }
-        handleCancel={() => setShowDialog(false)}
-      />
-      <div className="flex items-center justify-between">
-        <PageTitle title="External Results" hideBack breadcrumbs={false} />
+    <Page
+      title="External Results"
+      hideBack
+      breadcrumbs={false}
+      options={
         <ExportMenu
           label="Import/Export"
           exportItems={[
@@ -253,7 +244,19 @@ export default function ResultList() {
             },
           ]}
         />
-      </div>
+      }
+    >
+      <FacilitiesSelectDialogue
+        show={showDialog}
+        setSelected={(e) => setSelectedFacility(e)}
+        selectedFacility={selectedFacility}
+        handleOk={() =>
+          navigate(`facility/${selectedFacility.id}/patient`, {
+            query: { extId: resultId },
+          })
+        }
+        handleCancel={() => setShowDialog(false)}
+      />
       <div className="mt-5 lg:grid grid-cols-1 gap-5 sm:grid-cols-3 my-4 px-2 md:px-0 relative">
         <div className="bg-white overflow-hidden shadow rounded-lg">
           <div className="px-4 py-5 sm:p-6">
@@ -351,6 +354,6 @@ export default function ResultList() {
           <ListFilter {...advancedFilter} dataList={lsgWardData} />
         </div>
       </SlideOver>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/ExternalResult/ResultUpdate.tsx b/src/Components/ExternalResult/ResultUpdate.tsx
index 1190a039513..54c91d8c7aa 100644
--- a/src/Components/ExternalResult/ResultUpdate.tsx
+++ b/src/Components/ExternalResult/ResultUpdate.tsx
@@ -22,9 +22,9 @@ import { MultilineInputField, SelectField } from "../Common/HelperInputFields";
 import { navigate } from "raviger";
 import { goBack } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 const initForm = {
   address: "",
@@ -223,8 +223,7 @@ export default function UpdateResult(props: any) {
   }
 
   return (
-    <div>
-      <PageTitle title="Update External Result" className="px-6 mb-2" />
+    <Page title="Update External Result">
       <CardContent>
         <div className="px-4 py-5 border-b border-gray-200 sm:px-6">
           <h3 className="text-lg leading-6 font-medium text-gray-900">
@@ -329,6 +328,6 @@ export default function UpdateResult(props: any) {
           </div>
         </form>
       </CardContent>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Facility/AddBedForm.tsx b/src/Components/Facility/AddBedForm.tsx
index 1e3009bb7b6..3ca20d8b73b 100644
--- a/src/Components/Facility/AddBedForm.tsx
+++ b/src/Components/Facility/AddBedForm.tsx
@@ -18,8 +18,8 @@ import {
 import { LOCATION_BED_TYPES } from "../../Common/constants";
 import { navigate } from "raviger";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface BedFormProps {
   facilityId: string;
@@ -134,30 +134,30 @@ export const AddBedForm = (props: BedFormProps) => {
   }
 
   return (
-    <div className="px-2 pb-2 max-w-3xl mx-auto">
-      <PageTitle
-        title={headerText}
-        backButtonCB={() => {
-          navigate(`/facility/${facilityId}/location/${locationId}/beds`, {
-            replace: true,
-          });
-
-          return 0;
-        }}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [locationId]: {
-            name: locationName,
-            uri: `/facility/${facilityId}/location`,
+    <Page
+      className="pb-2 max-w-3xl mx-auto"
+      title={headerText}
+      backButtonCB={() => {
+        navigate(`/facility/${facilityId}/location/${locationId}/beds`, {
+          replace: true,
+        });
+
+        return 0;
+      }}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [locationId]: {
+          name: locationName,
+          uri: `/facility/${facilityId}/location`,
+        },
+        ...(bedId && {
+          [bedId]: {
+            name: bedName,
+            uri: `/facility/${facilityId}/location/${locationId}/beds`,
           },
-          ...(bedId && {
-            [bedId]: {
-              name: bedName,
-              uri: `/facility/${facilityId}/location/${locationId}/beds`,
-            },
-          }),
-        }}
-      />
+        }),
+      }}
+    >
       <div className="mt-10">
         <Card>
           <form onSubmit={(e) => handleSubmit(e)}>
@@ -223,6 +223,6 @@ export const AddBedForm = (props: BedFormProps) => {
           </form>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/AddInventoryForm.tsx b/src/Components/Facility/AddInventoryForm.tsx
index 09ef39105f6..f48884ddc8b 100644
--- a/src/Components/Facility/AddInventoryForm.tsx
+++ b/src/Components/Facility/AddInventoryForm.tsx
@@ -14,8 +14,8 @@ import { SelectField, TextInputField } from "../Common/HelperInputFields";
 import { InventoryItemsModel } from "./models";
 import { goBack } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 const initForm = {
   id: "",
@@ -214,11 +214,10 @@ export const AddInventoryForm = (props: any) => {
   }
 
   return (
-    <div className="px-2">
-      <PageTitle
-        title="Manage Inventory"
-        crumbsReplacements={{ [facilityId]: { name: facilityName } }}
-      />
+    <Page
+      title="Manage Inventory"
+      crumbsReplacements={{ [facilityId]: { name: facilityName } }}
+    >
       <div className="mt-4">
         <Card>
           <form onSubmit={handleSubmit}>
@@ -294,6 +293,6 @@ export const AddInventoryForm = (props: any) => {
           </form>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/AddLocationForm.tsx b/src/Components/Facility/AddLocationForm.tsx
index 084830c2784..1a298f52e1f 100644
--- a/src/Components/Facility/AddLocationForm.tsx
+++ b/src/Components/Facility/AddLocationForm.tsx
@@ -15,8 +15,8 @@ import {
 } from "../Common/HelperInputFields";
 import { navigate } from "raviger";
 import { Submit, Cancel } from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface LocationFormProps {
   facilityId: string;
@@ -90,19 +90,19 @@ export const AddLocationForm = (props: LocationFormProps) => {
   }
 
   return (
-    <div className="px-2 pb-2 max-w-3xl mx-auto">
-      <PageTitle
-        title={headerText}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          ...(locationId && {
-            [locationId]: {
-              name: locationName,
-              uri: `/facility/${facilityId}/location`,
-            },
-          }),
-        }}
-      />
+    <Page
+      title={headerText}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        ...(locationId && {
+          [locationId]: {
+            name: locationName,
+            uri: `/facility/${facilityId}/location`,
+          },
+        }),
+      }}
+      className="pb-2 max-w-3xl mx-auto"
+    >
       <div className="mt-10">
         <Card>
           <form onSubmit={handleSubmit}>
@@ -149,6 +149,6 @@ export const AddLocationForm = (props: LocationFormProps) => {
           </form>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index ea1f3e676b8..d881a26b83f 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -8,7 +8,6 @@ import {
 import { useDispatch } from "react-redux";
 import * as Notification from "../../Utils/Notifications.js";
 import CropFreeIcon from "@material-ui/icons/CropFree";
-import PageTitle from "../Common/PageTitle";
 import { parsePhoneNumberFromString } from "libphonenumber-js";
 import { validateEmailAddress } from "../../Common/validation";
 import {
@@ -31,7 +30,7 @@ import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
-
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
 
 const formErrorKeys = [
@@ -385,15 +384,15 @@ const AssetCreate = (props: AssetProps) => {
 
   if (locations.length === 0) {
     return (
-      <div className="px-6 pb-2">
-        <PageTitle
-          title={assetId ? "Update Asset" : "Create New Asset"}
-          crumbsReplacements={{
-            [facilityId]: { name: facilityName },
-            assets: { style: "text-gray-200 pointer-events-none" },
-            [assetId || "????"]: { name },
-          }}
-        />
+      <Page
+        title={assetId ? "Update Asset" : "Create New Asset"}
+        crumbsReplacements={{
+          [facilityId]: { name: facilityName },
+          assets: { style: "text-gray-200 pointer-events-none" },
+          [assetId || "????"]: { name },
+        }}
+        className="pb-2"
+      >
         <section className="text-center">
           <h1 className="text-6xl flex items-center flex-col py-10">
             <div className="p-5 rounded-full flex items-center justify-center bg-gray-200 w-40 h-40">
@@ -411,7 +410,7 @@ const AssetCreate = (props: AssetProps) => {
             Add Location
           </button>
         </section>
-      </div>
+      </Page>
     );
   }
 
@@ -459,16 +458,15 @@ const AssetCreate = (props: AssetProps) => {
   };
 
   return (
-    <div className="pb-2 relative flex flex-col">
-      <PageTitle
-        title={`${assetId ? "Update" : "Create"} Asset`}
-        className="pl-6 flex-grow-0"
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          assets: { style: "text-gray-200 pointer-events-none" },
-          [assetId || "????"]: { name },
-        }}
-      />
+    <Page
+      title={`${assetId ? "Update" : "Create"} Asset`}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        assets: { style: "text-gray-200 pointer-events-none" },
+        [assetId || "????"]: { name },
+      }}
+      className="pb-2 relative flex flex-col"
+    >
       <div className="mt-5 flex top-0 sm:mx-auto flex-grow-0">
         <div className="hidden xl:flex flex-col w-72 fixed h-full mt-4">
           {Object.keys(sections).map((sectionTitle) => {
@@ -500,10 +498,9 @@ const AssetCreate = (props: AssetProps) => {
               className="rounded sm:rounded-xl bg-white p-6 sm:p-12 transition-all"
             >
               <div className="grid grid-cols-1 gap-x-12 items-start">
-                <div className="grid grid-cols-6 gap-x-6">
+                <div className="grid grid-cols-6 gap-6">
                   {/* General Details Section */}
                   {sectionTitle("General Details")}
-
                   {/* Asset Name */}
                   <div className="col-span-6" ref={fieldRef["name"]}>
                     <TextFormField
@@ -596,7 +593,7 @@ const AssetCreate = (props: AssetProps) => {
                   </div>
 
                   {/* Divider */}
-                  <div className="col-span-6">
+                  {/* <div className="col-span-6">
                     <hr
                       className={
                         "transition-all " +
@@ -605,7 +602,7 @@ const AssetCreate = (props: AssetProps) => {
                           : "opacity-100 my-4")
                       }
                     />
-                  </div>
+                  </div> */}
 
                   {/* Working Status */}
                   <div ref={fieldRef["is_working"]} className="col-span-6">
@@ -662,7 +659,7 @@ const AssetCreate = (props: AssetProps) => {
                   </div>
 
                   {/* Divider */}
-                  <div className="col-span-6">
+                  {/* <div className="col-span-6">
                     <hr
                       className={
                         "transition-all " +
@@ -671,7 +668,7 @@ const AssetCreate = (props: AssetProps) => {
                           : "opacity-100 mb-7")
                       }
                     />
-                  </div>
+                  </div> */}
 
                   {/* Asset QR ID */}
                   <div className="col-span-6">
@@ -904,7 +901,7 @@ const AssetCreate = (props: AssetProps) => {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   );
 };
 
diff --git a/src/Components/Facility/BedManagement.tsx b/src/Components/Facility/BedManagement.tsx
index 78385e30486..b0811489294 100644
--- a/src/Components/Facility/BedManagement.tsx
+++ b/src/Components/Facility/BedManagement.tsx
@@ -15,8 +15,8 @@ import { ReactElement } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import { LOCATION_BED_TYPES } from "../../Common/constants";
 import BedDeleteDialog from "./BedDeleteDialog";
+import Page from "../Common/components/Page";
 
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface BedManagementProps {
@@ -237,18 +237,16 @@ export const BedManagement = (props: BedManagementProps) => {
   }
 
   return (
-    <div>
-      <PageTitle
-        title="Bed Management"
-        className="mx-3 md:mx-8"
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [locationId]: {
-            name: locationName,
-            uri: `/facility/${facilityId}/location`,
-          },
-        }}
-      />
+    <Page
+      title="Bed Management"
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [locationId]: {
+          name: locationName,
+          uri: `/facility/${facilityId}/location`,
+        },
+      }}
+    >
       <div className="container px-4 py-2 sm:px-8">
         <div className="flex justify-end">
           <button
@@ -266,6 +264,6 @@ export const BedManagement = (props: BedManagementProps) => {
         </div>
         {bed}
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/ConsultationDetails.tsx b/src/Components/Facility/ConsultationDetails.tsx
index 9bf7beaae6a..050a4a381c5 100644
--- a/src/Components/Facility/ConsultationDetails.tsx
+++ b/src/Components/Facility/ConsultationDetails.tsx
@@ -49,6 +49,7 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import DialogModal from "../Common/Dialog";
 import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import Page from "../Common/components/Page";
 import DateFormField from "../Form/FormFields/DateFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import TextFormField from "../Form/FormFields/TextFormField";
@@ -60,6 +61,7 @@ import PRNPrescriptionBuilder, {
   PRNPrescriptionType,
 } from "../Common/prescription-builder/PRNPrescriptionBuilder";
 import { formatDate } from "../../Utils/utils";
+
 interface PreDischargeFormInterface {
   discharge_reason: string;
   discharge_notes: string;
@@ -380,7 +382,60 @@ export const ConsultationDetails = (props: any) => {
   };
 
   return (
-    <div>
+    <Page
+      title="Patient Dashboard"
+      crumbsReplacements={{
+        [facilityId]: { name: patientData?.facility_object?.name },
+        [patientId]: { name: patientData?.name },
+        [consultationId]: {
+          name: `Admitted on ${formatDate(
+            consultationData.admission_date
+              ? consultationData.admission_date
+              : "00:00"
+          )}`,
+        },
+      }}
+      breadcrumbs={true}
+      className="relative"
+      options={
+        <nav className="flex justify-between flex-wrap">
+          <div className="w-full sm:w-min lg:absolute xl:right-0 -right-6 top-3 flex sm:flex-row md:flex-col lg:flex-row sm:items-center flex-col space-y-1 sm:space-y-0 sm:divide-x-2">
+            {patientData.is_active && (
+              <div className="w-full flex flex-col sm:flex-row md:flex-col lg:flex-row px-2">
+                <button
+                  onClick={() => setShowDoctors(true)}
+                  className="w-full btn m-1 btn-primary hover:text-white"
+                >
+                  Doctor Connect
+                </button>
+                {patientData.last_consultation?.id && (
+                  <Link
+                    href={`/facility/${patientData.facility}/patient/${patientData.id}/consultation/${patientData.last_consultation?.id}/feed`}
+                    className="w-full btn m-1 btn-primary hover:text-white"
+                  >
+                    Camera Feed
+                  </Link>
+                )}
+              </div>
+            )}
+            <div className="w-full flex flex-col sm:flex-row md:flex-col lg:flex-row px-2">
+              <Link
+                href={`/facility/${patientData.facility}/patient/${patientData.id}`}
+                className="w-full btn m-1 btn-primary hover:text-white"
+              >
+                Patient Details
+              </Link>
+              <Link
+                href={`/facility/${patientData.facility}/patient/${patientData.id}/notes`}
+                className="w-full btn m-1 btn-primary hover:text-white"
+              >
+                Doctor&apos;s Notes
+              </Link>
+            </div>
+          </div>
+        </nav>
+      }
+    >
       <Dialog open={open} onClose={handleDischargeSummary}>
         <DialogTitle id="form-dialog-title">
           Download Discharge Summary
@@ -565,58 +620,6 @@ export const ConsultationDetails = (props: any) => {
         </div>
       </DialogModal>
       <div className="px-2 pb-2">
-        <nav className="flex justify-between flex-wrap relative">
-          <PageTitle
-            title="Patient Dashboard"
-            className="sm:m-0 sm:p-0"
-            crumbsReplacements={{
-              [facilityId]: { name: patientData?.facility_object?.name },
-              [patientId]: { name: patientData?.name },
-              [consultationId]: {
-                name: `Admitted on ${formatDate(
-                  consultationData.admission_date
-                    ? consultationData.admission_date
-                    : "00:00"
-                )}`,
-              },
-            }}
-            breadcrumbs={true}
-          />
-          <div className="w-full sm:w-min lg:absolute xl:right-0 -right-6 top-0 flex sm:flex-row sm:items-center flex-col space-y-1 sm:space-y-0 sm:divide-x-2">
-            {patientData.is_active && (
-              <div className="w-full flex flex-col sm:flex-row px-2">
-                <button
-                  onClick={() => setShowDoctors(true)}
-                  className="w-full btn m-1 btn-primary hover:text-white"
-                >
-                  Doctor Connect
-                </button>
-                {patientData.last_consultation?.id && (
-                  <Link
-                    href={`/facility/${patientData.facility}/patient/${patientData.id}/consultation/${patientData.last_consultation?.id}/feed`}
-                    className="w-full btn m-1 btn-primary hover:text-white"
-                  >
-                    Camera Feed
-                  </Link>
-                )}
-              </div>
-            )}
-            <div className="w-full flex flex-col sm:flex-row px-2">
-              <Link
-                href={`/facility/${patientData.facility}/patient/${patientData.id}`}
-                className="w-full btn m-1 btn-primary hover:text-white"
-              >
-                Patient Details
-              </Link>
-              <Link
-                href={`/facility/${patientData.facility}/patient/${patientData.id}/notes`}
-                className="w-full btn m-1 btn-primary hover:text-white"
-              >
-                Doctor&apos;s Notes
-              </Link>
-            </div>
-          </div>
-        </nav>
         <div className="flex md:flex-row flex-col w-full mt-2">
           <div className="border rounded-lg bg-white shadow h-full text-black w-full">
             <PatientInfoCard
@@ -781,7 +784,9 @@ export const ConsultationDetails = (props: any) => {
         {tab === "UPDATES" && (
           <div className="flex xl:flex-row flex-col">
             <div className="xl:w-2/3 w-full">
-              <PageTitle title="Info" hideBack={true} breadcrumbs={false} />
+              <div className="pt-4 mb-4">
+                <PageTitle title="Info" hideBack={true} breadcrumbs={false} />
+              </div>
               {!consultationData.discharge_date && (
                 <section className="bg-white shadow-sm rounded-md flex items-stretch w-full flex-col lg:flex-row overflow-hidden">
                   <PatientVitalsCard
@@ -1036,11 +1041,13 @@ export const ConsultationDetails = (props: any) => {
               </div>
             </div>
             <div className="xl:w-1/3 w-full pl-4">
-              <PageTitle
-                title="Update Log"
-                hideBack={true}
-                breadcrumbs={false}
-              />
+              <div className="pt-4 mb-4">
+                <PageTitle
+                  title="Update Log"
+                  hideBack={true}
+                  breadcrumbs={false}
+                />
+              </div>
               <DailyRoundsList
                 facilityId={facilityId}
                 patientId={patientId}
@@ -1052,12 +1059,14 @@ export const ConsultationDetails = (props: any) => {
         )}
         {tab === "FEED" && (
           <div>
-            <PageTitle
-              title="Camera Feed"
-              breadcrumbs={false}
-              hideBack={true}
-              focusOnLoad={true}
-            />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="Camera Feed"
+                breadcrumbs={false}
+                hideBack={true}
+                focusOnLoad={true}
+              />
+            </div>
             <Feed
               facilityId={facilityId}
               patientId={patientId}
@@ -1067,11 +1076,13 @@ export const ConsultationDetails = (props: any) => {
         )}
         {tab === "SUMMARY" && (
           <div className="mt-4">
-            <PageTitle
-              title="Primary Parameters Plot"
-              hideBack={true}
-              breadcrumbs={false}
-            />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="Primary Parameters Plot"
+                hideBack={true}
+                breadcrumbs={false}
+              />
+            </div>
             <PrimaryParametersPlot
               facilityId={facilityId}
               patientId={patientId}
@@ -1191,11 +1202,13 @@ export const ConsultationDetails = (props: any) => {
 
         {tab === "ABG" && (
           <div>
-            <PageTitle
-              title="ABG Analysis Plot"
-              hideBack={true}
-              breadcrumbs={false}
-            />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="ABG Analysis Plot"
+                hideBack={true}
+                breadcrumbs={false}
+              />
+            </div>
             <ABGPlots
               facilityId={facilityId}
               patientId={patientId}
@@ -1205,11 +1218,13 @@ export const ConsultationDetails = (props: any) => {
         )}
         {tab === "NURSING" && (
           <div>
-            <PageTitle
-              title="Nursing Analysis"
-              hideBack={true}
-              breadcrumbs={false}
-            />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="Nursing Analysis"
+                hideBack={true}
+                breadcrumbs={false}
+              />
+            </div>
             <NursingPlot
               facilityId={facilityId}
               patientId={patientId}
@@ -1219,11 +1234,13 @@ export const ConsultationDetails = (props: any) => {
         )}
         {tab === "NEUROLOGICAL_MONITORING" && (
           <div>
-            <PageTitle
-              title="Neurological Monitoring"
-              hideBack={true}
-              breadcrumbs={false}
-            />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="Neurological Monitoring"
+                hideBack={true}
+                breadcrumbs={false}
+              />
+            </div>
             <NeurologicalTable
               facilityId={facilityId}
               patientId={patientId}
@@ -1233,11 +1250,13 @@ export const ConsultationDetails = (props: any) => {
         )}
         {tab === "VENTILATOR" && (
           <div>
-            <PageTitle
-              title="Ventilator Parameters"
-              hideBack={true}
-              breadcrumbs={false}
-            />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="Ventilator Parameters"
+                hideBack={true}
+                breadcrumbs={false}
+              />
+            </div>
             <VentilatorPlot
               facilityId={facilityId}
               patientId={patientId}
@@ -1247,7 +1266,13 @@ export const ConsultationDetails = (props: any) => {
         )}
         {tab === "NUTRITION" && (
           <div>
-            <PageTitle title="Nutrition" hideBack={true} breadcrumbs={false} />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="Nutrition"
+                hideBack={true}
+                breadcrumbs={false}
+              />
+            </div>
             <NutritionPlots
               facilityId={facilityId}
               patientId={patientId}
@@ -1257,32 +1282,38 @@ export const ConsultationDetails = (props: any) => {
         )}
         {tab === "PRESSURE_SORE" && (
           <div className="mt-4">
-            <PageTitle
-              title="Pressure Sore"
-              hideBack={true}
-              breadcrumbs={false}
-            />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="Pressure Sore"
+                hideBack={true}
+                breadcrumbs={false}
+              />
+            </div>
             <PressureSoreDiagrams consultationId={consultationId} />
           </div>
         )}
         {tab === "DIALYSIS" && (
           <div>
-            <PageTitle
-              title="Dialysis Plots"
-              hideBack={true}
-              breadcrumbs={false}
-            />
+            <div className="pt-4 mb-4">
+              <PageTitle
+                title="Dialysis Plots"
+                hideBack={true}
+                breadcrumbs={false}
+              />
+            </div>
             <DialysisPlots consultationId={consultationId}></DialysisPlots>
           </div>
         )}
         {tab === "INVESTIGATIONS" && (
           <div>
             <div className="sm:flex justify-between">
-              <PageTitle
-                title="Investigations"
-                hideBack={true}
-                breadcrumbs={false}
-              />
+              <div className="pt-4 mb-4">
+                <PageTitle
+                  title="Investigations"
+                  hideBack={true}
+                  breadcrumbs={false}
+                />
+              </div>
               <div className="pt-6">
                 <ButtonV2
                   disabled={!patientData.is_active}
@@ -1312,6 +1343,6 @@ export const ConsultationDetails = (props: any) => {
         show={showDoctors}
         setShow={setShowDoctors}
       />
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index 7a5e8c74b30..8b3ee454b40 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -60,9 +60,9 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import { DiagnosisSelectFormField } from "../Common/DiagnosisSelectFormField";
 import { SymptomsSelect } from "../Common/SymptomsSelect";
 import DateFormField from "../Form/FormFields/DateFormField";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 type BooleanStrings = "true" | "false";
 
@@ -692,16 +692,14 @@ export const ConsultationForm = (props: any) => {
   };
 
   return (
-    <div ref={topRef}>
-      <PageTitle
-        className="ml-3 mt-5"
-        title={isUpdate ? "Edit Consultation" : "Create Consultation"}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-      />
-
+    <Page
+      title={isUpdate ? "Edit Consultation" : "Create Consultation"}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+      ref={topRef}
+    >
       <form
         className="mt-10 bg-white rounded px-8 md:px-16 py-5 md:py-11 max-w-3xl mx-auto flex flex-col gap-4"
         onSubmit={handleSubmit}
@@ -1027,6 +1025,6 @@ export const ConsultationForm = (props: any) => {
           </div>
         </div>
       )}
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/Consultations/DailyRoundsList.tsx b/src/Components/Facility/Consultations/DailyRoundsList.tsx
index 219eeb0aa9b..75282b8cdbb 100644
--- a/src/Components/Facility/Consultations/DailyRoundsList.tsx
+++ b/src/Components/Facility/Consultations/DailyRoundsList.tsx
@@ -246,11 +246,13 @@ export const DailyRoundsList = (props: any) => {
     <div>
       <div>
         <div className="md:hidden">
-          <PageTitle
-            title="Consultation Update"
-            hideBack={true}
-            breadcrumbs={false}
-          />
+          <div className="pt-4 mb-4">
+            <PageTitle
+              title="Consultation Update"
+              hideBack={true}
+              breadcrumbs={false}
+            />
+          </div>
         </div>
         <div className={!isDailyRoundLoading ? "flex flex-wrap" : ""}>
           <div className="overflow-y-auto h-screen space-y-4">{roundsList}</div>
diff --git a/src/Components/Facility/Consultations/LiveFeed.tsx b/src/Components/Facility/Consultations/LiveFeed.tsx
index 5b82165b81b..90d1f96e395 100644
--- a/src/Components/Facility/Consultations/LiveFeed.tsx
+++ b/src/Components/Facility/Consultations/LiveFeed.tsx
@@ -3,7 +3,6 @@ import { useEffect, useState, useRef } from "react";
 import { useDispatch } from "react-redux";
 import screenfull from "screenfull";
 import useKeyboardShortcut from "use-keyboard-shortcut";
-import loadable from "@loadable/component";
 import {
   listAssetBeds,
   partialUpdateAssetBed,
@@ -16,7 +15,6 @@ import {
   useMSEMediaPlayer,
 } from "../../../Common/hooks/useMSEplayer";
 import { useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
-const PageTitle = loadable(() => import("../../Common/PageTitle"));
 import * as Notification from "../../../Utils/Notifications.js";
 import {
   Card,
@@ -32,6 +30,7 @@ import { BedSelect } from "../../Common/BedSelect";
 import { BedModel } from "../models";
 import { TextInputField } from "../../Common/HelperInputFields";
 import useWindowDimensions from "../../../Common/hooks/useWindowDimensions";
+import Page from "../../Common/components/Page";
 
 const LiveFeed = (props: any) => {
   const middlewareHostname =
@@ -294,9 +293,7 @@ const LiveFeed = (props: any) => {
   }
 
   return (
-    <div className="mt-4 px-6 mb-2">
-      <PageTitle title="Live Feed" hideBack={true} />
-
+    <Page title="Live Feed" hideBack={true} className="mb-2">
       {toDelete && (
         <Modal
           className="flex h-fit justify-center items-center top-1/2"
@@ -644,7 +641,7 @@ const LiveFeed = (props: any) => {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   );
 };
 
diff --git a/src/Components/Facility/FacilityCreate.tsx b/src/Components/Facility/FacilityCreate.tsx
index bce0acf06ac..2d8bebd7c21 100644
--- a/src/Components/Facility/FacilityCreate.tsx
+++ b/src/Components/Facility/FacilityCreate.tsx
@@ -54,8 +54,8 @@ import Steps, { Step } from "../Common/Steps";
 import { BedCapacity } from "./BedCapacity";
 import { DoctorCapacity } from "./DoctorCapacity";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface FacilityProps {
   facilityId?: string;
@@ -572,13 +572,12 @@ export const FacilityCreate = (props: FacilityProps) => {
   switch (currentStep) {
     case 3:
       return (
-        <div className="px-2 pb-2">
-          <PageTitle
-            title={headerText}
-            crumbsReplacements={{
-              [createdFacilityId || "????"]: { name: state.form.name },
-            }}
-          />
+        <Page
+          title={headerText}
+          crumbsReplacements={{
+            [createdFacilityId || "????"]: { name: state.form.name },
+          }}
+        >
           <Steps steps={getSteps()} />
           <div className="mt-3">
             <DoctorCapacity
@@ -592,17 +591,16 @@ export const FacilityCreate = (props: FacilityProps) => {
               }}
             />
           </div>
-        </div>
+        </Page>
       );
     case 2:
       return (
-        <div className="px-2 pb-2">
-          <PageTitle
-            title={headerText}
-            crumbsReplacements={{
-              [createdFacilityId || "????"]: { name: state.form.name },
-            }}
-          />
+        <Page
+          title={headerText}
+          crumbsReplacements={{
+            [createdFacilityId || "????"]: { name: state.form.name },
+          }}
+        >
           <Steps steps={getSteps()} />
           <div className="mt-3">
             <BedCapacity
@@ -616,18 +614,17 @@ export const FacilityCreate = (props: FacilityProps) => {
               }}
             />
           </div>
-        </div>
+        </Page>
       );
     case 1:
     default:
       return (
-        <div className="px-2 pb-2">
-          <PageTitle
-            title={headerText}
-            crumbsReplacements={{
-              [facilityId || "????"]: { name: state.form.name },
-            }}
-          />
+        <Page
+          title={headerText}
+          crumbsReplacements={{
+            [facilityId || "????"]: { name: state.form.name },
+          }}
+        >
           {!facilityId && <Steps steps={getSteps()} />}
           <Card className="mt-4">
             <CardContent>
@@ -1128,7 +1125,7 @@ export const FacilityCreate = (props: FacilityProps) => {
               </form>
             </CardContent>
           </Card>
-        </div>
+        </Page>
       );
   }
 };
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 3a3eaa2fa60..0a07baaf042 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -42,8 +42,8 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import { BedCapacity } from "./BedCapacity";
 import { DoctorCapacity } from "./DoctorCapacity";
 import DialogModal from "../Common/Dialog";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export const getFacilityFeatureIcon = (featureId: number) => {
   const feature = FACILITY_FEATURE_TYPES.find((f) => f.id === featureId);
@@ -296,12 +296,11 @@ export const FacilityHome = (props: any) => {
   );
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={facilityData.name || "Facility"}
-        crumbsReplacements={{ [facilityId]: { name: facilityData.name } }}
-        focusOnLoad={true}
-      />
+    <Page
+      title={facilityData.name || "Facility"}
+      crumbsReplacements={{ [facilityId]: { name: facilityData.name } }}
+      focusOnLoad={true}
+    >
       <Dialog
         maxWidth={"md"}
         open={openDeleteDialog}
@@ -741,6 +740,6 @@ export const FacilityHome = (props: any) => {
           />
         </DialogModal>
       )}
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/FacilityUsers.tsx b/src/Components/Facility/FacilityUsers.tsx
index 54962e24a1f..f6505fc6065 100644
--- a/src/Components/Facility/FacilityUsers.tsx
+++ b/src/Components/Facility/FacilityUsers.tsx
@@ -23,9 +23,9 @@ import * as Notification from "../../Utils/Notifications.js";
 import UserDetails from "../Common/UserDetails";
 import UnlinkFacilityDialog from "../Users/UnlinkFacilityDialog";
 import { classNames } from "../../Utils/utils";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function FacilityUsers(props: any) {
   const { facilityId } = props;
@@ -450,7 +450,7 @@ export default function FacilityUsers(props: any) {
   }
 
   return (
-    <div>
+    <Page title={`Users - ${facilityData?.name}`} hideBack breadcrumbs={false}>
       {linkFacility.show && (
         <LinkFacilityDialog
           username={linkFacility.username}
@@ -458,16 +458,9 @@ export default function FacilityUsers(props: any) {
           handleCancel={hideLinkFacilityModal}
         />
       )}
-      <PageTitle
-        title={`Users - ${facilityData?.name}`}
-        hideBack={true}
-        className="mx-3 md:mx-8"
-        breadcrumbs={false}
-      />
-
-      <div className="mt-5 grid grid-cols-1 md:gap-5 sm:grid-cols-3 m-4 md:px-4">
+      <div className="mt-5 grid grid-cols-1 md:gap-5 sm:grid-cols-3 my-4">
         <div className="bg-white overflow-hidden shadow col-span-1 rounded-lg">
-          <div className="px-4 py-5 sm:p-6">
+          <div className="py-5 sm:p-6">
             <dl>
               <dt className="text-sm leading-5 font-medium text-gray-500 truncate">
                 Total Users
@@ -486,10 +479,7 @@ export default function FacilityUsers(props: any) {
           </div>
         </div>
       </div>
-
-      <div className="px-3 md:px-8">
-        <div>{manageUsers}</div>
-      </div>
+      <div>{manageUsers}</div>
       {userData.show && (
         <UserDeleteDialog
           name={userData.name}
@@ -497,6 +487,6 @@ export default function FacilityUsers(props: any) {
           handleOk={handleSubmit}
         />
       )}
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index d0a335a5dbe..747fdbed63e 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -23,9 +23,9 @@ import SearchInput from "../Form/SearchInput";
 import useFilters from "../../Common/hooks/useFilters";
 import { FacilityCard } from "./FacilityCard";
 import ExportMenu from "../Common/Export";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export const HospitalList = () => {
   const {
@@ -209,34 +209,39 @@ export const HospitalList = () => {
   }
 
   return (
-    <div className="px-6">
-      <div className="flex justify-between items-center">
-        <PageTitle title={t("Facilities")} breadcrumbs={false} hideBack />
-        <ExportMenu
-          exportItems={[
-            {
-              label: "Facilities",
-              action: downloadFacility,
-              filePrefix: "facilities",
-            },
-            {
-              label: "Capacities",
-              action: downloadFacilityCapacity,
-              filePrefix: "capacities",
-            },
-            {
-              label: "Doctors",
-              action: downloadFacilityDoctors,
-              filePrefix: "doctors",
-            },
-            {
-              label: "Triages",
-              action: downloadFacilityTriage,
-              filePrefix: "triages",
-            },
-          ]}
-        />
-      </div>
+    <Page
+      title={t("Facilities")}
+      breadcrumbs={false}
+      hideBack
+      options={
+        <>
+          <ExportMenu
+            exportItems={[
+              {
+                label: "Facilities",
+                action: downloadFacility,
+                filePrefix: "facilities",
+              },
+              {
+                label: "Capacities",
+                action: downloadFacilityCapacity,
+                filePrefix: "capacities",
+              },
+              {
+                label: "Doctors",
+                action: downloadFacilityDoctors,
+                filePrefix: "doctors",
+              },
+              {
+                label: "Triages",
+                action: downloadFacilityTriage,
+                filePrefix: "triages",
+              },
+            ]}
+          />
+        </>
+      }
+    >
       <div className="lg:flex gap-2 mt-4">
         <div className="bg-white overflow-hidden shadow rounded-lg md:mr-2 min-w-fit flex-1">
           <div className="px-4 py-5 sm:p-6">
@@ -329,6 +334,6 @@ export const HospitalList = () => {
       <div className="mt-4 pb-4">
         <div>{manageFacilities}</div>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/InventoryList.tsx b/src/Components/Facility/InventoryList.tsx
index 395f4eb69a8..15a0b36689b 100644
--- a/src/Components/Facility/InventoryList.tsx
+++ b/src/Components/Facility/InventoryList.tsx
@@ -8,7 +8,7 @@ import { getInventorySummary, getAnyFacility } from "../../Redux/actions";
 import Pagination from "../Common/Pagination";
 import { RoleButton } from "../Common/RoleButton";
 import { classNames } from "../../Utils/utils";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
 
 export default function InventoryList(props: any) {
@@ -152,13 +152,11 @@ export default function InventoryList(props: any) {
   }
 
   return (
-    <div>
-      <PageTitle
-        title="Inventory Manager"
-        className="mx-3 md:mx-8"
-        crumbsReplacements={{ [facilityId]: { name: facilityName } }}
-      />
-      <div className="container mx-auto px-4 sm:px-8">
+    <Page
+      title="Inventory Manager"
+      crumbsReplacements={{ [facilityId]: { name: facilityName } }}
+    >
+      <div className="container mx-auto">
         <div className="py-4 md:py-8">
           <div className="flex flex-col md:flex-row">
             <div className="mt-2">
@@ -197,6 +195,6 @@ export default function InventoryList(props: any) {
           {inventoryItem}
         </div>
       </div>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Facility/InventoryLog.tsx b/src/Components/Facility/InventoryLog.tsx
index faf285d9d15..86a11a2a923 100644
--- a/src/Components/Facility/InventoryLog.tsx
+++ b/src/Components/Facility/InventoryLog.tsx
@@ -12,7 +12,7 @@ import { statusType, useAbortableEffect } from "../../Common/utils";
 import Pagination from "../Common/Pagination";
 import { Tooltip } from "@material-ui/core";
 import { formatDate } from "../../Utils/utils";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
 
 export default function InventoryLog(props: any) {
@@ -244,16 +244,14 @@ export default function InventoryLog(props: any) {
   }
 
   return (
-    <div>
-      <PageTitle
-        title="Inventory Log"
-        className="mx-3 md:mx-8"
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [inventoryId]: { name: itemName },
-        }}
-      />
-      <div className="container mx-auto px-4 sm:px-8">
+    <Page
+      title="Inventory Log"
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [inventoryId]: { name: itemName },
+      }}
+    >
+      <div className="container mx-auto">
         <div className="py-8 ">
           <div className="flex justify-between">
             <h4>Item: {itemName}</h4>
@@ -286,6 +284,6 @@ export default function InventoryLog(props: any) {
           {inventoryItem}
         </div>
       </div>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Facility/Investigations/Reports/index.tsx b/src/Components/Facility/Investigations/Reports/index.tsx
index 71f84b7c425..6ec9221421c 100644
--- a/src/Components/Facility/Investigations/Reports/index.tsx
+++ b/src/Components/Facility/Investigations/Reports/index.tsx
@@ -9,7 +9,6 @@ import {
   getPatient,
 } from "../../../../Redux/actions";
 import { MultiSelectField } from "../../../Common/HelperInputFields";
-import PageTitle from "../../../Common/PageTitle";
 import { Button, ButtonGroup, Checkbox, TextField } from "@material-ui/core";
 import Loading from "../../../Common/Loading";
 import _ from "lodash";
@@ -18,6 +17,7 @@ import { InputLabel, makeStyles, CircularProgress } from "@material-ui/core";
 import { InvestigationResponse } from "./types";
 import ReportTable from "./ReportTable";
 import * as Notification from "../../../../Utils/Notifications";
+import Page from "../../../Common/components/Page";
 
 const RESULT_PER_PAGE = 14;
 
@@ -331,14 +331,14 @@ const InvestigationReports = ({ id }: any) => {
   const nextSessionDisabled = isNextSessionDisabled || isLoading.tableData;
 
   return (
-    <div className="max-w-7xl mx-auto px-4">
-      <PageTitle
-        title={"Investigation Reports"}
-        crumbsReplacements={{
-          patient: { style: "pointer-events-none" },
-          [id]: { name: patientDetails.name },
-        }}
-      />
+    <Page
+      className="max-w-7xl mx-auto"
+      title={"Investigation Reports"}
+      crumbsReplacements={{
+        patient: { style: "pointer-events-none" },
+        [id]: { name: patientDetails.name },
+      }}
+    >
       {!isLoading.investigationGroupLoading ? (
         <>
           <div className="mt-5">
@@ -485,7 +485,7 @@ const InvestigationReports = ({ id }: any) => {
       ) : (
         <Loading />
       )}
-    </div>
+    </Page>
   );
 };
 
diff --git a/src/Components/Facility/Investigations/ShowInvestigation.tsx b/src/Components/Facility/Investigations/ShowInvestigation.tsx
index b10fdf5a401..905c48e56b9 100644
--- a/src/Components/Facility/Investigations/ShowInvestigation.tsx
+++ b/src/Components/Facility/Investigations/ShowInvestigation.tsx
@@ -6,12 +6,12 @@ import {
   getInvestigation,
   getPatient,
 } from "../../../Redux/actions";
-import PageTitle from "../../Common/PageTitle";
 import InvestigationTable from "./InvestigationTable";
 import loadable from "@loadable/component";
 import _ from "lodash";
 import { navigate } from "raviger";
 import * as Notification from "../../../Utils/Notifications.js";
+import Page from "../../Common/components/Page";
 
 const Loading = loadable(() => import("../../Common/Loading"));
 
@@ -160,15 +160,14 @@ export default function ShowInvestigation(props: any) {
   }, [state.initialValues]);
 
   return (
-    <div className="max-w-7xl mx-auto px-4">
-      <PageTitle
-        title="Investigation"
-        className="mx-3 md:mx-4"
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-      />
+    <Page
+      title="Investigation"
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+      className="max-w-7xl mx-auto"
+    >
       {isLoading ? (
         <Loading />
       ) : (
@@ -181,6 +180,6 @@ export default function ShowInvestigation(props: any) {
           handleSave={handleSubmit}
         />
       )}
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Facility/Investigations/index.tsx b/src/Components/Facility/Investigations/index.tsx
index d3afa63dafa..3379ca1b64a 100644
--- a/src/Components/Facility/Investigations/index.tsx
+++ b/src/Components/Facility/Investigations/index.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useReducer, useState } from "react";
-import { MultiSelectField } from "../../Common/HelperInputFields";
 import { TestTable } from "./Table";
 import { useDispatch } from "react-redux";
 import Autocomplete from "@material-ui/lab/Autocomplete";
-import { Checkbox, TextField, InputLabel } from "@material-ui/core";
+import { Checkbox, TextField } from "@material-ui/core";
 import {
   createInvestigation,
   listInvestigationGroups,
@@ -13,9 +12,9 @@ import {
 import * as Notification from "../../../Utils/Notifications.js";
 import { navigate } from "raviger";
 import loadable from "@loadable/component";
+import Page from "../../Common/components/Page";
 
 const Loading = loadable(() => import("../../Common/Loading"));
-const PageTitle = loadable(() => import("../../Common/PageTitle"));
 
 const initialState = {
   form: {},
@@ -57,7 +56,7 @@ const testFormReducer = (state = initialState, action: any) => {
   }
 };
 
-let listOfInvestigations = (
+const listOfInvestigations = (
   group_id: string,
   investigations: InvestigationType[]
 ) => {
@@ -66,7 +65,7 @@ let listOfInvestigations = (
   );
 };
 
-let findGroup = (group_id: string, groups: Group[]) => {
+const findGroup = (group_id: string, groups: Group[]) => {
   return groups.find((g) => g.external_id === group_id);
 };
 
@@ -75,6 +74,7 @@ const Investigation = (props: {
   patientId: string;
   facilityId: string;
 }) => {
+  // eslint-disable-next-line
   const { consultationId, patientId, facilityId } = props;
 
   const dispatch: any = useDispatch();
@@ -140,12 +140,12 @@ const Investigation = (props: {
   }, [props.consultationId]);
 
   const initialiseForm = () => {
-    let investigationsArray = selectedGroup.map((group_id: string) => {
+    const investigationsArray = selectedGroup.map((group_id: string) => {
       return listOfInvestigations(group_id, investigations);
     });
 
-    let flatInvestigations = investigationsArray.flat();
-    let form: any = {};
+    const flatInvestigations = investigationsArray.flat();
+    const form: any = {};
 
     flatInvestigations.forEach(
       (i: InvestigationType) =>
@@ -162,7 +162,7 @@ const Investigation = (props: {
     );
     setState({ type: "set_form", form });
   };
-
+  // eslint-disable-next-line
   const handleSubmit = async (e: any) => {
     initialiseForm();
     if (!saving) {
@@ -211,14 +211,14 @@ const Investigation = (props: {
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4">
-      <PageTitle
-        title={"Log Lab Result"}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-      />
+    <Page
+      title={"Log Lab Result"}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+      className="max-w-7xl mx-auto"
+    >
       <div className="mt-5">
         <label className="text-sm" id="investigation-group-label">
           Search Investigations & Groups
@@ -312,7 +312,7 @@ const Investigation = (props: {
       >
         Save Investigation
       </button>
-    </div>
+    </Page>
   );
 };
 
diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index b5e1922748d..04dea64fdb5 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -8,7 +8,7 @@ import Pagination from "../Common/Pagination";
 import { RoleButton } from "../Common/RoleButton";
 import { LocationModel } from "./models";
 import { ReactElement } from "react";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface LocationManagementProps {
@@ -162,13 +162,11 @@ export const LocationManagement = (props: LocationManagementProps) => {
   }
 
   return (
-    <div>
-      <PageTitle
-        title="Location Management"
-        className="mx-3 md:mx-8"
-        crumbsReplacements={{ [facilityId]: { name: facilityName } }}
-      />
-      <div className="container mx-auto px-4 py-2 sm:px-8">
+    <Page
+      title="Location Management"
+      crumbsReplacements={{ [facilityId]: { name: facilityName } }}
+    >
+      <div className="container mx-auto py-2">
         <div className="flex justify-end">
           <RoleButton
             className="px-4 py-1 rounded-md bg-primary-500 text-white text-lg font-semibold shadow"
@@ -184,6 +182,6 @@ export const LocationManagement = (props: LocationManagementProps) => {
         </div>
         {location}
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/MinQuantityList.tsx b/src/Components/Facility/MinQuantityList.tsx
index 1168a85b8f2..053660d7b08 100644
--- a/src/Components/Facility/MinQuantityList.tsx
+++ b/src/Components/Facility/MinQuantityList.tsx
@@ -8,8 +8,8 @@ import { navigate } from "raviger";
 import { RoleButton } from "../Common/RoleButton";
 import { MinQuantityRequiredModal } from "./MinQuantityRequiredModal";
 import ButtonV2 from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function MinQuantityList(props: any) {
   const { facilityId }: any = props;
@@ -207,25 +207,22 @@ export default function MinQuantityList(props: any) {
   }
 
   return (
-    <div>
-      <PageTitle
-        title="Minimum Quantity Required"
-        className="mx-3 md:mx-8"
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          min_quantity: {
-            name: "Min Quantity",
-            uri: `/facility/${facilityId}/inventory/min_quantity/list`,
-          },
-          list: {
-            style: "pointer-events-none",
-          },
-        }}
-      />
-      <div className="container mx-auto px-4 sm:px-8">
+    <Page
+      title="Minimum Quantity Required"
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        min_quantity: {
+          name: "Min Quantity",
+          uri: `/facility/${facilityId}/inventory/min_quantity/list`,
+        },
+        list: {
+          style: "pointer-events-none",
+        },
+      }}
+    >
+      <div className="container mx-auto">
         <div className="py-8">
           <RoleButton
-            className="ml-2"
             materialButtonProps={{
               variant: "contained",
               color: "primary",
@@ -255,6 +252,6 @@ export default function MinQuantityList(props: any) {
           }}
         />
       )}
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Facility/SetInventoryForm.tsx b/src/Components/Facility/SetInventoryForm.tsx
index e3c1ecb2afd..c815ace7ba3 100644
--- a/src/Components/Facility/SetInventoryForm.tsx
+++ b/src/Components/Facility/SetInventoryForm.tsx
@@ -9,8 +9,8 @@ import { SelectField, TextInputField } from "../Common/HelperInputFields";
 import { InventoryItemsModel } from "./models";
 import { goBack } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 const initForm = {
   id: "",
@@ -130,20 +130,19 @@ export const SetInventoryForm = (props: any) => {
   }
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title="Set Minimum Quantity"
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          min_quantity: {
-            name: "Min Quantity",
-            uri: `/facility/${facilityId}/inventory/min_quantity/list`,
-          },
-          set: {
-            style: "pointer-events-none",
-          },
-        }}
-      />
+    <Page
+      title="Set Minimum Quantity"
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        min_quantity: {
+          name: "Min Quantity",
+          uri: `/facility/${facilityId}/inventory/min_quantity/list`,
+        },
+        set: {
+          style: "pointer-events-none",
+        },
+      }}
+    >
       <div className="mt-4">
         <Card>
           <form onSubmit={(e) => handleSubmit(e)}>
@@ -201,6 +200,6 @@ export const SetInventoryForm = (props: any) => {
           </form>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/TriageForm.tsx b/src/Components/Facility/TriageForm.tsx
index 191ea64b7ef..9134538cf01 100644
--- a/src/Components/Facility/TriageForm.tsx
+++ b/src/Components/Facility/TriageForm.tsx
@@ -18,8 +18,8 @@ import { goBack } from "../../Utils/utils";
 import ButtonV2 from "../Common/components/ButtonV2";
 import DateInputV2 from "../Common/DateInputV2";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface triageFormProps extends PatientStatsModel {
   facilityId: number;
@@ -270,17 +270,15 @@ export const TriageForm = (props: triageFormProps) => {
     : "border-gray-200";
 
   return (
-    <div className="px-2">
-      <PageTitle
-        title={headerText}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [id || "????"]: {
-            name: moment(state.form.entry_date).format("YYYY-MM-DD"),
-          },
-        }}
-      />
-
+    <Page
+      title={headerText}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [id || "????"]: {
+          name: moment(state.form.entry_date).format("YYYY-MM-DD"),
+        },
+      }}
+    >
       <Modal
         open={openModalForExistingTriage}
         aria-labelledby="Triage Check"
@@ -329,7 +327,7 @@ export const TriageForm = (props: triageFormProps) => {
             <CardContent>
               <div className="max-w-[250px] pb-4">
                 <InputLabel>Entry Date</InputLabel>
-                <div className="flex-auto">
+                <div className="flex-auto mt-2">
                   <DateInputV2
                     className={`bg-gray-50 ${borderColor}`}
                     value={state.form.entry_date}
@@ -441,6 +439,6 @@ export const TriageForm = (props: triageFormProps) => {
           </form>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Facility/UpdateFacilityMiddleware.tsx b/src/Components/Facility/UpdateFacilityMiddleware.tsx
index 520934fb0ed..edae8db7f8a 100644
--- a/src/Components/Facility/UpdateFacilityMiddleware.tsx
+++ b/src/Components/Facility/UpdateFacilityMiddleware.tsx
@@ -11,8 +11,8 @@ import * as Notification from "../../Utils/Notifications.js";
 import { navigate } from "raviger";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import TextFormField from "../Form/FormFields/TextFormField";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 const initForm = {
   name: "",
@@ -118,13 +118,13 @@ export const UpdateFacilityMiddleware = (props: any) => {
   }
 
   return (
-    <div className="px-2 pb-2 max-w-3xl mx-auto">
-      <PageTitle
-        title="Update Middleware"
-        crumbsReplacements={{
-          [facilityId]: { name: state.form.name },
-        }}
-      />
+    <Page
+      title="Update Middleware"
+      crumbsReplacements={{
+        [facilityId]: { name: state.form.name },
+      }}
+      className="pb-2 max-w-3xl mx-auto"
+    >
       <div className="mt-4">
         <Card>
           <form onSubmit={(e) => handleSubmit(e)}>
@@ -147,6 +147,6 @@ export const UpdateFacilityMiddleware = (props: any) => {
           </form>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Notifications/NoticeBoard.tsx b/src/Components/Notifications/NoticeBoard.tsx
index 05e0728c6ad..b322289116e 100644
--- a/src/Components/Notifications/NoticeBoard.tsx
+++ b/src/Components/Notifications/NoticeBoard.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { getNotifications } from "../../Redux/actions";
-import PageTitle from "../Common/PageTitle";
 import { Card, CardContent } from "@material-ui/core";
 import Loading from "../Common/Loading";
 import { formatDate } from "../../Utils/utils";
+import Page from "../Common/components/Page";
 
 export const NoticeBoard: any = () => {
   const dispatch: any = useDispatch();
@@ -65,9 +65,13 @@ export const NoticeBoard: any = () => {
 
   if (isLoading) return <Loading />;
   return (
-    <div className="px-6">
-      <PageTitle title="Notice Board" hideBack={true} breadcrumbs={false} />
+    <Page
+      className="px-6"
+      title="Notice Board"
+      hideBack={true}
+      breadcrumbs={false}
+    >
       <div>{notices}</div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Patient/DailyRoundListDetails.tsx b/src/Components/Patient/DailyRoundListDetails.tsx
index 6ece13da5f4..13636c8b3ee 100644
--- a/src/Components/Patient/DailyRoundListDetails.tsx
+++ b/src/Components/Patient/DailyRoundListDetails.tsx
@@ -8,8 +8,8 @@ import { CURRENT_HEALTH_CHANGE, SYMPTOM_CHOICES } from "../../Common/constants";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { getConsultationDailyRoundsDetails } from "../../Redux/actions";
 import { DailyRoundsModel } from "./models";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 const symptomChoices = [...SYMPTOM_CHOICES];
 const currentHealthChoices = [...CURRENT_HEALTH_CHANGE];
 
@@ -77,8 +77,7 @@ export const DailyRoundListDetails = (props: any) => {
   }
 
   return (
-    <div className="px-2">
-      <PageTitle title={`Consultation Update #${id}`} />
+    <Page title={`Consultation Update #${id}`}>
       <div className="border rounded-lg bg-white shadow h-full hover:border-primary-500 text-black mt-4 p-4">
         <div className="flex justify-between">
           <div className="max-w-md">
@@ -219,6 +218,6 @@ export const DailyRoundListDetails = (props: any) => {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Patient/DailyRounds.tsx b/src/Components/Patient/DailyRounds.tsx
index 2b680181181..8044da20d2f 100644
--- a/src/Components/Patient/DailyRounds.tsx
+++ b/src/Components/Patient/DailyRounds.tsx
@@ -39,8 +39,8 @@ import {
 import * as Notification from "../../Utils/Notifications";
 import { make as Link } from "../Common/components/Link.gen";
 import { formatDate } from "../../Utils/utils";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 const initForm: any = {
   otherSymptom: false,
@@ -489,14 +489,14 @@ export const DailyRounds = (props: any) => {
   }
 
   return (
-    <div className="px-2 pb-2 max-w-3xl mx-auto">
-      <PageTitle
-        title={headerText}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-      />
+    <Page
+      title={headerText}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+      className="pb-2 max-w-3xl mx-auto"
+    >
       <div className="mt-4">
         <div className="bg-white rounded shadow">
           <form onSubmit={(e) => handleSubmit(e)}>
@@ -977,6 +977,6 @@ export const DailyRounds = (props: any) => {
           </form>
         </div>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
index 864cea51a1a..62dfa164af8 100644
--- a/src/Components/Patient/FileUpload.tsx
+++ b/src/Components/Patient/FileUpload.tsx
@@ -1246,15 +1246,17 @@ export const FileUpload = (props: FileUploadProps) => {
           </div>
         </div>
       </DialogModal>
-      <PageTitle
-        title={`${UPLOAD_HEADING[type]}`}
-        hideBack={hideBack}
-        breadcrumbs={false}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-      />
+      <div className="pt-4 mb-4">
+        <PageTitle
+          title={`${UPLOAD_HEADING[type]}`}
+          hideBack={hideBack}
+          breadcrumbs={false}
+          crumbsReplacements={{
+            [facilityId]: { name: facilityName },
+            [patientId]: { name: patientName },
+          }}
+        />
+      </div>
       <div className="mt-4">
         <div className="md:grid grid-cols-2 gap-4">
           {audio ? (
@@ -1367,12 +1369,15 @@ export const FileUpload = (props: FileUploadProps) => {
           ) : null}
         </div>
       </div>
+      <div className="pt-4 mb-4">
+        {" "}
+        <PageTitle
+          title={`${VIEW_HEADING[type]}`}
+          hideBack={true}
+          breadcrumbs={false}
+        />
+      </div>
 
-      <PageTitle
-        title={`${VIEW_HEADING[type]}`}
-        hideBack={true}
-        breadcrumbs={false}
-      />
       <HeadedTabs
         tabs={tabs}
         handleChange={handleTabChange}
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 79886a54f6d..5b9953b9151 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -35,9 +35,9 @@ import ButtonV2 from "../Common/components/ButtonV2";
 import { ExportMenu } from "../Common/Export";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -633,19 +633,11 @@ export const PatientManager = () => {
   };
 
   return (
-    <div className="px-6">
-      <FacilitiesSelectDialogue
-        show={showDialog}
-        setSelected={(e) => setSelectedFacility(e)}
-        selectedFacility={selectedFacility}
-        handleOk={() => navigate(`facility/${selectedFacility.id}/patient`)}
-        handleCancel={() => {
-          setShowDialog(false);
-          setSelectedFacility({ name: "" });
-        }}
-      />
-      <div className="flex flex-col lg:flex-row justify-between items-center">
-        <PageTitle title="Patients" hideBack={true} breadcrumbs={false} />
+    <Page
+      title="Patients"
+      hideBack={true}
+      breadcrumbs={false}
+      options={
         <div className="flex flex-col gap-2 lg:gap-3 lg:flex-row justify-end">
           <ButtonV2
             className="flex gap-2 items-center font-semibold"
@@ -715,7 +707,18 @@ export const PatientManager = () => {
             )}
           </div>
         </div>
-      </div>
+      }
+    >
+      <FacilitiesSelectDialogue
+        show={showDialog}
+        setSelected={(e) => setSelectedFacility(e)}
+        selectedFacility={selectedFacility}
+        handleOk={() => navigate(`facility/${selectedFacility.id}/patient`)}
+        handleCancel={() => {
+          setShowDialog(false);
+          setSelectedFacility({ name: "" });
+        }}
+      />
       <div className="mt-5 manualGrid grid-cols-1 gap-3 sm:grid-cols-3 my-4 px-2 md:px-0 mb-[-12px]">
         <div>
           <div className="flex flex-col mt-2 h-full">
@@ -853,6 +856,6 @@ export const PatientManager = () => {
           </TabPanel>
         </SwipeableViews>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index 67d555c5818..5d18bf41d16 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -34,9 +34,9 @@ import ButtonV2 from "../Common/components/ButtonV2";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import RelativeDateUserMention from "../Common/RelativeDateUserMention";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export const PatientHome = (props: any) => {
   const { facilityId, id } = props;
@@ -388,7 +388,15 @@ export const PatientHome = (props: any) => {
   };
 
   return (
-    <div className="px-2 pb-2">
+    <Page
+      title={"Patient Details"}
+      backUrl="/patients"
+      crumbsReplacements={{
+        [facilityId]: { name: patientData?.facility_object?.name },
+        [id]: { name: patientData?.name },
+      }}
+      className="pb-2"
+    >
       {showAlertMessage.show && (
         <AlertDialog
           title={showAlertMessage.title}
@@ -399,15 +407,6 @@ export const PatientHome = (props: any) => {
       )}
 
       <div id="revamp">
-        <PageTitle
-          title={"Patient Details"}
-          backUrl="/patients"
-          crumbsReplacements={{
-            [facilityId]: { name: patientData?.facility_object?.name },
-            [id]: { name: patientData?.name },
-          }}
-        />
-
         <div className="relative mt-2">
           <div className="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
             <div className="md:flex">
@@ -1534,6 +1533,6 @@ export const PatientHome = (props: any) => {
           </div>
         )}
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Patient/PatientNotes.tsx b/src/Components/Patient/PatientNotes.tsx
index 2ef4e1f15b1..7ea574a274d 100644
--- a/src/Components/Patient/PatientNotes.tsx
+++ b/src/Components/Patient/PatientNotes.tsx
@@ -7,13 +7,13 @@ import {
   getPatient,
 } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
-import PageTitle from "../Common/PageTitle";
 import Pagination from "../Common/Pagination";
 import { navigate } from "raviger";
 import { RESULTS_PER_PAGE_LIMIT } from "../../Common/constants";
 import Loading from "../Common/Loading";
 import { RoleButton } from "../Common/RoleButton";
 import { formatDate } from "../../Utils/utils";
+import Page from "../Common/components/Page";
 
 interface PatientNotesProps {
   patientId: any;
@@ -105,16 +105,15 @@ const PatientNotes = (props: PatientNotesProps) => {
   }
 
   return (
-    <div className="w-full flex flex-col">
-      <PageTitle
-        title="Patient Notes"
-        className="mb-5"
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-      />
-      <h3 className="text-lg pl-10">Add new notes</h3>
+    <Page
+      className="w-full flex flex-col"
+      title="Patient Notes"
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+    >
+      <h3 className="text-lg pl-10 mt-5">Add new notes</h3>
       <textarea
         rows={3}
         placeholder="Type your Note"
@@ -192,7 +191,7 @@ const PatientNotes = (props: PatientNotesProps) => {
           )}
         </div>
       </div>
-    </div>
+    </Page>
   );
 };
 
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index 781d8df70ea..c1d9254dc74 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -59,7 +59,6 @@ import {
 } from "../../Utils/utils";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 import AccordionV2 from "../Common/components/AccordionV2";
 import CollapseV2 from "../Common/components/CollapseV2";
@@ -70,6 +69,7 @@ import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import { FieldLabel } from "../Form/FormFields/FormField";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
+import Page from "../Common/components/Page";
 // const debounce = require("lodash.debounce");
 
 interface PatientRegisterProps extends PatientModel {
@@ -992,7 +992,18 @@ export const PatientRegister = (props: PatientRegisterProps) => {
   }
 
   return (
-    <div className="px-2 pb-2">
+    <Page
+      title={headerText}
+      backButtonCB={() => {
+        if (showImport) {
+          setShowImport(false);
+        }
+      }}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [id || "????"]: { name: patientName },
+      }}
+    >
       {statusDialog.show && (
         <DuplicatePatientDialog
           patientList={statusDialog.patientList}
@@ -1009,19 +1020,6 @@ export const PatientRegister = (props: PatientRegisterProps) => {
           facilityId={facilityId}
         />
       )}
-      <PageTitle
-        title={headerText}
-        className="mb-11"
-        backButtonCB={() => {
-          if (showImport) {
-            setShowImport(false);
-          }
-        }}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [id || "????"]: { name: patientName },
-        }}
-      />
       <div className="mt-4">
         <div className="bg-purple-100 text-purple-800 p-4 font-semibold text-xs my-8 rounded mx-4">
           <div className="text-lg font-bold flex items-center mb-1">
@@ -2054,6 +2052,6 @@ export const PatientRegister = (props: PatientRegisterProps) => {
           )}
         </>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Patient/SampleDetails.tsx b/src/Components/Patient/SampleDetails.tsx
index 42e1f0c08bd..7d70c7e699f 100644
--- a/src/Components/Patient/SampleDetails.tsx
+++ b/src/Components/Patient/SampleDetails.tsx
@@ -10,6 +10,7 @@ import { navigate } from "raviger";
 import { GENDER_TYPES, TEST_TYPE_CHOICES } from "../../Common/constants";
 import _ from "lodash";
 import { formatDate } from "../../Utils/utils";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
@@ -293,8 +294,7 @@ export const SampleDetails = (props: SampleDetailsProps) => {
   }
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle title="Sample Test Details" />
+    <Page className="pb-2" title="Sample Test Details">
       {sampleDetails.patient && (
         <div className="flex justify-end">
           <Button
@@ -455,12 +455,13 @@ export const SampleDetails = (props: SampleDetailsProps) => {
         <h4 className="mt-8">Details of patient</h4>
         {showPatientCard(sampleDetails.patient_object)}
       </div>
-
-      <PageTitle
-        title="Sample Test History"
-        hideBack={true}
-        breadcrumbs={false}
-      />
+      <div className="pt-4 mb-4">
+        <PageTitle
+          title="Sample Test History"
+          hideBack={true}
+          breadcrumbs={false}
+        />
+      </div>
       {sampleDetails.flow &&
         sampleDetails.flow.map((flow: FlowModel) => renderFlow(flow))}
 
@@ -474,6 +475,6 @@ export const SampleDetails = (props: SampleDetailsProps) => {
         unspecified={true}
         audio={true}
       />
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Patient/SamplePreview.tsx b/src/Components/Patient/SamplePreview.tsx
index ed869f3d4b5..788d668ab84 100644
--- a/src/Components/Patient/SamplePreview.tsx
+++ b/src/Components/Patient/SamplePreview.tsx
@@ -1753,7 +1753,9 @@ export default function SampleReport(props: samplePreviewProps) {
   }
   return (
     <Paper className={classes.root}>
-      <PageTitle title="Sample Report" />
+      <div className="px-6 py-3.5">
+        <PageTitle title="Sample Report" />
+      </div>
       {report}
     </Paper>
   );
diff --git a/src/Components/Patient/SampleTest.tsx b/src/Components/Patient/SampleTest.tsx
index 29a2cd1c8cb..bd842c77154 100644
--- a/src/Components/Patient/SampleTest.tsx
+++ b/src/Components/Patient/SampleTest.tsx
@@ -23,8 +23,8 @@ import { goBack } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import { FieldLabel } from "../Form/FormFields/FormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 const icmrCategories = [...ICMR_CATEGORY];
 const sampleTestTypes = [...SAMPLE_TYPE_CHOICES];
@@ -260,14 +260,14 @@ export const SampleTest = (props: any) => {
     return <Loading />;
   }
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={headerText}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-      />
+    <Page
+      title={headerText}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+      className="pb-2"
+    >
       <div className="mt-4">
         <Card>
           <CardContent>
@@ -494,6 +494,6 @@ export const SampleTest = (props: any) => {
           </CardContent>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Patient/SampleViewAdmin.tsx b/src/Components/Patient/SampleViewAdmin.tsx
index 4cc4966ec63..d3458a81652 100644
--- a/src/Components/Patient/SampleViewAdmin.tsx
+++ b/src/Components/Patient/SampleViewAdmin.tsx
@@ -26,8 +26,8 @@ import { formatDate } from "../../Utils/utils";
 import SearchInput from "../Form/SearchInput";
 import useFilters from "../../Common/hooks/useFilters";
 import { ExportButton } from "../Common/Export";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function SampleViewAdmin() {
   const {
@@ -308,7 +308,17 @@ export default function SampleViewAdmin() {
   }
 
   return (
-    <div className="px-6">
+    <Page
+      title="Sample Management System"
+      hideBack={true}
+      breadcrumbs={false}
+      componentRight={
+        <ExportButton
+          action={() => downloadSampleTests({ ...qParams })}
+          filenamePrefix="samples"
+        />
+      }
+    >
       {statusDialog.show && (
         <UpdateStatusDialog
           sample={statusDialog.sample}
@@ -317,17 +327,6 @@ export default function SampleViewAdmin() {
           userType={userType}
         />
       )}
-      <PageTitle
-        title="Sample Management System"
-        hideBack={true}
-        breadcrumbs={false}
-        componentRight={
-          <ExportButton
-            action={() => downloadSampleTests({ ...qParams })}
-            filenamePrefix="samples"
-          />
-        }
-      />
       <div className="mt-5 lg:grid lg:grid-cols-1 gap-5">
         <div className="flex flex-col lg:flex-row gap-6 justify-between">
           <div className="bg-white overflow-hidden shadow rounded-lg px-4 py-5 sm:p-6 w-full">
@@ -440,6 +439,6 @@ export default function SampleViewAdmin() {
       <div className="md:px-2">
         <div className="flex flex-wrap md:-mx-2 lg:-mx-6">{manageSamples}</div>
       </div>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Patient/ShiftCreate.tsx b/src/Components/Patient/ShiftCreate.tsx
index 1adb13b76b3..d3ff622beea 100644
--- a/src/Components/Patient/ShiftCreate.tsx
+++ b/src/Components/Patient/ShiftCreate.tsx
@@ -32,7 +32,7 @@ import { goBack } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface patientShiftProps {
@@ -235,14 +235,14 @@ export const ShiftCreate = (props: patientShiftProps) => {
   }
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={"Create Shift Request"}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-      />
+    <Page
+      title={"Create Shift Request"}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+      className="pb-2"
+    >
       <div className="mt-4">
         <Card>
           <CardContent>
@@ -444,6 +444,6 @@ export const ShiftCreate = (props: patientShiftProps) => {
           </CardContent>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Resource/ListView.tsx b/src/Components/Resource/ListView.tsx
index 7caed317f48..95c8cab0b09 100644
--- a/src/Components/Resource/ListView.tsx
+++ b/src/Components/Resource/ListView.tsx
@@ -14,9 +14,9 @@ import BadgesList from "./BadgesList";
 import { formatDate } from "../../Utils/utils";
 import useFilters from "../../Common/hooks/useFilters";
 import { ExportButton } from "../Common/Export";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function ListView() {
   const dispatch: any = useDispatch();
@@ -85,7 +85,7 @@ export default function ListView() {
         className="w-full md:w-1/2 mt-6 md:px-7"
       >
         <div className="overflow-hidden shadow rounded-lg bg-white h-full">
-          <div className={"p-4 h-full flex flex-col justify-between"}>
+          <div className="p-4 h-full flex flex-col justify-between">
             <div>
               <div className="flex justify-between">
                 <div className="font-bold text-xl capitalize mb-2">
@@ -183,48 +183,46 @@ export default function ListView() {
   };
 
   return (
-    <div className="flex flex-col h-screen px-2 pb-2">
-      <div className="md:flex md:items-center md:justify-between px-4">
-        <PageTitle
-          title="Resource"
-          hideBack
-          componentRight={
-            <ExportButton
-              action={() =>
-                downloadResourceRequests({ ...appliedFilters, csv: 1 })
-              }
-              filenamePrefix="resource_requests"
-            />
-          }
-          breadcrumbs={false}
+    <Page
+      title="Resource"
+      hideBack
+      componentRight={
+        <ExportButton
+          action={() => downloadResourceRequests({ ...appliedFilters, csv: 1 })}
+          filenamePrefix="resource_requests"
         />
-
-        <div className="w-32" />
-        <div className="flex md:flex-row flex-col justify-center items-center md:gap-6">
-          <div className="my-2 md:my-0">
-            <button
-              className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-32 md:w-40 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
-              onClick={onBoardViewBtnClick}
-            >
-              <i
-                className="fa fa-list mr-1 transform rotate-90"
-                aria-hidden="true"
-              ></i>
-              Board View
-            </button>
-          </div>
-          <div className="flex items-start gap-2">
-            <button
-              className="flex leading-none border-2 border-gray-200 bg-white rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 focus:text-primary-600 focus:border-gray-400 hover:border-gray-400 rounded-r-full px-4 py-2 text-sm"
-              onClick={() => advancedFilter.setShow(true)}
-            >
-              <i className="fa fa-filter mr-1" aria-hidden="true"></i>
-              <span>Filters</span>
-            </button>
+      }
+      breadcrumbs={false}
+      className="flex flex-col h-screen pb-2"
+      options={
+        <div className="md:flex md:items-center md:justify-between px-4">
+          <div className="w-32" />
+          <div className="flex md:flex-row flex-col justify-center items-center md:gap-6">
+            <div className="my-2 md:my-0">
+              <button
+                className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-32 md:w-40 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
+                onClick={onBoardViewBtnClick}
+              >
+                <i
+                  className="fa fa-list mr-1 transform rotate-90"
+                  aria-hidden="true"
+                ></i>
+                Board View
+              </button>
+            </div>
+            <div className="flex items-start gap-2">
+              <button
+                className="flex leading-none border-2 border-gray-200 bg-white rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 focus:text-primary-600 focus:border-gray-400 hover:border-gray-400 rounded-r-full px-4 py-2 text-sm"
+                onClick={() => advancedFilter.setShow(true)}
+              >
+                <i className="fa fa-filter mr-1" aria-hidden="true"></i>
+                <span>Filters</span>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-
+      }
+    >
       <BadgesList {...{ appliedFilters, FilterBadges }} />
 
       <div className="px-1">
@@ -254,6 +252,6 @@ export default function ListView() {
           <ListFilter {...advancedFilter} showResourceStatus={true} />
         </div>
       </SlideOver>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Resource/ResourceBoardView.tsx b/src/Components/Resource/ResourceBoardView.tsx
index 90bbc3b05a7..1901f25bd5b 100644
--- a/src/Components/Resource/ResourceBoardView.tsx
+++ b/src/Components/Resource/ResourceBoardView.tsx
@@ -11,9 +11,9 @@ import BadgesList from "./BadgesList";
 import { formatFilter } from "./Commons";
 import useFilters from "../../Common/hooks/useFilters";
 import { ExportButton } from "../Common/Export";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 const ScrollingComponent = withScrolling("div");
 const resourceStatusOptions = RESOURCE_CHOICES.map((obj) => obj.text);
 
@@ -33,27 +33,20 @@ export default function BoardView() {
   };
 
   return (
-    <div className="flex flex-col h-screen px-2 pb-2">
-      <div className="w-full flex-col md:flex-row flex items-center justify-between">
-        <div className="w-1/3 lg:w-1/4">
-          <PageTitle
-            title="Resource"
-            hideBack
-            className="mx-3 md:mx-5"
-            componentRight={
-              <ExportButton
-                action={() =>
-                  downloadResourceRequests({ ...appliedFilters, csv: 1 })
-                }
-                filenamePrefix="resource_requests"
-              />
-            }
-            breadcrumbs={false}
-          />
-        </div>
-
-        <div className="w-full flex justify-center pt-2 lg:space-x-4 items-center flex-col md:flex-row">
-          <div className="bg-gray-200 text-sm text-gray-500 leading-none border-2 border-gray-200 rounded-full inline-flex mt-1">
+    <Page
+      title="Resource"
+      hideBack
+      componentRight={
+        <ExportButton
+          action={() => downloadResourceRequests({ ...appliedFilters, csv: 1 })}
+          filenamePrefix="resource_requests"
+        />
+      }
+      breadcrumbs={false}
+      className="flex flex-col h-screen"
+      options={
+        <div className="w-full flex justify-center lg:space-x-4 items-center flex-col md:flex-row">
+          <div className="bg-gray-200 text-sm text-gray-500 leading-none border-2 border-gray-200 rounded-full inline-flex">
             <button
               className={
                 "flex leading-none border-2 border-gray-200 rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-blue-400 focus:text-blue-400 rounded-r-full px-4 py-2" +
@@ -77,7 +70,7 @@ export default function BoardView() {
               <span>Completed</span>
             </button>
           </div>
-          <div className="mt-2 w-fit inline-flex space-x-1 lg:space-x-4">
+          <div className="w-fit inline-flex space-x-1 lg:space-x-4">
             <button
               className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-28 md:w-36 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
               onClick={onListViewBtnClick}
@@ -94,11 +87,11 @@ export default function BoardView() {
             </button>
           </div>
         </div>
-      </div>
-
+      }
+    >
       <BadgesList {...{ appliedFilters, FilterBadges }} />
-      <ScrollingComponent className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll px-4">
-        <div className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll px-4">
+      <ScrollingComponent className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll pr-4">
+        <div className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll">
           {isLoading ? (
             <Loading />
           ) : (
@@ -118,6 +111,6 @@ export default function BoardView() {
           <ListFilter {...advancedFilter} />
         </div>
       </SlideOver>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Resource/ResourceCreate.tsx b/src/Components/Resource/ResourceCreate.tsx
index c765bf4a7b0..31217f0ee08 100644
--- a/src/Components/Resource/ResourceCreate.tsx
+++ b/src/Components/Resource/ResourceCreate.tsx
@@ -31,7 +31,7 @@ import { goBack } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface resourceProps {
@@ -222,14 +222,14 @@ export default function ResourceCreate(props: resourceProps) {
   }
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={"Create Resource Request"}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          resource: { style: "pointer-events-none" },
-        }}
-      />
+    <Page
+      title={"Create Resource Request"}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        resource: { style: "pointer-events-none" },
+      }}
+      className="pb-2"
+    >
       <div className="mt-4">
         <Card>
           <CardContent>
@@ -380,6 +380,6 @@ export default function ResourceCreate(props: resourceProps) {
           </CardContent>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Resource/ResourceDetails.tsx b/src/Components/Resource/ResourceDetails.tsx
index ab5913b4811..0f03af3192f 100644
--- a/src/Components/Resource/ResourceDetails.tsx
+++ b/src/Components/Resource/ResourceDetails.tsx
@@ -15,8 +15,8 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import * as Notification from "../../Utils/Notifications.js";
 import CommentSection from "./CommentSection";
 import { formatDate } from "../../Utils/utils";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function ResourceDetails(props: { id: string }) {
   const dispatch: any = useDispatch();
@@ -260,23 +260,20 @@ export default function ResourceDetails(props: { id: string }) {
           {ApprovalLetter(data)}
         </div>
       ) : (
-        <div className="mx-3 md:mx-8 mb-10">
-          <div className="my-4 flex flex-col items-start md:flex-row md:justify-between md:items-center">
-            <PageTitle
-              title={"Resource details"}
-              crumbsReplacements={{ [props.id]: { name: data.title } }}
-            />
-            <div>
-              <button
-                onClick={(_) => setIsPrintMode(true)}
-                className="btn btn-primary"
-              >
-                <i className="fas fa-file-alt mr-2"></i> Approval Letter
-              </button>
-            </div>
-          </div>
+        <Page
+          title={"Resource details"}
+          crumbsReplacements={{ [props.id]: { name: data.title } }}
+          options={
+            <button
+              onClick={(_) => setIsPrintMode(true)}
+              className="btn btn-primary"
+            >
+              <i className="fas fa-file-alt mr-2"></i> Approval Letter
+            </button>
+          }
+        >
           {data.assigned_to_object && (
-            <div className="relative rounded-lg shadow bg-primary-200">
+            <div className="relative rounded-lg shadow bg-primary-200 mt-10">
               <div className="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
                 <div className="pr-16 sm:text-center sm:px-16">
                   <p className="font-bold text-primary-800">
@@ -481,7 +478,7 @@ export default function ResourceDetails(props: { id: string }) {
             <h4 className="mb-4">Comments</h4>
             <CommentSection id={props.id} />
           </div>
-        </div>
+        </Page>
       )}
     </div>
   );
diff --git a/src/Components/Resource/ResourceDetailsUpdate.tsx b/src/Components/Resource/ResourceDetailsUpdate.tsx
index 1ad0d8e4a08..2562fd013c8 100644
--- a/src/Components/Resource/ResourceDetailsUpdate.tsx
+++ b/src/Components/Resource/ResourceDetailsUpdate.tsx
@@ -32,8 +32,8 @@ import {
 } from "@material-ui/core";
 import { goBack } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface resourceProps {
   id: string;
@@ -222,11 +222,11 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
   }
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={"Update Resource Request"}
-        crumbsReplacements={{ [props.id]: { name: requestTitle } }}
-      />
+    <Page
+      title={"Update Resource Request"}
+      crumbsReplacements={{ [props.id]: { name: requestTitle } }}
+      className="pb-2"
+    >
       <div className="mt-4">
         <Card>
           <CardContent>
@@ -379,6 +379,6 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
           </CardContent>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx
index 432d519f036..762e242d254 100644
--- a/src/Components/Shifting/BoardView.tsx
+++ b/src/Components/Shifting/BoardView.tsx
@@ -12,9 +12,9 @@ import { formatFilter } from "./Commons";
 import SearchInput from "../Form/SearchInput";
 import useFilters from "../../Common/hooks/useFilters";
 import { ExportButton } from "../Common/Export";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 const ScrollingComponent = withScrolling("div");
 const shiftStatusOptions = SHIFTING_CHOICES.map((obj) => obj.text);
 
@@ -31,97 +31,98 @@ export default function BoardView() {
   const [isLoading] = useState(false);
 
   return (
-    <div className="flex flex-col h-screen px-2 pb-2">
-      <div className="w-full flex flex-col md:flex-row items-center justify-between">
-        <div className="w-1/3 lg:w-1/4">
-          <PageTitle
-            title="Shifting"
-            className="mx-3 md:mx-5"
-            hideBack
-            componentRight={
-              <ExportButton
-                action={() =>
-                  downloadShiftRequests({ ...formatFilter(qParams), csv: 1 })
+    <Page
+      title="Shifting"
+      hideBack
+      componentRight={
+        <ExportButton
+          action={() =>
+            downloadShiftRequests({ ...formatFilter(qParams), csv: 1 })
+          }
+          filenamePrefix="shift_requests"
+        />
+      }
+      options={
+        <div className="w-full flex flex-col md:flex-row items-center justify-between">
+          <div className="w-full flex lg:space-x-4 items-center flex-col lg:flex-row justify-between">
+            <SearchInput
+              name="patient_name_search"
+              value={qParams.patient_name}
+              onChange={(e) => updateQuery({ [e.name]: e.value })}
+              placeholder="Search patient"
+            />
+            <div className="bg-gray-200 text-sm text-gray-500 leading-none border-2 border-gray-200 rounded-full inline-flex mt-1">
+              <button
+                className={
+                  "flex leading-none border-2 border-gray-200 rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-blue-400 focus:text-blue-400 rounded-r-full px-4 py-2" +
+                  (boardFilter === ACTIVE
+                    ? " bg-white text-gray-800"
+                    : " bg-gray-200 text-sm text-gray-500")
                 }
-                filenamePrefix="shift_requests"
-              />
-            }
-            breadcrumbs={false}
-          />
+                onClick={() => setBoardFilter(ACTIVE)}
+              >
+                <span>Active</span>
+              </button>
+              <button
+                className={
+                  "flex leading-none border-2 border-gray-200 rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-blue-400 focus:text-blue-400 rounded-r-full px-4 py-2" +
+                  (boardFilter === COMPLETED
+                    ? " bg-white text-gray-800"
+                    : " bg-gray-200 text-sm text-gray-500")
+                }
+                onClick={() => setBoardFilter(COMPLETED)}
+              >
+                <span>Completed</span>
+              </button>
+            </div>
+            <div className="mt-1 w-fit inline-flex space-x-1 lg:space-x-4">
+              <button
+                className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-28 md:w-36 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
+                onClick={() =>
+                  navigate("/shifting/list-view", { query: qParams })
+                }
+              >
+                <i className="fa fa-list-ul mr-1" aria-hidden="true"></i>
+                List View
+              </button>
+              <button
+                className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-28 md:w-36 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
+                onClick={() => advancedFilter.setShow(true)}
+              >
+                <i className="fa fa-filter mr-1" aria-hidden="true"></i>
+                <span>Filters</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div className="w-full flex pt-2 lg:space-x-4 items-center flex-col lg:flex-row justify-between">
-          <SearchInput
-            name="patient_name_search"
-            value={qParams.patient_name}
-            onChange={(e) => updateQuery({ [e.name]: e.value })}
-            placeholder="Search patient"
-          />
-          <div className="bg-gray-200 text-sm text-gray-500 leading-none border-2 border-gray-200 rounded-full inline-flex mt-1">
-            <button
-              className={
-                "flex leading-none border-2 border-gray-200 rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-blue-400 focus:text-blue-400 rounded-r-full px-4 py-2" +
-                (boardFilter === ACTIVE
-                  ? " bg-white text-gray-800"
-                  : " bg-gray-200 text-sm text-gray-500")
-              }
-              onClick={() => setBoardFilter(ACTIVE)}
-            >
-              <span>Active</span>
-            </button>
-            <button
-              className={
-                "flex leading-none border-2 border-gray-200 rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-blue-400 focus:text-blue-400 rounded-r-full px-4 py-2" +
-                (boardFilter === COMPLETED
-                  ? " bg-white text-gray-800"
-                  : " bg-gray-200 text-sm text-gray-500")
-              }
-              onClick={() => setBoardFilter(COMPLETED)}
-            >
-              <span>Completed</span>
-            </button>
+      }
+      className="flex flex-col h-screen"
+      breadcrumbs={false}
+    >
+      <>
+        <BadgesList {...{ qParams, FilterBadges }} />
+        <ScrollingComponent className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll">
+          <div className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll px-2">
+            {isLoading ? (
+              <Loading />
+            ) : (
+              boardFilter.map((board) => (
+                <ShiftingBoard
+                  key={board}
+                  filterProp={qParams}
+                  board={board}
+                  formatFilter={formatFilter}
+                />
+              ))
+            )}
           </div>
-          <div className="mt-1 w-fit inline-flex space-x-1 lg:space-x-4">
-            <button
-              className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-28 md:w-36 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
-              onClick={() =>
-                navigate("/shifting/list-view", { query: qParams })
-              }
-            >
-              <i className="fa fa-list-ul mr-1" aria-hidden="true"></i>
-              List View
-            </button>
-            <button
-              className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-28 md:w-36 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
-              onClick={() => advancedFilter.setShow(true)}
-            >
-              <i className="fa fa-filter mr-1" aria-hidden="true"></i>
-              <span>Filters</span>
-            </button>
+        </ScrollingComponent>
+        <SlideOver {...advancedFilter}>
+          <div className="bg-white min-h-screen p-4">
+            <ListFilter {...advancedFilter} />
           </div>
-        </div>
-      </div>
-      <BadgesList {...{ qParams, FilterBadges }} />
-      <ScrollingComponent className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll px-4">
-        <div className="flex mt-4 pb-2 flex-1 items-start overflow-x-scroll px-2">
-          {isLoading ? (
-            <Loading />
-          ) : (
-            boardFilter.map((board) => (
-              <ShiftingBoard
-                key={board}
-                filterProp={qParams}
-                board={board}
-                formatFilter={formatFilter}
-              />
-            ))
-          )}
-        </div>
-      </ScrollingComponent>
-      <SlideOver {...advancedFilter}>
-        <div className="bg-white min-h-screen p-4">
-          <ListFilter {...advancedFilter} />
-        </div>
-      </SlideOver>
-    </div>
+        </SlideOver>
+      </>
+    </Page>
   );
 }
diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
index c29b897053e..59a9cb6d358 100644
--- a/src/Components/Shifting/ListView.tsx
+++ b/src/Components/Shifting/ListView.tsx
@@ -17,9 +17,9 @@ import SearchInput from "../Form/SearchInput";
 import useFilters from "../../Common/hooks/useFilters";
 import BadgesList from "./BadgesList";
 import { ExportButton } from "../Common/Export";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function ListView() {
   const dispatch: any = useDispatch();
@@ -296,59 +296,60 @@ export default function ListView() {
   };
 
   return (
-    <div className="flex flex-col h-screen px-2 pb-2">
-      <div className="md:flex md:items-center md:justify-between px-4">
-        <PageTitle
-          title="Shifting"
-          hideBack
-          componentRight={
-            <ExportButton
-              action={() =>
-                downloadShiftRequests({ ...formatFilter(qParams), csv: 1 })
-              }
-              filenamePrefix="shift_requests"
-            />
+    <Page
+      title="Shifting"
+      hideBack
+      componentRight={
+        <ExportButton
+          action={() =>
+            downloadShiftRequests({ ...formatFilter(qParams), csv: 1 })
           }
-          breadcrumbs={false}
+          filenamePrefix="shift_requests"
         />
-
-        <div className="md:px-4">
-          <SearchInput
-            name="patient_name"
-            value={qParams.patient_name}
-            onChange={(e) => updateQuery({ [e.name]: e.value })}
-            placeholder="Search patient"
-          />
-        </div>
-        <div className="w-32">
-          {/* dummy div to align space as per board view */}
-        </div>
-        <div className="flex md:flex-row flex-col justify-center items-center md:gap-6">
-          <div className="my-2 md:my-0">
-            <button
-              className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-32 md:w-40 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
-              onClick={() =>
-                navigate("/shifting/board-view", { query: qParams })
-              }
-            >
-              <i
-                className="fa fa-list mr-1 transform rotate-90"
-                aria-hidden="true"
-              ></i>
-              Board View
-            </button>
+      }
+      breadcrumbs={false}
+      className="flex flex-col h-screen pb-2"
+      options={
+        <>
+          <div className="md:px-4">
+            <SearchInput
+              name="patient_name"
+              value={qParams.patient_name}
+              onChange={(e) => updateQuery({ [e.name]: e.value })}
+              placeholder="Search patient"
+            />
           </div>
-          <div className="flex items-start gap-2">
-            <button
-              className="flex leading-none border-2 border-gray-200 bg-white rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 focus:text-primary-600 focus:border-gray-400 hover:border-gray-400 rounded-r-full px-4 py-2 text-sm"
-              onClick={() => advancedFilter.setShow(true)}
-            >
-              <i className="fa fa-filter mr-1" aria-hidden="true"></i>
-              <span>Filters</span>
-            </button>
+          <div className="w-32">
+            {/* dummy div to align space as per board view */}
           </div>
-        </div>
-      </div>
+          <div className="flex md:flex-row flex-col justify-center items-center md:gap-6">
+            <div className="my-2 md:my-0">
+              <button
+                className="px-4 py-2 rounded-full border-2 border-gray-200 text-sm bg-white text-gray-800 w-32 md:w-40 leading-none transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 hover:border-gray-400 focus:text-primary-600 focus:border-gray-400"
+                onClick={() =>
+                  navigate("/shifting/board-view", { query: qParams })
+                }
+              >
+                <i
+                  className="fa fa-list mr-1 transform rotate-90"
+                  aria-hidden="true"
+                ></i>
+                Board View
+              </button>
+            </div>
+            <div className="flex items-start gap-2">
+              <button
+                className="flex leading-none border-2 border-gray-200 bg-white rounded-full items-center transition-colors duration-300 ease-in focus:outline-none hover:text-primary-600 focus:text-primary-600 focus:border-gray-400 hover:border-gray-400 rounded-r-full px-4 py-2 text-sm"
+                onClick={() => advancedFilter.setShow(true)}
+              >
+                <i className="fa fa-filter mr-1" aria-hidden="true"></i>
+                <span>Filters</span>
+              </button>
+            </div>
+          </div>
+        </>
+      }
+    >
       <BadgesList {...{ qParams, FilterBadges }} />
       <div className="px-1">
         {isLoading ? (
@@ -379,6 +380,6 @@ export default function ListView() {
           <ListFilter showShiftingStatus={true} {...advancedFilter} />
         </div>
       </SlideOver>
-    </div>
+    </Page>
   );
 }
diff --git a/src/Components/Shifting/ShiftDetails.tsx b/src/Components/Shifting/ShiftDetails.tsx
index 94bdbead7c0..27aebb9ac61 100644
--- a/src/Components/Shifting/ShiftDetails.tsx
+++ b/src/Components/Shifting/ShiftDetails.tsx
@@ -20,9 +20,9 @@ import * as Notification from "../../Utils/Notifications.js";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import CommentSection from "./CommentsSection";
 import { formatDate } from "../../Utils/utils";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function ShiftDetails(props: { id: string }) {
   const dispatch: any = useDispatch();
@@ -585,9 +585,9 @@ export default function ShiftDetails(props: { id: string }) {
           {printData(data)}
         </div>
       ) : (
-        <div className="mx-3 md:mx-8 mb-10">
-          <div className="my-4 md:flex justify-between items-center mx-1">
-            <PageTitle title={"Shifting details"} />
+        <Page
+          title={"Shifting details"}
+          options={
             <div className="md:flex items-center space-y-2 md:space-y-0 md:space-x-2">
               <div>
                 <Button
@@ -614,9 +614,10 @@ export default function ShiftDetails(props: { id: string }) {
                 </Button>
               </div>
             </div>
-          </div>
+          }
+        >
           {data.assigned_to_object && (
-            <div className="relative rounded-lg shadow bg-primary-200">
+            <div className="relative rounded-lg shadow bg-primary-200 mt-10">
               <div className="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
                 <div className="pr-16 sm:text-center sm:px-16">
                   <p className="font-bold text-primary-800">
@@ -871,7 +872,7 @@ export default function ShiftDetails(props: { id: string }) {
               </div>
             </div>
           </div>
-        </div>
+        </Page>
       )}
     </div>
   );
diff --git a/src/Components/Shifting/ShiftDetailsUpdate.tsx b/src/Components/Shifting/ShiftDetailsUpdate.tsx
index e917a3bbe03..b793e795a3b 100644
--- a/src/Components/Shifting/ShiftDetailsUpdate.tsx
+++ b/src/Components/Shifting/ShiftDetailsUpdate.tsx
@@ -32,8 +32,8 @@ import {
 } from "@material-ui/core";
 import { goBack } from "../../Utils/utils";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface patientShiftProps {
   id: string;
@@ -237,8 +237,7 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
   }
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle title={"Update Shift Request"} />
+    <Page title={"Update Shift Request"} className="pb-2">
       <div className="mt-4">
         <Card>
           <CardContent>
@@ -456,6 +455,6 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
           </CardContent>
         </Card>
       </div>
-    </div>
+    </Page>
   );
 };
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 47340bac6ac..c83ba97c8d9 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -31,9 +31,9 @@ import useFilters from "../../Common/hooks/useFilters";
 import { classNames } from "../../Utils/utils";
 import ButtonV2 from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 export default function ManageUsers() {
   const { width } = useWindowDimensions();
@@ -556,134 +556,131 @@ export default function ManageUsers() {
   }
 
   return (
-    <div>
-      {linkFacility.show && (
-        <LinkFacilityDialog
-          username={linkFacility.username}
-          handleOk={addFacility}
-          handleCancel={hideLinkFacilityModal}
-        />
-      )}
-      <PageTitle
-        title="User Management"
-        hideBack={true}
-        className="mx-5 px-2"
-        breadcrumbs={false}
-      />
-
-      <div className="mt-5 grid grid-cols-1 md:gap-5 sm:grid-cols-3 m-4 md:px-2">
-        <div className="bg-white overflow-hidden shadow col-span-1 rounded-lg">
-          <div className="p-5 w-fit sm:p-6">
-            <dl>
-              <dt className="text-sm leading-5 font-medium text-gray-500 truncate">
-                Total Users
-              </dt>
-              {/* Show spinner until count is fetched from server */}
-              {isLoading ? (
-                <dd className="mt-4 text-5xl leading-9">
-                  <CircularProgress className="text-primary-500" />
-                </dd>
-              ) : (
-                <dd
-                  id="count"
-                  className="mt-4 text-5xl lg:text-5xl md:text-4xl leading-9 font-semibold text-gray-900"
-                >
-                  {totalCount}
-                </dd>
-              )}
-            </dl>
-          </div>
-        </div>
-        <div className="flex flex-col lg:flex-row justify-between col-span-2 lg:px-3 space-y-3 lg:space-y-0 lg:space-x-4 my-2">
-          <div className="w-full">
-            <SearchInput
-              name="username"
-              onChange={(e) => updateQuery({ [e.name]: e.value })}
-              value={qParams.username}
-              placeholder="Search by username"
-            />
+    <Page
+      title="User Management"
+      hideBack={true}
+      // className="mx-5 px-2"
+      breadcrumbs={false}
+    >
+      <>
+        {linkFacility.show && (
+          <LinkFacilityDialog
+            username={linkFacility.username}
+            handleOk={addFacility}
+            handleCancel={hideLinkFacilityModal}
+          />
+        )}
+
+        <div className="mt-5 grid grid-cols-1 md:gap-5 sm:grid-cols-3">
+          <div className="bg-white overflow-hidden shadow col-span-1 rounded-lg">
+            <div className="p-5 w-fit sm:p-6">
+              <dl>
+                <dt className="text-sm leading-5 font-medium text-gray-500 truncate">
+                  Total Users
+                </dt>
+                {/* Show spinner until count is fetched from server */}
+                {isLoading ? (
+                  <dd className="mt-4 text-5xl leading-9">
+                    <CircularProgress className="text-primary-500" />
+                  </dd>
+                ) : (
+                  <dd className="mt-4 text-5xl lg:text-5xl md:text-4xl leading-9 font-semibold text-gray-900">
+                    {totalCount}
+                  </dd>
+                )}
+              </dl>
+            </div>
           </div>
+          <div className="flex flex-col lg:flex-row justify-between col-span-2 lg:px-3 space-y-3 lg:space-y-0 lg:space-x-4 my-2">
+            <div className="w-full">
+              <SearchInput
+                name="username"
+                onChange={(e) => updateQuery({ [e.name]: e.value })}
+                value={qParams.username}
+                placeholder="Search by username"
+              />
+            </div>
 
-          <div>
-            <div className="flex items-start mb-2">
-              <button
-                className="btn btn-primary-ghost w-full"
-                onClick={() => advancedFilter.setShow(true)}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="fill-current w-4 h-4 mr-2"
+            <div>
+              <div className="flex items-start mb-2">
+                <button
+                  className="btn btn-primary-ghost w-full"
+                  onClick={() => advancedFilter.setShow(true)}
                 >
-                  <line x1="8" y1="6" x2="21" y2="6"></line>
-                  <line x1="8" y1="12" x2="21" y2="12">
-                    {" "}
-                  </line>
-                  <line x1="8" y1="18" x2="21" y2="18">
-                    {" "}
-                  </line>
-                  <line x1="3" y1="6" x2="3.01" y2="6">
-                    {" "}
-                  </line>
-                  <line x1="3" y1="12" x2="3.01" y2="12">
-                    {" "}
-                  </line>
-                  <line x1="3" y1="18" x2="3.01" y2="18">
-                    {" "}
-                  </line>
-                </svg>
-                <span>Advanced Filters</span>
-              </button>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="fill-current w-4 h-4 mr-2"
+                  >
+                    <line x1="8" y1="6" x2="21" y2="6"></line>
+                    <line x1="8" y1="12" x2="21" y2="12">
+                      {" "}
+                    </line>
+                    <line x1="8" y1="18" x2="21" y2="18">
+                      {" "}
+                    </line>
+                    <line x1="3" y1="6" x2="3.01" y2="6">
+                      {" "}
+                    </line>
+                    <line x1="3" y1="12" x2="3.01" y2="12">
+                      {" "}
+                    </line>
+                    <line x1="3" y1="18" x2="3.01" y2="18">
+                      {" "}
+                    </line>
+                  </svg>
+                  <span>Advanced Filters</span>
+                </button>
+              </div>
             </div>
-          </div>
 
-          <SlideOver {...advancedFilter}>
-            <div className="bg-white min-h-screen p-4">
-              <UserFilter {...advancedFilter} />
-            </div>
-          </SlideOver>
+            <SlideOver {...advancedFilter}>
+              <div className="bg-white min-h-screen p-4">
+                <UserFilter {...advancedFilter} />
+              </div>
+            </SlideOver>
+          </div>
         </div>
-      </div>
 
-      <div className="pl-6 pb-2">
-        <FilterBadges
-          badges={({ badge, value, phoneNumber }) => [
-            badge("Username", "username"),
-            badge("First Name", "first_name"),
-            badge("Last Name", "last_name"),
-            phoneNumber(),
-            phoneNumber("WhatsApp no.", "alt_phone_number"),
-            badge("Role", "user_type"),
-            value("District", "district_id", districtName || ""),
-          ]}
-        />
-      </div>
+        <div className="pl-6 pb-2">
+          <FilterBadges
+            badges={({ badge, value, phoneNumber }) => [
+              badge("Username", "username"),
+              badge("First Name", "first_name"),
+              badge("Last Name", "last_name"),
+              phoneNumber(),
+              phoneNumber("WhatsApp no.", "alt_phone_number"),
+              badge("Role", "user_type"),
+              value("District", "district_id", districtName || ""),
+            ]}
+          />
+        </div>
 
-      <div className="px-3 md:px-6">
         <div>{manageUsers}</div>
-      </div>
-      {userData.show && (
-        <UserDeleteDialog
-          name={userData.name}
-          handleCancel={handleCancel}
-          handleOk={handleSubmit}
-        />
-      )}
-      {unlinkFacilityData.show && (
-        <UnlinkFacilityDialog
-          facilityName={unlinkFacilityData.facility?.name || ""}
-          userName={unlinkFacilityData.userName}
-          handleCancel={hideUnlinkFacilityModal}
-          handleOk={handleUnlinkFacilitySubmit}
-        />
-      )}
-    </div>
+
+        {userData.show && (
+          <UserDeleteDialog
+            name={userData.name}
+            handleCancel={handleCancel}
+            handleOk={handleSubmit}
+          />
+        )}
+        {unlinkFacilityData.show && (
+          <UnlinkFacilityDialog
+            facilityName={unlinkFacilityData.facility?.name || ""}
+            userName={unlinkFacilityData.userName}
+            handleCancel={hideUnlinkFacilityModal}
+            handleOk={handleUnlinkFacilitySubmit}
+          />
+        )}
+      </>
+    </Page>
   );
 }
diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index 1285c34a2bd..41bcbeb3e24 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -37,9 +37,9 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import DateFormField from "../Form/FormFields/DateFormField";
 import Checkbox from "../Common/components/CheckBox";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface UserProps {
   userId?: number;
@@ -199,15 +199,15 @@ export const UserAdd = (props: UserProps) => {
   const userTypes = isSuperuser
     ? [...USER_TYPE_OPTIONS]
     : userType === "StaffReadOnly"
-      ? readOnlyUsers.slice(0, 1)
-      : userType === "DistrictReadOnlyAdmin"
-        ? readOnlyUsers.slice(0, 2)
-        : userType === "StateReadOnlyAdmin"
-          ? readOnlyUsers.slice(0, 3)
-          : userType === "Pharmacist"
-            ? USER_TYPE_OPTIONS.slice(0, 1)
-            : // Exception to allow Staff to Create Doctors
-            defaultAllowedUserTypes;
+    ? readOnlyUsers.slice(0, 1)
+    : userType === "DistrictReadOnlyAdmin"
+    ? readOnlyUsers.slice(0, 2)
+    : userType === "StateReadOnlyAdmin"
+    ? readOnlyUsers.slice(0, 3)
+    : userType === "Pharmacist"
+    ? USER_TYPE_OPTIONS.slice(0, 1)
+    : // Exception to allow Staff to Create Doctors
+      defaultAllowedUserTypes;
 
   const headerText = !userId ? "Add User" : "Update User";
   const buttonText = !userId ? "Save User" : "Update Details";
@@ -586,21 +586,18 @@ export const UserAdd = (props: UserProps) => {
   }
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={headerText}
-        componentRight={
-          <Link
-            href="https://school.coronasafe.network/targets/12953"
-            className="text-gray-600 border border-gray-600 bg-gray-50 hover:bg-gray-100 transition rounded px-4 py-2 inline-block"
-            target="_blank"
-          >
-            <i className="fas fa-info-circle" /> &nbsp;Need Help?
-          </Link>
-        }
-        justifyContents="justify-between"
-      />
-
+    <Page
+      title={headerText}
+      options={
+        <Link
+          href="https://school.coronasafe.network/targets/12953"
+          className="text-gray-600 border border-gray-600 bg-gray-50 hover:bg-gray-100 transition rounded px-4 py-2 inline-block"
+          target="_blank"
+        >
+          <i className="fas fa-info-circle" /> &nbsp;Need Help?
+        </Link>
+      }
+    >
       <Card className="mt-4">
         <CardContent>
           <form onSubmit={(e) => handleSubmit(e)}>
@@ -977,6 +974,6 @@ export const UserAdd = (props: UserProps) => {
           </form>
         </CardContent>
       </Card>
-    </div>
+    </Page>
   );
 };