diff --git a/frontend/src/component/common/PageHeader/PageHeader.tsx b/frontend/src/component/common/PageHeader/PageHeader.tsx
index 4ad55d2ac7..33282b557f 100644
--- a/frontend/src/component/common/PageHeader/PageHeader.tsx
+++ b/frontend/src/component/common/PageHeader/PageHeader.tsx
@@ -40,7 +40,7 @@ const StyledHeader = styled('div')(({ theme }) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    marginRight: theme.spacing(2),
+    marginRight: theme.spacing(5),
 }));
 
 const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
@@ -57,6 +57,15 @@ const StyledHeaderActions = styled('div')(({ theme }) => ({
     gap: theme.spacing(1),
 }));
 
+const StyledLeftHeaderActions = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    marginRight: theme.spacing(2),
+}));
+
 interface IPageHeaderProps {
     title?: string;
     titleElement?: ReactNode;
@@ -64,6 +73,7 @@ interface IPageHeaderProps {
     variant?: TypographyProps['variant'];
     loading?: boolean;
     actions?: ReactNode;
+    leftActions?: ReactNode;
     className?: string;
     secondary?: boolean;
 }
@@ -74,6 +84,7 @@ const PageHeaderComponent: FC<IPageHeaderProps> & {
     title,
     titleElement,
     actions,
+    leftActions,
     subtitle,
     variant,
     loading,
@@ -100,6 +111,14 @@ const PageHeaderComponent: FC<IPageHeaderProps> & {
                     </StyledHeaderTitle>
                     {subtitle && <small>{subtitle}</small>}
                 </StyledHeader>
+                <ConditionallyRender
+                    condition={Boolean(leftActions)}
+                    show={
+                        <StyledLeftHeaderActions>
+                            {leftActions}
+                        </StyledLeftHeaderActions>
+                    }
+                />
                 <ConditionallyRender
                     condition={Boolean(actions)}
                     show={<StyledHeaderActions>{actions}</StyledHeaderActions>}
diff --git a/frontend/src/component/project/ProjectList/ProjectList.tsx b/frontend/src/component/project/ProjectList/ProjectList.tsx
index 45217f06c3..44d85caeeb 100644
--- a/frontend/src/component/project/ProjectList/ProjectList.tsx
+++ b/frontend/src/component/project/ProjectList/ProjectList.tsx
@@ -16,7 +16,12 @@ import Add from '@mui/icons-material/Add';
 import ApiError from 'component/common/ApiError/ApiError';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { TablePlaceholder } from 'component/common/Table';
-import { useMediaQuery, styled } from '@mui/material';
+import {
+    useMediaQuery,
+    styled,
+    ToggleButtonGroup,
+    ToggleButton,
+} from '@mui/material';
 import theme from 'themes/theme';
 import { Search } from 'component/common/Search/Search';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
@@ -25,6 +30,7 @@ import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-featu
 import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
 import { safeRegExp } from '@server/util/escape-regex';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledDivContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -49,6 +55,24 @@ const StyledCardLink = styled(Link)(({ theme }) => ({
     pointer: 'cursor',
 }));
 
+const StyledButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+    button: {
+        color: theme.palette.primary.main,
+        borderColor: theme.palette.background.alternative,
+        textTransform: 'none',
+        paddingInline: theme.spacing(3),
+        transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    },
+    'button[aria-pressed=true]': {
+        backgroundColor: theme.palette.background.alternative,
+        color: theme.palette.primary.contrastText,
+
+        '&:hover': {
+            backgroundColor: theme.palette.action.alternative,
+        },
+    },
+}));
+
 type PageQueryType = Partial<Record<'search', string>>;
 
 type projectMap = {
@@ -112,6 +136,10 @@ export const ProjectListNew = () => {
         searchParams.get('search') || '',
     );
 
+    const showProjectFilterButtons = useUiFlag('projectListFilterMyProjects');
+    const filters = ['All projects', 'My projects'];
+    const [filter, setFilter] = useState(filters[0]);
+
     useEffect(() => {
         const tableState: PageQueryType = {};
         if (searchValue) {
@@ -172,6 +200,36 @@ export const ProjectListNew = () => {
             header={
                 <PageHeader
                     title={`Projects (${projectCount})`}
+                    leftActions={
+                        <ConditionallyRender
+                            condition={showProjectFilterButtons}
+                            show={
+                                <StyledButtonGroup
+                                    aria-label='project list filter'
+                                    size='small'
+                                    color='primary'
+                                    value={filter}
+                                    exclusive
+                                    onChange={(event, value) => {
+                                        if (value !== null) {
+                                            setFilter(value);
+                                        }
+                                    }}
+                                >
+                                    {filters.map((filter) => {
+                                        return (
+                                            <ToggleButton
+                                                key={filter}
+                                                value={filter}
+                                            >
+                                                {filter}
+                                            </ToggleButton>
+                                        );
+                                    })}
+                                </StyledButtonGroup>
+                            }
+                        />
+                    }
                     actions={
                         <>
                             <ConditionallyRender
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index 926f64b128..e3b6dfcff7 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`renders an empty list correctly 1`] = `
             className="css-mt0dvk"
           >
             <div
-              className=" css-1gg5pjj"
+              className=" css-1kxj5dx"
               data-loading={true}
             >
               <h1
diff --git a/frontend/src/themes/colors.ts b/frontend/src/themes/colors.ts
index b6312b0364..2b3b5302d5 100644
--- a/frontend/src/themes/colors.ts
+++ b/frontend/src/themes/colors.ts
@@ -26,6 +26,7 @@ export const colors = {
         0.05: 'rgba(25, 24, 41, 0.05)',
     },
     purple: {
+        1000: '#34325E',
         950: '#4944a7',
         900: '#615BC2',
         800: '#6C65E5',
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index 9d375011b7..ff5a7d382e 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -180,6 +180,7 @@ const theme = {
             focus: actionColors[0.12],
             focusOpacity: 0.12,
             activatedOpacity: 0.12,
+            alternative: colors.purple[1000],
         },
 
         /**
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index 280be06356..7f5be98cbc 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -165,6 +165,7 @@ export const theme = {
             focus: colors.action[0.12],
             focusOpacity: 0.12,
             activatedOpacity: 0.12,
+            alternative: colors.purple[900],
         },
 
         /**
diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
index a501a40a51..9ebd477849 100644
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@@ -155,6 +155,18 @@ declare module '@mui/material/styles' {
     interface PaletteOptions extends CustomPalette {}
     interface TypeBackground extends CustomTypeBackground {}
 
+    /* Extend the action object from MUI */
+    interface CustomTypeAction {
+        /**
+         * Add background color on hover for the interactive elements
+         * that use the alternative primary color. First used to add
+         * hover colors to button group elements
+         **/
+        alternative: string;
+    }
+
+    interface TypeAction extends CustomTypeAction {}
+
     /* Extend the background object from MUI */
     interface CustomTypeBackground {
         application: string;