diff --git a/packages/next/src/views/Edit/Default/index.tsx b/packages/next/src/views/Edit/Default/index.tsx
index 41319b89c..1feb2bfc8 100644
--- a/packages/next/src/views/Edit/Default/index.tsx
+++ b/packages/next/src/views/Edit/Default/index.tsx
@@ -43,6 +43,7 @@ export const DefaultEditView: React.FC = () => {
     BeforeFields,
     collectionSlug,
     disableActions,
+    disableCreate,
     disableLeaveWithoutSaving,
     docPermissions,
     getDocPreferences,
@@ -54,7 +55,12 @@ export const DefaultEditView: React.FC = () => {
     initialState,
     isEditing,
     isInitializing,
+    onDelete,
+    onDrawerCreate,
+    onDuplicate,
     onSave: onSaveFromContext,
+    redirectAfterDelete,
+    redirectAfterDuplicate,
   } = useDocumentInfo()
 
   const { refreshCookieAsync, user } = useAuth()
@@ -223,11 +229,18 @@ export const DefaultEditView: React.FC = () => {
             apiURL={apiURL}
             data={data}
             disableActions={disableActions}
+            disableCreate={disableCreate}
             hasPublishPermission={hasPublishPermission}
             hasSavePermission={hasSavePermission}
             id={id}
             isEditing={isEditing}
+            onDelete={onDelete}
+            onDrawerCreate={onDrawerCreate}
+            onDuplicate={onDuplicate}
+            onSave={onSave}
             permissions={docPermissions}
+            redirectAfterDelete={redirectAfterDelete}
+            redirectAfterDuplicate={redirectAfterDuplicate}
             slug={collectionConfig?.slug || globalConfig?.slug}
           />
           <DocumentFields
diff --git a/packages/ui/src/elements/DeleteDocument/index.tsx b/packages/ui/src/elements/DeleteDocument/index.tsx
index 6bded7dc5..28354e9d9 100644
--- a/packages/ui/src/elements/DeleteDocument/index.tsx
+++ b/packages/ui/src/elements/DeleteDocument/index.tsx
@@ -1,19 +1,23 @@
 'use client'
-import type { SanitizedCollectionConfig } from 'payload'
+import type { ClientCollectionConfig, SanitizedCollectionConfig } from 'payload'
 
 import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
+import type { DocumentInfoContext } from '../../providers/DocumentInfo/index.js'
+
 import { useForm } from '../../forms/Form/context.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { requests } from '../../utilities/api.js'
 import { formatAdminURL } from '../../utilities/formatAdminURL.js'
 import { Button } from '../Button/index.js'
+import { drawerZBase } from '../Drawer/index.js'
 import { PopupList } from '../Popup/index.js'
 import { Translation } from '../Translation/index.js'
 import './index.scss'
@@ -21,30 +25,44 @@ import './index.scss'
 const baseClass = 'delete-document'
 
 export type Props = {
-  buttonId?: string
-  collectionSlug: SanitizedCollectionConfig['slug']
-  id?: string
-  singularLabel: SanitizedCollectionConfig['labels']['singular']
-  title?: string
-  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']
+  readonly buttonId?: string
+  readonly collectionSlug: SanitizedCollectionConfig['slug']
+  readonly id?: string
+  readonly onDelete?: DocumentInfoContext['onDelete']
+  readonly redirectAfterDelete?: boolean
+  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']
+  readonly title?: string
+  readonly useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']
 }
 
 export const DeleteDocument: React.FC<Props> = (props) => {
-  const { id, buttonId, collectionSlug, singularLabel, title: titleFromProps } = props
+  const {
+    id,
+    buttonId,
+    collectionSlug,
+    onDelete,
+    redirectAfterDelete = true,
+    singularLabel,
+    title: titleFromProps,
+  } = props
 
   const {
     config: {
       routes: { admin: adminRoute, api },
       serverURL,
     },
+    getEntityConfig,
   } = useConfig()
 
+  const collectionConfig = getEntityConfig({ collectionSlug }) as ClientCollectionConfig
+
   const { setModified } = useForm()
   const [deleting, setDeleting] = useState(false)
-  const { toggleModal } = useModal()
+  const { closeModal, toggleModal } = useModal()
   const router = useRouter()
   const { i18n, t } = useTranslation()
   const { title } = useDocumentInfo()
+  const editDepth = useEditDepth()
 
   const titleToRender = titleFromProps || title || id
 
@@ -55,9 +73,16 @@ export const DeleteDocument: React.FC<Props> = (props) => {
     toast.error(t('error:deletingTitle', { title }))
   }, [t, title])
 
+  useEffect(() => {
+    return () => {
+      closeModal(modalSlug)
+    }
+  }, [closeModal, modalSlug])
+
   const handleDelete = useCallback(async () => {
     setDeleting(true)
     setModified(false)
+
     try {
       await requests
         .delete(`${serverURL}${api}/${collectionSlug}/${id}`, {
@@ -73,19 +98,32 @@ export const DeleteDocument: React.FC<Props> = (props) => {
             if (res.status < 400) {
               setDeleting(false)
               toggleModal(modalSlug)
+
               toast.success(
                 t('general:titleDeleted', { label: getTranslation(singularLabel, i18n), title }) ||
                   json.message,
               )
 
-              return router.push(
-                formatAdminURL({
-                  adminRoute,
-                  path: `/collections/${collectionSlug}`,
-                }),
-              )
+              if (redirectAfterDelete) {
+                return router.push(
+                  formatAdminURL({
+                    adminRoute,
+                    path: `/collections/${collectionSlug}`,
+                  }),
+                )
+              }
+
+              if (typeof onDelete === 'function') {
+                await onDelete({ id, collectionConfig })
+              }
+
+              toggleModal(modalSlug)
+
+              return
             }
+
             toggleModal(modalSlug)
+
             if (json.errors) {
               json.errors.forEach((error) => toast.error(error.message))
             } else {
@@ -114,6 +152,9 @@ export const DeleteDocument: React.FC<Props> = (props) => {
     router,
     adminRoute,
     addDefaultError,
+    redirectAfterDelete,
+    onDelete,
+    collectionConfig,
   ])
 
   if (id) {
@@ -128,7 +169,13 @@ export const DeleteDocument: React.FC<Props> = (props) => {
         >
           {t('general:delete')}
         </PopupList.Button>
-        <Modal className={baseClass} slug={modalSlug}>
+        <Modal
+          className={baseClass}
+          slug={modalSlug}
+          style={{
+            zIndex: drawerZBase + editDepth,
+          }}
+        >
           <div className={`${baseClass}__wrapper`}>
             <div className={`${baseClass}__content`}>
               <h1>{t('general:confirmDeletion')}</h1>
@@ -158,7 +205,11 @@ export const DeleteDocument: React.FC<Props> = (props) => {
               </Button>
               <Button
                 id="confirm-delete"
-                onClick={deleting ? undefined : handleDelete}
+                onClick={() => {
+                  if (!deleting) {
+                    void handleDelete()
+                  }
+                }}
                 size="large"
               >
                 {deleting ? t('general:deleting') : t('general:confirm')}
diff --git a/packages/ui/src/elements/DocumentControls/index.tsx b/packages/ui/src/elements/DocumentControls/index.tsx
index 3470ba3b1..8cf40af9a 100644
--- a/packages/ui/src/elements/DocumentControls/index.tsx
+++ b/packages/ui/src/elements/DocumentControls/index.tsx
@@ -10,7 +10,10 @@ import type {
 import { getTranslation } from '@payloadcms/translations'
 import React, { Fragment, useEffect } from 'react'
 
+import type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'
+
 import { useConfig } from '../../providers/Config/index.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { formatAdminURL } from '../../utilities/formatAdminURL.js'
 import { formatDate } from '../../utilities/formatDate.js'
@@ -32,12 +35,20 @@ export const DocumentControls: React.FC<{
   readonly apiURL: string
   readonly data?: any
   readonly disableActions?: boolean
+  readonly disableCreate?: boolean
   readonly hasPublishPermission?: boolean
   readonly hasSavePermission?: boolean
   id?: number | string
   readonly isAccountView?: boolean
   readonly isEditing?: boolean
+  readonly onDelete?: DocumentInfoContext['onDelete']
+  readonly onDrawerCreate?: () => void
+  /* Only available if `redirectAfterDuplicate` is `false` */
+  readonly onDuplicate?: DocumentInfoContext['onDuplicate']
+  readonly onSave?: DocumentInfoContext['onSave']
   readonly permissions: CollectionPermission | GlobalPermission | null
+  readonly redirectAfterDelete?: boolean
+  readonly redirectAfterDuplicate?: boolean
   readonly slug: SanitizedCollectionConfig['slug']
 }> = (props) => {
   const {
@@ -45,14 +56,22 @@ export const DocumentControls: React.FC<{
     slug,
     data,
     disableActions,
+    disableCreate,
     hasSavePermission,
     isAccountView,
     isEditing,
+    onDelete,
+    onDrawerCreate,
+    onDuplicate,
     permissions,
+    redirectAfterDelete,
+    redirectAfterDuplicate,
   } = props
 
   const { i18n } = useTranslation()
 
+  const editDepth = useEditDepth()
+
   const { config, getEntityConfig } = useConfig()
 
   const collectionConfig = getEntityConfig({ collectionSlug: slug }) as ClientCollectionConfig
@@ -218,18 +237,30 @@ export const DocumentControls: React.FC<{
               <PopupList.ButtonGroup>
                 {hasCreatePermission && (
                   <React.Fragment>
-                    <PopupList.Button
-                      href={formatAdminURL({
-                        adminRoute,
-                        path: `/collections/${collectionConfig?.slug}/create`,
-                      })}
-                      id="action-create"
-                    >
-                      {i18n.t('general:createNew')}
-                    </PopupList.Button>
+                    {!disableCreate && (
+                      <Fragment>
+                        {editDepth > 1 ? (
+                          <PopupList.Button id="action-create" onClick={onDrawerCreate}>
+                            {i18n.t('general:createNew')}
+                          </PopupList.Button>
+                        ) : (
+                          <PopupList.Button
+                            href={formatAdminURL({
+                              adminRoute,
+                              path: `/collections/${collectionConfig?.slug}/create`,
+                            })}
+                            id="action-create"
+                          >
+                            {i18n.t('general:createNew')}
+                          </PopupList.Button>
+                        )}
+                      </Fragment>
+                    )}
                     {!collectionConfig.disableDuplicate && isEditing && (
                       <DuplicateDocument
                         id={id.toString()}
+                        onDuplicate={onDuplicate}
+                        redirectAfterDuplicate={redirectAfterDuplicate}
                         singularLabel={collectionConfig?.labels?.singular}
                         slug={collectionConfig?.slug}
                       />
@@ -241,6 +272,8 @@ export const DocumentControls: React.FC<{
                     buttonId="action-delete"
                     collectionSlug={collectionConfig?.slug}
                     id={id.toString()}
+                    onDelete={onDelete}
+                    redirectAfterDelete={redirectAfterDelete}
                     singularLabel={collectionConfig?.labels?.singular}
                     useAsTitle={collectionConfig?.admin?.useAsTitle}
                   />
diff --git a/packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx b/packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx
index d52073c0a..d9ebf4ba3 100644
--- a/packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx
+++ b/packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx
@@ -22,9 +22,14 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
   id: existingDocID,
   AfterFields,
   collectionSlug,
+  disableActions,
   drawerSlug,
   Header,
+  onDelete: onDeleteFromProps,
+  onDuplicate: onDuplicateFromProps,
   onSave: onSaveFromProps,
+  redirectAfterDelete,
+  redirectAfterDuplicate,
 }) => {
   const { config } = useConfig()
 
@@ -74,6 +79,34 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
     [onSaveFromProps, collectionConfig],
   )
 
+  const onDuplicate = useCallback<DocumentDrawerProps['onSave']>(
+    (args) => {
+      setDocID(args.doc.id)
+
+      if (typeof onDuplicateFromProps === 'function') {
+        void onDuplicateFromProps({
+          ...args,
+          collectionConfig,
+        })
+      }
+    },
+    [onDuplicateFromProps, collectionConfig],
+  )
+
+  const onDelete = useCallback<DocumentDrawerProps['onDelete']>(
+    (args) => {
+      if (typeof onDeleteFromProps === 'function') {
+        void onDeleteFromProps({
+          ...args,
+          collectionConfig,
+        })
+      }
+
+      closeModal(drawerSlug)
+    },
+    [onDeleteFromProps, collectionConfig, closeModal, drawerSlug],
+  )
+
   return (
     <DocumentInfoProvider
       AfterFields={AfterFields}
@@ -100,12 +133,19 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
         </Gutter>
       }
       collectionSlug={collectionConfig.slug}
-      disableActions
+      disableActions={disableActions}
       disableLeaveWithoutSaving
       id={docID}
       isEditing={isEditing}
+      onDelete={onDelete}
+      onDrawerCreate={() => {
+        setDocID(null)
+      }}
+      onDuplicate={onDuplicate}
       onLoadError={onLoadError}
       onSave={onSave}
+      redirectAfterDelete={redirectAfterDelete !== undefined ? redirectAfterDelete : false}
+      redirectAfterDuplicate={redirectAfterDuplicate !== undefined ? redirectAfterDuplicate : false}
     >
       <RenderComponent mappedComponent={Edit} />
     </DocumentInfoProvider>
diff --git a/packages/ui/src/elements/DocumentDrawer/types.ts b/packages/ui/src/elements/DocumentDrawer/types.ts
index fa481f556..de7aa0d4c 100644
--- a/packages/ui/src/elements/DocumentDrawer/types.ts
+++ b/packages/ui/src/elements/DocumentDrawer/types.ts
@@ -7,9 +7,14 @@ import type { Props as DrawerProps } from '../Drawer/types.js'
 export type DocumentDrawerProps = {
   readonly AfterFields?: React.ReactNode
   readonly collectionSlug: string
+  readonly disableActions?: boolean
   readonly drawerSlug?: string
   readonly id?: null | number | string
+  readonly onDelete?: DocumentInfoContext['onDelete']
+  readonly onDuplicate?: DocumentInfoContext['onDuplicate']
   readonly onSave?: DocumentInfoContext['onSave']
+  readonly redirectAfterDelete?: boolean
+  readonly redirectAfterDuplicate?: boolean
 } & Pick<DrawerProps, 'Header'>
 
 export type DocumentTogglerProps = {
diff --git a/packages/ui/src/elements/Drawer/index.tsx b/packages/ui/src/elements/Drawer/index.tsx
index db43fdcf5..5316f8a6e 100644
--- a/packages/ui/src/elements/Drawer/index.tsx
+++ b/packages/ui/src/elements/Drawer/index.tsx
@@ -11,7 +11,8 @@ import { Gutter } from '../Gutter/index.js'
 import './index.scss'
 
 const baseClass = 'drawer'
-const zBase = 100
+
+export const drawerZBase = 100
 
 export const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>
   `drawer_${depth}_${slug}`
@@ -83,7 +84,7 @@ export const Drawer: React.FC<Props> = ({
           .join(' ')}
         slug={slug}
         style={{
-          zIndex: zBase + drawerDepth,
+          zIndex: drawerZBase + drawerDepth,
         }}
       >
         {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}
diff --git a/packages/ui/src/elements/DuplicateDocument/index.tsx b/packages/ui/src/elements/DuplicateDocument/index.tsx
index 1324607de..acd0ebd6d 100644
--- a/packages/ui/src/elements/DuplicateDocument/index.tsx
+++ b/packages/ui/src/elements/DuplicateDocument/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { SanitizedCollectionConfig } from 'payload'
+import type { ClientCollectionConfig, SanitizedCollectionConfig } from 'payload'
 
 import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
@@ -8,25 +8,37 @@ import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'sonner'
 
+import type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'
+
 import { useForm, useFormModified } from '../../forms/Form/context.js'
 import { useConfig } from '../../providers/Config/index.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { requests } from '../../utilities/api.js'
 import { formatAdminURL } from '../../utilities/formatAdminURL.js'
 import { Button } from '../Button/index.js'
+import { drawerZBase } from '../Drawer/index.js'
 import { PopupList } from '../Popup/index.js'
 import './index.scss'
 
 const baseClass = 'duplicate'
 
 export type Props = {
-  id: string
-  singularLabel: SanitizedCollectionConfig['labels']['singular']
-  slug: string
+  readonly id: string
+  readonly onDuplicate?: DocumentInfoContext['onDuplicate']
+  readonly redirectAfterDuplicate?: boolean
+  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']
+  readonly slug: string
 }
 
-export const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel }) => {
+export const DuplicateDocument: React.FC<Props> = ({
+  id,
+  slug,
+  onDuplicate,
+  redirectAfterDuplicate = true,
+  singularLabel,
+}) => {
   const router = useRouter()
   const modified = useFormModified()
   const { toggleModal } = useModal()
@@ -38,13 +50,18 @@ export const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel })
       routes: { admin: adminRoute, api: apiRoute },
       serverURL,
     },
+    getEntityConfig,
   } = useConfig()
 
+  const collectionConfig = getEntityConfig({ collectionSlug: slug }) as ClientCollectionConfig
+
   const [hasClicked, setHasClicked] = useState<boolean>(false)
   const { i18n, t } = useTranslation()
 
   const modalSlug = `duplicate-${id}`
 
+  const editDepth = useEditDepth()
+
   const handleClick = useCallback(
     async (override = false) => {
       setHasClicked(true)
@@ -72,13 +89,21 @@ export const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel })
               message ||
                 t('general:successfullyDuplicated', { label: getTranslation(singularLabel, i18n) }),
             )
+
             setModified(false)
-            router.push(
-              formatAdminURL({
-                adminRoute,
-                path: `/collections/${slug}/${doc.id}${locale?.code ? `?locale=${locale.code}` : ''}`,
-              }),
-            )
+
+            if (redirectAfterDuplicate) {
+              router.push(
+                formatAdminURL({
+                  adminRoute,
+                  path: `/collections/${slug}/${doc.id}${locale?.code ? `?locale=${locale.code}` : ''}`,
+                }),
+              )
+            }
+
+            if (typeof onDuplicate === 'function') {
+              void onDuplicate({ collectionConfig, doc })
+            }
           } else {
             toast.error(
               errors?.[0].message ||
@@ -100,9 +125,12 @@ export const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel })
       modalSlug,
       t,
       singularLabel,
+      onDuplicate,
+      redirectAfterDuplicate,
       setModified,
       router,
       adminRoute,
+      collectionConfig,
     ],
   )
 
@@ -117,7 +145,13 @@ export const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel })
         {t('general:duplicate')}
       </PopupList.Button>
       {modified && hasClicked && (
-        <Modal className={`${baseClass}__modal`} slug={modalSlug}>
+        <Modal
+          className={`${baseClass}__modal`}
+          slug={modalSlug}
+          style={{
+            zIndex: drawerZBase + editDepth,
+          }}
+        >
           <div className={`${baseClass}__wrapper`}>
             <div className={`${baseClass}__content`}>
               <h1>{t('general:confirmDuplication')}</h1>
diff --git a/packages/ui/src/elements/ReactSelect/types.ts b/packages/ui/src/elements/ReactSelect/types.ts
index 8dd6842fa..96fb015c2 100644
--- a/packages/ui/src/elements/ReactSelect/types.ts
+++ b/packages/ui/src/elements/ReactSelect/types.ts
@@ -1,19 +1,21 @@
 import type { CommonProps, GroupBase, Props as ReactSelectStateManagerProps } from 'react-select'
 
-import type { DocumentDrawerProps } from '../DocumentDrawer/types.js'
+import type { DocumentDrawerProps, UseDocumentDrawer } from '../DocumentDrawer/types.js'
 
 type CustomSelectProps = {
   disableKeyDown?: boolean
   disableMouseDown?: boolean
+  DocumentDrawerToggler?: ReturnType<UseDocumentDrawer>[1]
   draggableProps?: any
   droppableRef?: React.RefObject<HTMLDivElement | null>
+  onDelete?: DocumentDrawerProps['onDelete']
   onDocumentDrawerOpen: (args: {
     collectionSlug: string
     hasReadPermission: boolean
     id: number | string
   }) => void
+  onDuplicate?: DocumentDrawerProps['onSave']
   onSave?: DocumentDrawerProps['onSave']
-  setDrawerIsOpen?: (isOpen: boolean) => void
 }
 
 // augment the types for the `Select` component from `react-select`
diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
index 71d9d3c54..68360b50b 100644
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -251,8 +251,6 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
                 dispatchOptions({
                   type: 'ADD',
                   collection,
-                  // TODO: fix this
-                  // @ts-expect-error-next-line
                   config,
                   docs: data.docs,
                   i18n,
@@ -264,8 +262,6 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
               dispatchOptions({
                 type: 'ADD',
                 collection,
-                // TODO: fix this
-                // @ts-expect-error-next-line
                 config,
                 docs: [],
                 i18n,
@@ -380,8 +376,6 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
             dispatchOptions({
               type: 'ADD',
               collection,
-              // TODO: fix this
-              // @ts-expect-error-next-line
               config,
               docs,
               i18n,
@@ -458,14 +452,91 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
       dispatchOptions({
         type: 'UPDATE',
         collection: args.collectionConfig,
-        // TODO: fix this
-        // @ts-expect-error-next-line
         config,
         doc: args.doc,
         i18n,
       })
+
+      if (hasMany) {
+        setValue(
+          valueRef.current
+            ? (valueRef.current as Option[]).map((option) => {
+                if (option.value === args.doc.id) {
+                  return {
+                    relationTo: args.collectionConfig.slug,
+                    value: args.doc.id,
+                  }
+                }
+
+                return option
+              })
+            : null,
+        )
+      } else {
+        setValue({
+          relationTo: args.collectionConfig.slug,
+          value: args.doc.id,
+        })
+      }
     },
-    [i18n, config],
+    [i18n, config, hasMany, setValue],
+  )
+
+  const onDuplicate = useCallback<DocumentDrawerProps['onDuplicate']>(
+    (args) => {
+      dispatchOptions({
+        type: 'ADD',
+        collection: args.collectionConfig,
+        config,
+        docs: [args.doc],
+        i18n,
+        sort: true,
+      })
+
+      if (hasMany) {
+        setValue(
+          valueRef.current
+            ? (valueRef.current as Option[]).concat({
+                relationTo: args.collectionConfig.slug,
+                value: args.doc.id,
+              } as Option)
+            : null,
+        )
+      } else {
+        setValue({
+          relationTo: args.collectionConfig.slug,
+          value: args.doc.id,
+        })
+      }
+    },
+    [i18n, config, hasMany, setValue],
+  )
+
+  const onDelete = useCallback<DocumentDrawerProps['onDelete']>(
+    (args) => {
+      dispatchOptions({
+        id: args.id,
+        type: 'REMOVE',
+        collection: args.collectionConfig,
+        config,
+        i18n,
+      })
+
+      if (hasMany) {
+        setValue(
+          valueRef.current
+            ? (valueRef.current as Option[]).filter((option) => {
+                return option.value !== args.id
+              })
+            : null,
+        )
+      } else {
+        setValue(null)
+      }
+
+      return
+    },
+    [i18n, config, hasMany, setValue],
   )
 
   const filterOption = useCallback((item: Option, searchFilter: string) => {
@@ -657,7 +728,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
         />
       </div>
       {currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && (
-        <DocumentDrawer onSave={onSave} />
+        <DocumentDrawer onDelete={onDelete} onDuplicate={onDuplicate} onSave={onSave} />
       )}
     </div>
   )
diff --git a/packages/ui/src/fields/Relationship/optionsReducer.ts b/packages/ui/src/fields/Relationship/optionsReducer.ts
index df082f412..c8efa3b21 100644
--- a/packages/ui/src/fields/Relationship/optionsReducer.ts
+++ b/packages/ui/src/fields/Relationship/optionsReducer.ts
@@ -146,6 +146,27 @@ export const optionsReducer = (state: OptionGroup[], action: Action): OptionGrou
       return newOptions
     }
 
+    case 'REMOVE': {
+      const { id, collection } = action
+
+      const newOptions = [...state]
+
+      const indexOfGroup = newOptions.findIndex(
+        (optionGroup) => optionGroup.label === collection.labels.plural,
+      )
+
+      if (indexOfGroup === -1) {
+        return newOptions
+      }
+
+      newOptions[indexOfGroup] = {
+        ...newOptions[indexOfGroup],
+        options: newOptions[indexOfGroup].options.filter((option) => option.value !== id),
+      }
+
+      return newOptions
+    }
+
     default: {
       return state
     }
diff --git a/packages/ui/src/fields/Relationship/types.ts b/packages/ui/src/fields/Relationship/types.ts
index 1ba643e11..6259f5f1e 100644
--- a/packages/ui/src/fields/Relationship/types.ts
+++ b/packages/ui/src/fields/Relationship/types.ts
@@ -1,5 +1,5 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { ClientCollectionConfig, FilterOptionsResult, SanitizedConfig } from 'payload'
+import type { ClientCollectionConfig, ClientConfig, FilterOptionsResult } from 'payload'
 
 export type Option = {
   label: string
@@ -27,7 +27,7 @@ type CLEAR = {
 
 type UPDATE = {
   collection: ClientCollectionConfig
-  config: SanitizedConfig
+  config: ClientConfig
   doc: any
   i18n: I18nClient
   type: 'UPDATE'
@@ -35,7 +35,7 @@ type UPDATE = {
 
 type ADD = {
   collection: ClientCollectionConfig
-  config: SanitizedConfig
+  config: ClientConfig
   docs: any[]
   i18n: I18nClient
   ids?: (number | string)[]
@@ -43,7 +43,15 @@ type ADD = {
   type: 'ADD'
 }
 
-export type Action = ADD | CLEAR | UPDATE
+type REMOVE = {
+  collection: ClientCollectionConfig
+  config: ClientConfig
+  i18n: I18nClient
+  id: string
+  type: 'REMOVE'
+}
+
+export type Action = ADD | CLEAR | REMOVE | UPDATE
 
 export type GetResults = (args: {
   filterOptions?: FilterOptionsResult
diff --git a/packages/ui/src/providers/DocumentInfo/index.tsx b/packages/ui/src/providers/DocumentInfo/index.tsx
index 284708b11..4a770042a 100644
--- a/packages/ui/src/providers/DocumentInfo/index.tsx
+++ b/packages/ui/src/providers/DocumentInfo/index.tsx
@@ -580,7 +580,7 @@ const DocumentInfo: React.FC<
 
 export const DocumentInfoProvider: React.FC<
   {
-    children: React.ReactNode
+    readonly children: React.ReactNode
   } & DocumentInfoProps
 > = (props) => {
   return (
diff --git a/packages/ui/src/providers/DocumentInfo/types.ts b/packages/ui/src/providers/DocumentInfo/types.ts
index 3337ed7c5..e0787b678 100644
--- a/packages/ui/src/providers/DocumentInfo/types.ts
+++ b/packages/ui/src/providers/DocumentInfo/types.ts
@@ -24,6 +24,7 @@ export type DocumentInfoProps = {
   BeforeFields?: React.ReactNode
   collectionSlug?: SanitizedCollectionConfig['slug']
   disableActions?: boolean
+  disableCreate?: boolean
   disableLeaveWithoutSaving?: boolean
   docPermissions?: DocumentPermissions
   globalSlug?: SanitizedGlobalConfig['slug']
@@ -33,8 +34,25 @@ export type DocumentInfoProps = {
   initialData?: Data
   initialState?: FormState
   isEditing?: boolean
+  onDelete?: (args: {
+    collectionConfig?: ClientCollectionConfig
+    id: string
+  }) => Promise<void> | void
+  onDrawerCreate?: () => void
+  /* only available if `redirectAfterDuplicate` is `false` */
+  onDuplicate?: (args: {
+    collectionConfig?: ClientCollectionConfig
+    doc: TypeWithID
+  }) => Promise<void> | void
   onLoadError?: (data?: any) => Promise<void> | void
-  onSave?: (data: Data) => Promise<void> | void
+  onSave?: (args: {
+    collectionConfig?: ClientCollectionConfig
+    doc: TypeWithID
+    operation: 'create' | 'update'
+    result: Data
+  }) => Promise<void> | void
+  redirectAfterDelete?: boolean
+  redirectAfterDuplicate?: boolean
 }
 
 export type DocumentInfoContext = {
diff --git a/test/access-control/e2e.spec.ts b/test/access-control/e2e.spec.ts
index 7f982122b..ea9857e2f 100644
--- a/test/access-control/e2e.spec.ts
+++ b/test/access-control/e2e.spec.ts
@@ -3,6 +3,7 @@ import type { TypeWithID } from 'payload'
 
 import { expect, test } from '@playwright/test'
 import { devUser } from 'credentials.js'
+import { openDocControls } from 'helpers/e2e/openDocControls.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
@@ -21,7 +22,6 @@ import {
   getRoutes,
   initPageConsoleErrorCatch,
   login,
-  openDocControls,
   openNav,
   saveDocAndAssert,
 } from '../helpers.js'
diff --git a/test/admin/e2e/1/e2e.spec.ts b/test/admin/e2e/1/e2e.spec.ts
index df8f35814..9ec055a9b 100644
--- a/test/admin/e2e/1/e2e.spec.ts
+++ b/test/admin/e2e/1/e2e.spec.ts
@@ -12,7 +12,6 @@ import {
   exactText,
   getRoutes,
   initPageConsoleErrorCatch,
-  openDocControls,
   openNav,
   saveDocAndAssert,
   saveDocHotkeyAndAssert,
@@ -61,6 +60,7 @@ const description = 'Description'
 let payload: PayloadTestSDK<Config>
 
 import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
+import { openDocControls } from 'helpers/e2e/openDocControls.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
diff --git a/test/admin/seed.ts b/test/admin/seed.ts
index 656f630db..c310f8445 100644
--- a/test/admin/seed.ts
+++ b/test/admin/seed.ts
@@ -21,6 +21,7 @@ export const seed = async (_payload) => {
         await new Promise((resolve, reject) => {
           _payload.db?.collections[coll.slug]?.ensureIndexes(function (err) {
             if (err) {
+              // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
               reject(err)
             }
             resolve(true)
@@ -42,12 +43,12 @@ export const seed = async (_payload) => {
           depth: 0,
           overrideAccess: true,
         }),
-      ...[...Array(11)].map(() => async () => {
+      ...[...Array(11)].map((_, i) => async () => {
         const postDoc = await _payload.create({
           collection: postsCollectionSlug,
           data: {
             description: 'Description',
-            title: 'Title',
+            title: `Post ${i + 1}`,
           },
           depth: 0,
           overrideAccess: true,
diff --git a/test/fields-relationship/e2e.spec.ts b/test/fields-relationship/e2e.spec.ts
index bbf594842..4a3cbebc0 100644
--- a/test/fields-relationship/e2e.spec.ts
+++ b/test/fields-relationship/e2e.spec.ts
@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { openDocControls } from 'helpers/e2e/openDocControls.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -21,7 +22,6 @@ import {
   ensureCompilationIsDone,
   initPageConsoleErrorCatch,
   openCreateDocDrawer,
-  openDocControls,
   openDocDrawer,
   saveDocAndAssert,
 } from '../helpers.js'
diff --git a/test/fields/collections/Relationship/e2e.spec.ts b/test/fields/collections/Relationship/e2e.spec.ts
index 53b39d2f9..473eafee3 100644
--- a/test/fields/collections/Relationship/e2e.spec.ts
+++ b/test/fields/collections/Relationship/e2e.spec.ts
@@ -1,6 +1,8 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
+import { openDocControls } from 'helpers/e2e/openDocControls.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -13,6 +15,7 @@ import {
   exactText,
   initPageConsoleErrorCatch,
   openCreateDocDrawer,
+  openDocDrawer,
   saveDocAndAssert,
   saveDocHotkeyAndAssert,
 } from '../../../helpers.js'
@@ -238,7 +241,7 @@ describe('relationship', () => {
   })
 
   // Related issue: https://github.com/payloadcms/payload/issues/2815
-  test('should modify fields in relationship drawer', async () => {
+  test('should edit document in relationship drawer', async () => {
     await page.goto(url.create)
     await page.waitForURL(`**/${url.create}`)
     // First fill out the relationship field, as it's required
@@ -269,9 +272,12 @@ describe('relationship', () => {
     // Now open the drawer again to edit the `text` field _using the keyboard_
     // Mimic real user behavior by typing into the field with spaces and backspaces
     // Explicitly use both `down` and `type` to cover edge cases
-    await page
-      .locator('#field-relationshipHasMany button.relationship--multi-value-label__drawer-toggler')
-      .click()
+
+    await openDocDrawer(
+      page,
+      '#field-relationshipHasMany button.relationship--multi-value-label__drawer-toggler',
+    )
+
     await page.locator('[id^=doc-drawer_text-fields_1_] #field-text').click()
     await page.keyboard.down('1')
     await page.keyboard.type('23')
@@ -303,7 +309,7 @@ describe('relationship', () => {
   // Drawers opened through the edit button are prone to issues due to the use of stopPropagation for certain
   // events - specifically for drawers opened through the edit button. This test is to ensure that drawers
   // opened through the edit button can be saved using the hotkey.
-  test('should save using hotkey in edit document drawer', async () => {
+  test('should save using hotkey in document drawer', async () => {
     await page.goto(url.create)
     // First fill out the relationship field, as it's required
     await openCreateDocDrawer(page, '#field-relationship')
@@ -333,14 +339,181 @@ describe('relationship', () => {
         },
       },
     })
+
     const relationshipDocuments = await payload.find({
       collection: relationshipFieldsSlug,
     })
 
     // The Seeded text document should now have a text field with value 'some updated text value',
     expect(seededTextDocument.docs.length).toEqual(1)
+
     // but the relationship document should NOT exist, as the hotkey should have saved the drawer and not the parent page
-    expect(relationshipDocuments.docs.length).toEqual(0)
+    // NOTE: the value here represents the number of documents _before_ the test was run
+    expect(relationshipDocuments.docs.length).toEqual(2)
+  })
+
+  describe('should create document within document drawer', () => {
+    test('has one', async () => {
+      await navigateToDoc(page, url)
+
+      const originalValue = await page
+        .locator('#field-relationship .relationship--single-value')
+        .textContent()
+
+      await openDocDrawer(page, '#field-relationship .relationship--single-value__drawer-toggler')
+      const drawer1Content = page.locator('[id^=doc-drawer_text-fields_1_] .drawer__content')
+      const originalDrawerID = await drawer1Content.locator('.id-label').textContent()
+      await openDocControls(drawer1Content)
+      await drawer1Content.locator('#action-create').click()
+      await wait(1000) // wait for /form-state to return
+      const title = 'Created from drawer'
+      await drawer1Content.locator('#field-text').fill(title)
+      await saveDocAndAssert(page, '[id^=doc-drawer_text-fields_1_] .drawer__content #action-save')
+      const newDrawerID = drawer1Content.locator('.id-label')
+      await expect(newDrawerID).not.toHaveText(originalDrawerID)
+      await page.locator('[id^=doc-drawer_text-fields_1_] .drawer__close').click()
+      await page.locator('#field-relationship').scrollIntoViewIfNeeded()
+
+      await expect(
+        page.locator('#field-relationship .relationship--single-value__text', {
+          hasText: exactText(originalValue),
+        }),
+      ).toBeHidden()
+
+      await expect(
+        page.locator('#field-relationship .relationship--single-value__text', {
+          hasText: exactText(title),
+        }),
+      ).toBeVisible()
+
+      await page.locator('#field-relationship .rs__control').click()
+
+      await expect(
+        page.locator('.rs__option', {
+          hasText: exactText(title),
+        }),
+      ).toBeVisible()
+    })
+
+    test.skip('has many', async () => {})
+  })
+
+  describe('should duplicate document within document drawer', () => {
+    test('has one', async () => {
+      await navigateToDoc(page, url)
+
+      await wait(500)
+      const fieldControl = page.locator('#field-relationship .rs__control')
+      const originalValue = await page
+        .locator('#field-relationship .relationship--single-value__text')
+        .textContent()
+
+      await fieldControl.click()
+
+      await expect(
+        page.locator('.rs__option', {
+          hasText: exactText(originalValue),
+        }),
+      ).toBeVisible()
+
+      await openDocDrawer(page, '#field-relationship .relationship--single-value__drawer-toggler')
+      const drawer1Content = page.locator('[id^=doc-drawer_text-fields_1_] .drawer__content')
+      const originalID = await drawer1Content.locator('.id-label').textContent()
+      const originalText = 'Text'
+      await drawer1Content.locator('#field-text').fill(originalText)
+      await saveDocAndAssert(page, '[id^=doc-drawer_text-fields_1_] .drawer__content #action-save')
+      await openDocControls(drawer1Content)
+      await drawer1Content.locator('#action-duplicate').click()
+      const duplicateID = drawer1Content.locator('.id-label')
+      await expect(duplicateID).not.toHaveText(originalID)
+      await page.locator('[id^=doc-drawer_text-fields_1_] .drawer__close').click()
+      await expect(page.locator('.payload-toast-container')).toContainText('successfully')
+      await page.locator('#field-relationship').scrollIntoViewIfNeeded()
+
+      const newValue = `${originalText} - duplicate` // this is added via a `beforeDuplicate` hook
+
+      await expect(
+        page.locator('#field-relationship .relationship--single-value__text', {
+          hasText: exactText(originalValue),
+        }),
+      ).toBeHidden()
+
+      await expect(
+        page.locator('#field-relationship .relationship--single-value__text', {
+          hasText: exactText(newValue),
+        }),
+      ).toBeVisible()
+
+      await page.locator('#field-relationship .rs__control').click()
+
+      await expect(
+        page.locator('.rs__option', {
+          hasText: exactText(newValue),
+        }),
+      ).toBeVisible()
+    })
+
+    test.skip('has many', async () => {})
+  })
+
+  describe('should delete document within document drawer', () => {
+    test('has one', async () => {
+      await navigateToDoc(page, url)
+
+      await wait(500)
+
+      const originalValue = await page
+        .locator('#field-relationship .relationship--single-value__text')
+        .textContent()
+
+      await page.locator('#field-relationship .rs__control').click()
+
+      await expect(
+        page.locator('#field-relationship .rs__option', {
+          hasText: exactText(originalValue),
+        }),
+      ).toBeVisible()
+
+      await openDocDrawer(
+        page,
+        '#field-relationship button.relationship--single-value__drawer-toggler',
+      )
+
+      const drawer1Content = page.locator('[id^=doc-drawer_text-fields_1_] .drawer__content')
+      const originalID = await drawer1Content.locator('.id-label').textContent()
+      await openDocControls(drawer1Content)
+      await drawer1Content.locator('#action-delete').click()
+
+      await page
+        .locator('[id^=delete-].payload__modal-item.delete-document[open] button#confirm-delete')
+        .click()
+
+      await expect(drawer1Content).toBeHidden()
+
+      await expect(
+        page.locator('#field-relationship .relationship--single-value__text'),
+      ).toBeHidden()
+
+      await expect(page.locator('#field-relationship .rs__placeholder')).toBeVisible()
+
+      await page.locator('#field-relationship .rs__control').click()
+
+      await wait(500)
+
+      await expect(
+        page.locator('#field-relationship .rs__option', {
+          hasText: exactText(originalValue),
+        }),
+      ).toBeHidden()
+
+      await expect(
+        page.locator('#field-relationship .rs__option', {
+          hasText: exactText(`Untitled - ${originalID}`),
+        }),
+      ).toBeHidden()
+    })
+
+    test.skip('has many', async () => {})
   })
 
   // TODO: Fix this. This test flakes due to react select
diff --git a/test/fields/collections/Text/index.ts b/test/fields/collections/Text/index.ts
index 194ba01ca..b299d8194 100644
--- a/test/fields/collections/Text/index.ts
+++ b/test/fields/collections/Text/index.ts
@@ -13,6 +13,9 @@ const TextFields: CollectionConfig = {
       name: 'text',
       type: 'text',
       required: true,
+      hooks: {
+        beforeDuplicate: [({ value }) => `${value} - duplicate`],
+      },
     },
     {
       name: 'localizedText',
diff --git a/test/fields/payload-types.ts b/test/fields/payload-types.ts
index a8b98cf59..343d7ed94 100644
--- a/test/fields/payload-types.ts
+++ b/test/fields/payload-types.ts
@@ -957,8 +957,15 @@ export interface RowField {
   title: string;
   field_with_width_a?: string | null;
   field_with_width_b?: string | null;
+  field_with_width_30_percent?: string | null;
+  field_with_width_60_percent?: string | null;
+  field_with_width_20_percent?: string | null;
   field_within_collapsible_a?: string | null;
   field_within_collapsible_b?: string | null;
+  field_20_percent_width_within_row_a?: string | null;
+  no_set_width_within_row_b?: string | null;
+  no_set_width_within_row_c?: string | null;
+  field_20_percent_width_within_row_d?: string | null;
   updatedAt: string;
   createdAt: string;
 }
diff --git a/test/fields/seed.ts b/test/fields/seed.ts
index 20bf3f89a..b9d1efcc2 100644
--- a/test/fields/seed.ts
+++ b/test/fields/seed.ts
@@ -45,6 +45,7 @@ import {
   numberFieldsSlug,
   pointFieldsSlug,
   radioFieldsSlug,
+  relationshipFieldsSlug,
   richTextFieldsSlug,
   selectFieldsSlug,
   tabsFieldsSlug,
@@ -339,6 +340,37 @@ export const seed = async (_payload: Payload) => {
     overrideAccess: true,
   })
 
+  const relationshipField1 = await _payload.create({
+    collection: relationshipFieldsSlug,
+    data: {
+      text: 'Relationship 1',
+      relationship: {
+        relationTo: textFieldsSlug,
+        value: createdTextDoc.id,
+      },
+    },
+    depth: 0,
+    overrideAccess: true,
+  })
+
+  try {
+    await _payload.create({
+      collection: relationshipFieldsSlug,
+      data: {
+        text: 'Relationship 2',
+        relationToSelf: relationshipField1.id,
+        relationship: {
+          relationTo: textFieldsSlug,
+          value: createdAnotherTextDoc.id,
+        },
+      },
+      depth: 0,
+      overrideAccess: true,
+    })
+  } catch (e) {
+    console.error(e)
+  }
+
   await _payload.create({
     collection: lexicalFieldsSlug,
     data: lexicalDocWithRelId,
diff --git a/test/helpers.ts b/test/helpers.ts
index 9012b0fe9..90028d990 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -226,11 +226,6 @@ export async function closeNav(page: Page): Promise<void> {
   await expect(page.locator('.template-default.template-default--nav-open')).toBeHidden()
 }
 
-export async function openDocControls(page: Page): Promise<void> {
-  await page.locator('.doc-controls__popup >> .popup-button').click()
-  await expect(page.locator('.doc-controls__popup >> .popup__content')).toBeVisible()
-}
-
 export async function changeLocale(page: Page, newLocale: string) {
   await page.locator('.localizer >> button').first().click()
   await page
diff --git a/test/helpers/e2e/openDocControls.ts b/test/helpers/e2e/openDocControls.ts
new file mode 100644
index 000000000..0485f3e55
--- /dev/null
+++ b/test/helpers/e2e/openDocControls.ts
@@ -0,0 +1,6 @@
+import { type Locator, type Page, expect } from '@playwright/test'
+
+export async function openDocControls(page: Locator | Page): Promise<void> {
+  await page.locator('.doc-controls__popup >> .popup-button').click()
+  await expect(page.locator('.doc-controls__popup >> .popup__content')).toBeVisible()
+}
diff --git a/test/localization/e2e.spec.ts b/test/localization/e2e.spec.ts
index 530c703c8..bfae4c92d 100644
--- a/test/localization/e2e.spec.ts
+++ b/test/localization/e2e.spec.ts
@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { openDocControls } from 'helpers/e2e/openDocControls.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -12,7 +13,6 @@ import {
   changeLocale,
   ensureCompilationIsDone,
   initPageConsoleErrorCatch,
-  openDocControls,
   saveDocAndAssert,
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'