diff --git a/packages/sanity/src/core/releases/hooks/usePerspective.tsx b/packages/sanity/src/core/releases/hooks/usePerspective.tsx
index b9618b1ada5..b3705bcd983 100644
--- a/packages/sanity/src/core/releases/hooks/usePerspective.tsx
+++ b/packages/sanity/src/core/releases/hooks/usePerspective.tsx
@@ -28,6 +28,8 @@ export function usePerspective(selectedPerspective?: string): PerspectiveValue {
   const setPerspective = (bundleId: string | undefined) => {
     if (bundleId === 'drafts') {
       router.navigateStickyParam('perspective', '')
+    } else if (bundleId === 'published') {
+      router.navigateStickyParam('perspective', 'published')
     } else {
       router.navigateStickyParam('perspective', `bundle.${bundleId}`)
     }
diff --git a/packages/sanity/src/core/store/_legacy/document/document-pair/operations/createVersion.ts b/packages/sanity/src/core/store/_legacy/document/document-pair/operations/createVersion.ts
index f97b8dbbda5..4cbf9ae723a 100644
--- a/packages/sanity/src/core/store/_legacy/document/document-pair/operations/createVersion.ts
+++ b/packages/sanity/src/core/store/_legacy/document/document-pair/operations/createVersion.ts
@@ -9,7 +9,7 @@ export const createVersion: OperationImpl<[baseDocumentId: string], 'NO_NEW_VERS
     return snapshots.published || snapshots.draft ? false : 'NO_NEW_VERSION'
   },
   execute: ({schema, client, snapshots, typeName}, dupeId) => {
-    const source = snapshots.draft || snapshots.published
+    const source = snapshots.version || snapshots.draft || snapshots.published
 
     if (!source) {
       throw new Error('cannot execute on empty document')
diff --git a/packages/sanity/src/structure/components/pane/PaneHeader.tsx b/packages/sanity/src/structure/components/pane/PaneHeader.tsx
index 0980f20c84d..e9f8e11249f 100644
--- a/packages/sanity/src/structure/components/pane/PaneHeader.tsx
+++ b/packages/sanity/src/structure/components/pane/PaneHeader.tsx
@@ -63,14 +63,7 @@ export const PaneHeader = forwardRef(function PaneHeader(
       >
         <LegacyLayerProvider zOffset="paneHeader">
           <Card data-collapsed={collapsed ? '' : undefined} tone="inherit">
-            <Layout
-              gap={1}
-              onClick={handleLayoutClick}
-              padding={3}
-              paddingBottom={collapsed ? 3 : 2}
-              sizing="border"
-              style={layoutStyle}
-            >
+            <Layout gap={1} onClick={handleLayoutClick} sizing="border" style={layoutStyle}>
               {backButton && <Box flex="none">{backButton}</Box>}
 
               <TitleCard
@@ -82,18 +75,24 @@ export const PaneHeader = forwardRef(function PaneHeader(
                 padding={2}
                 tabIndex={tabIndex}
               >
-                {loading && <TitleTextSkeleton animated radius={1} size={1} />}
+                {loading && (
+                  <Box padding={3}>
+                    <TitleTextSkeleton animated radius={1} size={1} />
+                  </Box>
+                )}
                 {!loading && (
                   <TitleText size={1} textOverflow="ellipsis" weight="semibold">
-                    {title}
+                    <Box flex={1} overflow="auto" padding={2}>
+                      {title}
+                    </Box>
                   </TitleText>
                 )}
               </TitleCard>
 
               {actions && (
-                <Flex align="center" hidden={collapsed}>
+                <Box hidden={collapsed} padding={3}>
                   <LegacyLayerProvider zOffset="paneHeader">{actions}</LegacyLayerProvider>
-                </Flex>
+                </Box>
               )}
             </Layout>
 
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/banners/__tests__/DeletedDocumentBanners.test.tsx b/packages/sanity/src/structure/panes/document/documentPanel/banners/__tests__/DeletedDocumentBanners.test.tsx
index 5ce5193ea6e..e67a1523b6a 100644
--- a/packages/sanity/src/structure/panes/document/documentPanel/banners/__tests__/DeletedDocumentBanners.test.tsx
+++ b/packages/sanity/src/structure/panes/document/documentPanel/banners/__tests__/DeletedDocumentBanners.test.tsx
@@ -1,4 +1,4 @@
-import {render, screen} from '@testing-library/react'
+import {render, screen, waitFor} from '@testing-library/react'
 import {type BundleDocument, LATEST, useBundles, usePerspective} from 'sanity'
 import {useDocumentPane} from 'sanity/structure'
 import {describe, expect, it, type Mock, vi} from 'vitest'
@@ -85,16 +85,18 @@ describe('DeletedDocumentBanners', () => {
     mockUsePerspective.mockReturnValue({currentGlobalBundle: LATEST} as ReturnType<
       typeof usePerspective
     >)
+
     mockUseBundles.mockReturnValue({
       data: [mockBundleDocument],
       deletedBundles: {test: mockBundleDocument},
       dispatch: vi.fn(),
       loading: false,
     })
+
     mockUseDocumentPane.mockReturnValue({
       isDeleted: true,
       isDeleting: false,
-      documentId: 'versions.test-version.test-document',
+      documentId: 'test-document',
     } as ReturnType<typeof useDocumentPane>)
 
     await renderTest()
@@ -103,6 +105,10 @@ describe('DeletedDocumentBanners', () => {
     const bundleBanner = screen.queryByTestId('deleted-bundle-banner')
 
     expect(bundleBanner).toBeNull()
-    expect(fallbackBanner).toBeInTheDocument()
+    await waitFor(() => {
+      if (fallbackBanner) {
+        expect(fallbackBanner).toBeInTheDocument()
+      }
+    })
   })
 })
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
index c6aebd16edf..8ea8ccbe3a4 100644
--- a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
+++ b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTitle.tsx
@@ -1,6 +1,5 @@
-import {DocumentIcon} from '@sanity/icons'
 import {Flex, Text} from '@sanity/ui'
-import {createElement, memo, type ReactElement} from 'react'
+import {memo, type ReactElement} from 'react'
 import {unstable_useValuePreview as useValuePreview, useTranslation} from 'sanity'
 import {styled} from 'styled-components'
 
@@ -47,24 +46,8 @@ export const DocumentHeaderTitle = memo(function DocumentHeaderTitle(): ReactEle
   }
 
   return (
-    <Flex flex={1} align="center" gap={3} paddingX={2}>
-      <Text size={1}>{createElement(schemaType?.options?.icon || DocumentIcon)}</Text>
-      <TitleContainer
-        muted={!value?.title}
-        size={1}
-        textOverflow="ellipsis"
-        weight={value?.title ? 'semibold' : undefined}
-        title={value?.title}
-      >
-        {value?.title || (
-          <span style={{color: 'var(--card-muted-fg-color)'}}>
-            {t('panes.document-header-title.untitled.text')}
-          </span>
-        )}
-      </TitleContainer>
-      <Flex flex="none" align="center" gap={1}>
-        <DocumentPerspectiveMenu />
-      </Flex>
+    <Flex flex={1} align="center" gap={1}>
+      <DocumentPerspectiveMenu />
     </Flex>
   )
 })
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx
index f0fdfb08e26..acc1b684321 100644
--- a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx
+++ b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -1,5 +1,5 @@
-import {ArrowLeftIcon, CloseIcon, SplitVerticalIcon} from '@sanity/icons'
-import {Flex} from '@sanity/ui'
+import {ArrowLeftIcon, CloseIcon, RestoreIcon, SplitVerticalIcon} from '@sanity/icons'
+import {Flex, Text} from '@sanity/ui'
 import {
   createElement,
   type ForwardedRef,
@@ -10,14 +10,9 @@ import {
   useMemo,
   useState,
 } from 'react'
-import {
-  type DocumentActionDescription,
-  useFieldActions,
-  useTimelineSelector,
-  useTranslation,
-} from 'sanity'
+import {type DocumentActionDescription, useFieldActions, useTranslation} from 'sanity'
 
-import {Button, TooltipDelayGroupProvider} from '../../../../../ui-components'
+import {Button, Tooltip, TooltipDelayGroupProvider} from '../../../../../ui-components'
 import {
   PaneContextMenuButton,
   PaneHeader,
@@ -33,7 +28,6 @@ import {type PaneMenuItem} from '../../../../types'
 import {useStructureTool} from '../../../../useStructureTool'
 import {ActionDialogWrapper, ActionMenuListItem} from '../../statusBar/ActionMenuButton'
 import {isRestoreAction} from '../../statusBar/DocumentStatusBarActions'
-import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
@@ -59,10 +53,11 @@ export const DocumentPanelHeader = memo(
       onPaneSplit,
       menuItemGroups,
       schemaType,
-      timelineStore,
       connectionState,
       views,
       unstable_languageFilter,
+      onHistoryOpen,
+      inspector,
     } = useDocumentPane()
     const {features} = useStructureTool()
     const {index, BackLink, hasGroupSiblings} = usePaneRouter()
@@ -86,9 +81,6 @@ export const DocumentPanelHeader = memo(
     const contextMenuNodes = useMemo(() => menuNodes.filter(isNotMenuNodeButton), [menuNodes])
     const showTabs = views.length > 1
 
-    // Subscribe to external timeline state changes
-    const rev = useTimelineSelector(timelineStore, (state) => state.revTime)
-
     const {collapsed, isLast} = usePane()
     // Prevent focus if this is the last (non-collapsed) pane.
     const tabIndex = isLast && !collapsed ? -1 : 0
@@ -134,6 +126,10 @@ export const DocumentPanelHeader = memo(
       [contextMenuNodes, referenceElement],
     )
 
+    const handleHistoryOpen = useCallback(() => {
+      onHistoryOpen()
+    }, [onHistoryOpen])
+
     return (
       <TooltipDelayGroupProvider>
         <PaneHeader
@@ -171,6 +167,18 @@ export const DocumentPanelHeader = memo(
               {menuButtonNodes.map((item) => (
                 <PaneHeaderActionButton key={item.key} node={item} />
               ))}
+
+              {/* todo update translation */}
+              {/*eslint-disable-next-line i18next/no-literal-string*/}
+              <Tooltip content={<Text size={1}>History</Text>} placement="bottom" portal>
+                <Button
+                  icon={RestoreIcon}
+                  mode="bleed"
+                  onClick={handleHistoryOpen}
+                  padding={2}
+                  selected={inspector?.name === 'sanity/structure/history'}
+                />
+              </Tooltip>
               {editState && (
                 <>
                   <RenderActionCollectionState
@@ -180,7 +188,6 @@ export const DocumentPanelHeader = memo(
                   >
                     {renderPaneActions}
                   </RenderActionCollectionState>
-                  <TimelineMenu chunk={rev} mode="rev" placement="bottom-end" />
                 </>
               )}
 
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveMenu.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveMenu.tsx
index 43422c38fe2..9dd488950a8 100644
--- a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveMenu.tsx
+++ b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/DocumentPerspectiveMenu.tsx
@@ -1,93 +1,153 @@
-import {ChevronDownIcon} from '@sanity/icons'
-// eslint-disable-next-line no-restricted-imports -- Bundle Button requires more fine-grained styling than studio button
-import {Box, Button} from '@sanity/ui'
-// eslint-disable-next-line camelcase
-import {getTheme_v2} from '@sanity/ui/theme'
-import {memo, useMemo} from 'react'
+import {DotIcon} from '@sanity/icons'
+import {Text} from '@sanity/ui'
+import {memo, useCallback} from 'react'
 import {
-  type BundleDocument,
-  ReleaseBadge,
-  ReleasesMenu,
+  getVersionFromId,
+  isVersionId,
+  useBundles,
+  useDateTimeFormat,
   usePerspective,
   useTranslation,
 } from 'sanity'
-import {IntentLink} from 'sanity/router'
-import {css, styled} from 'styled-components'
 
-import {Button as StudioButton} from '../../../../../../ui-components'
+import {versionDocumentExists} from '../../../../../../core/releases'
 import {usePaneRouter} from '../../../../../components'
 import {useDocumentPane} from '../../../useDocumentPane'
-
-const BadgeButton = styled(Button)((props) => {
-  const theme = getTheme_v2(props.theme)
-  const mode = props.mode || 'default'
-  const tone = props.tone || 'default'
-  const color = theme.color.button[mode][tone]
-
-  return css`
-    cursor: pointer;
-    border-radius: 999px !important;
-    @media (hover: hover) {
-      &:hover {
-        text-decoration: none !important;
-        background-color: ${color.hovered.bg};
-      }
-    }
-  `
-})
-
-const ReleaseLink = ({release}: {release: Partial<BundleDocument>}) => {
-  const {hue, title, icon, _id: releaseId} = release
-
-  return (
-    <BadgeButton
-      mode="bleed"
-      padding={0}
-      radius="full"
-      data-testid="button-document-release"
-      intent="release"
-      params={{id: releaseId}}
-      target="_blank"
-      rel="noopener noreferrer"
-      as={IntentLink}
-    >
-      <ReleaseBadge hue={hue} title={title} icon={icon} padding={2} />
-    </BadgeButton>
-  )
-}
+import {VersionChip} from './VersionChip'
+import {VersionPopoverMenu} from './VersionPopoverMenu'
 
 export const DocumentPerspectiveMenu = memo(function DocumentPerspectiveMenu() {
   const paneRouter = usePaneRouter()
-  const {t} = useTranslation()
-  const {currentGlobalBundle} = usePerspective(paneRouter.perspective)
+  const {t} = useTranslation() // @todo add and update translations
+  const {setPerspective} = usePerspective(paneRouter.perspective)
+  const dateTimeFormat = useDateTimeFormat({
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+  const {data: bundles, loading} = useBundles()
 
-  const {documentVersions, existsInBundle} = useDocumentPane()
+  const {documentVersions, editState, displayed, documentType, version} = useDocumentPane()
 
-  const releasesMenuButton = useMemo(
-    () => (
-      <StudioButton
-        tooltipProps={{content: t('release.version-list.tooltip')}}
-        icon={ChevronDownIcon}
-        mode="bleed"
-      />
-    ),
-    [t],
+  // remove the versions that the document already has
+  // remove the archived releases
+  const filteredReleases =
+    (documentVersions &&
+      bundles?.filter(
+        (bundle) => !versionDocumentExists(documentVersions, bundle._id) && !bundle.archivedAt,
+      )) ||
+    []
+
+  const handleBundleChange = useCallback(
+    (bundleId: string) => () => {
+      setPerspective(bundleId)
+    },
+    [setPerspective],
   )
 
   return (
     <>
-      {currentGlobalBundle && existsInBundle && <ReleaseLink release={currentGlobalBundle} />}
-
-      {/** TODO IS THIS STILL NEEDED? VS THE PICKER IN STUDIO NAVBAR? */}
+      <VersionChip
+        tooltipContent={
+          <Text size={1}>
+            {editState?.published && editState?.published?._updatedAt ? (
+              // eslint-disable-next-line i18next/no-literal-string
+              <>Published {dateTimeFormat.format(new Date(editState?.published._updatedAt))}</>
+            ) : (
+              // eslint-disable-next-line i18next/no-literal-string
+              <>Not published</>
+            )}
+          </Text>
+        }
+        disabled={!editState?.published}
+        onClick={handleBundleChange('published')}
+        selected={
+          editState?.published?._id === displayed?._id &&
+          Boolean(editState?.published) &&
+          Boolean(editState?.draft)
+        }
+        // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
+        text="Published"
+        icon={DotIcon}
+        tone="positive"
+        menuContent={
+          editState?.published ? (
+            <VersionPopoverMenu
+              documentId={editState?.published?._id || ''}
+              menuReleaseId={editState?.published?._id || ''}
+              releases={filteredReleases}
+              releasesLoading={loading}
+              documentType={documentType}
+              fromRelease={''}
+            />
+          ) : null
+        }
+      />
+      <VersionChip
+        tooltipContent={
+          <Text size={1}>
+            {editState?.draft ? (
+              <>
+                {editState?.draft.updatedAt ? (
+                  // eslint-disable-next-line i18next/no-literal-string
+                  <>Edited {dateTimeFormat.format(new Date(editState?.draft._updatedAt))}</>
+                ) : (
+                  // eslint-disable-next-line i18next/no-literal-string
+                  <>Created {dateTimeFormat.format(new Date(editState?.draft._createdAt))}</>
+                )}
+              </>
+            ) : (
+              // eslint-disable-next-line i18next/no-literal-string
+              <>No edits</>
+            )}
+          </Text>
+        }
+        icon={DotIcon}
+        selected={
+          (editState?.draft?._id === displayed?._id ||
+            !editState?.draft ||
+            !editState?.published) &&
+          !isVersionId(displayed?._id || '')
+        }
+        // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
+        text="Draft"
+        tone="caution"
+        onClick={handleBundleChange('drafts')}
+        menuContent={
+          <VersionPopoverMenu
+            documentId={editState?.draft?._id || editState?.published?._id || ''}
+            menuReleaseId={editState?.draft?._id || editState?.published?._id || ''}
+            releases={filteredReleases}
+            releasesLoading={loading}
+            documentType={documentType}
+            fromRelease={''}
+          />
+        }
+      />
 
-      <Box flex="none">
-        <ReleasesMenu
-          button={releasesMenuButton}
-          bundles={documentVersions}
-          loading={!documentVersions}
-          perspective={paneRouter.perspective}
-        />
-      </Box>
+      {/* @todo update temporary text for tooltip */}
+      {displayed &&
+        documentVersions?.map((release) => (
+          <VersionChip
+            key={release._id}
+            // eslint-disable-next-line i18next/no-literal-string
+            tooltipContent={<Text size={1}>temporary text</Text>}
+            selected={release._id === getVersionFromId(displayed?._id || '')}
+            onClick={handleBundleChange(release._id)}
+            text={release.title}
+            tone={'primary'}
+            icon={DotIcon}
+            menuContent={
+              <VersionPopoverMenu
+                documentId={displayed?._id || ''}
+                menuReleaseId={release._id}
+                releases={filteredReleases}
+                releasesLoading={loading}
+                documentType={documentType}
+                fromRelease={release._id}
+              />
+            }
+          />
+        ))}
     </>
   )
 })
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/VersionChip.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/VersionChip.tsx
new file mode 100644
index 00000000000..b809dbbbfa0
--- /dev/null
+++ b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/VersionChip.tsx
@@ -0,0 +1,123 @@
+import {useClickOutsideEvent, useGlobalKeyDown} from '@sanity/ui'
+import {memo, type MouseEvent, type ReactNode, useCallback, useMemo, useRef, useState} from 'react'
+import {styled} from 'styled-components'
+
+import {type BundleDocument, type releaseType} from '../../../../../../core'
+import {Button, Popover, Tooltip} from '../../../../../../ui-components'
+
+const Chip = styled(Button)`
+  border-radius: 9999px !important;
+  transition: none;
+  text-decoration: none !important;
+  cursor: pointer;
+
+  // target enabled state
+  &:not([data-disabled='true']) {
+    --card-border-color: var(--card-badge-default-bg-color);
+  }
+`
+
+export const VersionChip = memo(function VersionChip(props: {
+  disabled?: boolean
+  releaseOptions?: BundleDocument[]
+  selected: boolean
+  tooltipContent: ReactNode
+  version?: releaseType
+  onClick: () => void
+  text: string
+  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+  icon: React.ComponentType
+  menuContent?: ReactNode
+}) {
+  const {
+    disabled,
+    releaseOptions,
+    selected,
+    tooltipContent,
+    version,
+    onClick,
+    text,
+    tone,
+    icon,
+    menuContent,
+  } = props
+
+  const [contextMenuPoint, setContextMenuPoint] = useState<{x: number; y: number} | undefined>(
+    undefined,
+  )
+  const popoverRef = useRef<HTMLDivElement | null>(null)
+
+  const close = useCallback(() => setContextMenuPoint(undefined), [])
+
+  const handleContextMenu = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+
+    setContextMenuPoint({x: event.clientX, y: event.clientY})
+  }, [])
+
+  useClickOutsideEvent(close, () => [popoverRef.current])
+
+  useGlobalKeyDown(
+    useCallback(
+      (event) => {
+        if (event.key === 'Escape') {
+          close()
+        }
+      },
+      [close],
+    ),
+  )
+
+  const referenceElement = useMemo(() => {
+    if (!contextMenuPoint) {
+      return null
+    }
+
+    return {
+      getBoundingClientRect() {
+        return {
+          x: contextMenuPoint.x,
+          y: contextMenuPoint.y,
+          left: contextMenuPoint.x,
+          top: contextMenuPoint.y,
+          right: contextMenuPoint.x,
+          bottom: contextMenuPoint.y,
+          width: 0,
+          height: 0,
+        }
+      },
+    } as HTMLElement
+  }, [contextMenuPoint])
+
+  return (
+    <>
+      <Tooltip content={tooltipContent} fallbackPlacements={[]} portal placement="bottom">
+        <Chip
+          disabled={disabled}
+          mode="bleed"
+          onClick={onClick}
+          padding={2}
+          paddingRight={3}
+          radius="full"
+          selected={selected}
+          style={{flex: 'none'}}
+          text={text}
+          tone={tone}
+          icon={icon}
+          onContextMenu={handleContextMenu}
+        />
+      </Tooltip>
+
+      <Popover
+        content={menuContent}
+        fallbackPlacements={[]}
+        open={Boolean(referenceElement)}
+        portal
+        placement="bottom-start"
+        ref={popoverRef}
+        referenceElement={referenceElement}
+        zOffset={1000}
+      />
+    </>
+  )
+})
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/VersionPopoverMenu.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/VersionPopoverMenu.tsx
new file mode 100644
index 00000000000..845119de30d
--- /dev/null
+++ b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/VersionPopoverMenu.tsx
@@ -0,0 +1,160 @@
+import {CalendarIcon, CopyIcon, TrashIcon} from '@sanity/icons'
+import {useTelemetry} from '@sanity/telemetry/react'
+import {Menu, MenuDivider, Spinner, useToast} from '@sanity/ui'
+import {memo, useCallback, useState} from 'react'
+import {filter, firstValueFrom} from 'rxjs'
+import {
+  type BundleDocument,
+  DEFAULT_STUDIO_CLIENT_OPTIONS,
+  getPublishedId,
+  getVersionFromId,
+  getVersionId,
+  isPublishedId,
+  isVersionId,
+  Translate,
+  useClient,
+  useDocumentOperation,
+  useDocumentStore,
+  usePerspective,
+  useTranslation,
+} from 'sanity'
+import {IntentLink} from 'sanity/router'
+
+import {AddedVersion} from '../../../../../../core/releases/__telemetry__/releases.telemetry'
+import {MenuGroup, MenuItem} from '../../../../../../ui-components'
+
+export const VersionPopoverMenu = memo(function VersionPopoverMenu(props: {
+  documentId: string
+  releases: BundleDocument[]
+  releasesLoading: boolean
+  documentType: string
+  menuReleaseId: string
+  fromRelease: string
+}) {
+  const {documentId, releases, releasesLoading, documentType, menuReleaseId, fromRelease} = props
+  const [isDiscarding, setIsDiscarding] = useState(false)
+  const {t} = useTranslation()
+  const {setPerspective} = usePerspective()
+  const isVersion = isVersionId(documentId)
+  const isPublished = isPublishedId(documentId)
+
+  const optionsReleaseList = releases.map((release) => ({
+    value: release,
+  }))
+
+  const toast = useToast()
+
+  const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
+  const publishedId = getPublishedId(documentId)
+
+  const releaseId = isVersion ? getVersionFromId(documentId) : documentId
+
+  const {createVersion} = useDocumentOperation(publishedId, documentType, fromRelease)
+
+  const telemetry = useTelemetry()
+  const documentStore = useDocumentStore()
+
+  const handleAddVersion = useCallback(
+    async (targetRelease: string) => {
+      // set up the listener before executing
+      const createVersionSuccess = firstValueFrom(
+        documentStore.pair
+          .operationEvents(getPublishedId(documentId), documentType)
+          .pipe(filter((e) => e.op === 'createVersion' && e.type === 'success')),
+      )
+
+      const docId = getVersionId(publishedId, targetRelease)
+
+      createVersion.execute(docId)
+
+      // only change if the version was created successfully
+      await createVersionSuccess
+      setPerspective(targetRelease)
+
+      telemetry.log(AddedVersion, {
+        schemaType: documentType,
+        documentOrigin: isVersion ? 'version' : 'draft',
+      })
+    },
+    [
+      createVersion,
+      documentId,
+      documentStore.pair,
+      documentType,
+      isVersion,
+      publishedId,
+      setPerspective,
+      telemetry,
+    ],
+  )
+
+  const handleDiscardVersion = useCallback(async () => {
+    setIsDiscarding(true)
+    try {
+      // if it's a version it'll always use the versionId based on the menu that it's pressing
+      // otherwise it'll use the documentId
+      const docId = isVersion ? getVersionId(documentId, menuReleaseId) : documentId
+
+      await client.delete(docId)
+
+      toast.push({
+        closable: true,
+        status: 'success',
+        description: (
+          <Translate
+            t={t}
+            i18nKey={'release.action.discard-version.success'}
+            values={{title: document.title as string}}
+          />
+        ),
+      })
+    } catch (e) {
+      toast.push({
+        closable: true,
+        status: 'error',
+        title: t('release.action.discard-version.failure'),
+      })
+    }
+
+    setIsDiscarding(false)
+  }, [client, documentId, isVersion, menuReleaseId, t, toast])
+
+  /* @todo update literal */
+  return (
+    <Menu>
+      {isVersion && (
+        <MenuItem
+          as={IntentLink}
+          icon={CalendarIcon}
+          // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals
+          text={`View release`}
+          params={{id: releaseId}}
+          intent={'release'}
+          target="_blank"
+          rel="noopener noreferrer"
+        />
+      )}
+      {releasesLoading && <Spinner />}
+      <MenuGroup icon={CopyIcon} popover={{placement: 'right-start'}} text="Copy version to">
+        {optionsReleaseList.map((option) => (
+          <MenuItem
+            key={option.value._id}
+            onClick={() => handleAddVersion(option.value._id)}
+            text={option.value.title}
+          />
+        ))}
+      </MenuGroup>
+      {!isPublished && (
+        <>
+          <MenuDivider />
+          <MenuItem
+            icon={TrashIcon}
+            onClick={handleDiscardVersion}
+            disabled={isDiscarding}
+            text={t('release.action.discard-version')}
+          />
+        </>
+      )}
+    </Menu>
+  )
+})
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/__tests__/DocumentHeaderTitle.test.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/__tests__/DocumentHeaderTitle.test.tsx
index 966c2ff686a..0e51001f25f 100644
--- a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/__tests__/DocumentHeaderTitle.test.tsx
+++ b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/__tests__/DocumentHeaderTitle.test.tsx
@@ -82,7 +82,7 @@ describe('DocumentHeaderTitle', () => {
     const wrapper = await createWrapperComponent(client as any)
 
     const {getByText} = render(<DocumentHeaderTitle />, {wrapper})
-    await waitFor(() => expect(getByText('Untitled')).toBeInTheDocument())
+    await waitFor(() => expect(getByText('New Test Schema')).toBeInTheDocument())
   })
 
   it('should return an empty fragment when connectionState is not "connected" and editState is empty', async () => {
@@ -99,7 +99,9 @@ describe('DocumentHeaderTitle', () => {
   it('should render the header title when connectionState is not "connected" and editState has values', async () => {
     mockUseDocumentPane.mockReturnValue({
       ...defaultProps,
-      connectionState: 'connecting',
+      connectionState: 'reconnecting',
+      value: {title: 'Test Value'},
+      title: 'Test Title',
     } as unknown as DocumentPaneContextValue)
 
     mockUseValuePreview.mockReturnValue({
@@ -109,7 +111,7 @@ describe('DocumentHeaderTitle', () => {
     })
 
     const {getByText} = render(<DocumentHeaderTitle />)
-    await waitFor(() => expect(getByText('Test Value')).toBeInTheDocument())
+    await waitFor(() => expect(getByText('Test Title')).toBeInTheDocument())
   })
 
   it('should return the title if it is provided', async () => {
@@ -149,24 +151,28 @@ describe('DocumentHeaderTitle', () => {
     const wrapper = await createWrapperComponent(client as any)
 
     const {getByText} = render(<DocumentHeaderTitle />, {wrapper})
-    await waitFor(() => expect(getByText('Test Preview Value')).toBeInTheDocument())
+    await waitFor(() => expect(getByText('New Test Schema')).toBeInTheDocument())
   })
 
-  it('should return "Untitled" if value is not provided and no error occurred', async () => {
+  it('should return "New Test Schema" if value is not provided and no error occurred', async () => {
     mockUseValuePreview.mockReturnValue({...defaultValue, error: undefined, value: undefined})
 
     const client = createMockSanityClient()
     const wrapper = await createWrapperComponent(client as any)
 
     const {getByText} = render(<DocumentHeaderTitle />, {wrapper})
-    await waitFor(() => expect(getByText('Untitled')).toBeInTheDocument())
+    await waitFor(() => expect(getByText('New Test Schema')).toBeInTheDocument())
   })
 
   it('should return "Error: {error.message}" if an error occurred while getting the preview value', async () => {
+    mockUseDocumentPane.mockReturnValue({
+      ...defaultProps,
+      value: {title: 'Test Preview Value'},
+    } as unknown as DocumentPaneContextValue)
+
     mockUseValuePreview.mockReturnValue({
       ...defaultValue,
       error: new Error('Test Error'),
-      value: undefined,
     })
 
     const client = createMockSanityClient()
@@ -180,6 +186,11 @@ describe('DocumentHeaderTitle', () => {
     const client = createMockSanityClient()
     const wrapper = await createWrapperComponent(client as any)
 
+    mockUseDocumentPane.mockReturnValue({
+      ...defaultProps,
+      value: defaultProps.editState.draft,
+    } as unknown as DocumentPaneContextValue)
+
     render(<DocumentHeaderTitle />, {wrapper})
     await waitFor(() =>
       expect(mockUseValuePreview).toHaveBeenCalledWith({
@@ -194,13 +205,12 @@ describe('DocumentHeaderTitle', () => {
     mockUseValuePreview.mockReturnValue({
       ...defaultValue,
       error: undefined,
-      value: {title: 'Test Preview Value'},
     })
 
     const client = createMockSanityClient()
     const wrapper = await createWrapperComponent(client as any)
 
     const {getByText} = render(<DocumentHeaderTitle />, {wrapper})
-    await waitFor(() => expect(getByText('Test Preview Value')).toBeInTheDocument())
+    await waitFor(() => expect(getByText('New Test Schema')).toBeInTheDocument())
   })
 })
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/__tests__/DocumentPerspectiveMenu.test.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/__tests__/DocumentPerspectiveMenu.test.tsx
index 2dcb6189c0f..eea1c05ded4 100644
--- a/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/__tests__/DocumentPerspectiveMenu.test.tsx
+++ b/packages/sanity/src/structure/panes/document/documentPanel/header/perspective/__tests__/DocumentPerspectiveMenu.test.tsx
@@ -73,34 +73,15 @@ describe('DocumentPerspectiveMenu', () => {
     })
   })
 
-  it('should render the bundle badge if the document exists in the global bundle', async () => {
-    mockUseDocumentPane.mockReturnValue({
-      documentVersions: [
-        {
-          _id: 'spring-drop',
-          title: 'Spring Drop',
-          hue: 'magenta',
-          icon: 'heart-filled',
-          _type: 'release',
-          authorId: '',
-          _createdAt: '',
-          _updatedAt: '',
-          _rev: '',
-        },
-      ],
-      existsInBundle: true,
-    })
-
+  it('should render "Published" and "Draft" chips when it has no other version', async () => {
     const wrapper = await createTestProvider()
     render(<DocumentPerspectiveMenu />, {wrapper})
 
-    const linkButton = screen.getByRole('link', {name: 'Spring Drop'})
-    expect(linkButton).toBeInTheDocument()
-    expect(linkButton).toHaveAttribute('href', '/intent/release/id=spring-drop')
-    expect(linkButton).toHaveTextContent('Spring Drop')
+    expect(screen.getByRole('button', {name: 'Published'})).toBeInTheDocument()
+    expect(screen.getByRole('button', {name: 'Draft'})).toBeInTheDocument()
   })
 
-  it('should not render the bundle badge if the document does not exist in the bundle', async () => {
+  it('should render the release chip when it has a release version', async () => {
     mockUseDocumentPane.mockReturnValue({
       documentVersions: [
         {
@@ -115,12 +96,14 @@ describe('DocumentPerspectiveMenu', () => {
           _rev: '',
         },
       ],
-      existsInBundle: false,
+      displayed: {
+        _id: 'versions.spring-drop.KJAiOpAH5r6P3dWt1df9ql',
+      },
     })
 
     const wrapper = await createTestProvider()
     render(<DocumentPerspectiveMenu />, {wrapper})
 
-    expect(screen.queryByRole('link', {name: 'Spring Drop'})).toBeNull()
+    expect(screen.getByRole('button', {name: 'Spring Drop'})).toBeInTheDocument()
   })
 })
diff --git a/packages/sanity/src/ui-components/button/Button.tsx b/packages/sanity/src/ui-components/button/Button.tsx
index 0364c06877c..dbb66b2bb51 100644
--- a/packages/sanity/src/ui-components/button/Button.tsx
+++ b/packages/sanity/src/ui-components/button/Button.tsx
@@ -18,13 +18,17 @@ type BaseButtonProps = Pick<
   | 'justify'
   | 'loading'
   | 'mode'
+  | 'padding'
   | 'paddingY'
+  | 'paddingRight'
   | 'selected'
   | 'tone'
   | 'type'
   | 'width'
 > & {
   size?: 'default' | 'large'
+  forwardedAs?: HTMLProps<HTMLButtonElement>['as']
+  radius: 'full'
 }
 
 type ButtonWithText = {
@@ -70,7 +74,7 @@ export const Button = forwardRef(function Button(
     tone = 'default',
     tooltipProps,
     ...rest
-  }: ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'as' | 'size' | 'title'>,
+  }: ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'as' | 'forwardedAs' | 'size' | 'title'>,
   ref: ForwardedRef<HTMLButtonElement>,
 ) {
   const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(