diff --git a/apps/studio/src/features/editing-experience/components/PageCreateModal.tsx b/apps/studio/src/features/editing-experience/components/PageCreateModal.tsx
index 0e8d6680b1..cc8cfd12be 100644
--- a/apps/studio/src/features/editing-experience/components/PageCreateModal.tsx
+++ b/apps/studio/src/features/editing-experience/components/PageCreateModal.tsx
@@ -71,120 +71,126 @@ export const PageCreateModal = ({
   const onSubmit: SubmitHandler<PageCreateFormFields> = (data) =>
     console.log(data)
 
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+  const [submitted, setSubmitted] = useState(false)
+
+  let content = (
+    <>
+      <ModalHeader color="base.content.strong">
+        Tell us about your new page
+      </ModalHeader>
       <ModalCloseButton />
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader color="base.content.strong">
-          Tell us about your new page
-        </ModalHeader>
-        <ModalCloseButton />
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <ModalBody>
-            <Stack gap={'1.5em'}>
-              <Text fontSize="md" color="base.content.default">
-                You can change these later.
-              </Text>
-              {/* Section 1: Page Title */}
-              <FormControl isInvalid={!!errors.title}>
-                <FormLabel color="base.content.strong">
-                  Page title
-                  <FormHelperText color="base.content.default">
-                    Title should be descriptive
-                  </FormHelperText>
-                </FormLabel>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <ModalBody>
+          <Stack gap={'1.5em'}>
+            <Text fontSize="md" color="base.content.default">
+              You can change these later.
+            </Text>
+            {/* Section 1: Page Title */}
+            <FormControl isInvalid={!!errors.title}>
+              <FormLabel color="base.content.strong">
+                Page title
+                <FormHelperText color="base.content.default">
+                  Title should be descriptive
+                </FormHelperText>
+              </FormLabel>
+
+              <Input
+                type="text"
+                placeholder="This is a title for your new page"
+                id="title"
+                {...register('title', {
+                  required: ERROR_MESSAGES.TITLE.REQUIRED,
+                  validate: (value) =>
+                    value.trim().length !== 0 || ERROR_MESSAGES.TITLE.REQUIRED,
+                  minLength: {
+                    value: 1,
+                    message: ERROR_MESSAGES.MIN_LENGTH,
+                  },
+                  maxLength: {
+                    value: MAX_TITLE_LENGTH,
+                    message: ERROR_MESSAGES.MAX_LENGTH(MAX_TITLE_LENGTH),
+                  },
+                })}
+                isInvalid={!!errors.title}
+              />
+              {errors.title && errors.title.message ? (
+                <FormErrorMessage>{errors.title.message}</FormErrorMessage>
+              ) : (
+                <FormHelperText mt={'0.5em'} color="base.content.medium">
+                  {MAX_TITLE_LENGTH - titleLen} characters left
+                </FormHelperText>
+              )}
+            </FormControl>
 
+            {/* Section 2: Page URL */}
+            <FormControl isInvalid={!!errors.url}>
+              <FormLabel>
+                Page URL
+                <FormHelperText>URL should be short and simple</FormHelperText>
+              </FormLabel>
+              <InputGroup>
+                <InputLeftAddon
+                  bgColor="interaction.support.disabled"
+                  color="base.divider.strong"
+                >
+                  your-site.gov.sg/
+                </InputLeftAddon>
                 <Input
-                  type="text"
-                  placeholder="This is a title for your new page"
-                  id="title"
-                  {...register('title', {
-                    required: ERROR_MESSAGES.TITLE.REQUIRED,
-                    validate: (value) =>
-                      value.trim().length !== 0 ||
-                      ERROR_MESSAGES.TITLE.REQUIRED,
+                  type="tel"
+                  defaultValue={'hello-world'}
+                  color="base.content.default"
+                  {...register('url', {
+                    required: ERROR_MESSAGES.URL.REQUIRED,
                     minLength: {
                       value: 1,
                       message: ERROR_MESSAGES.MIN_LENGTH,
                     },
                     maxLength: {
-                      value: MAX_TITLE_LENGTH,
-                      message: ERROR_MESSAGES.MAX_LENGTH(MAX_TITLE_LENGTH),
+                      value: MAX_PAGE_URL_LENGTH,
+                      message: ERROR_MESSAGES.MAX_LENGTH(MAX_PAGE_URL_LENGTH),
                     },
                   })}
-                  isInvalid={!!errors.title}
+                  isInvalid={!!errors.url}
                 />
-                {errors.title && errors.title.message ? (
-                  <FormErrorMessage>{errors.title.message}</FormErrorMessage>
-                ) : (
-                  <FormHelperText mt={'0.5em'} color="base.content.medium">
-                    {MAX_TITLE_LENGTH - titleLen} characters left
-                  </FormHelperText>
-                )}
-              </FormControl>
+              </InputGroup>
 
-              {/* Section 2: Page URL */}
-              <FormControl isInvalid={!!errors.url}>
-                <FormLabel>
-                  Page URL
-                  <FormHelperText>
-                    URL should be short and simple
-                  </FormHelperText>
-                </FormLabel>
-                <InputGroup>
-                  <InputLeftAddon
-                    bgColor="interaction.support.disabled"
-                    color="base.divider.strong"
-                  >
-                    your-site.gov.sg/
-                  </InputLeftAddon>
-                  <Input
-                    type="tel"
-                    defaultValue={'hello-world'}
-                    color="base.content.default"
-                    {...register('url', {
-                      required: ERROR_MESSAGES.URL.REQUIRED,
-                      minLength: {
-                        value: 1,
-                        message: ERROR_MESSAGES.MIN_LENGTH,
-                      },
-                      maxLength: {
-                        value: MAX_PAGE_URL_LENGTH,
-                        message: ERROR_MESSAGES.MAX_LENGTH(MAX_PAGE_URL_LENGTH),
-                      },
-                    })}
-                    isInvalid={!!errors.url}
-                  />
-                </InputGroup>
+              {errors.url && errors.url.message ? (
+                <FormErrorMessage>{errors.url.message}</FormErrorMessage>
+              ) : (
+                <FormHelperText mt={'0.5em'} color="base.content.medium">
+                  {MAX_PAGE_URL_LENGTH - pageUrlLen} characters left
+                </FormHelperText>
+              )}
+            </FormControl>
+          </Stack>
+        </ModalBody>
 
-                {errors.url && errors.url.message ? (
-                  <FormErrorMessage>{errors.url.message}</FormErrorMessage>
-                ) : (
-                  <FormHelperText mt={'0.5em'} color="base.content.medium">
-                    {MAX_PAGE_URL_LENGTH - pageUrlLen} characters left
-                  </FormHelperText>
-                )}
-              </FormControl>
-            </Stack>
-          </ModalBody>
+        <ModalFooter>
+          <Button
+            variant="link"
+            mr={5}
+            onClick={onClose}
+            fontWeight={500}
+            color={'base.content.strong'}
+          >
+            Cancel
+          </Button>
+          <Button bgColor="interaction.main.default" type="submit">
+            Create page
+          </Button>
+        </ModalFooter>
+      </form>
+    </>
+  )
 
-          <ModalFooter>
-            <Button
-              variant="link"
-              mr={5}
-              onClick={onClose}
-              fontWeight={500}
-              color={'base.content.strong'}
-            >
-              Cancel
-            </Button>
-            <Button bgColor="interaction.main.default" type="submit">
-              Create page
-            </Button>
-          </ModalFooter>
-        </form>
-      </ModalContent>
+  if (submitted) {
+    // TODO: set content to layout selector
+  }
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalCloseButton />
+      <ModalOverlay />
+      <ModalContent>{content}</ModalContent>
     </Modal>
   )
 }