diff --git a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
index 219f30b568..f1454f5901 100644
--- a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
+++ b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
@@ -1,18 +1,18 @@
-import { Grid, Typography, styled } from '@mui/material';
+import { Typography, styled } from '@mui/material';
 import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import type { PersonalDashboardSchemaAdminsItem } from 'openapi/models/personalDashboardSchemaAdminsItem';
 import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi/models/personalDashboardSchemaProjectOwnersItem';
 import { Link } from 'react-router-dom';
+import {
+    ContentGridContainer,
+    EmptyGridItem,
+    ProjectGrid,
+    SpacedGridItem,
+} from './Grid';
 
-const ContentGrid = styled(Grid)(({ theme }) => ({
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: `${theme.shape.borderRadiusLarge}px`,
-}));
-
-const SpacedGridItem = styled(Grid)(({ theme }) => ({
+const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({
     padding: theme.spacing(4),
-    border: `0.5px solid ${theme.palette.divider}`,
 }));
 
 const TitleContainer = styled('div')(({ theme }) => ({
@@ -68,96 +68,99 @@ type Props = {
 
 export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
     return (
-        <ContentGrid container columns={{ lg: 12, md: 1 }}>
-            <SpacedGridItem item lg={4} md={1}>
-                <Typography variant='h3'>My projects</Typography>
-            </SpacedGridItem>
-            <SpacedGridItem item lg={8} md={1}>
-                <Typography>Potential next steps</Typography>
-            </SpacedGridItem>
-            <SpacedGridItem item lg={4} md={1}>
-                <GridContent>
-                    <Typography>
-                        You don't currently have access to any projects in the
-                        system.
-                    </Typography>
-                    <Typography>
-                        To get started, you can{' '}
-                        <Link to='/projects?create=true'>
-                            create your own project
-                        </Link>
-                        . Alternatively, you can review the available projects
-                        in the system and ask the owner for access.
-                    </Typography>
-                </GridContent>
-            </SpacedGridItem>
-            <SpacedGridItem item lg={4} md={1}>
-                <GridContent>
-                    <TitleContainer>
-                        <NeutralCircleContainer>1</NeutralCircleContainer>
-                        Contact Unleash admin
-                    </TitleContainer>
-                    <BoxMainContent>
-                        {admins.length ? (
-                            <>
+        <ContentGridContainer>
+            <ProjectGrid>
+                <SpacedGridItem gridArea='title'>
+                    <Typography variant='h3'>My projects</Typography>
+                </SpacedGridItem>
+                <SpacedGridItem gridArea='onboarding'>
+                    <Typography>Potential next steps</Typography>
+                </SpacedGridItem>
+                <SpacedGridItem gridArea='projects'>
+                    <GridContent>
+                        <Typography>
+                            You don't currently have access to any projects in
+                            the system.
+                        </Typography>
+                        <Typography>
+                            To get started, you can{' '}
+                            <Link to='/projects?create=true'>
+                                create your own project
+                            </Link>
+                            . Alternatively, you can review the available
+                            projects in the system and ask the owner for access.
+                        </Typography>
+                    </GridContent>
+                </SpacedGridItem>
+                <SpacedGridItem gridArea='box1'>
+                    <GridContent>
+                        <TitleContainer>
+                            <NeutralCircleContainer>1</NeutralCircleContainer>
+                            Contact Unleash admin
+                        </TitleContainer>
+                        <BoxMainContent>
+                            {admins.length ? (
+                                <>
+                                    <p>
+                                        Your Unleash administrator
+                                        {admins.length > 1 ? 's are' : ' is'}:
+                                    </p>
+                                    <AdminList>
+                                        {admins.map((admin) => {
+                                            return (
+                                                <AdminListItem key={admin.id}>
+                                                    <UserAvatar
+                                                        sx={{
+                                                            margin: 0,
+                                                        }}
+                                                        user={admin}
+                                                    />
+                                                    <Typography>
+                                                        {admin.name ||
+                                                            admin.username ||
+                                                            admin.email}
+                                                    </Typography>
+                                                </AdminListItem>
+                                            );
+                                        })}
+                                    </AdminList>
+                                </>
+                            ) : (
                                 <p>
-                                    Your Unleash administrator
-                                    {admins.length > 1 ? 's are' : ' is'}:
+                                    You have no Unleash administrators to
+                                    contact.
                                 </p>
-                                <AdminList>
-                                    {admins.map((admin) => {
-                                        return (
-                                            <AdminListItem key={admin.id}>
-                                                <UserAvatar
-                                                    sx={{
-                                                        margin: 0,
-                                                    }}
-                                                    user={admin}
-                                                />
-                                                <Typography>
-                                                    {admin.name ||
-                                                        admin.username ||
-                                                        admin.email}
-                                                </Typography>
-                                            </AdminListItem>
-                                        );
-                                    })}
-                                </AdminList>
-                            </>
-                        ) : (
-                            <p>
-                                You have no Unleash administrators to contact.
-                            </p>
-                        )}
-                    </BoxMainContent>
-                </GridContent>
-            </SpacedGridItem>
-            <SpacedGridItem item lg={4} md={1}>
-                <GridContent>
-                    <TitleContainer>
-                        <NeutralCircleContainer>2</NeutralCircleContainer>
-                        Ask a project owner to add you to their project
-                    </TitleContainer>
-                    <BoxMainContent>
-                        {owners.length ? (
-                            <>
-                                <p>Project owners in Unleash:</p>
-                                <AvatarGroupFromOwners
-                                    users={owners}
-                                    avatarLimit={9}
-                                />
-                            </>
-                        ) : (
-                            <p>
-                                There are no project owners in Unleash to ask
-                                for access.
-                            </p>
-                        )}
-                    </BoxMainContent>
-                </GridContent>
-            </SpacedGridItem>
-            <SpacedGridItem item lg={4} md={1} />
-            <SpacedGridItem item lg={8} md={1} />
-        </ContentGrid>
+                            )}
+                        </BoxMainContent>
+                    </GridContent>
+                </SpacedGridItem>
+                <SpacedGridItem gridArea='box2'>
+                    <GridContent>
+                        <TitleContainer>
+                            <NeutralCircleContainer>2</NeutralCircleContainer>
+                            Ask a project owner to add you to their project
+                        </TitleContainer>
+                        <BoxMainContent>
+                            {owners.length ? (
+                                <>
+                                    <p>Project owners in Unleash:</p>
+                                    <AvatarGroupFromOwners
+                                        users={owners}
+                                        avatarLimit={9}
+                                    />
+                                </>
+                            ) : (
+                                <p>
+                                    There are no project owners in Unleash to
+                                    ask for access.
+                                </p>
+                            )}
+                        </BoxMainContent>
+                    </GridContent>
+                </SpacedGridItem>
+                <EmptyGridItem />
+                <PaddedEmptyGridItem gridArea='owners' />
+            </ProjectGrid>
+        </ContentGridContainer>
     );
 };
diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/Grid.tsx
index d3da090664..e50b6070b4 100644
--- a/frontend/src/component/personalDashboard/Grid.tsx
+++ b/frontend/src/component/personalDashboard/Grid.tsx
@@ -1,11 +1,11 @@
-import { Box, Grid, styled } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import type { Theme } from '@mui/material/styles/createTheme';
 
 export const ContentGridContainer = styled('div')({
     containerType: 'inline-size',
 });
 
-const ContentGrid2 = styled('article')(({ theme }) => {
+const ContentGrid = styled('article')(({ theme }) => {
     return {
         backgroundColor: theme.palette.divider,
         borderRadius: `${theme.shape.borderRadiusLarge}px`,
@@ -21,8 +21,23 @@ const ContentGrid2 = styled('article')(({ theme }) => {
     };
 });
 
-export const ProjectGrid = styled(ContentGrid2)(({ theme }) => ({
-    '@container (min-width: 1000px)': {
+const onWideContainer =
+    (css: object) =>
+    ({ theme }: { theme: Theme }) => {
+        const containerBreakpoint = '1000px';
+        const screenBreakpoint = theme.breakpoints.up('lg');
+
+        return {
+            [`@container (min-width: ${containerBreakpoint})`]: css,
+
+            '@supports not (container-type: inline-size)': {
+                [screenBreakpoint]: css,
+            },
+        };
+    };
+
+export const ProjectGrid = styled(ContentGrid)(
+    onWideContainer({
         gridTemplateColumns: '1fr 1fr 1fr',
         display: 'grid',
         gridTemplateAreas: `
@@ -30,47 +45,36 @@ export const ProjectGrid = styled(ContentGrid2)(({ theme }) => ({
                 "projects box1 box2"
                 ". owners owners"
             `,
-    },
+    }),
+);
 
-    '@supports not (container-type: inline-size)': {
-        [theme.breakpoints.up('lg')]: {
-            gridTemplateColumns: '1fr 1fr 1fr',
-            display: 'grid',
-            gridTemplateAreas: `
-                "title onboarding onboarding"
-                "projects box1 box2"
-                ". owners owners"
+export const FlagGrid = styled(ContentGrid)(
+    onWideContainer({
+        gridTemplateColumns: '1fr 1fr 1fr',
+        display: 'grid',
+        gridTemplateAreas: `
+                "title lifecycle lifecycle"
+                "flags chart chart"
             `,
-        },
-    },
-}));
+    }),
+);
 
-export const SpacedGridItem2 = styled('div')(({ theme }) => ({
+export const SpacedGridItem = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'gridArea',
+})<{ gridArea: string }>(({ theme, gridArea }) => ({
     padding: theme.spacing(4),
+    gridArea,
 }));
 
-export const EmptyGridItem = styled('div')(({ theme }) => ({
+export const EmptyGridItem = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'gridArea',
+})<{ gridArea?: string }>(({ theme, gridArea }) => ({
     display: 'none',
+    gridArea,
 
-    '@container (min-width: 1000px)': {
+    ...onWideContainer({
         display: 'block',
-    },
-
-    '@supports not (container-type: inline-size)': {
-        [theme.breakpoints.up('lg')]: {
-            display: 'block',
-        },
-    },
-}));
-
-export const ContentGrid = styled(Grid)(({ theme }) => ({
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: `${theme.shape.borderRadiusLarge}px`,
-}));
-
-export const SpacedGridItem = styled(Grid)(({ theme }) => ({
-    padding: theme.spacing(4),
-    border: `0.5px solid ${theme.palette.divider}`,
+    })({ theme }),
 }));
 
 export const ListItemBox = styled(Box)(({ theme }) => ({
diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx
index f95a60e286..7021f7dddd 100644
--- a/frontend/src/component/personalDashboard/MyProjects.tsx
+++ b/frontend/src/component/personalDashboard/MyProjects.tsx
@@ -26,7 +26,7 @@ import {
     ListItemBox,
     listItemStyle,
     ProjectGrid,
-    SpacedGridItem2,
+    SpacedGridItem,
 } from './Grid';
 
 const ActiveProjectDetails: FC<{
@@ -82,29 +82,15 @@ export const MyProjects: FC<{
     return (
         <ContentGridContainer>
             <ProjectGrid>
-                <SpacedGridItem2
-                    sx={{
-                        gridArea: 'title',
-                    }}
-                >
+                <SpacedGridItem gridArea='title'>
                     <Typography variant='h3'>My projects</Typography>
-                </SpacedGridItem2>
-                <SpacedGridItem2
-                    sx={{
-                        gridArea: 'onboarding',
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                    }}
-                >
+                </SpacedGridItem>
+                <SpacedGridItem gridArea='onboarding'>
                     {setupIncomplete ? (
                         <Badge color='warning'>Setup incomplete</Badge>
                     ) : null}
-                </SpacedGridItem2>
-                <SpacedGridItem2
-                    sx={{
-                        gridArea: 'projects',
-                    }}
-                >
+                </SpacedGridItem>
+                <SpacedGridItem gridArea='projects'>
                     <List
                         disablePadding={true}
                         sx={{ maxHeight: '400px', overflow: 'auto' }}
@@ -149,12 +135,8 @@ export const MyProjects: FC<{
                             );
                         })}
                     </List>
-                </SpacedGridItem2>
-                <SpacedGridItem2
-                    sx={{
-                        gridArea: 'box1',
-                    }}
-                >
+                </SpacedGridItem>
+                <SpacedGridItem gridArea='box1'>
                     {activeProjectStage === 'onboarded' &&
                     personalDashboardProjectDetails ? (
                         <ProjectSetupComplete
@@ -169,12 +151,8 @@ export const MyProjects: FC<{
                     {activeProjectStage === 'first-flag-created' ? (
                         <ExistingFlag project={activeProject} />
                     ) : null}
-                </SpacedGridItem2>
-                <SpacedGridItem2
-                    sx={{
-                        gridArea: 'box2',
-                    }}
-                >
+                </SpacedGridItem>
+                <SpacedGridItem gridArea='box2'>
                     {activeProjectStage === 'onboarded' &&
                     personalDashboardProjectDetails ? (
                         <LatestProjectEvents
@@ -186,13 +164,9 @@ export const MyProjects: FC<{
                     {setupIncomplete || activeProjectStage === 'loading' ? (
                         <ConnectSDK project={activeProject} />
                     ) : null}
-                </SpacedGridItem2>
+                </SpacedGridItem>
                 <EmptyGridItem />
-                <SpacedGridItem2
-                    sx={{
-                        gridArea: 'owners',
-                    }}
-                >
+                <SpacedGridItem gridArea='owners'>
                     {personalDashboardProjectDetails ? (
                         <RoleAndOwnerInfo
                             roles={personalDashboardProjectDetails.roles.map(
@@ -201,7 +175,7 @@ export const MyProjects: FC<{
                             owners={personalDashboardProjectDetails.owners}
                         />
                     ) : null}
-                </SpacedGridItem2>
+                </SpacedGridItem>
             </ProjectGrid>
         </ContentGridContainer>
     );
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index f3d8416a52..607bb58691 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -24,7 +24,8 @@ import HelpOutline from '@mui/icons-material/HelpOutline';
 import useLoading from '../../hooks/useLoading';
 import { MyProjects } from './MyProjects';
 import {
-    ContentGrid,
+    ContentGridContainer,
+    FlagGrid,
     ListItemBox,
     listItemStyle,
     SpacedGridItem,
@@ -180,55 +181,58 @@ export const PersonalDashboard = () => {
                 />
             )}
 
-            <ContentGrid container columns={{ lg: 12, md: 1 }} sx={{ mt: 2 }}>
-                <SpacedGridItem item lg={4} md={1}>
-                    <Typography variant='h3'>My feature flags</Typography>
-                </SpacedGridItem>
-                <SpacedGridItem
-                    item
-                    lg={8}
-                    md={1}
-                    sx={{ display: 'flex', justifyContent: 'flex-end' }}
-                >
-                    {activeFlag ? (
-                        <FlagExposure
-                            project={activeFlag.project}
-                            flagName={activeFlag.name}
-                            onArchive={refetchDashboard}
-                        />
-                    ) : null}
-                </SpacedGridItem>
-                <SpacedGridItem item lg={4} md={1}>
-                    {personalDashboard && personalDashboard.flags.length > 0 ? (
-                        <List
-                            disablePadding={true}
-                            sx={{ maxHeight: '400px', overflow: 'auto' }}
-                        >
-                            {personalDashboard.flags.map((flag) => (
-                                <FlagListItem
-                                    key={flag.name}
-                                    flag={flag}
-                                    selected={flag.name === activeFlag?.name}
-                                    onClick={() => setActiveFlag(flag)}
-                                />
-                            ))}
-                        </List>
-                    ) : (
-                        <Typography>
-                            You have not created or favorited any feature flags.
-                            Once you do, they will show up here.
-                        </Typography>
-                    )}
-                </SpacedGridItem>
+            <ContentGridContainer>
+                <FlagGrid sx={{ mt: 2 }}>
+                    <SpacedGridItem gridArea='title'>
+                        <Typography variant='h3'>My feature flags</Typography>
+                    </SpacedGridItem>
+                    <SpacedGridItem
+                        gridArea='lifecycle'
+                        sx={{ display: 'flex', justifyContent: 'flex-end' }}
+                    >
+                        {activeFlag ? (
+                            <FlagExposure
+                                project={activeFlag.project}
+                                flagName={activeFlag.name}
+                                onArchive={refetchDashboard}
+                            />
+                        ) : null}
+                    </SpacedGridItem>
+                    <SpacedGridItem gridArea='flags'>
+                        {personalDashboard &&
+                        personalDashboard.flags.length > 0 ? (
+                            <List
+                                disablePadding={true}
+                                sx={{ maxHeight: '400px', overflow: 'auto' }}
+                            >
+                                {personalDashboard.flags.map((flag) => (
+                                    <FlagListItem
+                                        key={flag.name}
+                                        flag={flag}
+                                        selected={
+                                            flag.name === activeFlag?.name
+                                        }
+                                        onClick={() => setActiveFlag(flag)}
+                                    />
+                                ))}
+                            </List>
+                        ) : (
+                            <Typography>
+                                You have not created or favorited any feature
+                                flags. Once you do, they will show up here.
+                            </Typography>
+                        )}
+                    </SpacedGridItem>
 
-                <SpacedGridItem item lg={8} md={1}>
-                    {activeFlag ? (
-                        <FlagMetricsChart flag={activeFlag} />
-                    ) : (
-                        <PlaceholderFlagMetricsChart />
-                    )}
-                </SpacedGridItem>
-            </ContentGrid>
+                    <SpacedGridItem gridArea='chart'>
+                        {activeFlag ? (
+                            <FlagMetricsChart flag={activeFlag} />
+                        ) : (
+                            <PlaceholderFlagMetricsChart />
+                        )}
+                    </SpacedGridItem>
+                </FlagGrid>
+            </ContentGridContainer>
             <WelcomeDialog
                 open={welcomeDialog === 'open'}
                 onClose={() => setWelcomeDialog('closed')}