diff --git a/frontend/src/component/project/Project/CreateProject/CreateProject.tsx b/frontend/src/component/project/Project/CreateProject/CreateProject.tsx
index a9b5e6c528..7324dfdc22 100644
--- a/frontend/src/component/project/Project/CreateProject/CreateProject.tsx
+++ b/frontend/src/component/project/Project/CreateProject/CreateProject.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import ProjectForm from '../ProjectForm/ProjectForm';
+import { NewProjectForm } from './NewProjectForm';
 import useProjectForm, {
     DEFAULT_PROJECT_STICKINESS,
 } from '../hooks/useProjectForm';
@@ -14,6 +15,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { GO_BACK } from 'constants/navigate';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { Button, styled } from '@mui/material';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN';
 
@@ -45,6 +47,8 @@ const CreateProject = () => {
         errors,
     } = useProjectForm();
 
+    const useNewProjectForm = useUiFlag('newCreateProjectUI');
+
     const { createProject, loading } = useProjectApi();
 
     const handleSubmit = async (e: Event) => {
@@ -89,6 +93,21 @@ const CreateProject = () => {
         navigate(GO_BACK);
     };
 
+    if (useNewProjectForm) {
+        return (
+            <FormTemplate
+                disablePadding
+                loading={loading}
+                description='Projects allows you to group feature toggles together in the management UI.'
+                documentationLink='https://docs.getunleash.io/reference/projects'
+                documentationLinkLabel='Projects documentation'
+                formatApiCode={formatApiCode}
+            >
+                <NewProjectForm />
+            </FormTemplate>
+        );
+    }
+
     return (
         <FormTemplate
             loading={loading}
diff --git a/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx b/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx
new file mode 100644
index 0000000000..e8ccda29ff
--- /dev/null
+++ b/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx
@@ -0,0 +1,121 @@
+import {
+    Button,
+    MenuItem,
+    Select,
+    TextField,
+    Typography,
+    styled,
+} from '@mui/material';
+import { GO_BACK } from 'constants/navigate';
+import { CreateButton } from 'component/common/CreateButton/CreateButton';
+import { CREATE_PROJECT } from 'component/providers/AccessProvider/permissions';
+import { useNavigate } from 'react-router-dom';
+
+const StyledForm = styled('form')(({ theme }) => ({
+    background: theme.palette.background.default,
+}));
+
+const StyledFormSection = styled('div')(({ theme }) => ({
+    '& + *': {
+        borderBlockStart: `1px solid ${theme.palette.divider}`,
+    },
+
+    padding: theme.spacing(7),
+}));
+
+const TopGrid = styled(StyledFormSection)(({ theme }) => ({
+    display: 'grid',
+    gridTemplateAreas:
+        '"icon header template" "icon project-name project-name" "icon description description"',
+    gridTemplateColumns: 'minmax(auto, 50px) 1fr auto',
+    gap: theme.spacing(2),
+}));
+
+const StyledIcon = styled('span')(({ theme }) => ({
+    border: `1px solid ${theme.palette.primary.main}`,
+    width: `100%`,
+    aspectRatio: '1',
+    borderRadius: theme.shape.borderRadius,
+}));
+
+const StyledHeader = styled(Typography)(({ theme }) => ({
+    gridArea: 'header',
+}));
+
+const StyledTemplateSelector = styled(Select)(({ theme }) => ({
+    gridArea: 'template',
+}));
+
+const StyledInput = styled(TextField)(({ theme }) => ({
+    width: '100%',
+    margin: 0,
+    fieldset: { border: 'none' },
+}));
+
+const StyledProjectName = styled(StyledInput)(({ theme }) => ({
+    gridArea: 'project-name',
+    '*': { fontSize: theme.typography.h1.fontSize },
+}));
+
+const StyledProjectDescription = styled(StyledInput)(({ theme }) => ({
+    gridArea: 'description',
+    '*': { fontSize: theme.typography.h2.fontSize },
+}));
+
+const OptionButtons = styled(StyledFormSection)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+}));
+
+const FormActions = styled(StyledFormSection)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(5),
+    justifyContent: 'flex-end',
+}));
+
+const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN';
+
+export const NewProjectForm = () => {
+    const navigate = useNavigate();
+
+    const handleCancel = () => {
+        navigate(GO_BACK);
+    };
+
+    return (
+        <StyledForm>
+            <TopGrid>
+                <StyledIcon>icon</StyledIcon>
+                <StyledHeader variant='h2'>New project</StyledHeader>
+                <StyledTemplateSelector
+                    id='template-selector'
+                    value={'none'}
+                    label='Project creation template'
+                    name='Project creation template'
+                >
+                    <MenuItem value={'none'}>No template</MenuItem>
+                </StyledTemplateSelector>
+                <StyledProjectName label='Project name' required />
+                <StyledProjectDescription
+                    label='Description (optional)'
+                    multiline
+                />
+            </TopGrid>
+            <OptionButtons>
+                <Button variant='outlined'>4 selected</Button>
+                <Button variant='outlined'>clientId</Button>
+                <Button variant='outlined'>Open</Button>
+                <Button variant='outlined'>1 environment configured</Button>
+            </OptionButtons>
+            <FormActions>
+                <Button onClick={handleCancel}>Cancel</Button>
+
+                <CreateButton
+                    name='project'
+                    permission={CREATE_PROJECT}
+                    data-testid={CREATE_PROJECT_BTN}
+                />
+            </FormActions>
+        </StyledForm>
+    );
+};