Refactor: page container (#967)

* refactor: page container * refactor: table page header
2025-05-31 01:16:01 +02:00 · 2022-05-09 14:38:12 +02:00 · 2022-05-09 14:38:12 +02:00 · 44c579f7a8
commit 44c579f7a8
parent cd37624de4
46 changed files with 564 additions and 585 deletions
--- a/frontend/src/component/addons/AddonForm/AddonForm.tsx
+++ b/frontend/src/component/addons/AddonForm/AddonForm.tsx
@ -15,7 +15,7 @@ import { IAddon, IAddonProvider } from 'interfaces/addons';
 import { AddonParameters } from './AddonParameters/AddonParameters';
 import { AddonEvents } from './AddonEvents/AddonEvents';
 import cloneDeep from 'lodash.clonedeep';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useNavigate } from 'react-router-dom';
 import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
 import useToast from 'hooks/useToast';
@ -184,7 +184,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
    } = provider ? provider : ({} as Partial<IAddonProvider>);

    return (
-        <PageContent headerContent={`Configure ${name} addon`}>
+        <PageContent header={`Configure ${name} addon`}>
            <section className={styles.formSection}>
                {description}&nbsp;
                <a href={documentationUrl} target="_blank" rel="noreferrer">
--- a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
+++ b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import {
    List,
    ListItem,
@ -49,7 +49,7 @@ export const AvailableAddons = ({
        </ListItem>
    );
    return (
-        <PageContent headerContent="Available addons">
+        <PageContent header="Available addons">
            <List>
                {providers.map((provider: IProvider) =>
                    renderProvider(provider)
--- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
+++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
@ -12,7 +12,7 @@ import {
    UPDATE_ADDON,
 } from 'component/providers/AccessProvider/permissions';
 import { Link, useNavigate } from 'react-router-dom';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import useAddons from 'hooks/api/getters/useAddons/useAddons';
 import useToast from 'hooks/useToast';
 import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
@ -142,7 +142,7 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
        </ListItem>
    );
    return (
-        <PageContent headerContent="Configured addons">
+        <PageContent header="Configured addons">
            <List>
                {sortAddons(addons).map((addon: IAddon) => renderAddon(addon))}
            </List>
--- a/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx
@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import PageContent from 'component/common/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
    CREATE_API_TOKEN,
@ -24,8 +24,8 @@ export const ApiTokenPage = () => {

    return (
        <PageContent
-            headerContent={
-                <HeaderTitle
+            header={
+                <PageHeader
                    title="API Access"
                    actions={
                        <ConditionallyRender
--- a/frontend/src/component/admin/auth/AuthSettings.tsx
+++ b/frontend/src/component/admin/auth/AuthSettings.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import AdminMenu from '../menu/AdminMenu';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { OidcAuth } from './OidcAuth/OidcAuth';
@ -35,7 +35,7 @@ export const AuthSettings = () => {
    return (
        <div>
            <AdminMenu />
-            <PageContent headerContent="Single Sign-On">
+            <PageContent header="Single Sign-On">
                <ConditionallyRender
                    condition={authenticationType === 'enterprise'}
                    show={<TabNav tabData={tabs} />}
--- a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
+++ b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
@ -7,7 +7,7 @@ import {
    TextField,
 } from '@mui/material';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@ -74,7 +74,7 @@ export const GoogleAuth = () => {
    };

    return (
-        <PageContent headerContent="">
+        <PageContent>
            <Grid container style={{ marginBottom: '1rem' }}>
                <Grid item xs={12}>
                    <Alert severity="info">
--- a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
+++ b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
@ -7,7 +7,7 @@ import {
    TextField,
 } from '@mui/material';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm';
@ -85,7 +85,7 @@ export const OidcAuth = () => {
    };

    return (
-        <PageContent headerContent="">
+        <PageContent>
            <Grid container style={{ marginBottom: '1rem' }}>
                <Grid item md={12}>
                    <Alert severity="info">
--- a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
+++ b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Button, FormControlLabel, Grid, Switch } from '@mui/material';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings';
@ -57,7 +57,7 @@ export const PasswordAuth = () => {
        }
    };
    return (
-        <PageContent headerContent="">
+        <PageContent>
            <form onSubmit={onSubmit}>
                <Grid container spacing={3} mb={2}>
                    <Grid item md={5}>
--- a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
+++ b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
@ -7,7 +7,7 @@ import {
    TextField,
 } from '@mui/material';
 import { Alert } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm';
@ -81,7 +81,7 @@ export const SamlAuth = () => {
    };

    return (
-        <PageContent headerContent="">
+        <PageContent>
            <Grid container style={{ marginBottom: '1rem' }}>
                <Grid item md={12}>
                    <Alert severity="info">
--- a/frontend/src/component/admin/invoice/InvoiceList.tsx
+++ b/frontend/src/component/admin/invoice/InvoiceList.tsx
@ -8,8 +8,8 @@ import {
    Button,
 } from '@mui/material';
 import OpenInNew from '@mui/icons-material/OpenInNew';
-import PageContent from 'component/common/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { formatApiPath } from 'utils/formatPath';
 import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
@ -35,8 +35,8 @@ const InvoiceList = () => {
            condition={invoices.length > 0}
            show={
                <PageContent
-                    headerContent={
-                        <HeaderTitle
+                    header={
+                        <PageHeader
                            title="Invoices"
                            actions={
                                <Button
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
@ -3,8 +3,8 @@ import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AccessContext from 'contexts/AccessContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import PageContent from 'component/common/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import AdminMenu from 'component/admin/menu/AdminMenu';
 import { useStyles } from './ProjectRoles.styles';
@ -21,8 +21,8 @@ const ProjectRoles = () => {
            <AdminMenu />
            <PageContent
                bodyClass={styles.rolesListBody}
-                headerContent={
-                    <HeaderTitle
+                header={
+                    <PageHeader
                        title="Project Roles"
                        actions={
                            <ConditionallyRender
--- a/frontend/src/component/admin/users/UsersAdmin.tsx
+++ b/frontend/src/component/admin/users/UsersAdmin.tsx
@ -1,13 +1,13 @@
 import { useContext, useState } from 'react';
 import UsersList from './UsersList/UsersList';
 import AdminMenu from '../menu/AdminMenu';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { Button } from '@mui/material';
 import { TableActions } from 'component/common/Table/TableActions/TableActions';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { useStyles } from './UserAdmin.styles';
 import { useNavigate } from 'react-router-dom';
 import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
@ -23,8 +23,8 @@ const UsersAdmin = () => {
            <AdminMenu />
            <PageContent
                bodyClass={styles.userListBody}
-                headerContent={
-                    <HeaderTitle
+                header={
+                    <PageHeader
                        title="Users"
                        actions={
                            <ConditionallyRender
--- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
+++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
@ -15,8 +15,8 @@ import { ApplicationView } from '../ApplicationView/ApplicationView';
 import { ApplicationUpdate } from '../ApplicationUpdate/ApplicationUpdate';
 import { TabNav } from 'component/common/TabNav/TabNav/TabNav';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import PageContent from 'component/common/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import AccessContext from 'contexts/AccessContext';
 import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
 import useApplication from 'hooks/api/getters/useApplication/useApplication';
@ -92,8 +92,8 @@ export const ApplicationEdit = () => {
    }
    return (
        <PageContent
-            headerContent={
-                <HeaderTitle
+            header={
+                <PageHeader
                    titleElement={
                        <span
                            style={{
--- a/frontend/src/component/application/ApplicationList/ApplicationList.tsx
+++ b/frontend/src/component/application/ApplicationList/ApplicationList.tsx
@ -3,8 +3,8 @@ import { CircularProgress } from '@mui/material';
 import { Warning } from '@mui/icons-material';
 import { AppsLinkList, styles as themeStyles } from 'component/common';
 import { SearchField } from 'component/common/SearchField/SearchField';
-import PageContent from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import useApplications from 'hooks/api/getters/useApplications/useApplications';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

@ -47,7 +47,7 @@ export const ApplicationList = () => {
            <div className={themeStyles.searchField}>
                <SearchField initialValue={filter} updateValue={setFilter} />
            </div>
-            <PageContent headerContent={<HeaderTitle title="Applications" />}>
+            <PageContent header={<PageHeader title="Applications" />}>
                <div className={themeStyles.fullwidth}>
                    <ConditionallyRender
                        condition={filteredApplications.length > 0}
--- a/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx
+++ b/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx
@ -1,52 +0,0 @@
-import { ReactNode, VFC } from 'react';
-import classnames from 'classnames';
-
-import { Typography, TypographyProps } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-
-import { useStyles } from './styles';
-import { usePageTitle } from 'hooks/usePageTitle';
-
-interface IHeaderTitleProps {
-    title: string;
-    titleElement?: ReactNode;
-    subtitle?: string;
-    variant?: TypographyProps['variant'];
-    loading?: boolean;
-    actions?: ReactNode;
-    className?: string;
-}
-
-export const HeaderTitle: VFC<IHeaderTitleProps> = ({
-    title,
-    titleElement,
-    actions,
-    subtitle,
-    variant,
-    loading,
-    className = '',
-}) => {
-    const { classes: styles } = useStyles();
-    const headerClasses = classnames({ skeleton: loading });
-
-    usePageTitle(title);
-
-    return (
-        <div className={styles.headerTitleContainer}>
-            <div className={headerClasses} data-loading>
-                <Typography
-                    variant={variant || 'h1'}
-                    className={classnames(styles.headerTitle, className)}
-                >
-                    {titleElement || title}
-                </Typography>
-                {subtitle && <small>{subtitle}</small>}
-            </div>
-
-            <ConditionallyRender
-                condition={Boolean(actions)}
-                show={<div className={styles.headerActions}>{actions}</div>}
-            />
-        </div>
-    );
-};
--- a/frontend/src/component/common/HeaderTitle/styles.ts
+++ b/frontend/src/component/common/HeaderTitle/styles.ts
@ -1,18 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    headerTitleContainer: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        position: 'relative',
-    },
-    headerTitle: {
-        fontSize: theme.fontSizes.mainHeader,
-        fontWeight: 'normal',
-    },
-    headerActions: {
-        position: 'absolute',
-        right: 0,
-    },
-}));
--- a/frontend/src/component/common/PageContent/PageContent.jsx
+++ b/frontend/src/component/common/PageContent/PageContent.jsx
@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import classnames from 'classnames';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import { Paper } from '@mui/material';
-import { useStyles } from './styles';
-
-const PageContent = ({
-    children,
-    headerContent,
-    disablePadding = false,
-    disableBorder = false,
-    bodyClass = '',
-    ...rest
-}) => {
-    const { classes: styles } = useStyles();
-
-    const headerClasses = classnames(styles.headerContainer, {
-        [styles.paddingDisabled]: disablePadding,
-        [styles.borderDisabled]: disableBorder,
-    });
-
-    const bodyClasses = classnames(styles.bodyContainer, {
-        [styles.paddingDisabled]: disablePadding,
-        [styles.borderDisabled]: disableBorder,
-        [bodyClass]: bodyClass,
-    });
-
-    let header = null;
-    if (headerContent) {
-        if (typeof headerContent === 'string') {
-            header = (
-                <div className={headerClasses}>
-                    <HeaderTitle title={headerContent} />
-                </div>
-            );
-        } else {
-            header = <div className={headerClasses}>{headerContent}</div>;
-        }
-    }
-
-    const paperProps = disableBorder ? { elevation: 0 } : {};
-
-    return (
-        <Paper
-            {...rest}
-            {...paperProps}
-            style={{ borderRadius: '10px', boxShadow: 'none' }}
-        >
-            {header}
-            <div className={bodyClasses}>{children}</div>
-        </Paper>
-    );
-};
-
-export default PageContent;
-
-PageContent.propTypes = {
-    headerContent: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-    disablePadding: PropTypes.bool,
-    disableBorder: PropTypes.bool,
-};
--- a/frontend/src/component/common/PageContent/PageContent.styles.ts
+++ b/frontend/src/component/common/PageContent/PageContent.styles.ts
@ -1,9 +1,15 @@
 import { makeStyles } from 'tss-react/mui';

 export const useStyles = makeStyles()(theme => ({
+    container: {
+        borderRadius: theme.shape.borderRadiusLarge,
+        boxShadow: 'none',
+    },
    headerContainer: {
        padding: theme.spacing(2, 4),
-        borderBottom: `1px solid ${theme.palette.grey[100]}`,
+        borderBottomStyle: 'solid',
+        borderBottomWidth: 1,
+        borderBottomColor: theme.palette.divider,
        [theme.breakpoints.down('md')]: {
            padding: '1.5rem 1rem',
        },
--- a/frontend/src/component/common/PageContent/PageContent.tsx
+++ b/frontend/src/component/common/PageContent/PageContent.tsx
@ -0,0 +1,72 @@
+import React, { FC, ReactNode } from 'react';
+import classnames from 'classnames';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { Paper, PaperProps } from '@mui/material';
+import { useStyles } from './PageContent.styles';
+import useLoading from 'hooks/useLoading';
+import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
+
+interface IPageContentProps extends PaperProps {
+    header?: ReactNode;
+    isLoading?: boolean;
+    /**
+     * @deprecated fix feature event log and remove
+     */
+    disablePadding?: boolean;
+    /**
+     * @deprecated fix feature event log and remove
+     */
+    disableBorder?: boolean;
+    bodyClass?: string;
+}
+
+export const PageContent: FC<IPageContentProps> = ({
+    children,
+    header,
+    disablePadding = false,
+    disableBorder = false,
+    bodyClass = '',
+    isLoading = false,
+    className,
+    ...rest
+}) => {
+    const { classes: styles } = useStyles();
+    const ref = useLoading(isLoading);
+
+    const headerClasses = classnames(styles.headerContainer, {
+        [styles.paddingDisabled]: disablePadding,
+        [styles.borderDisabled]: disableBorder,
+    });
+
+    const bodyClasses = classnames(styles.bodyContainer, {
+        [styles.paddingDisabled]: disablePadding,
+        [styles.borderDisabled]: disableBorder,
+        [bodyClass]: bodyClass,
+    });
+
+    const paperProps = disableBorder ? { elevation: 0 } : {};
+
+    return (
+        <div ref={ref}>
+            <Paper
+                {...rest}
+                {...paperProps}
+                className={classnames(styles.container, className)}
+            >
+                <ConditionallyRender
+                    condition={Boolean(header)}
+                    show={
+                        <div className={headerClasses}>
+                            <ConditionallyRender
+                                condition={typeof header === 'string'}
+                                show={<PageHeader title={header as string} />}
+                                elseShow={header}
+                            />
+                        </div>
+                    }
+                />
+                <div className={bodyClasses}>{children}</div>
+            </Paper>
+        </div>
+    );
+};
--- a/frontend/src/component/common/PageContent/index.jsx
+++ b/frontend/src/component/common/PageContent/index.jsx
@ -1,3 +0,0 @@
-import PageContent from './PageContent';
-
-export default PageContent;
--- a/frontend/src/component/common/Table/TableToolbar/TableToolbar.styles.ts
+++ b/frontend/src/component/common/Table/TableToolbar/TableToolbar.styles.ts
@ -1,25 +1,30 @@
 import { makeStyles } from 'tss-react/mui';

 export const useStyles = makeStyles()(theme => ({
-    toolbar: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4),
-        paddingTop: theme.spacing(2),
-        paddingBottom: theme.spacing(2),
-        borderBottom: `1px solid ${theme.palette.divider}`,
+    headerContainer: {
        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center',
+        flexDirection: 'column',
    },
-    actions: {
-        flex: 1,
+    topContainer: {
        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        position: 'relative',
+        flexWrap: 'wrap',
+    },
+    headerTitle: {
+        fontSize: theme.fontSizes.mainHeader,
+        fontWeight: 'normal',
+    },
+    headerActions: {
+        display: 'flex',
+        flexGrow: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    verticalSeparator: {
        height: '100%',
-        borderColor: theme.palette.grey[500],
+        borderColor: theme.palette.dividerAlternative,
        width: '1px',
        display: 'inline-block',
        marginLeft: theme.spacing(2),
--- a/frontend/src/component/common/PageHeader/PageHeader.tsx
+++ b/frontend/src/component/common/PageHeader/PageHeader.tsx
@ -0,0 +1,71 @@
+import { ReactNode, FC, VFC } from 'react';
+import classnames from 'classnames';
+
+import { Divider, Typography, TypographyProps } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+
+import { useStyles } from './PageHeader.styles';
+import { usePageTitle } from 'hooks/usePageTitle';
+
+interface IPageHeaderProps {
+    title: string;
+    titleElement?: ReactNode;
+    subtitle?: string;
+    variant?: TypographyProps['variant'];
+    loading?: boolean;
+    actions?: ReactNode;
+    className?: string;
+}
+
+const PageHeaderComponent: FC<IPageHeaderProps> & { Divider: VFC } = ({
+    title,
+    titleElement,
+    actions,
+    subtitle,
+    variant,
+    loading,
+    className = '',
+    children,
+}) => {
+    const { classes: styles } = useStyles();
+    const headerClasses = classnames({ skeleton: loading });
+
+    usePageTitle(title);
+
+    return (
+        <div className={styles.headerContainer}>
+            <div className={styles.topContainer}>
+                <div className={headerClasses} data-loading>
+                    <Typography
+                        variant={variant || 'h1'}
+                        className={classnames(styles.headerTitle, className)}
+                    >
+                        {titleElement || title}
+                    </Typography>
+                    {subtitle && <small>{subtitle}</small>}
+                </div>
+                <ConditionallyRender
+                    condition={Boolean(actions)}
+                    show={<div className={styles.headerActions}>{actions}</div>}
+                />
+            </div>
+            {children}
+        </div>
+    );
+};
+
+const PageHeaderDivider: VFC = () => {
+    const { classes: styles } = useStyles();
+
+    return (
+        <Divider
+            orientation="vertical"
+            variant="middle"
+            className={styles.verticalSeparator}
+        />
+    );
+};
+
+PageHeaderComponent.Divider = PageHeaderDivider;
+
+export const PageHeader = PageHeaderComponent;
--- a/frontend/src/component/common/Table/Table.tsx
+++ b/frontend/src/component/common/Table/Table.tsx
@ -1,8 +0,0 @@
-import { FC } from 'react';
-import { Box, Table as MUITable } from '@mui/material';
-
-export const Table: FC = ({ children }) => (
-    <Box sx={{ p: 4, pb: 0 }}>
-        <MUITable>{children}</MUITable>
-    </Box>
-);
--- a/frontend/src/component/common/Table/TableContainer/TableContainer.tsx
+++ b/frontend/src/component/common/Table/TableContainer/TableContainer.tsx
@ -2,6 +2,9 @@ import { forwardRef } from 'react';
 import { Paper, PaperProps } from '@mui/material';
 import { useStyles } from './TableContainer.styles';

+/**
+ * @deprecated
+ */
 export const TableContainer = forwardRef<HTMLDivElement, PaperProps>(
    ({ children, ...props }, ref) => {
        const { classes } = useStyles();
--- a/frontend/src/component/common/Table/TableToolbar/TableToolbar.tsx
+++ b/frontend/src/component/common/Table/TableToolbar/TableToolbar.tsx
@ -1,37 +0,0 @@
-import { FC, VFC } from 'react';
-import { Divider, Box, Toolbar } from '@mui/material';
-import { useStyles } from './TableToolbar.styles';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-
-interface ITableToolbarProps {
-    title: string;
-}
-
-export const TableToolbarComponent: FC<ITableToolbarProps> & {
-    Divider: VFC;
-} = ({ title, children }) => {
-    const { classes: styles } = useStyles();
-
-    return (
-        <Toolbar className={styles.toolbar}>
-            <HeaderTitle title={title} data-loading />
-            <Box className={styles.actions}>{children}</Box>
-        </Toolbar>
-    );
-};
-
-const ToolbarDivider: VFC = () => {
-    const { classes: styles } = useStyles();
-
-    return (
-        <Divider
-            orientation="vertical"
-            variant="middle"
-            className={styles.verticalSeparator}
-        />
-    );
-};
-
-TableToolbarComponent.Divider = ToolbarDivider;
-
-export const TableToolbar = TableToolbarComponent;
--- a/frontend/src/component/common/Table/index.ts
+++ b/frontend/src/component/common/Table/index.ts
@ -1,8 +1,5 @@
-export { TableContainer } from './TableContainer/TableContainer';
-export { TableToolbar } from './TableToolbar/TableToolbar';
 export { TableSearch } from './TableSearch/TableSearch';
-export { Table } from './Table';
 export { SortableTableHeader } from './SortableTableHeader/SortableTableHeader';
-export { TableBody, TableRow } from '@mui/material';
+export { Table, TableBody, TableRow } from '@mui/material';
 export { TableCell } from './TableCell/TableCell';
 export { TablePlaceholder } from './TablePlaceholder/TablePlaceholder';
--- a/frontend/src/component/context/ContextList/ContextList.tsx
+++ b/frontend/src/component/context/ContextList/ContextList.tsx
@ -11,8 +11,8 @@ import {
    Tooltip,
    useMediaQuery,
 } from '@mui/material';
-import PageContent from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
    CREATE_CONTEXT_FIELD,
@ -143,11 +143,8 @@ const ContextList: VFC = () => {

    return (
        <PageContent
-            headerContent={
-                <HeaderTitle
-                    actions={headerButton()}
-                    title={'Context fields'}
-                />
+            header={
+                <PageHeader actions={headerButton()} title={'Context fields'} />
            }
        >
            <List>
--- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
+++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
@ -11,9 +11,9 @@ import useToast from 'hooks/useToast';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { formatUnknownError } from 'utils/formatUnknownError';

 const CreateEnvironment = () => {
@ -109,9 +109,7 @@ const CreateEnvironment = () => {
            elseShow={
                <>
                    <PageContent
-                        headerContent={
-                            <HeaderTitle title="Create environment" />
-                        }
+                        header={<PageHeader title="Create environment" />}
                    >
                        <Alert severity="error">
                            <p>
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
@ -4,9 +4,9 @@ import { List } from '@mui/material';
 import { Add } from '@mui/icons-material';
 import useToast from 'hooks/useToast';
 import { IEnvironment, ISortOrderPayload } from 'interfaces/environments';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
 import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
@ -159,8 +159,8 @@ const EnvironmentList = () => {
    };
    return (
        <PageContent
-            headerContent={
-                <HeaderTitle
+            header={
+                <PageHeader
                    title="Environments"
                    actions={
                        <>
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleArchiveList.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleArchiveList.tsx
@ -6,8 +6,8 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { IFlags } from 'interfaces/uiConfig';
 import { SearchField } from 'component/common/SearchField/SearchField';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import PageContent from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import AccessContext from 'contexts/AccessContext';
 import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
 import { FeatureToggleListItem } from './FeatureToggleListItem/FeatureToggleListItem';
@ -138,8 +138,8 @@ export const FeatureToggleList: VFC<IFeatureToggleListProps> = ({
            </div>

            <PageContent
-                headerContent={
-                    <HeaderTitle
+                header={
+                    <PageHeader
                        loading={loading}
                        title={headerTitle}
                        actions={
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx
@ -4,8 +4,6 @@ import { Link as RouterLink } from 'react-router-dom';
 import { useGlobalFilter, useSortBy, useTable } from 'react-table';
 import useLoading from 'hooks/useLoading';
 import {
-    TableContainer,
-    TableToolbar,
    Table,
    SortableTableHeader,
    TableBody,
@ -22,6 +20,8 @@ import { FeatureStaleCell } from './FeatureStaleCell/FeatureStaleCell';
 import { FeatureTypeCell } from './FeatureTypeCell/FeatureTypeCell';
 import { CreateFeatureButton } from '../../CreateFeatureButton/CreateFeatureButton';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';

 interface IExperimentProps {
    data: Record<string, any>[];
@ -106,7 +106,6 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
    const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
-    const ref = useLoading(isLoading);

    const initialState = useMemo(
        () => ({
@ -155,26 +154,35 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
    }, [setHiddenColumns, isSmallScreen, isMediumScreen]);

    return (
-        <TableContainer ref={ref}>
-            <TableToolbar title={`Feature toggles (${data.length})`}>
-                <TableSearch
-                    initialValue={globalFilter}
-                    onChange={setGlobalFilter}
+        <PageContent
+            isLoading={isLoading}
+            header={
+                <PageHeader
+                    title={`Feature toggles (${data.length})`}
+                    actions={
+                        <>
+                            <TableSearch
+                                initialValue={globalFilter}
+                                onChange={setGlobalFilter}
+                            />
+                            <PageHeader.Divider />
+                            <Link
+                                component={RouterLink}
+                                to="/archive"
+                                underline="always"
+                                sx={{ marginRight: 3 }}
+                            >
+                                View archive
+                            </Link>
+                            <CreateFeatureButton
+                                loading={false}
+                                filter={{ query: '', project: 'default' }}
+                            />
+                        </>
+                    }
                />
-                <TableToolbar.Divider />
-                <Link
-                    component={RouterLink}
-                    to="/archive"
-                    underline="always"
-                    sx={{ marginRight: 3 }}
-                >
-                    View archive
-                </Link>
-                <CreateFeatureButton
-                    loading={false}
-                    filter={{ query: '', project: 'default' }}
-                />
-            </TableToolbar>
+            }
+        >
            <SearchHighlightProvider value={globalFilter}>
                <Table {...getTableProps()}>
                    <SortableTableHeader headerGroups={headerGroups} />
@ -215,6 +223,6 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
                    />
                }
            />
-        </TableContainer>
+        </PageContent>
    );
 };
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
@ -1,5 +1,5 @@
 import { useFeatureMetricsRaw } from 'hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useEffect, useMemo, useState } from 'react';
 import {
    FEATURE_METRIC_HOURS_BACK_MAX,
@ -57,7 +57,7 @@ export const FeatureMetrics = () => {
    }

    return (
-        <PageContent headerContent="">
+        <PageContent>
            <Grid
                container
                component="header"
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
@ -1,5 +1,5 @@
 import { useState } from 'react';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useStyles } from './FeatureSettings.styles';
 import { List, ListItem } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -17,7 +17,7 @@ export const FeatureSettings = () => {
    const [settings, setSettings] = useState(METADATA);

    return (
-        <PageContent headerContent="Settings" bodyClass={styles.bodyContainer}>
+        <PageContent header="Settings" bodyClass={styles.bodyContainer}>
            <div className={styles.innerContainer}>
                <div className={styles.listContainer}>
                    <List>
--- a/frontend/src/component/history/EventLog/EventLog.jsx
+++ b/frontend/src/component/history/EventLog/EventLog.jsx
@ -1,8 +1,8 @@
 import { List, Switch, FormControlLabel } from '@mui/material';
 import PropTypes from 'prop-types';
 import EventJson from './EventJson/EventJson';
-import PageContent from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import EventCard from './EventCard/EventCard';
 import { useStyles } from './EventLog.styles';
 import { formatDateYMDHMS } from 'utils/formatDate';
@ -50,8 +50,8 @@ const EventLog = ({
        <PageContent
            disablePadding={displayInline}
            disableBorder={displayInline}
-            headerContent={
-                <HeaderTitle
+            header={
+                <PageHeader
                    title={title}
                    actions={
                        <FormControlLabel
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
@ -20,8 +20,6 @@ export const useStyles = makeStyles()(theme => ({
        padding: '1rem',
    },
    title: {
-        fontSize: '1rem',
-        fontWeight: 'normal',
        display: 'unset',
        [theme.breakpoints.down(600)]: {
            display: 'none',
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@ -7,8 +7,8 @@ import AccessContext from 'contexts/AccessContext';
 import { SearchField } from 'component/common/SearchField/SearchField';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PROJECTFILTERING } from 'component/common/flags';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import PageContent from 'component/common/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import FeatureToggleListNew from 'component/feature/FeatureToggleListNew/FeatureToggleListNew';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';
@ -46,8 +46,8 @@ export const ProjectFeatureToggles = ({
        <PageContent
            className={styles.container}
            bodyClass={styles.bodyClass}
-            headerContent={
-                <HeaderTitle
+            header={
+                <PageHeader
                    className={styles.title}
                    title={`Project feature toggles (${filteredFeatures.length})`}
                    actions={
--- a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { Alert, SelectChangeEvent } from '@mui/material';
 import { ProjectAccessAddUser } from './ProjectAccessAddUser/ProjectAccessAddUser';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useStyles } from './ProjectAccess.styles';
 import usePagination from 'hooks/usePagination';
@ -13,7 +13,7 @@ import useProjectAccess, {
    IProjectAccessUser,
 } from 'hooks/api/getters/useProjectAccess/useProjectAccess';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { ProjectAccessList } from './ProjectAccessList/ProjectAccessList';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';

@ -31,7 +31,7 @@ export const ProjectAccess = () => {

    if (isOss()) {
        return (
-            <PageContent headerContent={<HeaderTitle title="Project Access" />}>
+            <PageContent header={<PageHeader title="Project Access" />}>
                <Alert severity="error">
                    Controlling access to projects requires a paid version of
                    Unleash. Check out{' '}
@ -90,7 +90,7 @@ export const ProjectAccess = () => {

    return (
        <PageContent
-            headerContent={<HeaderTitle title="Project Roles"></HeaderTitle>}
+            header={<PageHeader title="Project Roles"></PageHeader>}
            className={styles.pageContent}
        >
            <ProjectAccessAddUser roles={access?.roles} />
--- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
@ -3,8 +3,8 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useStyles } from './ProjectEnvironment.styles';

 import useLoading from 'hooks/useLoading';
-import PageContent from 'component/common/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';

 import ApiError from 'component/common/ApiError/ApiError';
@ -174,8 +174,8 @@ const ProjectEnvironmentList = ({
    return (
        <div ref={ref}>
            <PageContent
-                headerContent={
-                    <HeaderTitle
+                header={
+                    <PageHeader
                        title={`Configure environments for "${project?.name}" project`}
                    />
                }
--- a/frontend/src/component/project/ProjectList/ProjectList.tsx
+++ b/frontend/src/component/project/ProjectList/ProjectList.tsx
@ -9,9 +9,9 @@ import { useStyles } from './ProjectList.styles';
 import { IProjectCard } from 'interfaces/project';
 import loadingData from './loadingData';
 import useLoading from 'hooks/useLoading';
-import PageContent from 'component/common/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import { CREATE_PROJECT } from 'component/providers/AccessProvider/permissions';
 import { Add } from '@mui/icons-material';
@ -140,8 +140,8 @@ export const ProjectListNew = () => {
                />
            </div>
            <PageContent
-                headerContent={
-                    <HeaderTitle
+                header={
+                    <PageHeader
                        title="Projects"
                        actions={
                            <ResponsiveButton
--- a/frontend/src/component/segments/SegmentList/SegmentList.tsx
+++ b/frontend/src/component/segments/SegmentList/SegmentList.tsx
@ -19,8 +19,8 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { Link, useNavigate } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import PageContent from 'component/common/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { SegmentDelete } from '../SegmentDelete/SegmentDelete';
 import { SegmentDocsWarning } from 'component/segments/SegmentDocs/SegmentDocs';
@ -90,8 +90,8 @@ export const SegmentsList = () => {

    return (
        <PageContent
-            headerContent={
-                <HeaderTitle
+            header={
+                <PageHeader
                    title="Segments"
                    actions={
                        <PermissionButton
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
@ -23,8 +23,8 @@ import {
    UPDATE_STRATEGY,
 } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import PageContent from 'component/common/PageContent/PageContent';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { useStyles } from './StrategiesList.styles';
 import AccessContext from 'contexts/AccessContext';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
@ -281,9 +281,7 @@ export const StrategiesList = () => {

    return (
        <PageContent
-            headerContent={
-                <HeaderTitle title="Strategies" actions={headerButton()} />
-            }
+            header={<PageHeader title="Strategies" actions={headerButton()} />}
        >
            <Dialogue
                open={dialogueMetaData.show}
--- a/frontend/src/component/strategies/StrategiesList/snapshots/StrategiesList.test.tsx.snap
+++ b/frontend/src/component/strategies/StrategiesList/snapshots/StrategiesList.test.tsx.snap
@ -2,128 +2,176 @@

 exports[`renders correctly 1`] = `
 [
-  <div
-    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
-    style={
-      {
-        "borderRadius": "10px",
-        "boxShadow": "none",
-      }
-    }
-  >
+  <div>
    <div
-      className="tss-ee3n06-headerContainer"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
    >
      <div
-        className="tss-14s7qul-headerTitleContainer"
+        className="tss-1yjkq3l-headerContainer"
      >
        <div
-          className=""
-          data-loading={true}
+          className="tss-1ylehva-headerContainer"
        >
-          <h1
-            className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
+          <div
+            className="tss-1dw2af8-topContainer"
          >
-            Strategies
-          </h1>
-        </div>
-        <div
-          className="tss-ap2nhp-headerActions"
-        >
-          <span
-            id="useId-0"
-          >
-            <button
-              aria-describedby="useId-0"
-              className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
-              data-testid="ADD_NEW_STRATEGY_ID"
-              disabled={false}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onContextMenu={[Function]}
-              onDragLeave={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-              tabIndex={0}
-              type="button"
+            <div
+              className=""
+              data-loading={true}
+            >
+              <h1
+                className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
+              >
+                Strategies
+              </h1>
+            </div>
+            <div
+              className="tss-1u1bjy8-headerActions"
            >
-              New strategy
              <span
-                className="MuiButton-endIcon MuiButton-iconSizeMedium mui-9tj150-MuiButton-endIcon"
-              />
-              <span
-                className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
-          </span>
+                id="useId-0"
+              >
+                <button
+                  aria-describedby="useId-0"
+                  className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
+                  data-testid="ADD_NEW_STRATEGY_ID"
+                  disabled={false}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onContextMenu={[Function]}
+                  onDragLeave={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchMove={[Function]}
+                  onTouchStart={[Function]}
+                  tabIndex={0}
+                  type="button"
+                >
+                  New strategy
+                  <span
+                    className="MuiButton-endIcon MuiButton-iconSizeMedium mui-9tj150-MuiButton-endIcon"
+                  />
+                  <span
+                    className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </span>
+            </div>
+          </div>
        </div>
      </div>
-    </div>
-    <div
-      className="tss-kiw3z8-bodyContainer"
-    >
-      <ul
-        className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
+      <div
+        className="tss-kiw3z8-bodyContainer"
      >
-        <li
-          className="MuiListItem-root MuiListItem-gutters MuiListItem-padding tss-ynyzms-listItem mui-vlytkl-MuiListItem-root"
-          disabled={false}
+        <ul
+          className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
        >
-          <div
-            className="MuiListItemAvatar-root mui-1e9lk82-MuiListItemAvatar-root"
+          <li
+            className="MuiListItem-root MuiListItem-gutters MuiListItem-padding tss-ynyzms-listItem mui-vlytkl-MuiListItem-root"
+            disabled={false}
          >
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-              data-testid="ExtensionIcon"
-              focusable="false"
-              style={
-                {
-                  "color": "#0000008a",
+            <div
+              className="MuiListItemAvatar-root mui-1e9lk82-MuiListItemAvatar-root"
+            >
+              <svg
+                aria-hidden={true}
+                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                data-testid="ExtensionIcon"
+                focusable="false"
+                style={
+                  {
+                    "color": "#0000008a",
+                  }
                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
-              />
-            </svg>
-          </div>
-          <div
-            className="MuiListItemText-root MuiListItemText-multiline mui-konndc-MuiListItemText-root"
-          >
-            <span
-              className="MuiTypography-root MuiTypography-body1 MuiListItemText-primary mui-1k7ov6f-MuiTypography-root"
-            >
-              <a
-                href="/strategies/flexibleRollout"
-                onClick={[Function]}
+                viewBox="0 0 24 24"
              >
-                <strong>
-                  Gradual rollout
-                </strong>
-              </a>
-            </span>
-            <p
-              className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-of6c4k-MuiTypography-root"
+                <path
+                  d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
+                />
+              </svg>
+            </div>
+            <div
+              className="MuiListItemText-root MuiListItemText-multiline mui-konndc-MuiListItemText-root"
            >
-              Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit.
-            </p>
-          </div>
-          <div>
-            <span
-              aria-label="Deprecate strategy"
+              <span
+                className="MuiTypography-root MuiTypography-body1 MuiListItemText-primary mui-1k7ov6f-MuiTypography-root"
+              >
+                <a
+                  href="/strategies/flexibleRollout"
+                  onClick={[Function]}
+                >
+                  <strong>
+                    Gradual rollout
+                  </strong>
+                </a>
+              </span>
+              <p
+                className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-of6c4k-MuiTypography-root"
+              >
+                Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit.
+              </p>
+            </div>
+            <div>
+              <span
+                aria-label="Deprecate strategy"
+                aria-labelledby={null}
+                className=""
+                data-mui-internal-clone-element={true}
+                id="useId-1"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseLeave={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                onTouchStart={[Function]}
+              >
+                <button
+                  aria-labelledby="useId-1"
+                  className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                  disabled={false}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onContextMenu={[Function]}
+                  onDragLeave={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchMove={[Function]}
+                  onTouchStart={[Function]}
+                  tabIndex={0}
+                  type="button"
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                    data-testid="VisibilityIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                    />
+                  </svg>
+                  <span
+                    className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </span>
+            </div>
+            <div
+              aria-label="You cannot delete a built-in strategy"
              aria-labelledby={null}
              className=""
              data-mui-internal-clone-element={true}
-              id="useId-1"
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseLeave={[Function]}
@ -132,11 +180,9 @@ exports[`renders correctly 1`] = `
              onTouchStart={[Function]}
            >
              <button
-                aria-labelledby="useId-1"
-                className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
-                disabled={false}
+                className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                disabled={true}
                onBlur={[Function]}
-                onClick={[Function]}
                onContextMenu={[Function]}
                onDragLeave={[Function]}
                onFocus={[Function]}
@ -148,120 +194,74 @@ exports[`renders correctly 1`] = `
                onTouchEnd={[Function]}
                onTouchMove={[Function]}
                onTouchStart={[Function]}
-                tabIndex={0}
+                tabIndex={-1}
                type="button"
              >
                <svg
-                  aria-hidden={true}
                  className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-                  data-testid="VisibilityIcon"
+                  data-testid="EditIcon"
                  focusable="false"
+                  role="img"
                  viewBox="0 0 24 24"
                >
                  <path
-                    d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                    d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                  />
+                  <title>
+                    Edit strategy
+                  </title>
                </svg>
-                <span
-                  className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
-                />
              </button>
-            </span>
-          </div>
-          <div
-            aria-label="You cannot delete a built-in strategy"
-            aria-labelledby={null}
-            className=""
-            data-mui-internal-clone-element={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
-          >
-            <button
-              className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
-              disabled={true}
+            </div>
+            <div
+              aria-label="You cannot delete a built-in strategy"
+              aria-labelledby={null}
+              className=""
+              data-mui-internal-clone-element={true}
              onBlur={[Function]}
-              onContextMenu={[Function]}
-              onDragLeave={[Function]}
              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
+              onMouseOver={[Function]}
              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
              onTouchStart={[Function]}
-              tabIndex={-1}
-              type="button"
            >
-              <svg
-                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-                data-testid="EditIcon"
-                focusable="false"
-                role="img"
-                viewBox="0 0 24 24"
+              <button
+                className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                disabled={true}
+                onBlur={[Function]}
+                onContextMenu={[Function]}
+                onDragLeave={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                tabIndex={-1}
+                type="button"
              >
-                <path
-                  d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                />
-                <title>
-                  Edit strategy
-                </title>
-              </svg>
-            </button>
-          </div>
-          <div
-            aria-label="You cannot delete a built-in strategy"
-            aria-labelledby={null}
-            className=""
-            data-mui-internal-clone-element={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
-          >
-            <button
-              className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
-              disabled={true}
-              onBlur={[Function]}
-              onContextMenu={[Function]}
-              onDragLeave={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-              tabIndex={-1}
-              type="button"
-            >
-              <svg
-                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
-                data-testid="DeleteIcon"
-                focusable="false"
-                role="img"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                />
-                <title>
-                  Delete strategy
-                </title>
-              </svg>
-            </button>
-          </div>
-        </li>
-      </ul>
+                <svg
+                  className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                  data-testid="DeleteIcon"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                  />
+                  <title>
+                    Delete strategy
+                  </title>
+                </svg>
+              </button>
+            </div>
+          </li>
+        </ul>
+      </div>
    </div>
  </div>,
  <div
--- a/frontend/src/component/strategies/StrategyView/StrategyView.tsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyView.tsx
@ -1,12 +1,12 @@
 import { Grid } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { UPDATE_STRATEGY } from 'component/providers/AccessProvider/permissions';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 import { useFeatures } from 'hooks/api/getters/useFeatures/useFeatures';
 import useApplications from 'hooks/api/getters/useApplications/useApplications';
 import { StrategyDetails } from './StrategyDetails/StrategyDetails';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { Edit } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -32,8 +32,8 @@ export const StrategyView = () => {
    if (!strategy) return null;
    return (
        <PageContent
-            headerContent={
-                <HeaderTitle
+            header={
+                <PageHeader
                    title={strategy?.name}
                    subtitle={strategy?.description}
                    actions={
--- a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
+++ b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
@ -10,8 +10,8 @@ import {
    Tooltip,
 } from '@mui/material';
 import { Add, Delete, Edit, Label } from '@mui/icons-material';
-import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import PageContent from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { PageContent } from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
    DELETE_TAG_TYPE,
@ -58,7 +58,7 @@ export const TagTypeList = () => {
    };

    let header = (
-        <HeaderTitle
+        <PageHeader
            title="Tag Types"
            actions={
                <ConditionallyRender
@ -143,7 +143,7 @@ export const TagTypeList = () => {
        );
    };
    return (
-        <PageContent headerContent={header}>
+        <PageContent header={header}>
            <List>
                <ConditionallyRender
                    condition={tagTypes.length > 0}
--- a/frontend/src/component/tags/TagTypeList/tests/snapshots/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/tests/snapshots/TagTypeList.test.tsx.snap
@ -2,71 +2,71 @@

 exports[`renders an empty list correctly 1`] = `
 [
-  <div
-    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
-    style={
-      {
-        "borderRadius": "10px",
-        "boxShadow": "none",
-      }
-    }
-  >
+  <div>
    <div
-      className="tss-ee3n06-headerContainer"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
    >
      <div
-        className="tss-14s7qul-headerTitleContainer"
+        className="tss-1yjkq3l-headerContainer"
      >
        <div
-          className=""
-          data-loading={true}
+          className="tss-1ylehva-headerContainer"
        >
-          <h1
-            className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
+          <div
+            className="tss-1dw2af8-topContainer"
          >
-            Tag Types
-          </h1>
-        </div>
-        <div
-          className="tss-ap2nhp-headerActions"
-        >
-          <button
-            className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
-            disabled={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDragLeave={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            tabIndex={0}
-            type="button"
-          >
-            New tag type
-          </button>
+            <div
+              className=""
+              data-loading={true}
+            >
+              <h1
+                className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
+              >
+                Tag Types
+              </h1>
+            </div>
+            <div
+              className="tss-1u1bjy8-headerActions"
+            >
+              <button
+                className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
+                disabled={false}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onContextMenu={[Function]}
+                onDragLeave={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                tabIndex={0}
+                type="button"
+              >
+                New tag type
+              </button>
+            </div>
+          </div>
        </div>
      </div>
-    </div>
-    <div
-      className="tss-kiw3z8-bodyContainer"
-    >
-      <ul
-        className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
+      <div
+        className="tss-kiw3z8-bodyContainer"
      >
-        <li
-          className="MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-vlytkl-MuiListItem-root"
-          disabled={false}
+        <ul
+          className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
        >
-          No entries
-        </li>
-      </ul>
+          <li
+            className="MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-vlytkl-MuiListItem-root"
+            disabled={false}
+          >
+            No entries
+          </li>
+        </ul>
+      </div>
    </div>
  </div>,
  <div
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@ -89,13 +89,6 @@ export default createTheme({
        },
    },
    components: {
-        MuiTableHead: {
-            styleOverrides: {
-                root: {
-                    background: colors.grey[200],
-                },
-            },
-        },
        MuiLink: {
            styleOverrides: {
                root: {
@ -112,6 +105,13 @@ export default createTheme({
                },
            },
        },
+        MuiTableHead: {
+            styleOverrides: {
+                root: {
+                    background: colors.grey[200],
+                },
+            },
+        },
        MuiTableRow: {
            styleOverrides: {
                root: {
@ -121,5 +121,12 @@ export default createTheme({
                },
            },
        },
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    borderBottomColor: colors.grey[300],
+                },
+            },
+        },
    },
 });