diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 656272a4ff1..e934853352d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -65,6 +65,7 @@ const config = {
       {
         ignores: {
           componentPatterns: ['motion$'],
+          attributes: ['animate', 'closed', 'exit', 'fill', 'full', 'initial', 'size'],
         },
       },
     ],
@@ -231,6 +232,43 @@ const config = {
         '@sanity/i18n/no-attribute-template-literals': 'off',
       },
     },
+
+    // Prefer local components vs certain @sanity/ui imports (in sanity package)
+    {
+      files: ['packages/sanity/**'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: '@sanity/ui',
+                importNames: [
+                  'Button',
+                  'ButtonProps',
+                  'Dialog',
+                  'DialogProps',
+                  'MenuButton',
+                  'MenuButtonProps',
+                  'MenuGroup',
+                  'MenuGroupProps',
+                  'MenuItem',
+                  'MenuItemProps',
+                  'Popover',
+                  'PopoverProps',
+                  'Tab',
+                  'TabProps',
+                  'Tooltip',
+                  'TooltipProps',
+                ],
+                message:
+                  'Please use the (more opinionated) exported components in sanity/src/ui-components instead.',
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
 }
 
diff --git a/dev/design-studio/package.json b/dev/design-studio/package.json
index 123d1be11fc..c354ba2326a 100644
--- a/dev/design-studio/package.json
+++ b/dev/design-studio/package.json
@@ -31,8 +31,8 @@
     "start": "../.bin/sanity start --port 4000"
   },
   "dependencies": {
-    "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/icons": "^2.8.0",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/embedded-studio/package.json b/dev/embedded-studio/package.json
index d467a011742..9e3ec765075 100644
--- a/dev/embedded-studio/package.json
+++ b/dev/embedded-studio/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sanity/ui": "1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.22.1",
diff --git a/dev/studio-e2e-testing/components-api/index.tsx b/dev/studio-e2e-testing/components-api/index.tsx
index ac797358e66..9eb2a9b4082 100644
--- a/dev/studio-e2e-testing/components-api/index.tsx
+++ b/dev/studio-e2e-testing/components-api/index.tsx
@@ -28,7 +28,6 @@ const childComponents = definePlugin({
   studio: {
     components: {
       layout: (props) => <StudioLayout {...props} testId="child-parent-config-studio-layout" />,
-      logo: (props) => <StudioLogo {...props} testId="child-parent-config-studio-logo" />,
       navbar: (props) => <StudioNavbar {...props} testId="child-parent-config-studio-navbar" />,
       toolMenu: (props) => (
         <StudioToolMenu {...props} testId="child-parent-config-studio-tool-menu" />
@@ -58,7 +57,6 @@ export const customComponents = definePlugin({
   studio: {
     components: {
       layout: (props) => <StudioLayout {...props} testId="parent-config-studio-layout" />,
-      logo: (props) => <StudioLogo {...props} testId="parent-config-studio-logo" />,
       navbar: (props) => <StudioNavbar {...props} testId="parent-config-studio-navbar" />,
       toolMenu: (props) => <StudioToolMenu {...props} testId="parent-config-studio-tool-menu" />,
     },
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
index d0b5995ea38..64340949939 100644
--- a/dev/studio-e2e-testing/package.json
+++ b/dev/studio-e2e-testing/package.json
@@ -15,8 +15,8 @@
   ],
   "dependencies": {
     "@sanity/google-maps-input": "^3.0.1",
-    "@sanity/icons": "^2.4.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/icons": "^2.8.0",
+    "@sanity/ui": "2.0.0-beta.13",
     "@sanity/vision": "3.22.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/dev/test-studio/components/Branding.tsx b/dev/test-studio/components/Branding.tsx
deleted file mode 100644
index 5180a5ba5e5..00000000000
--- a/dev/test-studio/components/Branding.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Box, Text} from '@sanity/ui'
-import React from 'react'
-import {useTranslation} from 'sanity'
-
-export function Branding() {
-  const {t} = useTranslation('testStudio')
-  return (
-    <Box padding={3}>
-      <Text weight="bold">{t('studio.logo.title')}&trade;</Text>
-    </Box>
-  )
-}
diff --git a/dev/test-studio/components/documentViews/jsonPreview.tsx b/dev/test-studio/components/documentViews/jsonPreview.tsx
index 48497f0bbc3..5edc24dc6f3 100644
--- a/dev/test-studio/components/documentViews/jsonPreview.tsx
+++ b/dev/test-studio/components/documentViews/jsonPreview.tsx
@@ -1,10 +1,14 @@
-import {Card, Code} from '@sanity/ui'
+import {Box, Card, Code} from '@sanity/ui'
 import React from 'react'
 
 export function JSONPreviewDocumentView(props: any) {
   return (
-    <Card padding={4} sizing="border" style={{minHeight: '100%'}} tone="transparent">
-      <Code language="json">{JSON.stringify(props.document.displayed, null, 2)}</Code>
+    <Card overflow="auto" style={{minHeight: '100%'}} tone="transparent">
+      <Box padding={4}>
+        <Code language="json" size={1}>
+          {JSON.stringify(props.document.displayed, null, 2)}
+        </Code>
+      </Box>
     </Card>
   )
 }
diff --git a/dev/test-studio/components/formComponents.tsx b/dev/test-studio/components/formComponents.tsx
index 00a78fce7e5..0b970318189 100644
--- a/dev/test-studio/components/formComponents.tsx
+++ b/dev/test-studio/components/formComponents.tsx
@@ -78,6 +78,13 @@ export function Preview(props: PreviewProps) {
   )
 }
 
+export function CustomBadge() {
+  return {
+    label: 'Hello world',
+    title: 'Hello I am a custom document badge',
+  }
+}
+
 export const formComponentsPlugin = definePlugin({
   name: 'form-components-plugin',
   form: {
diff --git a/dev/test-studio/components/panes/debug/DebugPane.tsx b/dev/test-studio/components/panes/debug/DebugPane.tsx
index f25884a3302..769e894a506 100644
--- a/dev/test-studio/components/panes/debug/DebugPane.tsx
+++ b/dev/test-studio/components/panes/debug/DebugPane.tsx
@@ -51,16 +51,16 @@ export const DebugPane: UserComponent = function DebugPane(props) {
 
   return (
     <Box height="fill">
-      <Card padding={3} tone="transparent">
-        <Stack space={2}>
-          <Text textOverflow="ellipsis">
+      <Box padding={4} paddingTop={0}>
+        <Stack space={3}>
+          <Text muted size={1} textOverflow="ellipsis">
             Random ID: <code>{randomId}</code>
           </Text>
           <Text textOverflow="ellipsis" size={1} muted>
             Assigned on pane component mount
           </Text>
         </Stack>
-      </Card>
+      </Box>
 
       <Card borderBottom padding={2}>
         <Stack space={1}>
@@ -74,15 +74,17 @@ export const DebugPane: UserComponent = function DebugPane(props) {
           >
             <Flex>
               <Box>
-                <Text>
+                <Text size={1}>
                   <LinkIcon />
                 </Text>
               </Box>
               <Box flex={1} marginLeft={3}>
-                <Text textOverflow="ellipsis">ChildLink</Text>
+                <Text size={1} textOverflow="ellipsis">
+                  ChildLink
+                </Text>
               </Box>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ChevronRightIcon />
                 </Text>
               </Box>
@@ -98,15 +100,17 @@ export const DebugPane: UserComponent = function DebugPane(props) {
           >
             <Flex>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ControlsIcon />
                 </Text>
               </Box>
               <Box flex={1} marginLeft={3}>
-                <Text textOverflow="ellipsis">ParameterizedLink</Text>
+                <Text size={1} textOverflow="ellipsis">
+                  ParameterizedLink
+                </Text>
               </Box>
               <Box>
-                <Text>
+                <Text size={1}>
                   <ChevronDownIcon />
                 </Text>
               </Box>
diff --git a/dev/test-studio/locales/index.ts b/dev/test-studio/locales/index.ts
index b3e0a2e3fa4..5d36073f428 100644
--- a/dev/test-studio/locales/index.ts
+++ b/dev/test-studio/locales/index.ts
@@ -3,7 +3,6 @@ import {defineLocaleResourceBundle} from 'sanity'
 export const testStudioLocaleNamespace = 'testStudio' as const
 
 const enUSStrings = {
-  'studio.logo.title': 'English logo',
   'structure.root.title': 'Content 🇺🇸',
   'translate.example':
     '<Icon/> Your search for "<Red>{{keyword}}</Red>" took <Bold>{{duration}}ms</Bold>',
@@ -20,7 +19,6 @@ const nbNO = defineLocaleResourceBundle({
   locale: 'nb-NO',
   namespace: testStudioLocaleNamespace,
   resources: {
-    'studio.logo.title': 'Norsk logo',
     'structure.root.title': 'Innhold 🇳🇴',
     'translate.example':
       '<Icon/> Ditt søk på "<Red>{{keyword}}</Red>" tok <Bold>{{duration}}</Bold> millisekunder',
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index cd3be4a19b5..4d952b693a2 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -23,19 +23,20 @@
     "@sanity/assist": "^1.0.8",
     "@sanity/block-tools": "3.22.1",
     "@sanity/client": "^6.10.0",
-    "@sanity/color": "^2.1.20",
+    "@sanity/color": "3.0.0-beta.9",
     "@sanity/google-maps-input": "^3.0.1",
-    "@sanity/icons": "^2.6.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/locale-ko-kr": "^1.0.0",
     "@sanity/locale-nb-no": "^1.0.0",
     "@sanity/locale-nn-no": "^1.0.0",
     "@sanity/locale-pt-pt": "^1.0.0",
     "@sanity/locale-sv-se": "^1.0.0",
+    "@sanity/logos": "^2.0.2",
     "@sanity/portable-text-editor": "3.22.1",
     "@sanity/tsdoc": "1.0.0-alpha.38",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "@sanity/ui-workshop": "^1.0.0",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
index 7b787a31b28..935e9e49b22 100644
--- a/dev/test-studio/sanity.config.ts
+++ b/dev/test-studio/sanity.config.ts
@@ -1,4 +1,5 @@
 import {BookIcon} from '@sanity/icons'
+import {SanityMonogram} from '@sanity/logos'
 import {visionTool} from '@sanity/vision'
 import {defineConfig, definePlugin} from 'sanity'
 import {deskTool} from 'sanity/desk'
@@ -13,7 +14,6 @@ import {ptPTLocale} from '@sanity/locale-pt-pt'
 import {svSELocale} from '@sanity/locale-sv-se'
 import {theme as tailwindTheme} from './sanity.theme.mjs'
 import {imageAssetSource} from './assetSources'
-import {Branding} from './components/Branding'
 import {resolveDocumentActions as documentActions} from './documentActions'
 import {resolveInitialValueTemplates} from './initialValueTemplates'
 import {languageFilter} from './plugins/language-filter'
@@ -31,6 +31,7 @@ import {
 import {
   Annotation,
   Block,
+  CustomBadge,
   Field,
   formComponentsPlugin,
   InlineBlock,
@@ -62,11 +63,6 @@ const sharedSettings = definePlugin({
       assetSources: [imageAssetSource],
     },
   },
-  studio: {
-    components: {
-      logo: Branding,
-    },
-  },
 
   i18n: {
     bundles: testStudioLocaleBundles,
@@ -93,6 +89,7 @@ const sharedSettings = definePlugin({
     unstable_comments: {
       enabled: true,
     },
+    badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
   },
   plugins: [
     // ...localePlugins,
@@ -148,6 +145,7 @@ export default defineConfig([
     dataset: 'test',
     plugins: [sharedSettings()],
     basePath: '/test',
+    icon: SanityMonogram,
   },
   {
     name: 'tsdoc',
diff --git a/dev/test-studio/schema/book.ts b/dev/test-studio/schema/book.ts
index 738957b4c37..b9d29e24272 100644
--- a/dev/test-studio/schema/book.ts
+++ b/dev/test-studio/schema/book.ts
@@ -88,6 +88,18 @@ export default {
         },
       ],
     },
+    {
+      name: 'genre',
+      title: 'Genre',
+      type: 'string',
+      options: {
+        list: [
+          {title: 'Fiction', value: 'fiction'},
+          {title: 'Non Fiction', value: 'nonfiction'},
+          {title: 'Poetry', value: 'poetry'},
+        ],
+      },
+    },
   ],
   orderings: [
     {
diff --git a/examples/ecommerce-studio/package.json b/examples/ecommerce-studio/package.json
index 4b0cc001e2d..b3fa92da9a0 100644
--- a/examples/ecommerce-studio/package.json
+++ b/examples/ecommerce-studio/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@sanity/cli": "3.22.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "react": "^18.2.0",
     "react-barcode": "^1.4.1",
     "react-dom": "^18.2.0",
diff --git a/packages/@sanity/portable-text-editor/package.json b/packages/@sanity/portable-text-editor/package.json
index ed9c87b43d5..cdc6045fda3 100644
--- a/packages/@sanity/portable-text-editor/package.json
+++ b/packages/@sanity/portable-text-editor/package.json
@@ -78,7 +78,7 @@
     "@playwright/test": "^1.39.0",
     "@portabletext/toolkit": "^2.0.10",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.16.1",
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
index 69e4ef9280f..f972dcaf905 100644
--- a/packages/@sanity/vision/package.json
+++ b/packages/@sanity/vision/package.json
@@ -65,9 +65,9 @@
     "@lezer/highlight": "^1.0.0",
     "@rexxars/react-json-inspector": "^8.0.1",
     "@rexxars/react-split-pane": "^0.1.93",
-    "@sanity/color": "^2.1.20",
-    "@sanity/icons": "^2.6.0",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/color": "3.0.0-beta.9",
+    "@sanity/icons": "^2.8.0",
+    "@sanity/ui": "2.0.0-beta.13",
     "@uiw/react-codemirror": "^4.11.4",
     "hashlru": "^2.3.0",
     "is-hotkey": "^0.1.6",
diff --git a/packages/@sanity/vision/src/components/VisionGui.styled.tsx b/packages/@sanity/vision/src/components/VisionGui.styled.tsx
index db48befc52a..617513c1033 100644
--- a/packages/@sanity/vision/src/components/VisionGui.styled.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.styled.tsx
@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components'
-import {Button, Card, Box, Flex, Label, Theme, rem} from '@sanity/ui'
+import {Card, Box, Flex, Label, rem} from '@sanity/ui'
 
 export const Root = styled(Flex)`
   .sidebarPanes .Pane {
@@ -154,7 +154,3 @@ export const TimingsTextContainer = styled(Flex)`
 export const ControlsContainer = styled(Box)`
   border-top: 1px solid var(--card-border-color);
 `
-
-export const ButtonFullWidth = styled(Button)`
-  width: 100%;
-`
diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx
index cfdc1bb484f..f4b27e46ba6 100644
--- a/packages/@sanity/vision/src/components/VisionGui.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.tsx
@@ -50,7 +50,6 @@ import {
   ResultContainer,
   Result,
   ControlsContainer,
-  ButtonFullWidth,
   TimingsFooter,
   TimingsCard,
   TimingsTextContainer,
@@ -765,11 +764,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                       <TextInput readOnly type="url" ref={this._operationUrlElement} value={url} />
                     </Box>
                     <Tooltip
-                      content={
-                        <Box padding={2}>
-                          <Text>{t('action.copy-url-to-clipboard')}</Text>
-                        </Box>
-                      }
+                      content={t('action.copy-url-to-clipboard')}
                     >
                       <Button
                         aria-label={t('action.copy-url-to-clipboard')}
@@ -836,15 +831,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                       <Flex>
                         <StyledLabel muted>{t('params.label')}</StyledLabel>
                         {paramsError && (
-                          <Tooltip
-                            placement="top-end"
-                            portal
-                            content={
-                              <Box padding={2}>
-                                <Text>{paramsError}</Text>
-                              </Box>
-                            }
-                          >
+                          <Tooltip placement="top-end" portal content={paramsError}>
                             <Box padding={1} marginX={2}>
                               <Text>
                                 <ErrorOutlineIcon />
@@ -861,7 +848,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     <Card padding={3} paddingX={3}>
                       <Tooltip
                         content={
-                          <Card padding={2} radius={4}>
+                          <Card radius={4}>
                             <Text size={1} muted>
                               {t('params.error.params-invalid-json')}
                             </Text>
@@ -875,14 +862,15 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                           <Box flex={1}>
                             <Tooltip
                               content={
-                                <Card padding={2} radius={4}>
+                                <Card radius={4}>
                                   <Hotkeys keys={['Ctrl', 'Enter']} />
                                 </Card>
                               }
                               placement="top"
                               portal
                             >
-                              <ButtonFullWidth
+                              <Button
+                                width="fill"
                                 onClick={this.handleQueryExecution}
                                 type="button"
                                 icon={queryInProgress ? StopIcon : PlayIcon}
@@ -897,7 +885,8 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                             </Tooltip>
                           </Box>
                           <Box flex={1} marginLeft={3}>
-                            <ButtonFullWidth
+                            <Button
+                              width="fill"
                               onClick={this.handleListenExecution}
                               type="button"
                               icon={listenInProgress ? StopIcon : PlayIcon}
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
index 40a8fd4f4d4..c18f1f1a8a8 100644
--- a/packages/sanity/package.json
+++ b/packages/sanity/package.json
@@ -159,23 +159,23 @@
     "@sanity/block-tools": "3.22.1",
     "@sanity/cli": "3.22.1",
     "@sanity/client": "^6.10.0",
-    "@sanity/color": "^2.1.20",
+    "@sanity/color": "3.0.0-beta.9",
     "@sanity/diff": "3.22.1",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/eventsource": "^5.0.0",
     "@sanity/export": "3.22.1",
     "@sanity/generate-help-url": "^3.0.0",
-    "@sanity/icons": "^2.6.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/import": "3.22.1",
     "@sanity/logos": "^2.0.2",
     "@sanity/mutator": "3.22.1",
     "@sanity/portable-text-editor": "3.22.1",
-    "@sanity/presentation": "1.2.1",
+    "@sanity/presentation": "1.3.0",
     "@sanity/schema": "3.22.1",
     "@sanity/telemetry": "^0.7.3",
     "@sanity/types": "3.22.1",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/ui": "2.0.0-beta.13",
     "@sanity/util": "3.22.1",
     "@sanity/uuid": "^3.0.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx
index 25c3860d164..81b8389d1f4 100644
--- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx
+++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx
@@ -82,6 +82,7 @@ test.describe('Portable Text Input', () => {
 
       // Tab to the context menu, press enter once to open it, then enter again to press 'edit'
       await page.keyboard.press('Tab')
+      await expect(page.getByRole('button', {name: 'Open menu'})).toBeFocused()
       await page.keyboard.press('Enter')
 
       // Assertion: Context menu should be open
@@ -95,9 +96,13 @@ test.describe('Portable Text Input', () => {
 
       // Close dialog
       await page.keyboard.press('Escape')
+      await page.waitForTimeout(200) // Confirm with @skogsmaskin if there is a better way
+      await expect(page.getByTestId('default-edit-object-dialog')).not.toBeVisible()
 
       // Tab to the context menu, press enter once to open it
       await page.keyboard.press('Tab')
+      await expect(page.getByRole('button', {name: 'Open menu'})).toBeFocused()
+      await page.waitForTimeout(200) // Confirm with @skogsmaskin if there is a better way
       await page.keyboard.press('Enter')
       await expect($locatorContextMenu).toBeVisible()
       await expect($locatorContextMenu.locator('*:focus', {hasText: 'Edit'})).toBeFocused()
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx
index 324e9c47958..df85b85f903 100644
--- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx
+++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx
@@ -17,11 +17,9 @@ test.describe('Portable Text Input', () => {
         // Adjust the viewport size to make the Inline Object button hidden
         await page.setViewportSize({width: 800, height: 1000})
 
-        const $contextMenuButton = $portableTextInput
-          .getByRole('button')
-          .locator('[data-sanity-icon="add"]')
+        const $contextMenuButton = $portableTextInput.getByTestId('insert-menu-button')
 
-        // Assertion: Check if the Add + button is showing
+        // Assertion: Check if the context menu button is showing
         await expect($contextMenuButton).toBeVisible()
 
         // Assertion: Check if the Inline Object button is now hidden
diff --git a/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx b/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
index 1d23c7f6099..608375325ab 100644
--- a/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
+++ b/packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx
@@ -68,6 +68,7 @@ const ChangeBarWrapper = memo(function ChangeBarWrapper(
   return (
     <div {...restProps} ref={ref} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       <ElementWithChangeBar
+        hasFocus={hasFocus}
         isChanged={isChanged}
         disabled={disabled}
         withHoverEffect={withHoverEffect}
diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
index 06a16baeb7a..3057252f7ca 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.styled.tsx
@@ -1,13 +1,12 @@
-import styled, {css} from 'styled-components'
-import {Theme} from '@sanity/ui'
+/* eslint-disable camelcase */
 
-interface ThemeContext {
-  theme: Theme
-}
+import styled, {css} from 'styled-components'
+import {getTheme_v2} from '@sanity/ui/theme'
 
 interface RootProps {
   $changed?: boolean
   $disabled?: boolean
+  $hasFocus?: boolean
   $isReviewChangeOpen: boolean
   $withHoverEffect?: boolean
 }
@@ -15,30 +14,45 @@ interface RootProps {
 const animationSpeed = 250
 
 export const ChangeBarWrapper = styled.div<RootProps>(
-  ({$changed, $disabled, $isReviewChangeOpen}) => {
+  ({$changed, $disabled, $hasFocus, $isReviewChangeOpen}) => {
     if ($disabled)
       return css`
-        ${ChangeBar} {
+        ${ChangeBarMarker}:after {
           display: none;
         }
       `
 
     return css`
-      --change-bar-offset: 2px;
+      --change-bar-offset: 4px;
 
       display: flex;
       position: relative;
 
+      ${ChangeBarMarker}:after {
+        opacity: 0.5;
+      }
+
       @media (hover: hover) {
         &:hover {
           z-index: 10;
+          ${ChangeBarMarker}:after {
+            opacity: 1;
+          }
         }
       }
 
+      /* hide when field is not changed */
+      ${$hasFocus &&
+      css`
+        ${ChangeBarMarker}:after {
+          opacity: 1;
+        }
+      `}
+
       /* hide when field is not changed */
       ${!$changed &&
       css`
-        ${ChangeBar} {
+        ${ChangeBarMarker}:after {
           opacity: 0;
           pointer-events: none;
         }
@@ -67,77 +81,71 @@ export const ChangeBar = styled.div<{$zIndex: number}>`
   z-index: ${({$zIndex}) => $zIndex};
 `
 
-export const ChangeBarMarker = styled.div(({theme}: ThemeContext) => {
-  /* these colours aren't freely available on the current theme */
-  const notSelectedColor = theme.sanity.color.spot.yellow
-  const screenMedium = theme.sanity.media[0]
+export const ChangeBarMarker = styled.div((props) => {
+  const {media} = getTheme_v2(props.theme)
 
   return css`
     position: absolute;
-    top: 0;
+    top: -1px;
     left: var(--change-bar-offset);
-    width: 2px;
-    bottom: 0;
-    background-color: ${notSelectedColor};
-    border-radius: 1px;
+    width: 1px;
+    bottom: -1px;
+    background-color: var(--card-bg-color);
 
-    @media (min-width: ${screenMedium}px) {
+    @media (min-width: ${media[0]}px) {
       display: unset;
     }
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 1px;
+      left: 0;
+      width: 1px;
+      bottom: 1px;
+      background-color: var(--card-badge-caution-dot-color);
+      border-radius: 0.5px;
+    }
   `
 })
 
-export const ChangeBarButton = styled.button<{$withHoverEffect?: boolean}>(
-  ({theme, $withHoverEffect}) => {
-    /* these colours aren't freely available on the current theme */
-    const notSelectedColor = theme.sanity.color.spot.yellow
+export const ChangeBarButton = styled.button<{$withHoverEffect?: boolean}>((props) => {
+  const {$withHoverEffect} = props
 
-    return css`
-      appearance: none;
+  return css`
+    appearance: none;
+    border: 0;
+    outline: 0;
+    display: block;
+    padding: 0;
+    background: transparent;
+    opacity: 0;
+    position: absolute;
+    height: 100%;
+    cursor: pointer;
+    pointer-events: all;
+    left: calc(-0.25rem + var(--change-bar-offset));
+    width: calc(1rem - 1px);
+    transition: opacity ${animationSpeed}ms;
+
+    &:focus {
       border: 0;
       outline: 0;
-      display: block;
-      padding: 0;
-      background: transparent;
-      opacity: 0;
-      position: absolute;
-      height: 100%;
-      cursor: pointer;
-      pointer-events: all;
-      left: calc(-0.25rem + var(--change-bar-offset));
-      width: 1rem;
-      transition: opacity ${animationSpeed}ms;
-
-      &:focus {
-        border: 0;
-        outline: 0;
-      }
-
-      &:after {
-        content: '';
-        width: 16px;
-        height: calc(100% + 14px);
-        display: block;
-        position: absolute;
-        top: -7px;
-        left: -3px;
-        border-radius: 8px;
-        background: ${notSelectedColor};
-      }
+    }
 
-      &:focus {
-        border: 0;
-        outline: 0;
-      }
+    &:focus {
+      border: 0;
+      outline: 0;
+    }
 
-      ${$withHoverEffect &&
-      css`
-        @media (hover: hover) {
-          &:hover {
-            opacity: 0.2;
-          }
+    ${$withHoverEffect &&
+    css`
+      @media (hover: hover) {
+        &:hover {
+          opacity: 0.2;
         }
-      `}
-    `
-  },
-)
+      }
+    `}
+  `
+})
diff --git a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
index c6252195abd..0e4f9ad03fb 100644
--- a/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
+++ b/packages/sanity/src/core/changeIndicators/ElementWithChangeBar.tsx
@@ -1,5 +1,6 @@
 import {useLayer} from '@sanity/ui'
 import React, {useMemo} from 'react'
+import {Tooltip} from '../../ui-components'
 import {useTranslation} from '../i18n/hooks/useTranslation'
 import {ConnectorContext} from './ConnectorContext'
 import {
@@ -13,10 +14,11 @@ import {
 export function ElementWithChangeBar(props: {
   children: React.ReactNode
   disabled?: boolean
+  hasFocus?: boolean
   isChanged?: boolean
   withHoverEffect?: boolean
 }) {
-  const {children, disabled, isChanged, withHoverEffect = true} = props
+  const {children, disabled, hasFocus, isChanged, withHoverEffect = true} = props
 
   const {onOpenReviewChanges, isReviewChangesOpen} = React.useContext(ConnectorContext)
   const {zIndex} = useLayer()
@@ -27,15 +29,16 @@ export function ElementWithChangeBar(props: {
       disabled || !isChanged ? null : (
         <ChangeBar data-testid="change-bar" $zIndex={zIndex}>
           <ChangeBarMarker data-testid="change-bar__marker" />
-
-          <ChangeBarButton
-            aria-label={t('changes.change-bar.aria-label')}
-            data-testid="change-bar__button"
-            onClick={isReviewChangesOpen ? undefined : onOpenReviewChanges}
-            tabIndex={-1}
-            type="button"
-            $withHoverEffect={withHoverEffect}
-          />
+          <Tooltip content={t('changes.change-bar.aria-label')} portal>
+            <ChangeBarButton
+              aria-label={t('changes.change-bar.aria-label')}
+              data-testid="change-bar__button"
+              onClick={isReviewChangesOpen ? undefined : onOpenReviewChanges}
+              tabIndex={-1}
+              type="button"
+              $withHoverEffect={withHoverEffect}
+            />
+          </Tooltip>
         </ChangeBar>
       ),
     [disabled, isChanged, isReviewChangesOpen, onOpenReviewChanges, t, withHoverEffect, zIndex],
@@ -46,6 +49,7 @@ export function ElementWithChangeBar(props: {
       data-testid="change-bar-wrapper"
       $changed={isChanged}
       $disabled={disabled}
+      $hasFocus={hasFocus}
       $isReviewChangeOpen={isReviewChangesOpen}
     >
       <FieldWrapper data-testid="change-bar__field-wrapper">{children}</FieldWrapper>
diff --git a/packages/sanity/src/core/changeIndicators/constants.ts b/packages/sanity/src/core/changeIndicators/constants.ts
index 97675affa87..2b80ca9ba41 100644
--- a/packages/sanity/src/core/changeIndicators/constants.ts
+++ b/packages/sanity/src/core/changeIndicators/constants.ts
@@ -10,7 +10,7 @@ export const ARROW_MARGIN_X = 8
 export const ARROW_MARGIN_Y = 2
 export const ARROW_SIZE = 4
 export const ARROW_THRESHOLD = 12
-export const STROKE_WIDTH = 2
+export const STROKE_WIDTH = 1
 
 export const DEBUG = false
 export const DEBUG_LAYER_BOUNDS = DEBUG || false
diff --git a/packages/sanity/src/core/changeIndicators/overlay/Connector.styled.tsx b/packages/sanity/src/core/changeIndicators/overlay/Connector.styled.tsx
index 58f0bae5949..c57b775298c 100644
--- a/packages/sanity/src/core/changeIndicators/overlay/Connector.styled.tsx
+++ b/packages/sanity/src/core/changeIndicators/overlay/Connector.styled.tsx
@@ -1,10 +1,7 @@
-import {Theme} from '@sanity/ui'
-import styled, {css} from 'styled-components'
-import {ClampedRect} from './ClampedRect'
+/* eslint-disable camelcase */
 
-interface PathProps {
-  theme: Theme
-}
+import styled from 'styled-components'
+import {ClampedRect} from './ClampedRect'
 
 export const DebugRect = styled.rect`
   stroke: #ccc;
@@ -13,45 +10,29 @@ export const DebugRect = styled.rect`
   stroke-linecap: round;
 `
 
-export const ConnectorPath = styled.path(({theme}: PathProps) => {
-  /* these colours aren't freely available on the current theme */
-  const strokeColor = theme.sanity.color.spot.yellow
-
-  return css`
-    fill: none;
-    pointer-events: none;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke: ${strokeColor};
-  `
-})
-
-export const InteractivePath = styled.path(({theme}: PathProps) => {
-  /* these colours aren't freely available on the current theme */
-  const strokeColor = theme.sanity.color.spot.yellow
-
-  return css`
-    fill: none;
-    pointer-events: stroke;
-    stroke: ${strokeColor};
-    cursor: pointer;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    opacity: 0;
+export const ConnectorPath = styled.path`
+  fill: none;
+  pointer-events: none;
+  stroke-linejoin: round;
+  stroke: var(--card-badge-caution-dot-color);
+`
 
-    &:hover {
-      opacity: 0.2;
-    }
-  `
-})
+export const InteractivePath = styled.path`
+  fill: none;
+  pointer-events: stroke;
+  stroke: transparent;
+  cursor: pointer;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
 
-export const RightBarWrapper = styled(ClampedRect)(({theme}: PathProps) => {
-  /* these colours aren't freely available on the current theme */
-  const strokeColor = theme.sanity.color.spot.yellow
+  &:hover {
+    opacity: 0.2;
+  }
+`
 
-  return css`
-    stroke: none;
-    pointer-events: none;
-    fill: ${strokeColor};
-  `
-})
+export const RightBarWrapper = styled(ClampedRect)`
+  stroke: none;
+  pointer-events: none;
+  fill: var(--card-badge-caution-dot-color);
+`
diff --git a/packages/sanity/src/core/changeIndicators/overlay/Connector.tsx b/packages/sanity/src/core/changeIndicators/overlay/Connector.tsx
index 9fceb78dd34..71738902f9b 100644
--- a/packages/sanity/src/core/changeIndicators/overlay/Connector.tsx
+++ b/packages/sanity/src/core/changeIndicators/overlay/Connector.tsx
@@ -32,9 +32,10 @@ export const Connector = memo(function Connector({from, to}: Props) {
       <InteractivePath d={linePathDescription} strokeWidth={INTERACTIVE_STROKE_WIDTH} />
 
       <ConnectorPath d={linePathDescription} strokeWidth={STROKE_WIDTH} />
+
       <RightBarWrapper
         top={to.rect.top}
-        left={to.rect.left}
+        left={to.rect.left - 0.5}
         height={to.rect.height}
         width={STROKE_WIDTH}
         bounds={to.bounds}
diff --git a/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx b/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx
index 7d087a843be..75940936ce2 100644
--- a/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx
+++ b/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx
@@ -165,10 +165,8 @@ function ConnectorGroup(props: ConnectorGroupProps) {
   const from = useMemo(
     () => ({
       rect: {
-        left: field.rect.left + 2,
-        top: field.rect.top,
-        height: field.rect.height,
-        width: field.rect.width,
+        ...field.rect,
+        left: field.rect.left + 3,
       },
       bounds: field.bounds,
     }),
@@ -176,7 +174,13 @@ function ConnectorGroup(props: ConnectorGroupProps) {
   )
 
   const to = useMemo(
-    () => ({rect: change.rect, bounds: change.bounds}),
+    () => ({
+      rect: {
+        ...change.rect,
+        left: change.rect.left + 1,
+      },
+      bounds: change.bounds,
+    }),
     [change.bounds, change.rect],
   )
 
diff --git a/packages/sanity/src/core/components/BetaBadge.tsx b/packages/sanity/src/core/components/BetaBadge.tsx
index 06a96feca32..7a1678966fd 100644
--- a/packages/sanity/src/core/components/BetaBadge.tsx
+++ b/packages/sanity/src/core/components/BetaBadge.tsx
@@ -1,31 +1,16 @@
-import React, {PropsWithChildren} from 'react'
-import {hues} from '@sanity/color'
+import {HTMLProps} from 'react'
 import {Badge, BadgeProps} from '@sanity/ui'
-import styled, {css} from 'styled-components'
-
-const StyledBadge = styled(Badge)(({theme}) => {
-  const fgTint = theme.sanity.color.dark ? 50 : 700
-  const bgTint = theme.sanity.color.dark ? 700 : 100
-  const bg = hues.purple[bgTint].hex
-  const fg = hues.purple[fgTint].hex
-
-  return css`
-    background-color: ${bg};
-    box-shadow: inset 0 0 0 1px ${bg};
-    color: ${fg};
-  `
-})
 
 /** @internal */
 export type BetaBadgeProps = Omit<BadgeProps, 'mode' | 'tone'>
 
 /** @internal */
-export function BetaBadge(props: PropsWithChildren<BetaBadgeProps>) {
+export function BetaBadge(props: BetaBadgeProps & Omit<HTMLProps<HTMLDivElement>, 'ref'>) {
   const {fontSize = 1, children = 'Beta', ...rest} = props
 
   return (
-    <StyledBadge {...rest} fontSize={fontSize}>
+    <Badge {...rest} fontSize={fontSize} radius={2} tone="primary">
       {children}
-    </StyledBadge>
+    </Badge>
   )
 }
diff --git a/packages/sanity/src/core/components/DefaultDocument.tsx b/packages/sanity/src/core/components/DefaultDocument.tsx
index a2c6360e83d..49cb93baf32 100644
--- a/packages/sanity/src/core/components/DefaultDocument.tsx
+++ b/packages/sanity/src/core/components/DefaultDocument.tsx
@@ -5,6 +5,22 @@ import {GlobalErrorHandler} from './globalErrorHandler'
 import {Favicons} from './Favicons'
 
 const globalStyles = `
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/InterVariable.ttf');
+    font-named-instance: 'Regular';
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/InterVariable-Italic.ttf');
+    font-named-instance: 'Italic';
+  }
   html {
     background-color: #f1f3f6;
   }
@@ -39,7 +55,10 @@ export function DefaultDocument(props: DefaultDocumentProps): React.ReactElement
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
+        />
         <meta name="robots" content="noindex" />
         <meta name="referrer" content="same-origin" />
 
@@ -52,7 +71,8 @@ export function DefaultDocument(props: DefaultDocumentProps): React.ReactElement
         {css.map((href) => (
           <link key={href} rel="stylesheet" href={href} />
         ))}
-        <style>{globalStyles}</style>
+        {/* eslint-disable-next-line react/no-danger */}
+        <style dangerouslySetInnerHTML={{__html: globalStyles}} />
       </head>
       <body>
         <div id="sanity" />
diff --git a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
index e405e1995aa..04ba173bdc2 100644
--- a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
+++ b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
@@ -56,12 +56,14 @@ export function InsufficientPermissionsMessage({
   )
 
   return (
-    <Box padding={2}>
+    <Box>
       <Inline space={2}>
-        <Text size={1}>
+        <Text size={0}>
           <AccessDeniedIcon />
         </Text>
-        <Text weight="semibold">{t('insufficient-permissions-message.title')}</Text>
+        <Text size={1} weight="medium">
+          {t('insufficient-permissions-message.title')}
+        </Text>
       </Inline>
       <Inline marginTop={4}>
         <Text size={1}>
diff --git a/packages/sanity/src/core/components/IntentButton.tsx b/packages/sanity/src/core/components/IntentButton.tsx
index a4a75587daa..c989672e5f2 100644
--- a/packages/sanity/src/core/components/IntentButton.tsx
+++ b/packages/sanity/src/core/components/IntentButton.tsx
@@ -1,5 +1,6 @@
-import {Button, ButtonProps} from '@sanity/ui'
-import React, {HTMLProps} from 'react'
+import React from 'react'
+import {Button, ButtonProps} from '../../ui-components'
+
 import {IntentLink, IntentLinkProps} from 'sanity/router'
 
 /**
@@ -8,7 +9,9 @@ import {IntentLink, IntentLinkProps} from 'sanity/router'
  * @beta
  */
 export function IntentButton(
-  props: IntentLinkProps & ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'as' | 'href' | 'ref'>,
+  props: IntentLinkProps &
+    ButtonProps &
+    Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'size' | 'as'>,
 ) {
   return props.disabled ? (
     <Button {...props} as="a" role="link" aria-disabled="true" />
diff --git a/packages/sanity/src/core/components/StatusButton.tsx b/packages/sanity/src/core/components/StatusButton.tsx
index 399a9d96461..997860b615b 100644
--- a/packages/sanity/src/core/components/StatusButton.tsx
+++ b/packages/sanity/src/core/components/StatusButton.tsx
@@ -1,117 +1,57 @@
-import {
-  Box,
-  Button,
-  ButtonMode,
-  ButtonProps,
-  Flex,
-  Text,
-  Tooltip,
-  TooltipProps,
-  useTheme,
-} from '@sanity/ui'
-import React, {
-  createElement,
-  isValidElement,
-  useMemo,
-  HTMLProps,
-  forwardRef,
-  ForwardedRef,
-  ReactNode,
-} from 'react'
-import {isValidElementType} from 'react-is'
+import {useTheme} from '@sanity/ui'
+import {useMemo, HTMLProps, forwardRef, ForwardedRef, ReactNode} from 'react'
 import styled from 'styled-components'
-import {Hotkeys} from './Hotkeys'
+import {Button, ButtonProps} from '../../ui-components'
 
 /** @hidden @beta */
-export interface StatusButtonProps extends Omit<ButtonProps, 'iconRight'> {
+export type StatusButtonProps = ButtonProps & {
   disabled?: boolean | {reason: ReactNode}
-  hotkey?: string[]
-  label?: string
-  mode?: ButtonMode
-  tooltip?: Omit<TooltipProps, 'content' | 'disabled' | 'portal'>
+  mode?: ButtonProps['mode']
+  iconRight?: undefined
 }
 
-const IconBox = styled(Box)({
-  position: 'relative',
-})
+const StyledButton = styled(Button)`
+  position: relative;
+  // The children in button is rendered inside a span, we need to absolutely position it.
+  & > span:nth-child(2) {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    padding: 0;
+  }
+`
 
 const Dot = styled.div({
-  position: 'absolute',
-  top: -4,
-  right: -4,
-  width: 6,
-  height: 6,
+  width: 4,
+  height: 4,
   borderRadius: 3,
   boxShadow: '0 0 0 1px var(--card-bg-color)',
 })
 
 /** @hidden @beta */
 export const StatusButton = forwardRef(function StatusButton(
-  props: StatusButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'disabled' | 'ref'>,
+  props: StatusButtonProps &
+    Omit<HTMLProps<HTMLButtonElement>, 'disabled' | 'ref' | 'size' | 'title'>,
   ref: ForwardedRef<HTMLButtonElement>,
 ) {
-  const {
-    disabled: disabledProp,
-    fontSize,
-    hotkey,
-    icon,
-    label,
-    mode = 'bleed',
-    space = 3,
-    text,
-    tone,
-    tooltip,
-    ...restProps
-  } = props
+  const {disabled: disabledProp, icon, label, mode = 'bleed', text, tone, ...restProps} = props
   const theme = useTheme()
   const toneColor = tone && theme.sanity.color.solid[tone]
   const dotStyle = useMemo(() => ({backgroundColor: toneColor?.enabled.bg}), [toneColor])
   const disabled = Boolean(disabledProp)
 
-  const tooltipContent =
-    typeof disabledProp === 'object' ? (
-      <Text size={1}>{disabledProp.reason}</Text>
-    ) : (
-      <Flex align="center" gap={2} style={{lineHeight: 0}}>
-        <Text size={1}>{label}</Text>
-        {hotkey && <Hotkeys fontSize={0} keys={hotkey} style={{margin: -4}} />}
-      </Flex>
-    )
-
   return (
-    <Tooltip
-      padding={2}
-      placement="bottom"
-      {...tooltip}
-      content={tooltipContent}
-      disabled={!label}
-      portal
+    <StyledButton
+      data-ui="StatusButton"
+      {...restProps}
+      aria-label={label}
+      disabled={disabled}
+      mode={mode}
+      ref={ref}
+      text={text}
+      icon={icon}
     >
-      <div>
-        <Button
-          data-ui="StatusButton"
-          {...restProps}
-          aria-label={label}
-          disabled={disabled}
-          mode={mode}
-          ref={ref}
-        >
-          <Flex gap={space}>
-            <IconBox>
-              <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
-              </Text>
-              {tone && <Dot style={dotStyle} />}
-            </IconBox>
-            {text && (
-              <Box flex={1}>
-                <Text size={fontSize}>{text}</Text>
-              </Box>
-            )}
-          </Flex>
-        </Button>
-      </div>
-    </Tooltip>
+      {tone && <Dot style={dotStyle} />}
+    </StyledButton>
   )
 })
diff --git a/packages/sanity/src/core/components/TooltipOfDisabled.tsx b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
index f96240900ad..612879e8494 100644
--- a/packages/sanity/src/core/components/TooltipOfDisabled.tsx
+++ b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
@@ -1,15 +1,13 @@
-import {Tooltip, TooltipProps} from '@sanity/ui'
-import React, {ForwardedRef, forwardRef} from 'react'
+import React, {forwardRef} from 'react'
+import {Tooltip, TooltipProps} from '../../ui-components'
 
 /** @internal */
-export const TooltipOfDisabled = forwardRef(function DisabledTooltip(
-  props: TooltipProps,
-  ref: ForwardedRef<HTMLDivElement>,
+export const TooltipOfDisabled = forwardRef<HTMLDivElement, TooltipProps>(function DisabledTooltip(
+  {children, content, disabled, ...restProps},
+  ref,
 ) {
-  const {children, content, disabled, ...restProps} = props
-
   return (
-    <Tooltip {...restProps} content={content} disabled={disabled || !content} padding={2} ref={ref}>
+    <Tooltip {...restProps} content={content} disabled={disabled || !content} ref={ref}>
       <div>{children}</div>
     </Tooltip>
   )
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
index 261ca121422..b754bd37ae8 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -1,5 +1,4 @@
-import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Box, Button, Flex, MenuButtonProps, Text, Tooltip} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import React, {
   Children,
   cloneElement,
@@ -15,6 +14,8 @@ import React, {
 } from 'react'
 import styled, {css} from 'styled-components'
 import {difference} from 'lodash'
+import {MenuButtonProps, Tooltip} from '../../../ui-components'
+import {ContextMenuButton} from '../contextMenuButton'
 import {CollapseOverflowMenu} from './CollapseOverflowMenu'
 import {ObserveElement} from './ObserveElement'
 import {CollapseMenuDivider} from './CollapseMenuDivider'
@@ -93,7 +94,7 @@ export const CollapseMenu = forwardRef(function CollapseMenu(
 
   const menuOptions = useMemo(() => Children.toArray(children).filter(_isReactElement), [children])
   const menuButton = useMemo(
-    () => menuButtonProps?.button || <Button icon={EllipsisVerticalIcon} mode="bleed" />,
+    () => menuButtonProps?.button || <ContextMenuButton />,
     [menuButtonProps],
   )
 
@@ -262,7 +263,7 @@ export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
     : menuOptions
 
   const menuButton = useMemo(
-    () => menuButtonProps?.button || <Button icon={EllipsisVerticalIcon} mode="bleed" />,
+    () => menuButtonProps?.button || <ContextMenuButton />,
     [menuButtonProps],
   )
 
@@ -288,16 +289,7 @@ export const AutoCollapseMenu = forwardRef(function AutoCollapseMenu(
               return (
                 <Fragment key={optionElement.key}>
                   {dividerBefore && index !== 0 && <CollapseMenuDivider hidden={hidden} />}
-                  <Tooltip
-                    portal
-                    disabled={!tooltipText}
-                    content={
-                      <Box padding={2} sizing="border">
-                        <Text size={1}>{tooltipText}</Text>
-                      </Box>
-                    }
-                    {...tooltipProps}
-                  >
+                  <Tooltip portal disabled={!tooltipText} content={tooltipText} {...tooltipProps}>
                     <Flex>
                       {cloneElement(optionElement, {
                         disabled: optionElement.props.disabled || hidden,
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
index 7e0a5addc61..09dd5a78d94 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
@@ -1,5 +1,5 @@
-import {Button, ButtonProps, TooltipProps} from '@sanity/ui'
 import React, {forwardRef} from 'react'
+import {Button, ButtonProps, TooltipProps} from '../../../ui-components'
 
 /** @internal */
 export interface CommonProps extends Omit<ButtonProps, 'text' | 'iconRight'> {
@@ -14,12 +14,12 @@ export interface CommonProps extends Omit<ButtonProps, 'text' | 'iconRight'> {
 export interface CollapseMenuButtonProps extends CommonProps {
   collapsedProps?: Omit<CommonProps, 'text'>
   expandedProps?: CommonProps
-  text: ButtonProps['text']
+  text: string
 }
 
 /** @internal */
 export const CollapseMenuButton = forwardRef(function CollapseMenuButton(
-  props: CollapseMenuButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
+  props: CollapseMenuButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
index 77d8627eaaf..8127deeb380 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
@@ -1,5 +1,6 @@
-import {Menu, MenuButton, MenuButtonProps, MenuDivider, MenuItem} from '@sanity/ui'
+import {Menu, MenuDivider} from '@sanity/ui'
 import React, {ForwardedRef, forwardRef} from 'react'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../ui-components'
 import {CollapseMenuProps} from './CollapseMenu'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
diff --git a/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx b/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
index 67f23212d81..64e4972b066 100644
--- a/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/__workshop__/CollapseMenuStory.tsx
@@ -1,7 +1,8 @@
-import {EllipsisVerticalIcon, IceCreamIcon} from '@sanity/icons'
-import {Button, Card, Flex} from '@sanity/ui'
+import {IceCreamIcon} from '@sanity/icons'
+import {Card, Flex} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React from 'react'
+import {ContextMenuButton} from '../../contextMenuButton'
 import {CollapseMenu, CollapseMenuButton} from '../'
 
 const GAP_OPTIONS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4}
@@ -19,14 +20,12 @@ export default function CollapseMenuStory() {
           collapsed={collapsed}
           collapseText={collapseText}
           menuButtonProps={{
-            button: <Button icon={EllipsisVerticalIcon} mode="bleed" padding={2} fontSize={1} />,
+            button: <ContextMenuButton />,
           }}
         >
           {[...Array(5).keys()].map((num) => (
             <CollapseMenuButton
               key={num}
-              fontSize={1}
-              padding={2}
               text={`Button ${num + 1}`}
               dividerBefore={Boolean(num % 2)}
               icon={IceCreamIcon}
diff --git a/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
new file mode 100644
index 00000000000..b5d2efa1c3e
--- /dev/null
+++ b/packages/sanity/src/core/components/collapseTabList/CollapseTabList.tsx
@@ -0,0 +1,150 @@
+import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
+import {Flex} from '@sanity/ui'
+import styled from 'styled-components'
+import {MenuButtonProps} from '../../../ui-components'
+import {ContextMenuButton} from '../contextMenuButton'
+import {CollapseOverflowMenu} from '../collapseMenu/CollapseOverflowMenu'
+import {ObserveElement} from '../collapseMenu/ObserveElement'
+
+function _isReactElement(node: unknown): node is React.ReactElement {
+  return Boolean(node)
+}
+
+const OptionObserveElement = styled(ObserveElement)`
+  list-style: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+  opacity: 0;
+  visibility: hidden;
+`
+
+const HiddenRow = styled(Flex)`
+  opacity: 0;
+  height: 0.1px;
+  overflow: hidden;
+`
+
+interface CollapseTabListProps {
+  children: React.ReactNode
+  gap?: number | number[]
+  menuButtonProps?: Omit<MenuButtonProps, 'id' | 'menu' | 'button'> & {
+    id?: string
+    button?: React.ReactElement
+  }
+  onMenuClose?: () => void
+  collapsed?: boolean
+  disableRestoreFocusOnClose?: boolean
+}
+
+/**
+ * Similar to `<CollapseMenu />` but instead of collapsing the inner items by removing the text
+ * it shows the items that fit, and the rest are rendered in a menu.
+ * @internal */
+export const CollapseTabList = forwardRef(function CollapseTabList(
+  props: CollapseTabListProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    children: childrenProp,
+    gap,
+    menuButtonProps,
+    disableRestoreFocusOnClose,
+    onMenuClose,
+    collapsed,
+    ...rest
+  } = props
+  const [rootEl, setRootEl] = useState<HTMLDivElement | null>(null)
+  const [hiddenElements, setHiddenElements] = useState<React.ReactElement[]>([])
+  const [showChildren, setShowChildren] = useState(false)
+
+  const children = useMemo(
+    () => React.Children.toArray(childrenProp).filter(_isReactElement),
+    [childrenProp],
+  )
+
+  /**
+   * Keeps track of the children that will be shown in place and not in the menu.
+   */
+  const displayChildren = useMemo(() => {
+    if (collapsed) return null // If collapsed, we don't want to show any children
+    if (!showChildren) return null // If we haven't run the intersection observer yet, we don't want to show any children
+    // eslint-disable-next-line max-nested-callbacks
+    return children.filter((c) => !hiddenElements.some((h) => h.key === c.key))
+  }, [children, collapsed, hiddenElements, showChildren])
+
+  const intersectionOptions = useMemo(
+    () => ({
+      root: rootEl,
+      threshold: 1,
+      rootMargin: '1px',
+    }),
+    [rootEl],
+  )
+
+  const menuButton = useMemo(
+    () => menuButtonProps?.button || <ContextMenuButton />,
+    [menuButtonProps],
+  )
+
+  const menuOptionsArray = useMemo(
+    () =>
+      collapsed
+        ? children
+        : // eslint-disable-next-line max-nested-callbacks
+          children.filter(({key}) => hiddenElements.find((o: React.ReactElement) => o.key === key)),
+    [children, hiddenElements, collapsed],
+  )
+
+  const handleIntersection = useCallback(
+    (e: IntersectionObserverEntry, child: React.ReactElement) => {
+      const isHidden = hiddenElements.some((el) => el.key === child.key)
+
+      if (!showChildren) setShowChildren(true)
+      const isIntersecting = e.isIntersecting
+      if (!isHidden && !isIntersecting) setHiddenElements((prev) => [...prev, child])
+      if (isHidden && isIntersecting)
+        // eslint-disable-next-line max-nested-callbacks
+        setHiddenElements((prev) => prev.filter((el) => el.key !== child.key))
+    },
+    [hiddenElements, showChildren, setShowChildren, setHiddenElements],
+  )
+
+  return (
+    <Flex direction="column" ref={ref} sizing="border" style={{position: 'relative'}} {...rest}>
+      <Flex justify="center" gap={gap} flex={1}>
+        {displayChildren}
+        {(hiddenElements.length > 0 || collapsed) && (
+          <CollapseOverflowMenu
+            disableRestoreFocusOnClose={disableRestoreFocusOnClose}
+            menuButton={menuButton}
+            menuButtonProps={menuButtonProps}
+            menuOptions={menuOptionsArray}
+            onMenuClose={onMenuClose}
+          />
+        )}
+      </Flex>
+
+      {/* Element that always render all the children to keep track of their position and if the available space to render them */}
+      <HiddenRow justify="flex-start" gap={gap} ref={setRootEl} data-hidden aria-hidden="true">
+        {cloneElement(menuButton, {
+          disabled: true,
+          'aria-hidden': true,
+        })}
+        {children?.map((child) => (
+          <OptionObserveElement
+            key={`${child.key}_observer`}
+            options={intersectionOptions}
+            // eslint-disable-next-line react/jsx-no-bind
+            onIntersectionChange={(e) => handleIntersection(e[0], child)}
+          >
+            {cloneElement(child, {
+              disabled: true,
+              'aria-hidden': true,
+              tabIndex: -1,
+            })}
+          </OptionObserveElement>
+        ))}
+      </HiddenRow>
+    </Flex>
+  )
+})
diff --git a/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx b/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx
new file mode 100644
index 00000000000..60c6e217669
--- /dev/null
+++ b/packages/sanity/src/core/components/collapseTabList/__workshop__/CollapseTabListStory.tsx
@@ -0,0 +1,42 @@
+import {useState} from 'react'
+import {IceCreamIcon} from '@sanity/icons'
+import {Card, Flex} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import {Button} from '../../../../ui-components'
+import {CollapseTabList} from '..'
+
+const GAP_OPTIONS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4}
+
+export default function CollapseMenuStory() {
+  const collapsed = useBoolean('Collapsed', false)
+  const gap = useSelect('Gap', GAP_OPTIONS, 1)
+  const [selected, setSelected] = useState(0)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={2}>
+      <Card
+        shadow={1}
+        radius={3}
+        padding={1}
+        style={{
+          overflow: 'hidden',
+          resize: 'horizontal',
+        }}
+      >
+        <CollapseTabList gap={gap} collapsed={collapsed}>
+          {[...Array(5).keys()].map((num) => (
+            <Button
+              key={num}
+              text={`Button ${num + 1}`}
+              icon={IceCreamIcon}
+              mode="bleed"
+              selected={selected === num}
+              // eslint-disable-next-line react/jsx-no-bind
+              onClick={() => setSelected(num)}
+            />
+          ))}
+        </CollapseTabList>
+      </Card>
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/core/components/collapseTabList/__workshop__/index.ts b/packages/sanity/src/core/components/collapseTabList/__workshop__/index.ts
new file mode 100644
index 00000000000..048950f559f
--- /dev/null
+++ b/packages/sanity/src/core/components/collapseTabList/__workshop__/index.ts
@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'core/components/collapseTabList',
+  title: 'CollapseTabList',
+  stories: [
+    {
+      name: 'collapse-tab-list',
+      title: 'Default',
+      component: lazy(() => import('./CollapseTabListStory')),
+    },
+  ],
+})
diff --git a/packages/sanity/src/core/components/collapseTabList/index.ts b/packages/sanity/src/core/components/collapseTabList/index.ts
new file mode 100644
index 00000000000..d62a399af80
--- /dev/null
+++ b/packages/sanity/src/core/components/collapseTabList/index.ts
@@ -0,0 +1 @@
+export * from './CollapseTabList'
diff --git a/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx b/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
index 4432dde37b2..ac5cf1459b9 100644
--- a/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
+++ b/packages/sanity/src/core/components/commandList/__workshop__/KitchenSinkStory.tsx
@@ -1,8 +1,9 @@
 import {CheckmarkIcon, DotIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {Box, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import React, {KeyboardEvent, useCallback, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
+import {Button} from '../../../../ui-components'
 import {CommandList} from '../CommandList'
 import {
   CommandListGetItemDisabledCallback,
diff --git a/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx b/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
index cf15eebfc89..855a4405102 100644
--- a/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
+++ b/packages/sanity/src/core/components/commandList/__workshop__/PopoverStory.tsx
@@ -1,18 +1,10 @@
-import {SelectIcon} from '@sanity/icons'
-import {
-  Button,
-  Card,
-  Flex,
-  Inline,
-  Popover,
-  Stack,
-  useClickOutside,
-  useGlobalKeyDown,
-} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Card, Flex, Inline, Stack, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import {CommandList} from '../CommandList'
 import {CommandListRenderItemCallback} from '../types'
+import {Button, Popover} from '../../../../ui-components'
 
 const ITEMS = [...Array(50000).keys()]
 
@@ -66,7 +58,6 @@ export default function PopoverStory() {
     (item) => {
       return (
         <Button
-          fontSize={1}
           mode="bleed"
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => handleChildClick(item)}
@@ -109,7 +100,7 @@ export default function PopoverStory() {
             ref={setPopover}
           >
             <Button
-              iconRight={SelectIcon}
+              iconRight={ChevronDownIcon}
               onClick={handlePopoverButtonClick}
               ref={setButton}
               text={`Popover (open at index ${selectedIndex})`}
diff --git a/packages/sanity/src/core/components/contextMenuButton/ContextMenuButton.tsx b/packages/sanity/src/core/components/contextMenuButton/ContextMenuButton.tsx
new file mode 100644
index 00000000000..4e31b28d39e
--- /dev/null
+++ b/packages/sanity/src/core/components/contextMenuButton/ContextMenuButton.tsx
@@ -0,0 +1,38 @@
+import {EllipsisHorizontalIcon} from '@sanity/icons'
+import React, {HTMLProps, forwardRef} from 'react'
+import {useTranslation} from '../..'
+import {Button, ButtonProps} from '../../../ui-components'
+
+type ContextMenuButtonProps = Pick<
+  ButtonProps,
+  'mode' | 'paddingY' | 'size' | 'tone' | 'tooltipProps'
+>
+
+/**
+ * Simple context menu button (with horizontal ellipsis icon) with shared localization.
+ *
+ * @internal
+ */
+export const ContextMenuButton = forwardRef(function ContextMenuButton(
+  props: ContextMenuButtonProps &
+    Pick<HTMLProps<HTMLButtonElement>, 'disabled' | 'hidden' | 'onClick'>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {mode = 'bleed', tooltipProps, tone, ...rest} = props
+
+  const {t} = useTranslation()
+
+  return (
+    <Button
+      {...rest}
+      icon={EllipsisHorizontalIcon}
+      mode={mode}
+      ref={ref}
+      tone={tone}
+      tooltipProps={{
+        ...tooltipProps,
+        content: tooltipProps?.content || t('common.context-menu-button.tooltip'),
+      }}
+    />
+  )
+})
diff --git a/packages/sanity/src/core/components/contextMenuButton/index.ts b/packages/sanity/src/core/components/contextMenuButton/index.ts
new file mode 100644
index 00000000000..d27a8d565e9
--- /dev/null
+++ b/packages/sanity/src/core/components/contextMenuButton/index.ts
@@ -0,0 +1 @@
+export * from './ContextMenuButton'
diff --git a/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx b/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx
new file mode 100644
index 00000000000..b21c5ae1b9d
--- /dev/null
+++ b/packages/sanity/src/core/components/documentStatus/DocumentStatus.tsx
@@ -0,0 +1,78 @@
+import {PreviewValue, SanityDocument} from '@sanity/types'
+import {Flex, Text} from '@sanity/ui'
+import styled from 'styled-components'
+import {useDateTimeFormat, useRelativeTime} from '../..'
+import {useTranslation} from '../../i18n'
+
+interface DocumentStatusProps {
+  absoluteDate?: boolean
+  draft?: PreviewValue | Partial<SanityDocument> | null
+  published?: PreviewValue | Partial<SanityDocument> | null
+  singleLine?: boolean
+}
+
+const StyledText = styled(Text)`
+  white-space: nowrap;
+`
+
+/**
+ * Displays document status indicating both last published and edited dates in either relative (the default)
+ * or absolute formats.
+ *
+ * These can be displayed in a single or multi-line (the default) lockups.
+ *
+ * Example: `**Published Oct 16 2023** Edited 8m ago`
+ *
+ * @internal
+ */
+export function DocumentStatus({absoluteDate, draft, published, singleLine}: DocumentStatusProps) {
+  const {t} = useTranslation()
+  const draftUpdatedAt = draft && '_updatedAt' in draft ? draft._updatedAt : ''
+  const publishedUpdatedAt = published && '_updatedAt' in published ? published._updatedAt : ''
+
+  const intlDateFormat = useDateTimeFormat({
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+
+  const draftDateAbsolute = draftUpdatedAt && intlDateFormat.format(new Date(draftUpdatedAt))
+  const publishedDateAbsolute =
+    publishedUpdatedAt && intlDateFormat.format(new Date(publishedUpdatedAt))
+
+  const draftUpdatedTimeAgo = useRelativeTime(draftUpdatedAt || '', {
+    minimal: true,
+    useTemporalPhrase: true,
+  })
+  const publishedUpdatedTimeAgo = useRelativeTime(publishedUpdatedAt || '', {
+    minimal: true,
+    useTemporalPhrase: true,
+  })
+
+  const publishedDate = absoluteDate ? publishedDateAbsolute : publishedUpdatedTimeAgo
+  const updatedDate = absoluteDate ? draftDateAbsolute : draftUpdatedTimeAgo
+
+  return (
+    <Flex
+      align={singleLine ? 'center' : 'flex-start'}
+      direction={singleLine ? 'row' : 'column'}
+      gap={singleLine ? 1 : 2}
+      wrap="nowrap"
+    >
+      {!publishedDate && (
+        <StyledText size={1} weight="medium">
+          {t('document-status.not-published')}
+        </StyledText>
+      )}
+      {publishedDate && (
+        <StyledText size={1} weight="medium">
+          {t('document-status.published', {date: publishedDate})}
+        </StyledText>
+      )}
+      {updatedDate && (
+        <StyledText muted size={1} wrap="nowrap">
+          {t('document-status.edited', {date: updatedDate})}
+        </StyledText>
+      )}
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/core/components/documentStatus/index.ts b/packages/sanity/src/core/components/documentStatus/index.ts
new file mode 100644
index 00000000000..84b9a16b3a9
--- /dev/null
+++ b/packages/sanity/src/core/components/documentStatus/index.ts
@@ -0,0 +1 @@
+export * from './DocumentStatus'
diff --git a/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx b/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
new file mode 100644
index 00000000000..b63389d0113
--- /dev/null
+++ b/packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
@@ -0,0 +1,53 @@
+import {DotIcon} from '@sanity/icons'
+import {PreviewValue, SanityDocument} from '@sanity/types'
+import {Text} from '@sanity/ui'
+import {useMemo} from 'react'
+import styled from 'styled-components'
+
+interface DocumentStatusProps {
+  draft?: PreviewValue | Partial<SanityDocument> | null
+  published?: PreviewValue | Partial<SanityDocument> | null
+}
+
+const Root = styled(Text)`
+  &[data-status='edited'] {
+    --card-icon-color: var(--card-badge-caution-dot-color);
+  }
+  &[data-status='unpublished'] {
+    --card-icon-color: var(--card-badge-default-dot-color);
+    opacity: 0.5 !important;
+  }
+`
+
+/**
+ * Renders a dot indicating the current document status.
+ *
+ * - Yellow (caution) for published documents with edits
+ * - Gray (default) for unpublished documents (with or without edits)
+ *
+ * No dot will be displayed for published documents without edits.
+ *
+ * @internal
+ */
+export function DocumentStatusIndicator({draft, published}: DocumentStatusProps) {
+  const $draft = !!draft
+  const $published = !!published
+
+  const status = useMemo(() => {
+    if ($draft && !$published) return 'unpublished'
+    return 'edited'
+  }, [$draft, $published])
+
+  // Return null if the document is:
+  // - Published without edits
+  // - Neither published or without edits (this shouldn't be possible)
+  if ((!$draft && !$published) || (!$draft && $published)) {
+    return null
+  }
+
+  return (
+    <Root data-status={status} size={1}>
+      <DotIcon />
+    </Root>
+  )
+}
diff --git a/packages/sanity/src/core/components/documentStatusIndicator/index.ts b/packages/sanity/src/core/components/documentStatusIndicator/index.ts
new file mode 100644
index 00000000000..a4cd2a614fe
--- /dev/null
+++ b/packages/sanity/src/core/components/documentStatusIndicator/index.ts
@@ -0,0 +1 @@
+export * from './DocumentStatusIndicator'
diff --git a/packages/sanity/src/core/components/index.ts b/packages/sanity/src/core/components/index.ts
index bf5040d0bb0..9b8a6a9df2f 100644
--- a/packages/sanity/src/core/components/index.ts
+++ b/packages/sanity/src/core/components/index.ts
@@ -26,3 +26,7 @@ export * from './WithReferringDocuments'
 export * from './zOffsets'
 export * from './BetaBadge'
 export * from './RelativeTime'
+export * from './documentStatusIndicator'
+export * from './loadingBlock'
+export * from './documentStatus'
+export * from './contextMenuButton'
diff --git a/packages/sanity/src/core/components/loadingBlock/LoadingBlock.tsx b/packages/sanity/src/core/components/loadingBlock/LoadingBlock.tsx
new file mode 100644
index 00000000000..3cbb2112b10
--- /dev/null
+++ b/packages/sanity/src/core/components/loadingBlock/LoadingBlock.tsx
@@ -0,0 +1,139 @@
+import React from 'react'
+import {Card, Layer, Spinner, Text} from '@sanity/ui'
+import styled, {css} from 'styled-components'
+import {useTranslation} from '../..'
+
+// Enable to force debug background
+const DEBUG_MODE = false
+
+// Duration to wait before initial spinner appears
+const SPINNER_DELAY = 750 // ms
+
+// Duration to wait before text appears (if enabled)
+const TEXT_DELAY = 2000 // ms
+
+interface LoadingTestProps {
+  /** Absolutely positions this component when `true`. */
+  fill?: boolean
+  /** Optionally show loading title. If `true`, both text and spinner will appear and animate after an initial delay */
+  showText?: boolean
+  /**
+   * Text to display underneath the spinner.  If omitted, will default to `'Loading'`.
+   * If providing a value, avoid using trailing ellipses.
+   *
+   * @defaultValue `'Loading'`
+   */
+  title?: string | null
+}
+
+const StyledCard = styled(Card)<{$fill?: boolean}>(({$fill}) => {
+  return css`
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    ${$fill
+      ? css`
+          bottom: 0;
+          height: 100%;
+          left: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 100%;
+        `
+      : css`
+          min-height: 75px;
+          height: stretch;
+          height: -webkit-fill-available;
+          width: stretch;
+          width: -webkit-fill-available;
+        `}
+
+    ${DEBUG_MODE &&
+    css`
+      background: linear-gradient(#5555ca, #daf9f9);
+      border: 2px solid black;
+      > * {
+        mix-blend-mode: multiply;
+      }
+    `}
+
+    > * {
+      position: absolute;
+    }
+  `
+})
+
+const StyledSpinner = styled(Spinner)<{$animatePosition: boolean}>(({$animatePosition = true}) => {
+  return css`
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    @keyframes slideUp {
+      from {
+        transform: translateY(0);
+      }
+      to {
+        transform: translateY(-15px);
+      }
+    }
+    animation: ${$animatePosition
+      ? `500ms ease-out ${SPINNER_DELAY}ms 1 normal both running fadeIn, 750ms ease-out ${TEXT_DELAY}ms 1 normal both running slideUp`
+      : `500ms ease-out ${SPINNER_DELAY}ms 1 normal both running fadeIn`};
+  `
+})
+
+const StyledText = styled(Text)`
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes slideDown {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(15px);
+    }
+  }
+  animation:
+    1500ms ease-out ${TEXT_DELAY}ms 1 normal both running fadeIn,
+    750ms ease-out ${TEXT_DELAY}ms 1 normal both running slideDown;
+`
+
+/**
+ * A generic loading container which displays a spinner and text.
+ * The spinner won't initially be visible and fades in after a short delay.
+ *
+ * @internal
+ */
+export function LoadingBlock({fill, showText, title}: LoadingTestProps) {
+  return (
+    <StyledCard $fill={fill} as={fill ? Layer : 'div'}>
+      <StyledSpinner $animatePosition={!!showText} muted />
+      {showText && <LoadingText title={title} />}
+    </StyledCard>
+  )
+}
+
+function LoadingText({title}: {title?: string | null}) {
+  const {t} = useTranslation()
+
+  return (
+    <StyledText muted size={1}>
+      {title || t('common.loading')}
+    </StyledText>
+  )
+}
diff --git a/packages/sanity/src/core/components/loadingBlock/index.ts b/packages/sanity/src/core/components/loadingBlock/index.ts
new file mode 100644
index 00000000000..5ec61af63a5
--- /dev/null
+++ b/packages/sanity/src/core/components/loadingBlock/index.ts
@@ -0,0 +1 @@
+export * from './LoadingBlock'
diff --git a/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx b/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
index e1085352805..9a734495a4e 100644
--- a/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
+++ b/packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx
@@ -1,19 +1,9 @@
 import {CloseIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Layer,
-  Popover,
-  PopoverProps,
-  ResponsiveWidthProps,
-  Stack,
-  Text,
-  Theme,
-} from '@sanity/ui'
+import {Box, Flex, Layer, ResponsiveWidthProps, Stack, Text, Theme} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import styled, {css} from 'styled-components'
 import TrapFocus from 'react-focus-lock'
+import {Button, Popover, PopoverProps} from '../../../ui-components'
 import {PopoverContainer} from './PopoverContainer'
 
 const StyledPopover = styled(Popover)(() => {
@@ -60,25 +50,29 @@ export function PopoverDialog(props: PopoverDialogProps) {
     referenceElement?.focus()
   }, [onClose, referenceElement])
 
+  // @todo: these use the same styles as dialogs, can this be shared?
   const content = (
     <PopoverContainer width={width}>
       <TrapFocus autoFocus>
         <Stack ref={containerRef}>
           <StickyLayer>
-            <Box padding={2} paddingLeft={3}>
+            <Box padding={2} paddingLeft={4}>
               <Flex align="center" gap={2}>
                 <Box flex={1}>
-                  <Text textOverflow="ellipsis" weight="semibold">
+                  <Text size={1} textOverflow="ellipsis" weight="medium">
                     {header}
                   </Text>
                 </Box>
-
-                <Button icon={CloseIcon} mode="bleed" onClick={handleClose} />
+                <Button
+                  icon={CloseIcon}
+                  mode="bleed"
+                  onClick={handleClose}
+                  tooltipProps={{content: 'Close'}}
+                />
               </Flex>
             </Box>
           </StickyLayer>
-
-          {children}
+          <Box padding={4}>{children}</Box>
         </Stack>
       </TrapFocus>
     </PopoverContainer>
diff --git a/packages/sanity/src/core/components/previewCard/PreviewCard.tsx b/packages/sanity/src/core/components/previewCard/PreviewCard.tsx
index 5db4bbd1c8b..e823b606f73 100644
--- a/packages/sanity/src/core/components/previewCard/PreviewCard.tsx
+++ b/packages/sanity/src/core/components/previewCard/PreviewCard.tsx
@@ -5,10 +5,6 @@ import styled, {css} from 'styled-components'
 /** @internal */
 const StyledCard = styled(Card)(() => {
   return css`
-    /* this is a hack to avoid layout jumps while previews are loading
-    there's probably better ways of solving this */
-    min-height: 35px;
-
     /* TextWithTone uses its own logic to set color, and we therefore need */
     /* to override this logic in order to set the correct color in different states */
     &[data-selected],
diff --git a/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx b/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx
index 123e67777d9..f8705e47ea3 100644
--- a/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx
+++ b/packages/sanity/src/core/components/previews/__workshop__/GeneralPreviewStory.tsx
@@ -3,10 +3,11 @@ import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useNumber, useSelect, useString, useText} from '@sanity/ui-workshop'
 import React, {createElement, useMemo} from 'react'
 import {GeneralPreviewLayoutKey, PreviewProps} from '../types'
+import {CompactPreview} from '../general/CompactPreview'
 import {DefaultPreview} from '../general/DefaultPreview'
 import {DetailPreview} from '../general/DetailPreview'
 import {MediaPreview} from '../general/MediaPreview'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 // Exclude deprecated layout mode
 type LayoutKey = Exclude<GeneralPreviewLayoutKey, 'card'>
@@ -19,6 +20,7 @@ const MEDIA_OPTIONS: Record<string, 'none' | 'image' | 'icon' | 'text'> = {
 }
 
 const LAYOUT_OPTIONS: Record<string, LayoutKey> = {
+  Compact: 'compact',
   Default: 'default',
   Detail: 'detail',
   Media: 'media',
@@ -27,26 +29,27 @@ const LAYOUT_OPTIONS: Record<string, LayoutKey> = {
 const previewComponents: {
   [TLayoutKey in LayoutKey]: React.ComponentType<PreviewProps<TLayoutKey>>
 } = {
+  compact: CompactPreview,
   default: DefaultPreview,
   detail: DetailPreview,
   media: MediaPreview,
 }
 
 export default function GeneralPreviewStory() {
-  const layout = useSelect('Layout', LAYOUT_OPTIONS, 'default')
+  const layout = useSelect('Layout', LAYOUT_OPTIONS, 'compact')
 
   const isPlaceholder = useBoolean('Is placeholder', false)
   const interactive = useBoolean('Interactive', false)
   const mediaKey = useSelect('Media', MEDIA_OPTIONS) || 'none'
   const title = useString('Title', 'Title', 'Props')
   const subtitle = useString('Subtitle', 'Subtitle', 'Props')
-  const description = useText('Description', undefined, 'Props')
+  const description = useText('Description', 'Description', 'Props')
   const selected = useBoolean('Selected', false, 'Props')
   const status = useBoolean('Status', false)
   const progress = useNumber('Progress (%)', 50)
 
   const media = useMemo(() => {
-    const {width, height} = layout ? PREVIEW_MEDIA_SIZE[layout] : PREVIEW_MEDIA_SIZE.default
+    const {width, height} = layout ? PREVIEW_SIZES[layout].media : PREVIEW_SIZES.default.media
 
     if (mediaKey === 'image') {
       return <img src={`https://source.unsplash.com/${width * 2}x${height * 2}/?abstract`} />
@@ -96,8 +99,6 @@ export default function GeneralPreviewStory() {
         <Container width={0}>
           <Card
             data-as={interactive ? 'button' : undefined}
-            padding={2}
-            radius={2}
             selected={interactive ? selected : undefined}
             style={{lineHeight: 0}}
           >
diff --git a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
index a903bfffd8f..b2ddf8e1712 100644
--- a/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
+++ b/packages/sanity/src/core/components/previews/__workshop__/PortableTextPreviewStory.tsx
@@ -1,12 +1,13 @@
-import {DocumentIcon, EditIcon, EllipsisVerticalIcon} from '@sanity/icons'
-import {Button, Card, Container, Flex, Text} from '@sanity/ui'
+import {DocumentIcon, EditIcon} from '@sanity/icons'
+import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useString} from '@sanity/ui-workshop'
 import React, {ComponentType, createElement, useMemo} from 'react'
+import {ContextMenuButton} from '../../contextMenuButton'
 import {PortableTextPreviewLayoutKey, PreviewProps} from '../types'
 import {InlinePreview} from '../portableText/InlinePreview'
 import {BlockPreview} from '../portableText/BlockPreview'
 import {BlockImagePreview} from '../portableText/BlockImagePreview'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 const MEDIA_OPTIONS: Record<string, string> = {
   None: 'none',
@@ -52,7 +53,7 @@ export default function PortableTextPreviewStory() {
   const status = useBoolean('Status', false)
 
   const media = useMemo(() => {
-    const {width, height} = layout ? PREVIEW_MEDIA_SIZE[layout] : PREVIEW_MEDIA_SIZE.default
+    const {width, height} = layout ? PREVIEW_SIZES[layout].media : PREVIEW_SIZES.default.media
 
     if (mediaKey === 'image') {
       return <img src={`https://source.unsplash.com/${width * 2}x${height * 2}/?abstract`} />
@@ -71,9 +72,7 @@ export default function PortableTextPreviewStory() {
 
   const previewProps: Omit<PreviewProps, 'renderDefault'> = useMemo(
     () => ({
-      actions: withActions && (
-        <Button fontSize={1} icon={EllipsisVerticalIcon} mode="bleed" paddingX={2} />
-      ),
+      actions: withActions && <ContextMenuButton />,
       isPlaceholder,
       media,
       status: status && (
diff --git a/packages/sanity/src/core/components/previews/_common/Media.styled.ts b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
index a991ef8c6a9..7e22c7608fb 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.styled.ts
+++ b/packages/sanity/src/core/components/previews/_common/Media.styled.ts
@@ -1,6 +1,6 @@
 import {rem} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {PREVIEW_ICON_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewLayoutKey, PreviewMediaDimensions} from '../types'
 
 export const MediaWrapper = styled.span<{
@@ -12,7 +12,7 @@ export const MediaWrapper = styled.span<{
   const {$dimensions, $layout, $radius, $responsive} = props
   const width = $dimensions.width || 0
   const height = $dimensions.width || 0
-  const iconSize = PREVIEW_ICON_SIZE[$layout]
+  const iconSize = PREVIEW_SIZES[$layout].icon
 
   return css`
     position: relative;
@@ -37,6 +37,7 @@ export const MediaWrapper = styled.span<{
     }
 
     & svg {
+      color: var(--card-icon-color);
       display: block;
       flex: 1;
       font-size: calc(21 / 16 * 1em);
@@ -47,14 +48,7 @@ export const MediaWrapper = styled.span<{
       font-size: calc(${iconSize} / 16 * 1em);
     }
 
-    /*
-      NOTE on why we can’t use the ":after" pseudo-element:
-      The thing is we only want the shadow when then <MediaWrapper> contains
-      something else than <svg> – icons should not have the shadow.
-      This is why we use the "*:not(svg) + span" selector to target only that
-      situation to render the shadow.
-    */
-    & *:not(svg) + span {
+    & > span[data-border] {
       display: block;
       position: absolute;
       left: 0;
@@ -62,8 +56,9 @@ export const MediaWrapper = styled.span<{
       right: 0;
       bottom: 0;
       box-shadow: inset 0 0 0 1px var(--card-fg-color);
-      opacity: 0.2;
+      opacity: 0.1;
       border-radius: inherit;
+      pointer-events: none;
     }
   `
 })
diff --git a/packages/sanity/src/core/components/previews/_common/Media.tsx b/packages/sanity/src/core/components/previews/_common/Media.tsx
index 6142cebff3b..e7fc1e203ca 100644
--- a/packages/sanity/src/core/components/previews/_common/Media.tsx
+++ b/packages/sanity/src/core/components/previews/_common/Media.tsx
@@ -30,7 +30,7 @@ export function Media(props: MediaProps) {
       data-testid="Media"
     >
       {renderMedia({dimensions, layout, media})}
-      {border && <span />}
+      {border && <span data-border />}
     </MediaWrapper>
   )
 }
@@ -52,7 +52,7 @@ function renderMedia(props: {
 
   if (typeof media === 'string') {
     return (
-      <Text as="span" className={styles?.mediaString}>
+      <Text as="span" className={styles?.mediaString} size={1}>
         {media}
       </Text>
     )
diff --git a/packages/sanity/src/core/components/previews/constants.ts b/packages/sanity/src/core/components/previews/constants.ts
index 1dbbf0e6482..3f362e3e7ba 100644
--- a/packages/sanity/src/core/components/previews/constants.ts
+++ b/packages/sanity/src/core/components/previews/constants.ts
@@ -1,19 +1,38 @@
 import {PreviewLayoutKey} from './types'
 
-export const PREVIEW_MEDIA_SIZE: Record<PreviewLayoutKey, {width: number; height: number}> = {
-  block: {width: 33, height: 33},
-  blockImage: {width: 600, height: 400},
-  default: {width: 35, height: 35},
-  detail: {width: 75, height: 75},
-  inline: {width: 15, height: 15},
-  media: {width: 160, height: 160},
-}
-
-export const PREVIEW_ICON_SIZE: Record<PreviewLayoutKey, number | undefined> = {
-  block: 31,
-  blockImage: 45,
-  default: 33,
-  detail: 45,
-  inline: 15,
-  media: 45,
+export const PREVIEW_SIZES: Record<
+  PreviewLayoutKey,
+  {
+    icon: number
+    media: {height: number; width: number}
+  }
+> = {
+  block: {
+    icon: 25,
+    media: {width: 33, height: 33},
+  },
+  blockImage: {
+    icon: 25,
+    media: {width: 600, height: 400},
+  },
+  compact: {
+    icon: 21,
+    media: {width: 25, height: 25},
+  },
+  default: {
+    icon: 21,
+    media: {width: 33, height: 33},
+  },
+  detail: {
+    icon: 25,
+    media: {width: 73, height: 73},
+  },
+  inline: {
+    icon: 15,
+    media: {width: 15, height: 15},
+  },
+  media: {
+    icon: 25,
+    media: {width: 160, height: 160},
+  },
 }
diff --git a/packages/sanity/src/core/components/previews/general/CompactPreview.tsx b/packages/sanity/src/core/components/previews/general/CompactPreview.tsx
new file mode 100644
index 00000000000..e48532b30df
--- /dev/null
+++ b/packages/sanity/src/core/components/previews/general/CompactPreview.tsx
@@ -0,0 +1,101 @@
+import {Box, Flex, Skeleton, Stack, Text, TextSkeleton, rem} from '@sanity/ui'
+import styled from 'styled-components'
+import {getDevicePixelRatio} from 'use-device-pixel-ratio'
+import {useTranslation} from '../../../i18n'
+import {PreviewMediaDimensions, PreviewProps} from '../types'
+import {PREVIEW_SIZES} from '../constants'
+import {renderPreviewNode} from '../helpers'
+import {Media} from '../_common/Media'
+
+/**
+ * @hidden
+ * @beta */
+export type CompactPreviewProps = Omit<PreviewProps<'compact'>, 'renderDefault'>
+
+const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
+  ...PREVIEW_SIZES.compact.media,
+  aspect: 1,
+  fit: 'crop',
+  dpr: getDevicePixelRatio(),
+}
+
+const Root = styled(Flex)`
+  height: ${rem(PREVIEW_SIZES.compact.media.height)};
+`
+
+const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
+  max-width: ${rem(160)};
+  width: 80%;
+`
+
+/**
+ * @hidden
+ * @beta */
+export function CompactPreview(props: CompactPreviewProps) {
+  const {children, isPlaceholder, media, status, title} = props
+
+  const {t} = useTranslation()
+
+  const statusNode = status && (
+    <Box data-testid="compact-preview__status" paddingLeft={4} paddingRight={1}>
+      {renderPreviewNode(status, 'compact')}
+    </Box>
+  )
+
+  if (isPlaceholder) {
+    return (
+      <Root
+        align="center"
+        data-testid="default-preview"
+        paddingLeft={media ? 1 : 2}
+        paddingRight={2}
+        paddingY={1}
+      >
+        <Flex align="center" flex={1} gap={2}>
+          {media && <Skeleton animated radius={2} style={PREVIEW_SIZES.compact.media} />}
+
+          <Stack data-testid="compact-preview__heading" flex={1} space={2}>
+            <TitleSkeleton />
+          </Stack>
+
+          {statusNode}
+        </Flex>
+      </Root>
+    )
+  }
+
+  return (
+    <Root
+      align="center"
+      data-testid="compact-preview"
+      paddingLeft={media ? 1 : 2}
+      paddingRight={2}
+      paddingY={1}
+    >
+      <Flex align="center" flex={1} gap={2}>
+        {media && (
+          <Media
+            border={false}
+            dimensions={DEFAULT_MEDIA_DIMENSIONS}
+            layout="compact"
+            media={media as any}
+          />
+        )}
+        <Stack data-testid="compact-preview__header" flex={1} space={2}>
+          <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis" weight="medium">
+            {title && renderPreviewNode(title, 'compact')}
+            {!title && (
+              <span style={{color: 'var(--card-muted-fg-color)'}}>
+                {t('preview.default.title-fallback')}
+              </span>
+            )}
+          </Text>
+        </Stack>
+
+        {statusNode}
+      </Flex>
+
+      {children && <Box marginLeft={1}>{children}</Box>}
+    </Root>
+  )
+}
diff --git a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
index 5c6666aa420..e45e113baa6 100644
--- a/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/DefaultPreview.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {useTranslation} from '../../../i18n'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import type {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 
@@ -28,17 +28,17 @@ export interface DefaultPreviewProps extends Omit<PreviewProps<'default'>, 'rend
 }
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.default,
+  ...PREVIEW_SIZES.default.media,
   aspect: 1,
   fit: 'crop',
   dpr: getDevicePixelRatio(),
 }
 
 const Root = styled(Flex)`
-  height: ${rem(PREVIEW_MEDIA_SIZE.default.height)};
+  height: ${rem(PREVIEW_SIZES.default.media.height)};
 `
 
-const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
+const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
   max-width: ${rem(160)};
   width: 80%;
 `
@@ -57,77 +57,89 @@ export function DefaultPreview(props: DefaultPreviewProps) {
   const rootClassName = classNames(styles?.root, Boolean(subtitle) && styles?.hasSubtitle)
 
   const statusNode = status && (
-    <Box
-      className={styles?.status}
-      data-testid="default-preview__status"
-      paddingLeft={3}
-      paddingRight={1}
-    >
+    <Box className={styles?.status} data-testid="default-preview__status">
       {renderPreviewNode(status, 'default')}
     </Box>
   )
 
   if (isPlaceholder) {
     return (
-      <Root align="center" className={styles?.placeholder} data-testid="default-preview">
-        {media !== false && (
-          <Skeleton animated marginRight={2} radius={2} style={PREVIEW_MEDIA_SIZE.default} />
-        )}
+      <Root
+        align="center"
+        className={styles?.placeholder}
+        data-testid="default-preview"
+        padding={2}
+        paddingLeft={media ? 2 : 3}
+      >
+        <Flex align="center" flex={1} gap={2}>
+          {media && (
+            <Box flex="none">
+              <Skeleton animated radius={1} style={PREVIEW_SIZES.default.media} />
+            </Box>
+          )}
 
-        <Stack
-          data-testid="default-preview__heading"
-          flex={1}
-          paddingLeft={media === false ? 1 : 2}
-          paddingRight={status ? 0 : 1}
-          space={2}
-        >
-          <TitleSkeleton />
-          <SubtitleSkeleton />
-        </Stack>
+          <Stack data-testid="default-preview__heading" flex={1} space={2}>
+            <TitleSkeleton />
+            <SubtitleSkeleton />
+          </Stack>
 
-        {statusNode}
+          <Box flex="none" padding={1}>
+            {statusNode}
+          </Box>
+        </Flex>
       </Root>
     )
   }
 
   return (
-    <Root align="center" className={rootClassName} data-testid="default-preview">
-      {media !== false && media !== undefined && (
-        <Media
-          dimensions={DEFAULT_MEDIA_DIMENSIONS}
-          layout="default"
-          media={media as any}
-          styles={styles}
-        />
-      )}
+    <Root
+      align="center"
+      className={rootClassName}
+      data-testid="default-preview"
+      padding={2}
+      paddingLeft={media ? 2 : 3}
+    >
+      <Flex align="center" flex={1} gap={2}>
+        {media && (
+          <Box flex="none">
+            <Media
+              dimensions={DEFAULT_MEDIA_DIMENSIONS}
+              layout="default"
+              media={media as any}
+              styles={styles}
+            />
+          </Box>
+        )}
 
-      <Stack
-        className={styles?.heading}
-        data-testid="default-preview__header"
-        flex={1}
-        paddingLeft={media ? 2 : 1}
-        paddingRight={status ? 0 : 1}
-        space={2}
-      >
-        <Text className={styles?.title} style={{color: 'inherit'}} textOverflow="ellipsis">
-          {title && renderPreviewNode(title, 'default')}
-          {!title && (
-            <span style={{color: 'var(--card-muted-fg-color)'}}>
-              {t('preview.default.title-fallback')}
-            </span>
+        <Stack className={styles?.heading} data-testid="default-preview__header" flex={1} space={2}>
+          <Text
+            className={styles?.title}
+            size={1}
+            style={{color: 'inherit'}}
+            textOverflow="ellipsis"
+            weight="medium"
+          >
+            {title && renderPreviewNode(title, 'default')}
+            {!title && (
+              <span style={{color: 'var(--card-muted-fg-color)'}}>
+                {t('preview.default.title-fallback')}
+              </span>
+            )}
+          </Text>
+
+          {subtitle && (
+            <Text muted size={1} textOverflow="ellipsis" className={styles?.subtitle}>
+              {renderPreviewNode(subtitle, 'default')}
+            </Text>
           )}
-        </Text>
+        </Stack>
 
-        {subtitle && (
-          <Text muted size={1} textOverflow="ellipsis" className={styles?.subtitle}>
-            {renderPreviewNode(subtitle, 'default')}
-          </Text>
-        )}
+        <Box flex="none" padding={1}>
+          {statusNode}
+        </Box>
 
         {children && <div className={styles?.children}>{children}</div>}
-      </Stack>
-
-      {statusNode}
+      </Flex>
     </Root>
   )
 }
diff --git a/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts b/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
index eb891a83eec..727d456dbda 100644
--- a/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
+++ b/packages/sanity/src/core/components/previews/general/DetailPreview.styled.ts
@@ -1,9 +1,9 @@
 import {Box, Flex, rem, Skeleton, Text, TextSkeleton} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 export const RootFlex = styled(Flex).attrs({align: 'center'})`
-  height: ${rem(PREVIEW_MEDIA_SIZE.detail.height)};
+  height: ${rem(PREVIEW_SIZES.detail.media.height)};
 `
 
 export const StatusBox = styled(Box)`
@@ -11,11 +11,11 @@ export const StatusBox = styled(Box)`
 `
 
 export const MediaSkeleton = styled(Skeleton).attrs({animated: true, radius: 2})`
-  width: ${rem(PREVIEW_MEDIA_SIZE.detail.width)};
-  height: ${rem(PREVIEW_MEDIA_SIZE.detail.height)};
+  width: ${rem(PREVIEW_SIZES.detail.media.width)};
+  height: ${rem(PREVIEW_SIZES.detail.media.height)};
 `
 
-export const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
+export const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1, size: 1})`
   max-width: ${rem(160)}; /* 80% of 200px */
   width: 80%;
 `
diff --git a/packages/sanity/src/core/components/previews/general/DetailPreview.tsx b/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
index d38bd20e313..97a9f8974ef 100644
--- a/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/DetailPreview.tsx
@@ -3,7 +3,7 @@ import {Box, Flex, Stack, Text} from '@sanity/ui'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {useTranslation} from '../../../i18n'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import type {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 import {
@@ -22,7 +22,7 @@ import {
 export type DetailPreviewProps = PreviewProps<'detail'>
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.detail,
+  ...PREVIEW_SIZES.detail.media,
   fit: 'crop',
   aspect: 1,
   dpr: getDevicePixelRatio(),
@@ -52,39 +52,46 @@ export function DetailPreview(props: DetailPreviewProps) {
 
   if (isPlaceholder) {
     return (
-      <RootFlex data-testid="detail-preview">
-        {media !== false && <MediaSkeleton data-testid="detail-preview__media" />}
+      <RootFlex
+        data-testid="detail-preview"
+        paddingLeft={media ? 2 : 3}
+        paddingRight={2}
+        paddingY={2}
+      >
+        <Flex align="center" flex={1} gap={3}>
+          {media && <MediaSkeleton data-testid="detail-preview__media" />}
 
-        <Box flex={1} paddingLeft={media === false ? 1 : 2}>
-          <Flex align="center" data-testid="detail-preview__header">
+          <Flex align="center" data-testid="detail-preview__header" flex={1}>
             <Stack flex={1} space={2}>
               <TitleSkeleton />
               <SubtitleSkeleton />
+              {description && (
+                <Box marginTop={1}>
+                  <DescriptionSkeleton />
+                </Box>
+              )}
             </Stack>
-
-            {statusNode}
           </Flex>
 
-          {description && (
-            <Box marginTop={3}>
-              <DescriptionSkeleton />
-            </Box>
-          )}
-        </Box>
+          {statusNode}
+        </Flex>
       </RootFlex>
     )
   }
 
   return (
-    <RootFlex data-testid="detail-preview">
-      {media !== false && (
-        <Media dimensions={mediaDimensions} layout="detail" media={media as any} />
-      )}
+    <RootFlex
+      data-testid="detail-preview"
+      paddingLeft={media ? 2 : 3}
+      paddingRight={2}
+      paddingY={2}
+    >
+      <Flex align="center" flex={1} gap={3}>
+        {media && <Media dimensions={mediaDimensions} layout="detail" media={media as any} />}
 
-      <Box flex={1} paddingLeft={media === false ? 1 : 2}>
-        <Flex align="center" data-testid="detail-preview__header">
+        <Flex align="center" data-testid="detail-preview__header" flex={1}>
           <Stack flex={1} space={2}>
-            <Text textOverflow="ellipsis" style={{color: 'inherit'}}>
+            <Text textOverflow="ellipsis" size={1} style={{color: 'inherit'}} weight="medium">
               {title && renderPreviewNode(title, 'detail')}
               {!title && <>{t('preview.default.title-fallback')}</>}
             </Text>
@@ -94,21 +101,21 @@ export function DetailPreview(props: DetailPreviewProps) {
                 {renderPreviewNode(subtitle, 'detail')}
               </Text>
             )}
+
+            {description && (
+              <Box marginTop={1}>
+                <DescriptionText muted size={1}>
+                  {renderPreviewNode(description, 'detail')}
+                </DescriptionText>
+              </Box>
+            )}
           </Stack>
 
           {statusNode}
         </Flex>
 
-        {description && (
-          <Box marginTop={3}>
-            <DescriptionText muted size={1}>
-              {renderPreviewNode(description, 'detail')}
-            </DescriptionText>
-          </Box>
-        )}
-      </Box>
-
-      {children}
+        {children}
+      </Flex>
     </RootFlex>
   )
 }
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts b/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
index a2bc2d44c8e..a37b38cf1e3 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
@@ -1,4 +1,4 @@
-import {Box, Flex, rem, Skeleton, Stack} from '@sanity/ui'
+import {Box, Card, Flex, rem, Skeleton, Stack} from '@sanity/ui'
 import styled from 'styled-components'
 
 export const RootBox = styled(Box)`
@@ -43,6 +43,6 @@ export const ProgressFlex = styled(Flex).attrs({align: 'center', justify: 'cente
   }
 `
 
-export const TooltipContentStack = styled(Stack).attrs({padding: 2, space: 2})`
+export const TooltipContentStack = styled(Stack).attrs({space: 2})`
   max-width: ${rem(200)};
 `
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
index 53929b31d18..eca79d4c1b3 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
@@ -1,9 +1,10 @@
 import React, {useMemo} from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-import {Text, Tooltip} from '@sanity/ui'
+import {Box, Text} from '@sanity/ui'
+import {Tooltip} from '../../../../ui-components'
 import {CircularProgress} from '../../progress'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 import {
@@ -20,7 +21,7 @@ import {
 export type MediaPreviewProps = Omit<PreviewProps<'media'>, 'renderDefault'>
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.media,
+  ...PREVIEW_SIZES.media.media,
   aspect: 1,
   fit: 'crop',
   dpr: getDevicePixelRatio(),
@@ -54,7 +55,7 @@ export function MediaPreview(props: MediaPreviewProps) {
     return (
       <TooltipContentStack>
         {title && (
-          <Text align="center" size={1} weight="semibold">
+          <Text align="center" size={1} weight="medium">
             {renderPreviewNode(title, 'media')}
           </Text>
         )}
@@ -69,33 +70,35 @@ export function MediaPreview(props: MediaPreviewProps) {
   }, [subtitle, title])
 
   return (
-    <RootBox data-testid="media-preview" overflow="hidden" flex={1}>
-      <div style={STYLES_PADDER} />
+    <Box padding={2}>
+      <RootBox data-testid="media-preview" flex={1} overflow="hidden">
+        <div style={STYLES_PADDER} />
 
-      <Tooltip content={tooltipContent} disabled={!tooltipContent} placement="top" portal>
-        <MediaFlex>
-          {isPlaceholder ? (
-            <MediaSkeleton />
-          ) : (
-            <Media
-              border={withBorder}
-              dimensions={mediaDimensions}
-              layout="media"
-              media={media as any}
-              radius={withRadius ? 1 : 0}
-              responsive
-            />
-          )}
+        <Tooltip content={tooltipContent} disabled={!tooltipContent} placement="top" portal>
+          <MediaFlex>
+            {isPlaceholder ? (
+              <MediaSkeleton />
+            ) : (
+              <Media
+                border={withBorder}
+                dimensions={mediaDimensions}
+                layout="media"
+                media={media as any}
+                radius={withRadius ? 1 : 0}
+                responsive
+              />
+            )}
 
-          {typeof progress === 'number' && progress > -1 && (
-            <ProgressFlex>
-              <CircularProgress value={progress} />
-            </ProgressFlex>
-          )}
-        </MediaFlex>
-      </Tooltip>
+            {typeof progress === 'number' && progress > -1 && (
+              <ProgressFlex>
+                <CircularProgress value={progress} />
+              </ProgressFlex>
+            )}
+          </MediaFlex>
+        </Tooltip>
 
-      {children}
-    </RootBox>
+        {children}
+      </RootBox>
+    </Box>
   )
 }
diff --git a/packages/sanity/src/core/components/previews/index.ts b/packages/sanity/src/core/components/previews/index.ts
index b47c0e4bfdd..bb8f11ac431 100644
--- a/packages/sanity/src/core/components/previews/index.ts
+++ b/packages/sanity/src/core/components/previews/index.ts
@@ -1,6 +1,7 @@
 export * from './types'
 
 // General previews
+export * from './general/CompactPreview'
 export * from './general/DefaultPreview'
 export * from './general/DetailPreview'
 export * from './general/MediaPreview'
diff --git a/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.styled.tsx b/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.styled.tsx
index d5bbb167efe..c8debd7ca63 100644
--- a/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.styled.tsx
+++ b/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.styled.tsx
@@ -1,16 +1,16 @@
 import {Box, Card, Flex, rem} from '@sanity/ui'
 import styled from 'styled-components'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 export const HeaderFlex = styled(Flex).attrs({align: 'center'})`
-  box-shadow: 0 0 0 1px var(--card-border-color);
-  height: ${rem(PREVIEW_MEDIA_SIZE.block.height)};
+  height: ${rem(PREVIEW_SIZES.block.media.height)};
   white-space: nowrap;
   position: relative;
   z-index: 1;
 `
 
 export const MediaCard = styled(Card)<{$ratio: number}>`
+  overflow: hidden;
   position: relative;
   padding-bottom: ${({$ratio}) => $ratio}%;
 
diff --git a/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.tsx b/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.tsx
index 48841bdd5c6..1a1c785bf0f 100644
--- a/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.tsx
+++ b/packages/sanity/src/core/components/previews/portableText/BlockImagePreview.tsx
@@ -2,7 +2,7 @@ import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 import {HeaderFlex, MediaCard, RootBox} from './BlockImagePreview.styled'
@@ -13,7 +13,7 @@ import {HeaderFlex, MediaCard, RootBox} from './BlockImagePreview.styled'
 export type BlockImagePreviewProps = Omit<PreviewProps<'blockImage'>, 'renderDefault'>
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.blockImage,
+  ...PREVIEW_SIZES.blockImage.media,
   fit: 'fillmax',
   dpr: getDevicePixelRatio(),
 }
@@ -47,10 +47,10 @@ export function BlockImagePreview(props: BlockImagePreviewProps) {
   return (
     <RootBox>
       <Stack>
-        <HeaderFlex paddingLeft={2} paddingRight={1} paddingY={1}>
+        <HeaderFlex paddingBottom={3} paddingLeft={2} paddingRight={1} paddingTop={1}>
           <Stack flex={1} space={2}>
             {(title || fallbackTitle) && (
-              <Text size={1} textOverflow="ellipsis" weight="semibold">
+              <Text size={1} textOverflow="ellipsis" weight="medium">
                 {title ? renderPreviewNode(title as any, 'block') : fallbackTitle}
               </Text>
             )}
@@ -78,6 +78,7 @@ export function BlockImagePreview(props: BlockImagePreviewProps) {
           __unstable_checkered
           display="flex"
           sizing="border"
+          radius={2}
           tone="inherit"
         >
           <Media
diff --git a/packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx b/packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx
index b8475c9f0e5..4420da9b659 100644
--- a/packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx
+++ b/packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx
@@ -3,19 +3,19 @@ import React from 'react'
 import styled from 'styled-components'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {Media} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.block,
+  ...PREVIEW_SIZES.block.media,
   aspect: 1,
   fit: 'crop',
   dpr: getDevicePixelRatio(),
 }
 
 const HeaderFlex = styled(Flex).attrs({align: 'center'})`
-  min-height: ${rem(PREVIEW_MEDIA_SIZE.block.height)};
+  min-height: ${rem(PREVIEW_SIZES.block.media.height)};
 `
 
 /**
@@ -39,7 +39,7 @@ export function BlockPreview(props: Omit<PreviewProps<'block'>, 'renderDefault'>
         {media && <Media dimensions={mediaDimensions} layout="block" media={media as any} />}
 
         <Box flex={1} paddingLeft={media ? 2 : 1}>
-          <Text size={1} textOverflow="ellipsis" weight="semibold">
+          <Text size={1} textOverflow="ellipsis" weight="medium">
             {title ? renderPreviewNode(title, 'block') : 'Untitled'}
           </Text>
 
diff --git a/packages/sanity/src/core/components/previews/portableText/InlinePreview.tsx b/packages/sanity/src/core/components/previews/portableText/InlinePreview.tsx
index 58c431ff8a4..2e082f0dafa 100644
--- a/packages/sanity/src/core/components/previews/portableText/InlinePreview.tsx
+++ b/packages/sanity/src/core/components/previews/portableText/InlinePreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 import {renderPreviewMedia, renderPreviewNode} from '../helpers'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {RootSpan, MediaSpan, TextSpan} from './InlinePreview.styled'
@@ -11,7 +11,7 @@ import {RootSpan, MediaSpan, TextSpan} from './InlinePreview.styled'
 export type InlinePreviewProps = Omit<PreviewProps<'inline'>, 'renderDefault'>
 
 const DEFAULT_MEDIA_DIMENSIONS: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.inline,
+  ...PREVIEW_SIZES.inline.media,
   fit: 'crop',
   aspect: 1,
   dpr: getDevicePixelRatio(),
diff --git a/packages/sanity/src/core/components/previews/template/TemplatePreview.tsx b/packages/sanity/src/core/components/previews/template/TemplatePreview.tsx
index 6c7bebebc9a..9153d69da25 100644
--- a/packages/sanity/src/core/components/previews/template/TemplatePreview.tsx
+++ b/packages/sanity/src/core/components/previews/template/TemplatePreview.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 import {PreviewMediaDimensions} from '../types'
 import {Media, MediaProps} from '../_common/Media'
-import {PREVIEW_MEDIA_SIZE} from '../constants'
+import {PREVIEW_SIZES} from '../constants'
 
 /**
  * @hidden
@@ -20,7 +20,7 @@ export interface TemplatePreviewProps {
 }
 
 const DEFAULT_MEDIA_DIMENSION: PreviewMediaDimensions = {
-  ...PREVIEW_MEDIA_SIZE.default,
+  ...PREVIEW_SIZES.default.media,
   aspect: 1,
   fit: 'crop',
   dpr: getDevicePixelRatio(),
@@ -40,7 +40,7 @@ const Root = styled(Box)`
 `
 
 const HeaderFlex = styled(Flex).attrs({align: 'center'})`
-  height: ${rem(PREVIEW_MEDIA_SIZE.default.height)};
+  height: ${rem(PREVIEW_SIZES.default.media.height)};
 `
 
 const TitleSkeleton = styled(TextSkeleton).attrs({animated: true, radius: 1})`
diff --git a/packages/sanity/src/core/components/previews/types.ts b/packages/sanity/src/core/components/previews/types.ts
index 105b360e3db..09c6c18d1f2 100644
--- a/packages/sanity/src/core/components/previews/types.ts
+++ b/packages/sanity/src/core/components/previews/types.ts
@@ -13,7 +13,7 @@ export type PortableTextPreviewLayoutKey = 'block' | 'blockImage' | 'inline'
  *
  * @public
  */
-export type GeneralPreviewLayoutKey = 'default' | 'media' | 'detail'
+export type GeneralPreviewLayoutKey = 'compact' | 'default' | 'media' | 'detail'
 
 /**
  * Preview layout key. See also {@link GeneralPreviewLayoutKey} and {@link PortableTextPreviewLayoutKey}
diff --git a/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx b/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
index 56484a2f9b0..125c30a0dd1 100644
--- a/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
+++ b/packages/sanity/src/core/components/rovingFocus/__tests__/useRovingFocus.test.tsx
@@ -3,8 +3,9 @@ import '@testing-library/jest-dom/extend-expect'
 import {render, fireEvent} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React, {useState} from 'react'
-import {Button, Card, studioTheme, ThemeProvider} from '@sanity/ui'
+import {Card, studioTheme, ThemeProvider} from '@sanity/ui'
 import {RovingFocusProps} from '../types'
+import {Button} from '../../../../ui-components'
 import {useRovingFocus} from '../useRovingFocus'
 
 interface TestProps extends Pick<RovingFocusProps, 'direction' | 'initialFocus' | 'loop'> {
diff --git a/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx b/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
index af2ea21e98d..6ee6c0be84f 100644
--- a/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
+++ b/packages/sanity/src/core/components/rovingFocus/__workshop__/RovingFocusStory.tsx
@@ -1,7 +1,8 @@
-import {Button, Card, Flex} from '@sanity/ui'
+import {Card, Flex} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useState} from 'react'
 import {useRovingFocus} from '../useRovingFocus'
+import {Button} from '../../../../ui-components'
 
 const DIRECTION_OPTIONS: Record<string, 'horizontal' | 'vertical'> = {
   horizontal: 'horizontal',
@@ -48,8 +49,6 @@ export default function RovingFocusStory() {
               disabled={Boolean(withDisabled && num % 2)}
               key={num}
               mode="ghost"
-              padding={2}
-              fontSize={1}
             />
           ))}
         </Flex>
diff --git a/packages/sanity/src/core/components/textWithTone/TextWithTone.tsx b/packages/sanity/src/core/components/textWithTone/TextWithTone.tsx
index 79d5bbc9d86..3db6fb9611a 100644
--- a/packages/sanity/src/core/components/textWithTone/TextWithTone.tsx
+++ b/packages/sanity/src/core/components/textWithTone/TextWithTone.tsx
@@ -1,4 +1,4 @@
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import {ButtonTone, Text} from '@sanity/ui'
 import React, {ComponentProps} from 'react'
 
@@ -9,19 +9,29 @@ export interface TextWithToneProps extends ComponentProps<typeof Text> {
 }
 
 /** @internal */
-const TextWithToneStyle = styled(Text)<{$tone: ButtonTone}>(({$tone, theme}) => {
-  const tone = theme.sanity.color.muted[$tone]
-
-  return css`
-    &:not([data-muted]) {
-      --card-fg-color: ${tone ? tone.enabled.fg : undefined};
+const TextWithToneStyle = styled(Text)`
+  &:not([data-muted]) {
+    &[data-tone='default'] {
+      --card-fg-color: var(--card-badge-default-fg-color);
     }
-
-    &[data-dimmed] {
-      opacity: 0.3;
+    &[data-tone='primary'] {
+      --card-fg-color: var(--card-badge-primary-fg-color);
     }
-  `
-})
+    &[data-tone='positive'] {
+      --card-fg-color: var(--card-badge-positive-fg-color);
+    }
+    &[data-tone='caution'] {
+      --card-fg-color: var(--card-badge-caution-fg-color);
+    }
+    &[data-tone='critical'] {
+      --card-fg-color: var(--card-badge-critical-fg-color);
+    }
+  }
+
+  &[data-dimmed] {
+    opacity: 0.3;
+  }
+`
 
 /** @internal */
 export const TextWithTone = React.forwardRef(function TextWithTone(
@@ -35,7 +45,7 @@ export const TextWithTone = React.forwardRef(function TextWithTone(
       data-ui="TextWithTone"
       data-dimmed={dimmed ? '' : undefined}
       data-muted={muted ? '' : undefined}
-      $tone={tone}
+      data-tone={tone}
       muted={muted}
       ref={ref}
       {...rest}
diff --git a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
index 1ed0aefd150..f160d9e99ed 100644
--- a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
+++ b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
@@ -1,14 +1,16 @@
-import {Avatar, AvatarPosition, AvatarSize, AvatarStatus, Box, Text, Tooltip} from '@sanity/ui'
+import {Avatar, AvatarPosition, AvatarProps, AvatarSize, AvatarStatus} from '@sanity/ui'
 import React, {forwardRef, useState} from 'react'
 import type {User} from '@sanity/types'
 import {useUser} from '../../store'
 import {isRecord} from '../../util'
 import {useUserColor} from '../../user-color'
+import {Tooltip} from '../../../ui-components'
 
 /**
  * @hidden
  * @beta */
 export interface UserAvatarProps {
+  __unstable_hideInnerStroke?: AvatarProps['__unstable_hideInnerStroke']
   animateArrowFrom?: AvatarPosition
   position?: AvatarPosition
   size?: AvatarSize
@@ -60,15 +62,7 @@ function TooltipUserAvatar(props: Omit<UserAvatarProps, 'user'> & {user: User})
   } = props
 
   return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>{displayName}</Text>
-        </Box>
-      }
-      placement="top"
-      portal
-    >
+    <Tooltip content={displayName} placement="top" portal>
       <div style={{display: 'inline-block'}}>
         <StaticUserAvatar {...props} />
       </div>
@@ -87,6 +81,7 @@ const StaticUserAvatar = forwardRef(function StaticUserAvatar(
 
   return (
     <Avatar
+      __unstable_hideInnerStroke
       animateArrowFrom={animateArrowFrom}
       arrowPosition={position}
       color={userColor.name}
diff --git a/packages/sanity/src/core/config/createDefaultIcon.tsx b/packages/sanity/src/core/config/createDefaultIcon.tsx
index 2c5a9efa0fe..eb61b68c7ee 100644
--- a/packages/sanity/src/core/config/createDefaultIcon.tsx
+++ b/packages/sanity/src/core/config/createDefaultIcon.tsx
@@ -12,9 +12,9 @@ function pseudoRandomNumber(seed: string) {
 }
 
 const SvgText = styled.text`
-  font-family: ${({theme}) => theme.sanity.fonts.heading.family};
-  font-weight: ${({theme}) => theme.sanity.fonts.heading.weights.bold};
-  font-size: 16px;
+  font-family: ${({theme}) => theme.sanity.fonts.text.family};
+  font-weight: ${({theme}) => theme.sanity.fonts.text.weights.medium};
+  font-size: ${({theme}) => theme.sanity.fonts.text.sizes[1].fontSize}px;
   transform: translateY(1px);
 `
 
diff --git a/packages/sanity/src/core/config/document/actions.ts b/packages/sanity/src/core/config/document/actions.ts
index f5785606a8a..8dd19dc45fb 100644
--- a/packages/sanity/src/core/config/document/actions.ts
+++ b/packages/sanity/src/core/config/document/actions.ts
@@ -1,6 +1,7 @@
 import {type ButtonTone} from '@sanity/ui'
 import type React from 'react'
 import {type EditStateFor} from '../../store/_legacy'
+import {DialogProps} from '../../../ui-components'
 
 /**
  * @hidden
@@ -52,9 +53,9 @@ export interface DocumentActionConfirmDialogProps {
   onConfirm: () => void
   onCancel: () => void
   cancelButtonIcon?: React.ComponentType | React.ReactNode
-  cancelButtonText?: React.ReactNode
+  cancelButtonText?: string
   confirmButtonIcon?: React.ComponentType | React.ReactNode
-  confirmButtonText?: React.ReactNode
+  confirmButtonText?: string
 }
 
 /**
@@ -68,7 +69,7 @@ export interface DocumentActionModalDialogProps {
    * @hidden
    * @beta
    */
-  footer?: React.ReactNode
+  footer?: DialogProps['footer']
   /**
    *
    * @hidden
diff --git a/packages/sanity/src/core/config/prepareConfig.ts b/packages/sanity/src/core/config/prepareConfig.ts
index efb756ce18d..8ce1dad46d9 100644
--- a/packages/sanity/src/core/config/prepareConfig.ts
+++ b/packages/sanity/src/core/config/prepareConfig.ts
@@ -185,6 +185,7 @@ export function prepareConfig(
       dataset: rootSource.dataset,
       schema: resolvedSources[0].schema,
       i18n: resolvedSources[0].i18n,
+      customIcon: !!rootSource.icon,
       icon: normalizeIcon(rootSource.icon, title, `${rootSource.projectId} ${rootSource.dataset}`),
       name: rootSource.name || 'default',
       projectId: rootSource.projectId,
diff --git a/packages/sanity/src/core/config/studio/types.ts b/packages/sanity/src/core/config/studio/types.ts
index fb68030c958..cd043ee4013 100644
--- a/packages/sanity/src/core/config/studio/types.ts
+++ b/packages/sanity/src/core/config/studio/types.ts
@@ -52,6 +52,7 @@ export interface StudioComponents {
  * @beta */
 export interface StudioComponentsPluginOptions {
   layout?: React.ComponentType<LayoutProps>
+  /** @deprecated Use logoMark instead */
   logo?: React.ComponentType<LogoProps>
   navbar?: React.ComponentType<NavbarProps>
   toolMenu?: React.ComponentType<ToolMenuProps>
diff --git a/packages/sanity/src/core/config/types.ts b/packages/sanity/src/core/config/types.ts
index b520d0fb48e..7f9c866bfea 100644
--- a/packages/sanity/src/core/config/types.ts
+++ b/packages/sanity/src/core/config/types.ts
@@ -107,6 +107,8 @@ export interface Tool<Options = any> {
 
   /**
    * React component for the icon representing the tool.
+   *
+   * @deprecated Tool icons are no longer displayed.
    */
   icon?: ComponentType
 
@@ -716,7 +718,13 @@ export interface WorkspaceSummary {
   type: 'workspace-summary'
   name: string
   title: string
+  /**
+   * User supplied component if provided, otherwise falls back to
+   * an automatically generated default icon.
+   */
   icon: ReactNode
+  /** Returns true if a custom icon has been provided in studio config */
+  customIcon: boolean
   subtitle?: string
   basePath: string
   auth: AuthStore
diff --git a/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx b/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
index 2b0ed01319c..b75a1e10652 100644
--- a/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
+++ b/packages/sanity/src/core/field/__workshop__/DiffErrorBoundaryStory.tsx
@@ -1,6 +1,7 @@
-import {Box, Button} from '@sanity/ui'
+import {Box} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {DiffErrorBoundary} from '../diff/components/DiffErrorBoundary'
+import {Button} from '../../../ui-components'
 import {useTranslation} from '../../i18n'
 
 export default function DiffErrorBoundaryStory() {
diff --git a/packages/sanity/src/core/field/diff/components/ChangeList.styled.tsx b/packages/sanity/src/core/field/diff/components/ChangeList.styled.tsx
index 93a37cb7903..23de881415e 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeList.styled.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeList.styled.tsx
@@ -1,16 +1,6 @@
-import {Popover} from '@sanity/ui'
 import styled from 'styled-components'
 
 export const ChangeListWrapper = styled.div`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 `
-
-export const PopoverWrapper = styled(Popover)`
-  /* hides the popover when the target of it has left the visible part of the window.
-   without it, the popover will be on top of the headers (document title & changes)
-   and footers (changed notifications, publish button etc)*/
-  &[data-popper-reference-hidden='true'] {
-    display: none;
-  }
-`
diff --git a/packages/sanity/src/core/field/diff/components/ChangeList.tsx b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
index cacc649bb20..ed06c1972f9 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeList.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeList.tsx
@@ -1,4 +1,4 @@
-import {Button, Box, Card, Grid, Stack, useClickOutside} from '@sanity/ui'
+import {Box, Card, Flex, Stack, Text, useClickOutside} from '@sanity/ui'
 import {RevertIcon} from '@sanity/icons'
 import React, {useCallback, useContext, useMemo, useState} from 'react'
 import {SanityDocument} from '@sanity/client'
@@ -11,10 +11,11 @@ import {undoChange} from '../changes/undoChange'
 import {useDocumentChange} from '../hooks/useDocumentChange'
 import {useDocumentPairPermissions} from '../../../store'
 import {useDocumentOperation} from '../../../hooks'
+import {Button, Popover} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import {ChangeResolver} from './ChangeResolver'
 import {NoChanges} from './NoChanges'
-import {ChangeListWrapper, PopoverWrapper} from './ChangeList.styled'
+import {ChangeListWrapper} from './ChangeList.styled'
 
 /** @internal */
 export interface ChangeListProps {
@@ -115,13 +116,17 @@ export function ChangeList({diff, fields, schemaType}: ChangeListProps): React.R
         </Stack>
 
         {showFooter && isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
-          <PopoverWrapper
+          <Popover
             content={
-              <Box>
-                {t('changes.action.revert-all-description', {
-                  count: changes.length,
-                })}
-                <Grid columns={2} gap={2} marginTop={2}>
+              <Stack space={3}>
+                <Box paddingY={3}>
+                  <Text size={1}>
+                    {t('changes.action.revert-all-description', {
+                      count: changes.length,
+                    })}
+                  </Text>
+                </Box>
+                <Flex gap={3} justify="flex-end">
                   <Button
                     mode="ghost"
                     text={t('changes.action.revert-all-cancel')}
@@ -132,11 +137,11 @@ export function ChangeList({diff, fields, schemaType}: ChangeListProps): React.R
                     text={t('changes.action.revert-all-confirm')}
                     onClick={revertAllChanges}
                   />
-                </Grid>
-              </Box>
+                </Flex>
+              </Stack>
             }
             open={confirmRevertAllOpen}
-            padding={4}
+            padding={3}
             placement={'left'}
             portal
             ref={setRevertAllContainerElement}
@@ -151,9 +156,10 @@ export function ChangeList({diff, fields, schemaType}: ChangeListProps): React.R
                 onMouseEnter={handleRevertAllChangesMouseEnter}
                 onMouseLeave={handleRevertAllChangesMouseLeave}
                 disabled={isReadOnly}
+                size="large"
               />
             </Stack>
-          </PopoverWrapper>
+          </Popover>
         )}
       </Stack>
     </Card>
diff --git a/packages/sanity/src/core/field/diff/components/ChangeTitleSegment.tsx b/packages/sanity/src/core/field/diff/components/ChangeTitleSegment.tsx
index 7046efcd8d1..e53e349f478 100644
--- a/packages/sanity/src/core/field/diff/components/ChangeTitleSegment.tsx
+++ b/packages/sanity/src/core/field/diff/components/ChangeTitleSegment.tsx
@@ -27,7 +27,7 @@ export function ChangeTitleSegment(props: {
   if (typeof segment === 'string') {
     return (
       <Box>
-        <Text title={segment} size={1} weight="semibold" textOverflow="ellipsis">
+        <Text title={segment} size={1} weight="medium" textOverflow="ellipsis">
           {segment}
         </Text>
       </Box>
@@ -56,7 +56,7 @@ export function ChangeTitleSegment(props: {
   const readableIndex = (toIndex || 0) + 1
   return (
     <Box padding={1}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         #{readableIndex}
       </Text>
     </Box>
@@ -79,12 +79,7 @@ function CreatedTitleSegment(props: {
   if (annotation) {
     return (
       <DiffCard annotation={annotation} tooltip={{description}} as={RoundedCard}>
-        <AnnotationText
-          size={1}
-          weight="semibold"
-          forwardedAs="ins"
-          style={{textDecoration: 'none'}}
-        >
+        <AnnotationText size={1} weight="medium" forwardedAs="ins" style={{textDecoration: 'none'}}>
           {content}
         </AnnotationText>
       </DiffCard>
@@ -92,7 +87,7 @@ function CreatedTitleSegment(props: {
   }
 
   return (
-    <Text size={1} weight="semibold">
+    <Text size={1} weight="medium">
       {content}
     </Text>
   )
@@ -105,7 +100,7 @@ function DeletedTitleSegment(props: {annotation: Annotation | undefined; fromInd
   const description = t('changes.array.item-removed-from-position', {position: readableIndex})
   return (
     <DiffCard annotation={annotation || null} as={RoundedCard} tooltip={{description}}>
-      <AnnotationText size={1} weight="semibold" forwardedAs="del">
+      <AnnotationText size={1} weight="medium" forwardedAs="del">
         #{readableIndex}
       </AnnotationText>
     </DiffCard>
@@ -131,12 +126,12 @@ function MovedTitleSegment(props: {
   return (
     <>
       <Box padding={1}>
-        <AnnotationText size={1} weight="semibold">
+        <AnnotationText size={1} weight="medium">
           #{toIndex + 1}
         </AnnotationText>
       </Box>
       <DiffCard annotation={annotation} as={RoundedCard} tooltip={{description}}>
-        <AnnotationText size={1} weight="semibold">
+        <AnnotationText size={1} weight="medium">
           {indexSymbol}
           {Math.abs(indexDiff)}
         </AnnotationText>
diff --git a/packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx b/packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx
index 0ab95f613de..c467b81aaa0 100644
--- a/packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffInspectWrapper.tsx
@@ -1,4 +1,4 @@
-import {Box, BoxProps, Card, Code, Label, Stack} from '@sanity/ui'
+import {Box, BoxProps, Card, Code, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled, {type ExecutionProps} from 'styled-components'
 import {useTranslation} from '../../../i18n'
@@ -55,9 +55,9 @@ export function DiffInspectWrapper(props: DiffInspectWrapperProps & BoxProps): R
 
 const MetaLabel = ({title}: {title: string}) => (
   <Box padding={3} display="inline-block" as={Meta}>
-    <Label size={1} muted>
+    <Text muted size={1} weight="medium">
       {title}
-    </Label>
+    </Text>
   </Box>
 )
 
diff --git a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
index eed329615d4..45958adf4df 100644
--- a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
@@ -1,6 +1,7 @@
 import type {Path} from '@sanity/types'
-import {Tooltip, TooltipProps, Text, Stack, Flex, Inline, Label} from '@sanity/ui'
+import {Text, Stack, Flex, Inline} from '@sanity/ui'
 import React from 'react'
+import {Tooltip, TooltipProps} from '../../../../ui-components'
 import {LegacyLayerProvider, UserAvatar} from '../../../components'
 import {useRelativeTime} from '../../../hooks'
 import {useUser} from '../../../store'
@@ -44,10 +45,10 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
   }
 
   const content = (
-    <Stack padding={3} space={2}>
-      <Label size={1} style={{textTransform: 'uppercase'}}>
+    <Stack space={2}>
+      <Text muted size={1} weight="medium">
         {description || t('changes.changed-label')}
-      </Label>
+      </Text>
       <Stack space={2}>
         {annotations.map((annotation, idx) => (
           <AnnotationItem annotation={annotation} key={idx} />
diff --git a/packages/sanity/src/core/field/diff/components/FieldChange.styled.tsx b/packages/sanity/src/core/field/diff/components/FieldChange.styled.tsx
index ff39305f8c7..4e28f11ba55 100644
--- a/packages/sanity/src/core/field/diff/components/FieldChange.styled.tsx
+++ b/packages/sanity/src/core/field/diff/components/FieldChange.styled.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {rem, Popover} from '@sanity/ui'
+import {rem} from '@sanity/ui'
 
 export const FieldChangeContainer = styled.div`
   --field-change-error: ${({theme}) => theme.sanity.color.solid.critical.enabled.bg};
@@ -32,12 +32,3 @@ export const DiffBorder = styled.div`
     border-left: 2px solid var(--field-change-error);
   }
 `
-
-export const PopoverWrapper = styled(Popover)`
-  /* hides the popover when the target of it has left the visible part of the window.
-   without it, the popover will be on top of the headers (document title & changes)
-   and footers (changed notifications, publish button etc)*/
-  &[data-popper-reference-hidden='true'] {
-    display: none;
-  }
-`
diff --git a/packages/sanity/src/core/field/diff/components/FieldChange.tsx b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
index 650bb2b24a3..c0947540037 100644
--- a/packages/sanity/src/core/field/diff/components/FieldChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {Stack, Box, Button, Text, Grid, useClickOutside} from '@sanity/ui'
+import {Box, Flex, Stack, Text, useClickOutside} from '@sanity/ui'
 import {ObjectSchemaType} from '@sanity/types'
 import {useDocumentOperation} from '../../../hooks'
+import {Button, Popover} from '../../../../ui-components'
 import {FieldChangeNode, FieldOperationsAPI} from '../../types'
 import {undoChange} from '../changes/undoChange'
 import {DiffContext} from '../contexts/DiffContext'
@@ -14,7 +15,7 @@ import {DiffInspectWrapper} from './DiffInspectWrapper'
 import {FallbackDiff} from './FallbackDiff'
 import {RevertChangesButton} from './RevertChangesButton'
 import {ValueError} from './ValueError'
-import {FieldChangeContainer, DiffBorder, PopoverWrapper} from './FieldChange.styled'
+import {FieldChangeContainer, DiffBorder} from './FieldChange.styled'
 
 /** @internal */
 export function FieldChange(
@@ -106,39 +107,44 @@ export function FieldChange(
               )}
 
               {isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
-                <PopoverWrapper
+                <Popover
                   content={
-                    <Box padding={3} sizing="border">
-                      {t('changes.action.revert-changes-description', {count: 1})}
-                      <Grid columns={2} gap={2} marginTop={2}>
-                        <Button mode="ghost" onClick={closeRevertChangesConfirmDialog}>
-                          <Text align="center">{t('changes.action.revert-all-cancel')}</Text>
-                        </Button>
-                        <Button tone="critical" onClick={handleRevertChanges}>
-                          <Text align="center">
-                            {t('changes.action.revert-changes-confirm-change', {count: 1})}
-                          </Text>
-                        </Button>
-                      </Grid>
-                    </Box>
+                    <Stack space={3}>
+                      <Box paddingY={3}>
+                        <Text size={1}>
+                          {t('changes.action.revert-changes-description', {count: 1})}
+                        </Text>
+                      </Box>
+                      <Flex gap={3} justify="flex-end">
+                        <Button
+                          mode="ghost"
+                          onClick={closeRevertChangesConfirmDialog}
+                          text={t('changes.action.revert-all-cancel')}
+                        />
+                        <Button
+                          tone="critical"
+                          onClick={handleRevertChanges}
+                          text={t('changes.action.revert-changes-confirm-change', {count: 1})}
+                        />
+                      </Flex>
+                    </Stack>
                   }
                   open={confirmRevertOpen}
+                  padding={3}
                   portal
                   placement="left"
                   ref={setRevertButtonElement}
                 >
-                  <Box flex={1}>
-                    <RevertChangesButton
-                      changeCount={1}
-                      onClick={handleRevertChangesConfirm}
-                      onMouseEnter={handleRevertButtonMouseEnter}
-                      onMouseLeave={handleRevertButtonMouseLeave}
-                      selected={confirmRevertOpen}
-                      disabled={readOnly}
-                      data-testid={`single-change-revert-button-${change?.key}`}
-                    />
-                  </Box>
-                </PopoverWrapper>
+                  <RevertChangesButton
+                    changeCount={1}
+                    onClick={handleRevertChangesConfirm}
+                    onMouseEnter={handleRevertButtonMouseEnter}
+                    onMouseLeave={handleRevertButtonMouseLeave}
+                    selected={confirmRevertOpen}
+                    disabled={readOnly}
+                    data-testid={`single-change-revert-button-${change?.key}`}
+                  />
+                </Popover>
               )}
             </DiffInspectWrapper>
           </FieldWrapper>
diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
index c01f71e7186..36a699b82a7 100644
--- a/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
+++ b/packages/sanity/src/core/field/diff/components/GroupChange.styled.tsx
@@ -1,4 +1,4 @@
-import {rem, Popover} from '@sanity/ui'
+import {rem} from '@sanity/ui'
 import styled from 'styled-components'
 
 export const ChangeListWrapper = styled.div`
@@ -30,12 +30,3 @@ export const GroupChangeContainer = styled.div`
     border-left: 2px solid var(--field-change-error);
   }
 `
-
-export const PopoverWrapper = styled(Popover)`
-  /* hides the popover when the target of it has left the visible part of the window.
-   without it, the popover will be on top of the headers (document title & changes)
-   and footers (changed notifications, publish button etc)*/
-  &[data-popper-reference-hidden='true'] {
-    display: none;
-  }
-`
diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
index a53f8d5fe9d..63c485d5387 100644
--- a/packages/sanity/src/core/field/diff/components/GroupChange.tsx
+++ b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react'
-import {Box, Stack, Button, Grid, Text, useClickOutside} from '@sanity/ui'
+import {Box, Flex, Stack, Text, useClickOutside} from '@sanity/ui'
+import {Button, Popover} from '../../../../ui-components'
 import {useDocumentOperation} from '../../../hooks'
 import {undoChange} from '../changes/undoChange'
 import {isFieldChange} from '../helpers'
@@ -14,7 +15,7 @@ import {useTranslation} from '../../../i18n'
 import {ChangeBreadcrumb} from './ChangeBreadcrumb'
 import {ChangeResolver} from './ChangeResolver'
 import {RevertChangesButton} from './RevertChangesButton'
-import {ChangeListWrapper, GroupChangeContainer, PopoverWrapper} from './GroupChange.styled'
+import {ChangeListWrapper, GroupChangeContainer} from './GroupChange.styled'
 
 /** @internal */
 export function GroupChange(
@@ -82,24 +83,30 @@ export function GroupChange(
             ))}
           </Stack>
           {isComparingCurrent && !isPermissionsLoading && permissions?.granted && (
-            <PopoverWrapper
+            <Popover
               content={
-                <Box>
-                  {t('changes.action.revert-changes-description', {count: changes.length})}
-                  <Grid columns={2} gap={2} marginTop={2}>
-                    <Button mode="ghost" onClick={closeRevertChangesConfirmDialog}>
-                      <Text align="center"> {t('changes.action.revert-all-cancel')}</Text>
-                    </Button>
-                    <Button tone="critical" onClick={handleRevertChanges}>
-                      <Text align="center">
-                        {t('changes.action.revert-changes-confirm-change', {count: 1})}
-                      </Text>
-                    </Button>
-                  </Grid>
-                </Box>
+                <Stack space={3}>
+                  <Box paddingY={3}>
+                    <Text size={1}>
+                      {t('changes.action.revert-changes-description', {count: changes.length})}
+                    </Text>
+                  </Box>
+                  <Flex gap={3} justify="flex-end">
+                    <Button
+                      mode="ghost"
+                      onClick={closeRevertChangesConfirmDialog}
+                      text={t('changes.action.revert-all-cancel')}
+                    />
+                    <Button
+                      tone="critical"
+                      onClick={handleRevertChanges}
+                      text={t('changes.action.revert-changes-confirm-change', {count: 1})}
+                    />
+                  </Flex>
+                </Stack>
               }
+              padding={3}
               portal
-              padding={4}
               placement="left"
               open={confirmRevertOpen}
               ref={setRevertPopoverElement}
@@ -114,7 +121,7 @@ export function GroupChange(
                   data-testid={`group-change-revert-button-${group.fieldsetName}`}
                 />
               </Box>
-            </PopoverWrapper>
+            </Popover>
           )}
         </Stack>
       ),
diff --git a/packages/sanity/src/core/field/diff/components/MetaInfo.tsx b/packages/sanity/src/core/field/diff/components/MetaInfo.tsx
index 0fb38e0dbe3..5ba31906e77 100644
--- a/packages/sanity/src/core/field/diff/components/MetaInfo.tsx
+++ b/packages/sanity/src/core/field/diff/components/MetaInfo.tsx
@@ -32,7 +32,7 @@ export function MetaInfo(props: MetaInfoProps) {
       <Stack space={2} paddingLeft={2}>
         <MetaText
           size={1}
-          weight="semibold"
+          weight="medium"
           forwardedAs={markRemoved ? 'del' : 'h3'}
           textOverflow="ellipsis"
         >
diff --git a/packages/sanity/src/core/field/diff/components/NoChanges.tsx b/packages/sanity/src/core/field/diff/components/NoChanges.tsx
index b3348816988..3732a136d3c 100644
--- a/packages/sanity/src/core/field/diff/components/NoChanges.tsx
+++ b/packages/sanity/src/core/field/diff/components/NoChanges.tsx
@@ -7,7 +7,7 @@ export function NoChanges() {
   const {t} = useTranslation()
   return (
     <Stack space={3}>
-      <Text size={1} weight="semibold" as="h3">
+      <Text size={1} weight="medium" as="h3">
         {t('changes.no-changes-title')}
       </Text>
       <Text as="p" size={1} muted>
diff --git a/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx b/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
index 3b4cf41d8d1..12d3880c771 100644
--- a/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
+++ b/packages/sanity/src/core/field/diff/components/RevertChangesButton.tsx
@@ -1,7 +1,7 @@
 import {RevertIcon} from '@sanity/icons'
-import {Button, ButtonProps} from '@sanity/ui'
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {Button, ButtonProps} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 
 const Root = styled(Button)`
@@ -27,7 +27,8 @@ const Root = styled(Button)`
 
 /** @internal */
 export const RevertChangesButton = forwardRef(function RevertChangesButton(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'ref'> & {changeCount: number},
+  props: Omit<ButtonProps, 'tooltipProps'> &
+    Omit<React.HTMLProps<HTMLButtonElement>, 'ref'> & {changeCount: number},
   ref: React.ForwardedRef<HTMLButtonElement>,
 ): React.ReactElement {
   const {selected, changeCount, ...restProps} = props
@@ -39,10 +40,8 @@ export const RevertChangesButton = forwardRef(function RevertChangesButton(
       selected={selected}
       text={t('changes.action.revert-changes-confirm-change', {count: changeCount})}
       mode="bleed"
-      padding={1}
-      fontSize={1}
-      space={2}
       ref={ref}
+      tooltipProps={null}
       {...restProps}
     />
   )
diff --git a/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx b/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx
index 8c728d740e2..f1c3449cbb8 100644
--- a/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx
+++ b/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx
@@ -31,7 +31,7 @@ export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff, schemaType})
 
       {showToValue && title && (
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {title}
           </Text>
         </Box>
diff --git a/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx b/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
index 7f55a3f02c4..76a42a99029 100644
--- a/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
+++ b/packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx
@@ -1,9 +1,10 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {useClickOutside, Label, Popover, Flex} from '@sanity/ui'
+import {useClickOutside, Flex, Text} from '@sanity/ui'
 import {toString} from '@sanity/util/paths'
 import {isKeySegment, type ObjectSchemaType, type Path, type PortableTextChild} from '@sanity/types'
 import React, {useCallback, useContext, useEffect, useMemo, useState, type ReactNode} from 'react'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui-components'
 import {useTranslation} from '../../../../../i18n'
 import {ChangeList, DiffContext, DiffTooltip, useDiffAnnotationColor} from '../../../../diff'
 import type {ObjectDiff} from '../../../../types'
@@ -161,11 +162,11 @@ function AnnnotationWithDiff({
       <PopoverContainer padding={3}>
         <div>
           {emptyObject && (
-            <Label size={1} muted>
+            <Text muted size={1} weight="medium">
               {t('changes.portable-text.empty-object-annotation', {
                 annotationType: schemaType.title || schemaType.name,
               })}
-            </Label>
+            </Text>
           )}
           {!emptyObject && <ChangeList diff={diff} schemaType={schemaType} />}
         </div>
diff --git a/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx b/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
index 3b4546f78ac..76636dfe3de 100644
--- a/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
+++ b/packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx
@@ -6,10 +6,11 @@ import {
   type PortableTextChild,
   type PortableTextObject,
 } from '@sanity/types'
-import {Card, Flex, Label, Popover, useClickOutside} from '@sanity/ui'
+import {Card, Flex, Text, useClickOutside} from '@sanity/ui'
 import {FOCUS_TERMINATOR, toString} from '@sanity/util/paths'
 import React, {useCallback, useContext, useState, useEffect, useMemo} from 'react'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui-components'
 import {useTranslation} from '../../../../../i18n'
 import {ChangeList, DiffContext, DiffTooltip, useDiffAnnotationColor} from '../../../../diff'
 import type {ObjectDiff} from '../../../../types'
@@ -188,11 +189,11 @@ function PopoverContent({
   return (
     <PopoverContainer ref={setPopoverElement} padding={3}>
       {emptyObject && (
-        <Label size={1} muted>
+        <Text muted size={1} weight="medium">
           {t('changes.portable-text.empty-inline-object', {
             inlineObjectType: schemaType.title || schemaType.name,
           })}
-        </Label>
+        </Text>
       )}
       {!emptyObject && <ChangeList diff={diff} schemaType={schemaType} />}
     </PopoverContainer>
diff --git a/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx b/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
index f69b7f745cc..abd3b9a4608 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/FilterFieldInput.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo} from 'react'
-import {Box, Button, Card, Code, Flex, Grid, Label, Stack, TextArea} from '@sanity/ui'
+import {Card, Code, Grid, Stack, TextArea, Text} from '@sanity/ui'
 import styled from 'styled-components'
+import {Button} from '../../../../ui-components'
 
 const ExampleCode = styled(Code)`
   cursor: pointer;
@@ -46,7 +47,9 @@ export const FilterFieldInput = React.forwardRef(function FilterFieldInput(
   return (
     <Card padding={4} tone="default" border>
       <Stack space={4}>
-        <Label size={0}>Function value</Label>
+        <Text size={1} weight="medium">
+          Function value
+        </Text>
         <TextArea rows={4} ref={ref} onChange={handleChange} value={value || ''} />
         <ExampleCode
           title="Use example code"
diff --git a/packages/sanity/src/core/form/__workshop__/_common/FormDebugger.tsx b/packages/sanity/src/core/form/__workshop__/_common/FormDebugger.tsx
index 3ff447af7df..63493740e1e 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/FormDebugger.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/FormDebugger.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Box, Card, Code, Label, Stack} from '@sanity/ui'
+import {Box, Card, Code, Stack, Text} from '@sanity/ui'
 import type {Path} from '@sanity/types'
 
 export interface FormDebuggerOptions {
@@ -12,7 +12,9 @@ export function FormDebugger(props: FormDebuggerOptions) {
   return (
     <Card padding={4} tone="default" border>
       <Stack space={4}>
-        <Label size={0}>Debug output</Label>
+        <Text size={1} weight="medium">
+          Debug output
+        </Text>
         <Box overflow="auto">
           <Code>{JSON.stringify({focusPath, value}, null, 2)}</Code>
         </Box>
diff --git a/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx b/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
index a1d4a562368..c6f61c561da 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/TypeTester.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react'
-import {Button, Card, Label, Stack, Text, TextArea} from '@sanity/ui'
+import {Card, Stack, Text, TextArea} from '@sanity/ui'
 import styled, {createGlobalStyle} from 'styled-components'
+import {Button} from '../../../../ui-components'
 import {runTest} from './typer'
 
 const HIGHLIGHT_CLASSNAME = 'js-highlight-selected-input'
@@ -109,7 +110,9 @@ export function TypeTester({readOnly}: TypeTesterProps) {
     <Sticky>
       <Card padding={4} tone="default" border>
         <Stack space={4}>
-          <Label size={0}>Type Performance Tester</Label>
+          <Text size={1} weight="medium">
+            Type Performance Tester
+          </Text>
           <Text
             title={isDisabled ? undefined : `Click to focus input`}
             size={1}
diff --git a/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx b/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
index 482ef5133be..111efbec032 100644
--- a/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
+++ b/packages/sanity/src/core/form/__workshop__/_common/resolvePreviewComponent.tsx
@@ -1,6 +1,7 @@
-import {Button, Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
+import {Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {PreviewLoader} from '../../../preview'
+import {Button} from '../../../../ui-components'
 
 export const resolvePreviewComponent = () => TestPreview
 
diff --git a/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx b/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
index fa9c97e5ea2..32dac5b8ffa 100644
--- a/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
+++ b/packages/sanity/src/core/form/components/ActivateOnFocus/ActivateOnFocus.tsx
@@ -76,7 +76,7 @@ export function ActivateOnFocus(props: ActivateOnFocusProps) {
       t('inputs.portable-text.activate-on-focus-message', {
         context: messageContext,
       })
-    return <Text weight="semibold">{text}</Text>
+    return <Text weight="medium">{text}</Text>
   }, [focused, message, t])
 
   return (
@@ -92,7 +92,7 @@ export function ActivateOnFocus(props: ActivateOnFocusProps) {
             // Almost all input elements have radius=1, and this component is
             // typically used for overlaying input elements.
             // @todo Consider making `radius` a component property of `ActivateOnFocus`.
-            radius={1}
+            radius={2}
           />
           <ContentContainer>{msg}</ContentContainer>
         </FlexContainer>
diff --git a/packages/sanity/src/core/form/components/Alert.tsx b/packages/sanity/src/core/form/components/Alert.tsx
index f28af1f6389..4361b7e0745 100644
--- a/packages/sanity/src/core/form/components/Alert.tsx
+++ b/packages/sanity/src/core/form/components/Alert.tsx
@@ -32,7 +32,7 @@ export function Alert(props: AlertProps) {
         </Box>
 
         <Box flex={1} marginLeft={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {title}
           </Text>
 
diff --git a/packages/sanity/src/core/form/components/EditPortal.tsx b/packages/sanity/src/core/form/components/EditPortal.tsx
index 73d74606e92..eb649a6b91f 100644
--- a/packages/sanity/src/core/form/components/EditPortal.tsx
+++ b/packages/sanity/src/core/form/components/EditPortal.tsx
@@ -1,5 +1,6 @@
 import React, {type ReactNode, useState, useRef} from 'react'
-import {Box, Dialog, ResponsiveWidthProps} from '@sanity/ui'
+import {Box, ResponsiveWidthProps} from '@sanity/ui'
+import {Dialog} from '../../../ui-components'
 import {PresenceOverlay} from '../../presence'
 import {PopoverDialog} from '../../components'
 import {VirtualizerScrollInstanceProvider} from '../inputs/arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
@@ -38,9 +39,7 @@ export function EditPortal(props: Props): React.ReactElement {
 
   const contents = (
     <PresenceOverlay margins={PRESENCE_MARGINS}>
-      <Box ref={containerElement} padding={4}>
-        {children}
-      </Box>
+      <Box ref={containerElement}>{children}</Box>
     </PresenceOverlay>
   )
 
diff --git a/packages/sanity/src/core/form/components/FullscreenSpinner.tsx b/packages/sanity/src/core/form/components/FullscreenSpinner.tsx
deleted file mode 100644
index 6ba2654118f..00000000000
--- a/packages/sanity/src/core/form/components/FullscreenSpinner.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Flex, Layer, Spinner} from '@sanity/ui'
-import React from 'react'
-import styled from 'styled-components'
-
-const FullscreenLayer = styled(Layer)`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-`
-
-export function FullscreenSpinner() {
-  return (
-    <FullscreenLayer>
-      <Flex height="fill" align="center" justify="center">
-        <Spinner />
-      </Flex>
-    </FullscreenLayer>
-  )
-}
diff --git a/packages/sanity/src/core/form/components/SpinnerWithText.tsx b/packages/sanity/src/core/form/components/SpinnerWithText.tsx
deleted file mode 100644
index 57b57a44294..00000000000
--- a/packages/sanity/src/core/form/components/SpinnerWithText.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Box, Flex, Spinner, Text} from '@sanity/ui'
-import React from 'react'
-
-export function SpinnerWithText(props: {text: string}) {
-  const {text} = props
-
-  return (
-    <Flex direction="row" justify="center" align="center">
-      <Spinner />
-      <Box marginLeft={2}>
-        <Text>{text}</Text>
-      </Box>
-    </Flex>
-  )
-}
diff --git a/packages/sanity/src/core/form/components/formField/FormField.tsx b/packages/sanity/src/core/form/components/formField/FormField.tsx
index 6639318339b..0ec7f9dfacd 100644
--- a/packages/sanity/src/core/form/components/formField/FormField.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormField.tsx
@@ -68,7 +68,7 @@ export const FormField = memo(function FormField(
       data-level={level}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      space={1}
+      space={2}
     >
       {/*
         NOTE: It’s not ideal to hide validation, presence and description when there's no `title`.
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx b/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
index 49a56408997..c35578feb65 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldBaseHeader.tsx
@@ -4,7 +4,6 @@ import {
   Box,
   Card,
   Flex,
-  Theme,
   TooltipDelayGroupProvider,
   TooltipDelayGroupProviderProps,
 } from '@sanity/ui'
@@ -16,19 +15,32 @@ import {FieldCommentsProps} from '../../types'
 
 const TOOLTIP_GROUP_DELAY: TooltipDelayGroupProviderProps['delay'] = {open: 500}
 
-const Root = styled(Flex)`
-  /* Prevent buttons from taking up extra vertical space */
-  line-height: 1;
-  /* For floating actions menu */
-  position: relative;
-`
-
-const PresenceBox = styled(Box)<{$right: number}>(({theme, $right}) => {
+const Root = styled(Flex)<{
+  $floatingCardWidth: number
+  $slotWidth: number
+  $floatingCardVisible: boolean
+}>(({theme, $floatingCardWidth, $slotWidth, $floatingCardVisible}) => {
   const {space} = theme.sanity
   return css`
-    position: absolute;
-    bottom: 0;
-    right: ${$right + space[1]}px;
+    /* Prevent buttons from taking up extra vertical space */
+    line-height: 1;
+    width: 100%;
+    /* For floating actions menu */
+    position: relative;
+
+    [data-ui='PresenceBox'] {
+      position: absolute;
+      bottom: 0;
+      right: ${$slotWidth + $floatingCardWidth + space[1]}px;
+    }
+    @media (hover: hover) {
+      // If hover is supported, we hide the floating card by default, so only add space for it when it's visible.
+      [data-ui='PresenceBox'] {
+        position: absolute;
+        bottom: 0;
+        right: ${$slotWidth + ($floatingCardVisible ? $floatingCardWidth : 0) + space[1]}px;
+      }
+    }
   `
 })
 
@@ -55,76 +67,71 @@ const SlotBox = styled(Box)<{
   `
 })
 
-const FieldActionsFloatingCard = styled(Card)(({theme}: {theme: Theme}) => {
-  const space = theme.sanity.space[1] / 2
+const FieldActionsFloatingCard = styled(Card)`
+  align-items: center;
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  transition: opacity 150ms ease;
+  line-height: 1;
 
-  return css`
-    align-items: center;
-    bottom: 0;
-    gap: ${space}px;
-    padding: ${space}px;
-    position: absolute;
-    right: 0;
+  @media (hover: hover) {
+    // If hover is supported, we hide the floating card by default
+    // and only show it when it has focus within or when the field is hovered or focused.
+    opacity: 0;
+    pointer-events: none;
 
-    @media (hover: hover) {
-      // If hover is supported, we hide the floating card by default
-      // and only show it when it has focus within or when the field is hovered or focused.
+    [data-ui='FieldActionsFlex'] {
       opacity: 0;
-      pointer-events: none;
-      width: 0;
-
-      [data-ui='FieldActionsFlex'] {
-        opacity: 0;
-        width: 0;
-      }
-
-      &[data-actions-visible='false']:not(:focus-within) {
-        // Remove the shadow when the field actions are not visible
-        box-shadow: none;
-
-        // Since the field actions always will be present in the DOM (to make them focusable) –
-        // they will always affect the width of the floating card, even when they are not visible.
-        // Therefore, we remove the background of the floating card when the field actions are not visible.
-        background: transparent;
-      }
+    }
 
-      // Remove the shadow when the field has comments but no actions
-      &[data-has-comments='true']:not([data-has-actions='true']) {
-        box-shadow: none;
-      }
+    &[data-actions-visible='false']:not(:focus-within) {
+      // Remove the shadow when the field actions are not visible
+      box-shadow: none;
 
-      // Show the floating card when it has focus within (ie when field actions are focused).
-      &:focus-within {
-        opacity: 1;
-        pointer-events: auto;
-        width: max-content;
+      // Since the field actions always will be present in the DOM (to make them focusable) –
+      // they will always affect the width of the floating card, even when they are not visible.
+      // Therefore, we remove the background of the floating card when the field actions are not visible.
+      background: transparent;
+    }
 
-        [data-ui='FieldActionsFlex'] {
-          opacity: 1;
-          pointer-events: auto;
-          width: max-content;
-        }
-      }
+    // Remove the shadow when the field has comments but no actions
+    &[data-has-comments='true']:not([data-has-actions='true']) {
+      box-shadow: none;
     }
 
-    &[data-visible='true'] {
+    // Show the floating card when it has focus within (ie when field actions are focused).
+    &:focus-within {
       opacity: 1;
       pointer-events: auto;
       width: max-content;
-    }
 
-    &[data-actions-visible='true'] {
       [data-ui='FieldActionsFlex'] {
         opacity: 1;
         pointer-events: auto;
         width: max-content;
       }
     }
-  `
-})
+  }
+
+  &[data-visible='true'] {
+    opacity: 1;
+    pointer-events: auto;
+    width: max-content;
+  }
+
+  &[data-actions-visible='true'] {
+    [data-ui='FieldActionsFlex'] {
+      opacity: 1;
+      pointer-events: auto;
+      width: max-content;
+    }
+  }
+`
 
 const FieldActionsFlex = styled(Flex)`
   gap: inherit;
+  transition: opacity 150ms ease;
 `
 
 const MAX_AVATARS = 4
@@ -149,7 +156,7 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
     fieldHovered,
     presence,
   } = props
-
+  const [focused, setFocused] = useState<boolean>(false)
   // State for if an actions menu is open
   const [menuOpen, setMenuOpen] = useState<boolean>(false)
 
@@ -167,7 +174,6 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
     button: commentButton = null,
     isAddingComment = false,
   } = comments || {}
-
   // Determine if actions exist and if field actions should be shown
   const hasActions = actions && actions.length > 0
   const showFieldActions = fieldFocused || fieldHovered || menuOpen || isAddingComment
@@ -178,7 +184,7 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
   const hasCommentsButtonOrActions = comments?.button || hasActions
 
   // Determine if floating card with actions should be shown
-  const shouldShowFloatingCard = showFieldActions || hasComments
+  const shouldShowFloatingCard = focused || showFieldActions || hasComments
 
   const handleSetFloatingCardElementWidth = useCallback(() => {
     if (floatingCardElement) {
@@ -191,12 +197,15 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
   // This is because presence should be positioned relative to the floating card.
   // We need this because we don't conditionally render the floating card and rely on CSS to
   // show/hide it, and therefore the width calculation won't be triggered when the card is shown or hidden.
-  const handleFocusCapture = useCallback(handleSetFloatingCardElementWidth, [
-    handleSetFloatingCardElementWidth,
-  ])
-  const handleBlurCapture = useCallback(handleSetFloatingCardElementWidth, [
-    handleSetFloatingCardElementWidth,
-  ])
+  const handleFocusCapture = useCallback(() => {
+    handleSetFloatingCardElementWidth()
+    setFocused(true)
+  }, [handleSetFloatingCardElementWidth])
+
+  const handleBlurCapture = useCallback(() => {
+    handleSetFloatingCardElementWidth()
+    setFocused(false)
+  }, [handleSetFloatingCardElementWidth])
 
   // Calculate floating card's width
   useEffect(() => {
@@ -227,15 +236,21 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
   }, [floatingCardWidth, showFieldActions, slot])
 
   return (
-    <Root align="flex-end">
+    <Root
+      align="flex-end"
+      justify="space-between"
+      $floatingCardVisible={shouldShowFloatingCard}
+      $floatingCardWidth={floatingCardWidth}
+      $slotWidth={slotWidth}
+    >
       <ContentBox flex={1} paddingY={2} $presenceMaxWidth={calcAvatarStackWidth(MAX_AVATARS)}>
         {content}
       </ContentBox>
 
       {presence && presence.length > 0 && (
-        <PresenceBox flex="none" paddingBottom={1} $right={floatingCardWidth + slotWidth}>
+        <Box data-ui="PresenceBox" flex="none">
           <FieldPresence maxAvatars={MAX_AVATARS} presence={presence} />
-        </PresenceBox>
+        </Box>
       )}
 
       {slotEl}
@@ -250,9 +265,7 @@ export function FormFieldBaseHeader(props: FormFieldBaseHeaderProps) {
             display="flex"
             onBlurCapture={handleBlurCapture}
             onFocusCapture={handleFocusCapture}
-            radius={2}
             ref={setFloatingCardElement}
-            shadow={2}
             sizing="border"
           >
             {hasActions && (
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx b/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
index d77fe560249..6dfbdac602f 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldHeaderText.tsx
@@ -32,9 +32,9 @@ export const FormFieldHeaderText = memo(function FormFieldHeaderText(
   const hasValidations = validation.length > 0
 
   return (
-    <Stack space={2}>
+    <Stack space={3}>
       <Flex>
-        <Text as="label" htmlFor={inputId} weight="semibold" size={1}>
+        <Text as="label" htmlFor={inputId} weight="medium" size={1}>
           {title || (
             <span style={{color: 'var(--card-muted-fg-color)'}}>
               {t('form.field.untitled-field-label')}
@@ -44,7 +44,7 @@ export const FormFieldHeaderText = memo(function FormFieldHeaderText(
 
         {hasValidations && (
           <Box marginLeft={2}>
-            <FormFieldValidationStatus fontSize={1} validation={validation} />
+            <FormFieldValidationStatus fontSize={1} placement="top" validation={validation} />
           </Box>
         )}
       </Flex>
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx b/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
index 1ab5372ce6d..e736c75f0aa 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldSet.tsx
@@ -54,7 +54,7 @@ function getChildren(children: React.ReactNode | (() => React.ReactNode)): React
   return typeof children === 'function' ? children() : children
 }
 
-const Root = styled(Box).attrs({forwardedAs: 'fieldset'})`
+const Root = styled(Stack).attrs({forwardedAs: 'fieldset'})`
   border: none;
 
   /* See: https://thatemil.com/blog/2015/01/03/reset-your-fieldset/ */
@@ -79,7 +79,7 @@ const Content = styled(Box)<{
   return css`
     outline: none;
     border-left: ${$borderLeft ? '1px solid var(--card-border-color)' : undefined};
-    border-radius: ${rem(radius[1])};
+    border-radius: ${rem(radius[2])};
 
     &:focus {
       box-shadow: ${focusRingStyle({base, focusRing: {...focusRing, offset: 2}})};
@@ -152,7 +152,13 @@ export const FormFieldSet = forwardRef(function FormFieldSet(
   }, [children, collapsed, columns])
 
   return (
-    <Root data-level={level} {...restProps} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <Root
+      data-level={level}
+      {...restProps}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      space={2}
+    >
       <FormFieldBaseHeader
         __internal_comments={comments}
         __internal_slot={slot}
@@ -161,7 +167,7 @@ export const FormFieldSet = forwardRef(function FormFieldSet(
         fieldHovered={hovered}
         presence={presence}
         content={
-          <Stack space={2}>
+          <Stack space={3}>
             <Flex>
               <FormFieldSetLegend
                 collapsed={Boolean(collapsed)}
@@ -172,7 +178,7 @@ export const FormFieldSet = forwardRef(function FormFieldSet(
 
               {hasValidationMarkers && (
                 <Box marginLeft={2}>
-                  <FormFieldValidationStatus fontSize={1} validation={validation} />
+                  <FormFieldValidationStatus fontSize={1} placement="top" validation={validation} />
                 </Box>
               )}
             </Flex>
@@ -189,7 +195,6 @@ export const FormFieldSet = forwardRef(function FormFieldSet(
       <Content
         $borderLeft={level > 0}
         hidden={collapsed}
-        marginTop={1}
         paddingLeft={level === 0 ? 0 : 3}
         onFocus={typeof tabIndex === 'number' && tabIndex > -1 ? handleFocus : undefined}
         ref={forwardedRef}
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx b/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
index 6b8ef134838..e2ebf4fbaac 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldSetLegend.tsx
@@ -31,7 +31,7 @@ const ToggleButton = styled(Flex).attrs({forwardedAs: 'button'})((props: {theme:
     -webkit-font-smoothing: inherit;
     font: inherit;
     outline: none;
-    border-radius: ${rem(radius[1])};
+    border-radius: ${rem(radius[2])};
     position: relative;
 
     &:not([hidden]) {
@@ -73,7 +73,7 @@ export const FormFieldSetLegend = memo(function FormFieldSetLegend(props: FormFi
   const {t} = useTranslation()
 
   const text = (
-    <Text weight="semibold" size={1}>
+    <Text weight="medium" size={1}>
       {title || (
         <span style={{color: 'var(--card-muted-fg-color)'}}>
           {t('form.field.untitled-fieldset-label')}
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
index c7e6bb29b8d..87baa819036 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
-import {hues} from '@sanity/color'
 import {ErrorOutlineIcon, InfoOutlineIcon, WarningOutlineIcon} from '@sanity/icons'
 import type {FormNodeValidation} from '@sanity/types'
-import {Box, Flex, Placement, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Flex, Placement, Stack, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import {useTranslation} from '../../../i18n'
 import {useListFormat} from '../../../hooks'
+import {Tooltip} from '../../../../ui-components'
 
 /** @internal */
 export interface FormFieldValidationStatusProps {
@@ -27,12 +26,6 @@ export interface FormFieldValidationStatusProps {
 
 const EMPTY_ARRAY: never[] = []
 
-const VALIDATION_STYLES: Record<'error' | 'warning' | 'info', {color: string}> = {
-  error: {color: hues.red[500].hex},
-  warning: {color: hues.yellow[500].hex},
-  info: {color: hues.blue[500].hex},
-}
-
 const VALIDATION_ICONS = {
   error: ValidationErrorIcon,
   warning: ValidationWarningIcon,
@@ -43,37 +36,37 @@ const StyledStack = styled(Stack)`
   max-width: 200px;
 `
 
+const StatusText = styled(Text)<{$status: 'error' | 'warning' | 'info'}>(({$status}) => {
+  if ($status === 'error') {
+    return {'--card-icon-color': 'var(--card-badge-critical-icon-color)'}
+  }
+
+  if ($status === 'warning') {
+    return {'--card-icon-color': 'var(--card-badge-caution-icon-color)'}
+  }
+
+  if ($status === 'info') {
+    return {'--card-icon-color': 'var(--card-badge-primary-icon-color)'}
+  }
+
+  return {}
+})
+
 /** @internal */
 export function FormFieldValidationStatus(props: FormFieldValidationStatusProps) {
-  const {
-    validation = EMPTY_ARRAY,
-    __unstable_showSummary: showSummary,
-    fontSize,
-    placement = 'top',
-  } = props
+  const {validation = EMPTY_ARRAY, __unstable_showSummary: showSummary, fontSize, placement} = props
 
   const hasErrors = validation.some((v) => v.level === 'error')
   const hasWarnings = validation.some((v) => v.level === 'warning')
-  const hasInfo = validation.some((v) => v.level === 'info')
-
-  const StatusIcon = (() => {
-    if (hasErrors) return VALIDATION_ICONS.error
-    if (hasWarnings) return VALIDATION_ICONS.warning
-    if (hasInfo) return VALIDATION_ICONS.info
-    return undefined
-  })()
-
-  const statusStyle = (() => {
-    if (hasErrors) return VALIDATION_STYLES.error
-    if (hasWarnings) return VALIDATION_STYLES.warning
-    if (hasInfo) return VALIDATION_STYLES.info
-    return undefined
-  })()
+
+  // eslint-disable-next-line no-nested-ternary
+  const status = hasErrors ? 'error' : hasWarnings ? 'warning' : 'info'
+  const StatusIcon = VALIDATION_ICONS[status]
 
   return (
     <Tooltip
       content={
-        <StyledStack padding={3} space={3}>
+        <StyledStack space={3}>
           {showSummary && <FormFieldValidationSummary validation={validation} />}
 
           {!showSummary && (
@@ -91,9 +84,9 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
       fallbackPlacements={['bottom', 'right', 'left']}
     >
       <div>
-        <Text muted size={fontSize} weight="semibold" style={statusStyle}>
+        <StatusText $status={status} size={fontSize} weight="medium">
           {StatusIcon && <StatusIcon />}
-        </Text>
+        </StatusText>
       </div>
     </Tooltip>
   )
@@ -102,26 +95,14 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
 function FormFieldValidationStatusItem(props: {validation: FormNodeValidation}) {
   const {validation} = props
 
-  const StatusIcon = (() => {
-    if (validation.level === 'error') return VALIDATION_ICONS.error
-    if (validation.level === 'warning') return VALIDATION_ICONS.warning
-    if (validation.level === 'info') return VALIDATION_ICONS.info
-    return undefined
-  })()
-
-  const statusStyle = (() => {
-    if (validation.level === 'error') return VALIDATION_STYLES.error
-    if (validation.level === 'warning') return VALIDATION_STYLES.warning
-    if (validation.level === 'info') return VALIDATION_STYLES.info
-    return undefined
-  })()
+  const StatusIcon = VALIDATION_ICONS[validation.level]
 
   return (
     <Flex>
       <Box marginRight={2}>
-        <Text size={1} style={statusStyle}>
+        <StatusText $status={validation.level} size={1}>
           {StatusIcon && <StatusIcon />}
-        </Text>
+        </StatusText>
       </Box>
       <Box flex={1}>
         <Text size={1}>{validation.message}</Text>
diff --git a/packages/sanity/src/core/form/components/tagInput/tagInput.tsx b/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
index ed4a8c60401..0b1727e44a8 100644
--- a/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
+++ b/packages/sanity/src/core/form/components/tagInput/tagInput.tsx
@@ -1,20 +1,10 @@
 import {CloseIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  isHTMLElement,
-  rem,
-  Text,
-  type CSSObject,
-  type Theme,
-  useForwardedRef,
-} from '@sanity/ui'
+import {Box, Card, Flex, isHTMLElement, rem, Text, type Theme, useForwardedRef} from '@sanity/ui'
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
-import styled, {css} from 'styled-components'
+import styled, {css, type CSSObject} from 'styled-components'
 import {useTranslation} from '../../../i18n'
 import {studioLocaleNamespace} from '../../../i18n/localeNamespaces'
+import {Button} from '../../../../ui-components'
 import {focusRingBorderStyle, focusRingStyle} from './styles'
 
 const Root = styled(Card)((props: {theme: Theme}): CSSObject => {
@@ -309,18 +299,20 @@ function Tag(props: {
   }, [index, onRemove])
 
   return (
-    <Card data-ui="Tag" padding={1} radius={2} tone="transparent">
-      <Flex align="center">
-        <Box flex={1} padding={1}>
+    <Card data-ui="Tag" radius={2} tone="transparent">
+      <Flex align="center" gap={1}>
+        <Box flex={1} paddingY={2} paddingLeft={2}>
           <Text muted={muted} textOverflow="ellipsis">
             {tag.value}
           </Text>
         </Box>
-
         {enabled && (
-          <Box marginLeft={1}>
-            <Button icon={CloseIcon} mode="bleed" onClick={handleRemoveClick} padding={1} />
-          </Box>
+          <Button
+            icon={CloseIcon}
+            mode="bleed"
+            onClick={handleRemoveClick}
+            tooltipProps={{content: 'Remove'}}
+          />
         )}
       </Flex>
     </Card>
diff --git a/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts b/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
index 4ed5ef53e3b..055921b9792 100644
--- a/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
+++ b/packages/sanity/src/core/form/components/withFocusRing/withFocusRing.ts
@@ -1,25 +1,36 @@
+/* eslint-disable camelcase */
+
 import styled, {css} from 'styled-components'
 import {rem, Theme} from '@sanity/ui'
 import {ComponentType} from 'react'
+import {getTheme_v2} from '@sanity/ui/theme'
 import {focusRingBorderStyle, focusRingStyle} from './helpers'
 
 export function withFocusRing<Props>(component: ComponentType<Props>) {
   return styled(component)<Props & {$border?: boolean}>(
     (props: {theme: Theme; $border?: boolean}) => {
-      const border = {width: props.$border ? 1 : 0, color: 'var(--card-border-color)'}
+      const {$border} = props
+      const {card, color, radius} = getTheme_v2(props.theme)
+
+      const border = {width: $border ? 1 : 0, color: 'var(--card-border-color)'}
 
       return css`
         --card-focus-box-shadow: ${focusRingBorderStyle(border)};
 
-        border-radius: ${rem(props.theme.sanity.radius[1])};
+        border-radius: ${rem(radius[1])};
         outline: none;
         box-shadow: var(--card-focus-box-shadow);
 
         &:focus {
           --card-focus-box-shadow: ${focusRingStyle({
-            base: props.theme.sanity.color.base,
             border,
-            focusRing: props.theme.sanity.focusRing,
+            base: color,
+            focusRing: {
+              ...card.focusRing,
+              // An offset of 0 is needed to avoid the focus ring overlap the border of the inner items, the theme has an offset of -1
+              // Detected in empty array items.
+              offset: 0,
+            },
           })};
         }
       `
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
index 8733c9553c1..c8275b63830 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenu.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-handler-names */
 
-import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Card, Menu, MenuButton, MenuButtonProps} from '@sanity/ui'
+import {EllipsisHorizontalIcon} from '@sanity/icons'
+import {Card, Menu} from '@sanity/ui'
 import React, {memo, useCallback, useId, useMemo, useState} from 'react'
-import {StatusButton, StatusButtonProps} from '../../../components'
+import {Button, ButtonProps, MenuButton, MenuButtonProps} from '../../../../ui-components'
 import {DocumentFieldActionGroup, DocumentFieldActionNode} from '../../../config'
 import {useI18nText} from '../../../i18n'
 import {FieldActionMenuNode} from './FieldActionMenuNode'
@@ -14,7 +14,7 @@ export interface FieldActionMenuProps {
   onMenuOpenChange: (open: boolean) => void
 }
 
-const STATUS_BUTTON_TOOLTIP_PROPS: StatusButtonProps['tooltip'] = {
+const STATUS_BUTTON_TOOLTIP_PROPS: ButtonProps['tooltipProps'] = {
   placement: 'top',
 }
 
@@ -61,7 +61,7 @@ export const FieldActionMenu = memo(function FieldActionMenu(props: FieldActionM
             {
               type: 'group',
               children: menuNodes,
-              icon: EllipsisVerticalIcon,
+              icon: EllipsisHorizontalIcon,
               title: 'Field actions',
             },
           ] satisfies DocumentFieldActionNode[])
@@ -101,15 +101,14 @@ const RootFieldActionMenuNode = memo(function RootFieldActionMenuNode(props: {
 
   if (node.type === 'action') {
     return (
-      <StatusButton
-        fontSize={1}
+      <Button
         icon={node.icon}
-        // Do not show tooltip if menu is open
-        label={open ? undefined : node.title}
         mode="bleed"
         onClick={node.onAction}
-        padding={2}
-        tooltip={STATUS_BUTTON_TOOLTIP_PROPS}
+        tooltipProps={{
+          ...STATUS_BUTTON_TOOLTIP_PROPS,
+          content: node.title,
+        }}
       />
     )
   }
@@ -136,13 +135,14 @@ function RootFieldActionMenuGroup(props: {
   return (
     <MenuButton
       button={
-        <StatusButton
-          fontSize={1}
+        <Button
           icon={node.icon}
           label={open ? undefined : title}
           mode="bleed"
-          padding={2}
-          tooltip={STATUS_BUTTON_TOOLTIP_PROPS}
+          tooltipProps={{
+            ...STATUS_BUTTON_TOOLTIP_PROPS,
+            content: node.title,
+          }}
         />
       }
       id={useId()}
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
index 4705888f2f9..9e9ca5fadc4 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenuGroup.tsx
@@ -1,5 +1,6 @@
-import {Box, Label, MenuGroup, MenuGroupProps} from '@sanity/ui'
+import {Box, Text} from '@sanity/ui'
 import React from 'react'
+import {MenuGroup, MenuGroupProps} from '../../../../ui-components'
 import {DocumentFieldActionGroup} from '../../../config'
 import {useI18nText} from '../../../i18n'
 import {FieldActionMenuNode} from './FieldActionMenuNode'
@@ -16,10 +17,10 @@ export function FieldActionMenuGroup(props: {group: DocumentFieldActionGroup}) {
   if (group.expanded) {
     return (
       <>
-        <Box padding={2} paddingBottom={1}>
-          <Label muted size={0}>
+        <Box padding={2} paddingTop={3}>
+          <Text muted size={1} weight="medium">
             {title}
-          </Label>
+          </Text>
         </Box>
 
         {group.children.map((item, idx) => (
@@ -36,15 +37,7 @@ export function FieldActionMenuGroup(props: {group: DocumentFieldActionGroup}) {
   }
 
   return (
-    <MenuGroup
-      fontSize={1}
-      icon={group.icon}
-      padding={3}
-      popover={POPOVER_PROPS}
-      space={3}
-      text={title}
-      tone={group.tone}
-    >
+    <MenuGroup icon={group.icon} popover={POPOVER_PROPS} text={title} tone={group.tone}>
       {group.children.map((item, idx) => (
         <FieldActionMenuNode
           action={item}
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
index 8f8b743f34a..43bada7c0ce 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
@@ -1,9 +1,10 @@
-import {MenuItem, Text} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {CheckmarkIcon} from '@sanity/icons'
 import {TooltipOfDisabled} from '../../../components'
 import {DocumentFieldActionItem} from '../../../config'
 import {useI18nText} from '../../../i18n'
+import {MenuItem} from '../../../../ui-components'
 
 export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
   const {action} = props
@@ -22,13 +23,10 @@ export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
     <TooltipOfDisabled content={disabledTooltipContent} placement="left">
       <MenuItem
         disabled={Boolean(action.disabled)}
-        fontSize={1}
         icon={action.icon}
         iconRight={action.iconRight || (action.selected ? CheckmarkIcon : undefined)}
         onClick={handleClick}
-        padding={3}
         pressed={action.selected}
-        space={3}
         text={title}
         tone={action.tone}
       />
diff --git a/packages/sanity/src/core/form/inputs/BooleanInput.tsx b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
index dd2546c8ec5..d3e6bd2f6a3 100644
--- a/packages/sanity/src/core/form/inputs/BooleanInput.tsx
+++ b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
@@ -30,7 +30,7 @@ export function BooleanInput(props: BooleanInputProps) {
   const tone: CardTone | undefined = readOnly ? 'transparent' : undefined
 
   return (
-    <Card border data-testid="boolean-input" radius={1} tone={tone}>
+    <Card border data-testid="boolean-input" radius={2} tone={tone}>
       <Flex>
         <ZeroLineHeightBox padding={3}>
           <LayoutSpecificInput
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
index d38b9271124..dd96e7da695 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
@@ -1,21 +1,10 @@
 /* eslint-disable complexity, max-nested-callbacks, no-nested-ternary */
 import React, {useCallback, useMemo, useRef, useState, useId} from 'react'
 import type {CrossDatasetReferenceValue, CrossDatasetReferenceSchemaType} from '@sanity/types'
-import {EllipsisVerticalIcon, ResetIcon as ClearIcon, SyncIcon as ReplaceIcon} from '@sanity/icons'
+import {ResetIcon as ClearIcon, SyncIcon as ReplaceIcon} from '@sanity/icons'
 import {concat, of, type Observable} from 'rxjs'
 import {catchError, distinctUntilChanged, filter, map, scan, switchMap, tap} from 'rxjs/operators'
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Inline,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Stack,
-  useToast,
-} from '@sanity/ui'
+import {Box, Card, Flex, Inline, Menu, Stack, useToast} from '@sanity/ui'
 import {useObservableCallback} from 'react-rx'
 import {FOCUS_TERMINATOR} from '@sanity/util/paths'
 import type {ObjectInputProps} from '../../types'
@@ -23,6 +12,8 @@ import {set, unset} from '../../patch'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {FIXME} from '../../../FIXME'
+import {MenuButton, MenuItem} from '../../../../ui-components'
+import {ContextMenuButton} from '../../../components/contextMenuButton'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {PreviewCard} from '../../../components'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
@@ -303,7 +294,7 @@ export function CrossDatasetReferenceInput(props: CrossDatasetReferenceInputProp
                       hit: hit,
                     }))}
                     onFocus={handleAutocompleteFocus}
-                    radius={1}
+                    radius={2}
                     placeholder={t('inputs.reference.search-placeholder')}
                     onKeyDown={handleAutocompleteKeyDown}
                     readOnly={readOnly}
@@ -382,14 +373,7 @@ export function CrossDatasetReferenceInput(props: CrossDatasetReferenceInputProp
 
                   <Inline paddingX={1}>
                     <MenuButton
-                      button={
-                        <Button
-                          padding={2}
-                          mode="bleed"
-                          icon={EllipsisVerticalIcon}
-                          data-testid="menu-button"
-                        />
-                      }
+                      button={<ContextMenuButton data-testid="menu-button" />}
                       id={`${inputId}-menuButton`}
                       menu={
                         <Menu>
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.styled.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.styled.tsx
index 28aa8d8ffa2..788d82b3739 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.styled.tsx
@@ -7,8 +7,3 @@ export const StyledPreviewFlex = styled(Flex)`
   there's probably better ways of solving this */
   min-height: 36px;
 `
-
-export const TooltipContent = styled(Flex)`
-  /* This limits the width of the tooltip content */
-  max-width: 250px;
-`
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
index 730464d6b1d..981213598cb 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
@@ -1,28 +1,15 @@
-import React, {createElement, ReactNode, useMemo} from 'react'
+import React, {createElement, useMemo} from 'react'
 import type {CrossDatasetType, PreviewValue} from '@sanity/types'
-import {Box, Flex, Inline, Label, Text, Tooltip} from '@sanity/ui'
+import {Badge, Box, Flex, Inline, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon, LaunchIcon} from '@sanity/icons'
 import imageUrlBuilder from '@sanity/image-url'
 import {isImageSource} from '@sanity/asset-utils'
+import {Tooltip} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import type {DocumentAvailability} from '../../../preview'
 import {DefaultPreview, TextWithTone, type PreviewMediaDimensions} from '../../../components'
 import {FIXME} from '../../../FIXME'
-import {StyledPreviewFlex, TooltipContent} from './CrossDatasetReferencePreview.styled'
-
-function UnavailableMessage(props: {children: ReactNode}) {
-  return (
-    <TooltipContent padding={3}>
-      <Box flex={1}>
-        <Box>
-          <Text as="p" size={1}>
-            {props.children}
-          </Text>
-        </Box>
-      </Box>
-    </TooltipContent>
-  )
-}
+import {StyledPreviewFlex} from './CrossDatasetReferencePreview.styled'
 
 /**
  * Used to preview a referenced type
@@ -109,25 +96,19 @@ export function CrossDatasetReferencePreview(props: {
       <Box paddingLeft={3}>
         <Inline space={4}>
           {refType && showTypeLabel && (
-            <Label size={1} muted>
-              {refType.title || refType.type}
-            </Label>
+            <Badge mode="outline">{refType.title || refType.type}</Badge>
           )}
 
           {(insufficientPermissions || notFound) && (
             <Box>
               <Tooltip
                 portal
-                content={
-                  <UnavailableMessage>
-                    {t(
-                      notFound
-                        ? 'inputs.reference.referenced-document-does-not-exist'
-                        : 'inputs.reference.referenced-document-insufficient-permissions',
-                      {documentId: id},
-                    )}
-                  </UnavailableMessage>
-                }
+                content={t(
+                  notFound
+                    ? 'inputs.reference.referenced-document-does-not-exist'
+                    : 'inputs.reference.referenced-document-insufficient-permissions',
+                  {documentId: id},
+                )}
               >
                 <TextWithTone tone="default">
                   {insufficientPermissions ? <AccessDeniedIcon /> : <HelpCircleIcon />}
@@ -140,17 +121,11 @@ export function CrossDatasetReferencePreview(props: {
             <Box>
               <Tooltip
                 portal
-                content={
-                  <TooltipContent padding={2}>
-                    <Text size={1}>
-                      {t(
-                        hasStudioUrl
-                          ? 'inputs.reference.document-opens-in-new-tab'
-                          : 'input.reference.document-cannot-be-opened.failed-to-resolve-url',
-                      )}
-                    </Text>
-                  </TooltipContent>
-                }
+                content={t(
+                  hasStudioUrl
+                    ? 'inputs.reference.document-opens-in-new-tab'
+                    : 'input.reference.document-cannot-be-opened.failed-to-resolve-url',
+                )}
               >
                 <TextWithTone size={1} tone="default" muted={!hasStudioUrl}>
                   <LaunchIcon />
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
index 60b12cd0c23..b12d2c26bc7 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/DisabledFeatureWarning.tsx
@@ -1,8 +1,8 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
+import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import type {CrossDatasetReferenceValue} from '@sanity/types'
 import React, {useMemo} from 'react'
-import styled from 'styled-components'
+import {Button} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 type Props = {
@@ -10,10 +10,6 @@ type Props = {
   onClearValue?: () => void
 }
 
-const ButtonWrapper = styled(Button)`
-  width: 100%;
-`
-
 export function DisabledFeatureWarning({value, onClearValue}: Props) {
   const hasRef = useMemo(() => Boolean(value?._ref), [value?._ref])
   const {t} = useTranslation()
@@ -51,7 +47,7 @@ export function DisabledFeatureWarning({value, onClearValue}: Props) {
           </Text>
         </Box>
         <Stack space={3}>
-          <Text as="h2" size={1} weight="semibold">
+          <Text as="h2" size={1} weight="medium">
             {t('inputs.reference.cross-dataset.feature-unavailable-title')}
           </Text>
           {hasRef && (
@@ -72,11 +68,12 @@ export function DisabledFeatureWarning({value, onClearValue}: Props) {
         </Stack>
       </Flex>
       {onClearValue && hasRef && (
-        <ButtonWrapper
+        <Button
           icon={ResetIcon}
-          text={t('inputs.reference.action.clear')}
-          onClick={onClearValue}
           mode="ghost"
+          onClick={onClearValue}
+          text={t('inputs.reference.action.clear')}
+          width="fill"
         />
       )}
     </Card>
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
index 074f97e7f79..d40b023a4a2 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/ReferenceAutocomplete.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef, useCallback} from 'react'
-import {Autocomplete, Box, Flex, Placement, Popover, Text} from '@sanity/ui'
+import {Autocomplete, Box, Flex, Placement, Text} from '@sanity/ui'
 import styled from 'styled-components'
+import {Popover} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 const StyledPopover = styled(Popover)`
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx
index 855c0261fc8..6ca4f679651 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/CommonDateTimeInput.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 
-import React, {useEffect} from 'react'
+import React, {FocusEvent, useEffect} from 'react'
 
 import {TextInput, useForwardedRef} from '@sanity/ui'
 import {useTranslation} from '../../../i18n/hooks/useTranslation'
@@ -53,7 +53,7 @@ export const CommonDateTimeInput = React.forwardRef(function CommonDateTimeInput
   }, [value])
 
   const handleDatePickerInputChange = React.useCallback(
-    (event: any) => {
+    (event: FocusEvent<HTMLInputElement>) => {
       const nextInputValue = event.currentTarget.value
       const result = nextInputValue === '' ? null : parseInputValue(nextInputValue)
 
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/DatePicker.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/DatePicker.tsx
index 90c2d432655..0688b3a3058 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/DatePicker.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/DatePicker.tsx
@@ -16,7 +16,7 @@ export const DatePicker = React.forwardRef(function DatePicker(
   const [focusedDate, setFocusedDay] = React.useState<Date>()
 
   const handleSelect = React.useCallback(
-    (nextDate: any) => {
+    (nextDate: Date) => {
       onChange(nextDate)
       setFocusedDay(undefined)
     },
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
index 6c997e6d3a2..16058b35121 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/DateTimeInput.tsx
@@ -1,10 +1,11 @@
-import React, {forwardRef, useCallback, useRef, useState} from 'react'
+import React, {KeyboardEvent, forwardRef, useCallback, useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
-import {Box, Button, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
+import {Box, Flex, LayerProvider, useClickOutside, useForwardedRef} from '@sanity/ui'
 import {CalendarIcon} from '@sanity/icons'
+import {Button, Popover} from '../../../../../ui-components'
 import {DatePicker} from './DatePicker'
 import {LazyTextInput} from './LazyTextInput'
-import {CalendarLabels, MonthNames} from './calendar/types'
+import {CalendarLabels} from './calendar/types'
 
 export interface DateTimeInputProps {
   customValidity?: string
@@ -47,7 +48,7 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
     forwardedRef.current?.select()
   }, [forwardedRef])
 
-  const handleKeyUp = useCallback((e: any) => {
+  const handleKeyUp = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Escape') {
       setPickerOpen(false)
     }
@@ -56,17 +57,17 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
   const handleClick = useCallback(() => setPickerOpen(true), [])
 
   const suffix = (
-    <Box padding={1}>
+    <Flex style={{padding: '5px'}}>
       <Button
         ref={buttonRef}
         icon={CalendarIcon}
         mode="bleed"
-        padding={2}
         onClick={handleClick}
         style={{display: 'block'}}
         data-testid="select-date-button"
+        tooltipProps={{content: 'Select date'}}
       />
-    </Box>
+    </Flex>
   )
 
   return (
@@ -102,7 +103,6 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
               open
               placement="bottom"
               ref={setPopoverRef}
-              radius={2}
             >
               {suffix}
             </Popover>
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/LazyTextInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/LazyTextInput.tsx
index 03aa13571fb..0bb5af07ad0 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/LazyTextInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/LazyTextInput.tsx
@@ -1,17 +1,5 @@
-import React from 'react'
-import {TextInput} from '@sanity/ui'
-
-type TextInputProps = React.ComponentProps<typeof TextInput>
-
-// todo: delete this when v0.34 of @sanity/ui is out
-type Workaround = any
-
-type Props = Workaround &
-  Omit<TextInputProps, 'onChange'> & {
-    onChange?: (
-      event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>,
-    ) => void
-  }
+import React, {ChangeEvent, FocusEvent, HTMLProps, SyntheticEvent} from 'react'
+import {TextInput, TextInputProps} from '@sanity/ui'
 
 /**
  * A TextInput that only emit onChange when it has to
@@ -19,17 +7,17 @@ type Props = Workaround &
  * field (e.g. onBlur) and the input value at this time is different from the given `value` prop
  */
 export const LazyTextInput = React.forwardRef(function LazyTextInput(
-  {onChange, onBlur, onKeyPress, value, ...rest}: Props,
+  {onChange, onBlur, onKeyPress, value, ...rest}: TextInputProps & HTMLProps<HTMLInputElement>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const [inputValue, setInputValue] = React.useState<string>()
 
-  const handleChange = React.useCallback((event: any) => {
+  const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.currentTarget.value)
   }, [])
 
   const checkEvent = React.useCallback(
-    (event: any) => {
+    (event: SyntheticEvent<HTMLInputElement>) => {
       const currentValue = event.currentTarget.value
       if (currentValue !== `${value}`) {
         if (onChange) {
@@ -42,7 +30,7 @@ export const LazyTextInput = React.forwardRef(function LazyTextInput(
   )
 
   const handleBlur = React.useCallback(
-    (e: any) => {
+    (e: FocusEvent<HTMLInputElement>) => {
       checkEvent(e)
       if (onBlur) {
         onBlur(e)
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
index 47d1c208dce..dbd604062e0 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
@@ -1,8 +1,9 @@
-import {Box, Button, Flex, Grid, Select, Text, useForwardedRef} from '@sanity/ui'
+import {Box, Flex, Grid, Select, Text, useForwardedRef} from '@sanity/ui'
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {addDays, addMonths, setDate, setHours, setMinutes, setMonth, setYear} from 'date-fns'
 import {range} from 'lodash'
-import React, {forwardRef, useCallback, useEffect} from 'react'
+import React, {KeyboardEvent, forwardRef, useCallback, useEffect} from 'react'
+import {Button} from '../../../../../../ui-components'
 import {CalendarMonth} from './CalendarMonth'
 import {ARROW_KEYS, DEFAULT_TIME_PRESETS, HOURS_24} from './constants'
 import {features} from './features'
@@ -35,6 +36,11 @@ const PRESERVE_FOCUS_ELEMENT = (
   />
 )
 
+// This buttons use a specific styling, given they are intended to be aligned with the select elements.
+const CALENDAR_ICON_BUTTON_PROPS = {
+  padding: 2,
+}
+
 export const Calendar = forwardRef(function Calendar(
   props: CalendarProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
@@ -112,12 +118,13 @@ export const Calendar = forwardRef(function Calendar(
   }, [ref])
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       if (!ARROW_KEYS.includes(event.key)) {
         return
       }
+      const target = event.currentTarget
       event.preventDefault()
-      if (event.target instanceof HTMLElement && event.target.hasAttribute('data-calendar-grid')) {
+      if (target.hasAttribute('data-calendar-grid')) {
         focusCurrentWeekDay()
         return
       }
@@ -176,19 +183,9 @@ export const Calendar = forwardRef(function Calendar(
         {/* Day presets */}
         {features.dayPresets && (
           <Grid columns={3} data-ui="CalendaryDayPresets" gap={1}>
-            <Button
-              text={labels.goToYesterday}
-              mode="bleed"
-              fontSize={1}
-              onClick={handleYesterdayClick}
-            />
-            <Button text={labels.goToToday} mode="bleed" fontSize={1} onClick={handleTodayClick} />
-            <Button
-              text={labels.goToTomorrow}
-              mode="bleed"
-              fontSize={1}
-              onClick={handleTomorrowClick}
-            />
+            <Button text={labels.goToYesterday} mode="bleed" onClick={handleYesterdayClick} />
+            <Button text={labels.goToToday} mode="bleed" onClick={handleTodayClick} />
+            <Button text={labels.goToTomorrow} mode="bleed" onClick={handleTomorrowClick} />
           </Grid>
         )}
 
@@ -246,6 +243,9 @@ export const Calendar = forwardRef(function Calendar(
               <Box>
                 <Select
                   aria-label={labels.selectHour}
+                  fontSize={1}
+                  padding={2}
+                  radius={2}
                   value={selectedDate?.getHours()}
                   onChange={handleHoursChange}
                 >
@@ -258,12 +258,15 @@ export const Calendar = forwardRef(function Calendar(
               </Box>
 
               <Box paddingX={1}>
-                <Text>:</Text>
+                <Text size={1}>:</Text>
               </Box>
 
               <Box>
                 <Select
                   aria-label={labels.selectMinute}
+                  fontSize={1}
+                  padding={2}
+                  radius={2}
                   value={selectedDate?.getMinutes()}
                   onChange={handleMinutesChange}
                 >
@@ -317,15 +320,7 @@ function CalendarTimePresetButton(props: {
     onTimeChange(hours, minutes)
   }, [hours, minutes, onTimeChange])
 
-  return (
-    <Button
-      text={text}
-      aria-label={props['aria-label']}
-      mode="bleed"
-      fontSize={1}
-      onClick={handleClick}
-    />
-  )
+  return <Button text={text} aria-label={props['aria-label']} mode="bleed" onClick={handleClick} />
 }
 
 function CalendarMonthSelect(props: {
@@ -345,17 +340,20 @@ function CalendarMonthSelect(props: {
   const handleNextMonthClick = useCallback(() => moveFocusedDate(1), [moveFocusedDate])
 
   return (
-    <Flex flex={1}>
+    <Flex flex={1} gap={1}>
       <Button
         aria-label={labels.goToPreviousMonth}
         onClick={handlePrevMonthClick}
         mode="bleed"
         icon={ChevronLeftIcon}
-        paddingX={2}
-        radius={0}
+        tooltipProps={{content: 'Previous month'}}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Button with specific styling requirements
+        {...CALENDAR_ICON_BUTTON_PROPS}
       />
+
       <Box flex={1}>
-        <Select radius={0} value={value} onChange={onChange}>
+        <Select fontSize={1} radius={2} value={value} onChange={onChange} padding={2}>
           {monthNames.map((monthName, i) => (
             // eslint-disable-next-line react/no-array-index-key
             <option key={i} value={i}>
@@ -369,8 +367,10 @@ function CalendarMonthSelect(props: {
         mode="bleed"
         icon={ChevronRightIcon}
         onClick={handleNextMonthClick}
-        paddingX={2}
-        radius={0}
+        tooltipProps={{content: 'Next month'}}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Button with specific styling requirements
+        {...CALENDAR_ICON_BUTTON_PROPS}
       />
     </Flex>
   )
@@ -389,23 +389,27 @@ function CalendarYearSelect(props: {
   const handleNextYearClick = useCallback(() => moveFocusedDate(12), [moveFocusedDate])
 
   return (
-    <Flex>
+    <Flex gap={1}>
       <Button
         aria-label={labels.goToPreviousYear}
         onClick={handlePrevYearClick}
         mode="bleed"
         icon={ChevronLeftIcon}
-        paddingX={2}
-        radius={0}
+        tooltipProps={{content: 'Previous year'}}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Button with specific styling requirements
+        {...CALENDAR_ICON_BUTTON_PROPS}
       />
-      <YearInput value={value} onChange={onChange} radius={0} style={{width: 65}} />
+      <YearInput value={value} onChange={onChange} radius={0} style={{width: 48}} />
       <Button
         aria-label={labels.goToNextYear}
         onClick={handleNextYearClick}
         mode="bleed"
         icon={ChevronRightIcon}
-        paddingX={2}
-        radius={0}
+        tooltipProps={{content: 'Next year'}}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - Button with specific styling requirements
+        {...CALENDAR_ICON_BUTTON_PROPS}
       />
     </Flex>
   )
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarDay.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarDay.tsx
index 5d1588f62fd..9f3af7c3e2d 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarDay.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarDay.tsx
@@ -29,13 +29,14 @@ export function CalendarDay(props: CalendarDayProps) {
         role="button"
         tabIndex={-1}
         onClick={handleClick}
-        padding={3}
+        padding={2}
         radius={2}
         selected={selected}
         tone={isToday || selected ? 'primary' : 'default'}
       >
         <Text
           muted={!selected && !isCurrentMonth}
+          size={1}
           style={{textAlign: 'center'}}
           weight={isCurrentMonth ? 'medium' : 'regular'}
         >
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarMonth.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarMonth.tsx
index 3e8f64730d9..98882e10a18 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarMonth.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/CalendarMonth.tsx
@@ -1,6 +1,5 @@
 import {Box, Grid, Text} from '@sanity/ui'
 import {isSameDay, isSameMonth} from 'date-fns'
-import React from 'react'
 import {useCurrentLocale} from '../../../../../i18n/hooks/useLocale'
 import {CalendarDay} from './CalendarDay'
 import {useWeeksOfMonth} from './utils'
diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/YearInput.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/YearInput.tsx
index dd48b782306..e39b78362b5 100644
--- a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/YearInput.tsx
+++ b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/YearInput.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
-import {TextInput} from '@sanity/ui'
+import React, {ChangeEvent, HTMLProps} from 'react'
+import {TextInputProps} from '@sanity/ui'
 import {LazyTextInput} from '../LazyTextInput'
 
-type Props = Omit<React.ComponentProps<typeof TextInput>, 'onChange' | 'value'> & {
-  value?: number
-  onChange: (year: number) => void
-}
+export const YearInput = (
+  props: {onChange: (year: number) => void} & TextInputProps &
+    Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>,
+) => {
+  const {onChange, ...restProps} = props
 
-export const YearInput = ({onChange, ...props}: Props) => {
   const handleChange = React.useCallback(
-    (event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>) => {
+    (event: ChangeEvent<HTMLInputElement>) => {
       const numericValue = parseInt(event.currentTarget.value, 10)
       if (!isNaN(numericValue)) {
         onChange(numericValue)
@@ -18,5 +18,14 @@ export const YearInput = ({onChange, ...props}: Props) => {
     [onChange],
   )
 
-  return <LazyTextInput {...props} onChange={handleChange} inputMode="numeric" />
+  return (
+    <LazyTextInput
+      {...restProps}
+      fontSize={1}
+      onChange={handleChange}
+      inputMode="numeric"
+      padding={2}
+      radius={2}
+    />
+  )
 }
diff --git a/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx b/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
index b9ba2447dbe..ef3c0f929f9 100644
--- a/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
+++ b/packages/sanity/src/core/form/inputs/InvalidValueInput/InvalidValueInput.tsx
@@ -1,13 +1,14 @@
-import {Button, Card, Code, Stack, Text} from '@sanity/ui'
+import {Card, Code, Stack, Text} from '@sanity/ui'
 import React, {forwardRef, useCallback, useImperativeHandle, useMemo} from 'react'
+import {isPlainObject} from 'lodash'
+import {useTranslation, Translate} from '../../../i18n'
 import {PatchEvent, set, unset} from '../../patch'
 import {Alert} from '../../components/Alert'
 import {Details} from '../../components/Details'
 import {isDev} from '../../../environment'
+import {Button} from '../../../../ui-components'
 import {converters as CONVERTERS, ValueConverter} from './converters'
 import {UntypedValueInput} from './UntypedValueInput'
-import {isPlainObject} from 'lodash'
-import {useTranslation, Translate} from '../../../i18n'
 
 interface Converter extends ValueConverter {
   from: string
@@ -126,7 +127,7 @@ export const InvalidValueInput = forwardRef(
             )}
 
             <Stack marginTop={2} space={2}>
-              <Text size={1} weight="semibold">
+              <Text size={1} weight="medium">
                 <Translate
                   t={t}
                   i18nKey="inputs.invalid-value.current-type"
@@ -183,17 +184,7 @@ function ConvertButton({
   return (
     <Button
       onClick={handleClick}
-      text={
-        <>
-          <Translate
-            t={t}
-            i18nKey="inputs.invalid-value.convert-button.text"
-            values={{
-              targetType: converter.to,
-            }}
-          />
-        </>
-      }
+      text={t('inputs.invalid-value.convert-button.text', {targetType: converter.to})}
     />
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx b/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
index cc85af158bb..78f45e4e141 100644
--- a/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
+++ b/packages/sanity/src/core/form/inputs/InvalidValueInput/UntypedValueInput.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo} from 'react'
-import {Button, Card, Code, Grid, Stack, Text} from '@sanity/ui'
+import {Card, Code, Grid, Stack, Text} from '@sanity/ui'
 import {PatchEvent, setIfMissing, unset} from '../../patch'
+import {Button} from '../../../../ui-components'
 import {Alert} from '../../components/Alert'
 import {Details} from '../../components/Details'
 import {useSchema} from '../../../hooks'
@@ -34,17 +35,9 @@ function SetMissingTypeButton({
   return (
     <Button
       onClick={handleClick}
-      text={
-        <>
-          <Translate
-            t={t}
-            i18nKey="inputs.untyped-value.convert-button.text"
-            values={{
-              targetType: targetType,
-            }}
-          />
-        </>
-      }
+      text={t('inputs.untyped-value.convert-button.text', {
+        targetType: targetType,
+      })}
     />
   )
 }
@@ -126,7 +119,7 @@ export function UntypedValueInput({validTypes, value, onChange}: UntypedValueInp
           )}
 
           <Stack space={2}>
-            <Text as="h4" weight="semibold" size={1}>
+            <Text as="h4" weight="medium" size={1}>
               {t('inputs.untyped-value.details.json-dump-prefix')}
             </Text>
 
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/ObjectInput.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/ObjectInput.tsx
index 2c0e33b9536..84b05d1ada5 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/ObjectInput.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/ObjectInput.tsx
@@ -78,7 +78,7 @@ export const ObjectInput = memo(function ObjectInput(props: ObjectInputProps) {
     return null
   }
   return (
-    <Stack space={5}>
+    <Stack space={6}>
       {groups.length > 0 ? (
         <FieldGroupTabsWrapper $level={level} data-testid="field-groups">
           <FieldGroupTabs
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
index dc68e8273d4..bd735242135 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback} from 'react'
-import {Box, Button, Card, Code, Stack, Text} from '@sanity/ui'
+import {Box, Card, Code, Stack, Text} from '@sanity/ui'
 import {TrashIcon} from '@sanity/icons'
 import {FormPatch, PatchEvent, unset} from '../../patch'
+import {Button} from '../../../../ui-components'
 import {Details} from '../../components/Details'
 import {Alert} from '../../components/Alert'
 import {isDev} from '../../../environment'
@@ -85,32 +86,37 @@ function UnknownField({
   const {t} = useTranslation()
 
   return (
-    <Card as="li" padding={3} radius={2} shadow={1} tone="caution">
-      <Stack space={2}>
-        <Card border radius={1}>
-          <Card borderBottom padding={3}>
-            <Code weight="medium">{fieldName}</Code>
-          </Card>
-          <Box overflow="auto" padding={3}>
-            <Code language="json">{JSON.stringify(value, null, 2)}</Code>
-          </Box>
-        </Card>
+    <Card as="li" overflow="hidden" radius={2} shadow={1} tone="caution">
+      <Card padding={3} shadow={1} tone="inherit">
+        <Code size={1}>{fieldName}</Code>
+      </Card>
+
+      <Box overflow="auto" padding={3}>
+        <Code language="json" size={1}>
+          {JSON.stringify(value, null, 2)}
+        </Code>
+      </Box>
 
-        {readOnly && (
+      {readOnly && (
+        <Box padding={3}>
           <Text as="p" muted size={1}>
             <Translate t={t} i18nKey="inputs.object.unknown-fields.read-only.description" />
           </Text>
-        )}
+        </Box>
+      )}
 
-        {!readOnly && (
+      {!readOnly && (
+        <Card padding={3} shadow={1} tone="inherit">
           <Button
             icon={TrashIcon}
+            mode="ghost"
             onClick={handleUnsetClick}
+            size="large"
             tone="critical"
             text={t('inputs.object.unknown-fields.remove-field-button.text')}
           />
-        )}
-      </Stack>
+        </Card>
+      )}
     </Card>
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
index e41799d74e2..a1df77cd192 100644
--- a/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
+++ b/packages/sanity/src/core/form/inputs/ObjectInput/fieldGroups/GroupTab.tsx
@@ -1,5 +1,5 @@
 import React, {forwardRef} from 'react'
-import {Tab} from '@sanity/ui'
+import {Tab} from '../../../../../ui-components'
 
 interface GroupType {
   'aria-controls': string
@@ -27,7 +27,6 @@ export const GroupTab = forwardRef(function GroupTab(
   return (
     <Tab
       data-testid={`group-tab-${props.name}`}
-      size={1}
       id={`${props.name}-tab`}
       label={props.title}
       ref={ref}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Compositor.styles.tsx b/packages/sanity/src/core/form/inputs/PortableText/Compositor.styles.tsx
index 2e9f11bdca7..80f776d19e7 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/Compositor.styles.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/Compositor.styles.tsx
@@ -1,13 +1,15 @@
+/* eslint-disable camelcase */
+
 import {Layer} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {getTheme_v2} from '@sanity/ui/theme'
 import {focusRingBorderStyle, focusRingStyle} from '../../components/withFocusRing/helpers'
 
-export const Root = styled.div(({theme}) => {
-  const {focusRing, input} = theme.sanity
-  const base = theme.sanity.color.base
-  const color = theme.sanity.color.input
+export const Root = styled.div((props) => {
+  const {color, input, radius} = getTheme_v2(props.theme)
+
   const border = {
-    color: color.default.enabled.border,
+    color: color.input.default.enabled.border,
     width: input.border.width,
   }
 
@@ -32,15 +34,15 @@ export const Root = styled.div(({theme}) => {
       bottom: 0;
       box-shadow: var(--input-box-shadow);
       z-index: 2;
-      border-radius: 1px;
+      border-radius: ${radius[2]}px;
       pointer-events: none;
     }
 
     &:not([data-read-only])[data-focused] [data-border] {
       --input-box-shadow: ${focusRingStyle({
-        base,
+        base: color,
         border,
-        focusRing,
+        focusRing: input.text.focusRing,
       })};
     }
   `
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Editor.styles.tsx b/packages/sanity/src/core/form/inputs/PortableText/Editor.styles.tsx
index 2481642795a..5ca92d3a478 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/Editor.styles.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/Editor.styles.tsx
@@ -1,5 +1,8 @@
+/* eslint-disable camelcase */
+
 import {Card, Container, rem} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {getTheme_v2} from '@sanity/ui/theme'
 import {ScrollContainer} from '../../../components/scroll'
 import {createListName, TEXT_LEVELS} from './text'
 
@@ -128,7 +131,7 @@ export const EditableWrapper = styled(Card)<{$isFullscreen: boolean; $readOnly?:
       pointer-events: none;
       border: 1px solid var(--card-focus-ring-color) !important;
       height: 0px !important;
-      border-radius: 1px;
+      border-radius: ${(props) => getTheme_v2(props.theme).radius[2]}px;
       margin-top: -3px;
       left: calc(
         ${({$isFullscreen, theme}) =>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
index 45228590b4d..f48a9cf35db 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
@@ -12,8 +12,15 @@ import {
   type RenderStyleFunction,
 } from '@sanity/portable-text-editor'
 import type {Path} from '@sanity/types'
-import {BoundaryElementProvider, useBoundaryElement, useGlobalKeyDown, useLayer} from '@sanity/ui'
+import {
+  BoundaryElementProvider,
+  TooltipDelayGroupProvider,
+  useBoundaryElement,
+  useGlobalKeyDown,
+  useLayer,
+} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
+import {TOOLTIP_DELAY_PROPS} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import {Toolbar} from './toolbar'
 import {Decorator} from './text'
@@ -163,15 +170,17 @@ export function Editor(props: EditorProps) {
   return (
     <Root $fullscreen={isFullscreen} data-testid="pt-editor">
       {isActive && (
-        <ToolbarCard data-testid="pt-editor__toolbar-card" shadow={1}>
-          <Toolbar
-            hotkeys={hotkeys}
-            isFullscreen={isFullscreen}
-            onMemberOpen={handleToolBarOnMemberOpen}
-            onToggleFullscreen={onToggleFullscreen}
-            readOnly={readOnly}
-          />
-        </ToolbarCard>
+        <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+          <ToolbarCard data-testid="pt-editor__toolbar-card" shadow={1}>
+            <Toolbar
+              hotkeys={hotkeys}
+              isFullscreen={isFullscreen}
+              onMemberOpen={handleToolBarOnMemberOpen}
+              onToggleFullscreen={onToggleFullscreen}
+              readOnly={readOnly}
+            />
+          </ToolbarCard>
+        </TooltipDelayGroupProvider>
       )}
 
       <EditableCard flex={1} tone={readOnly ? 'transparent' : 'default'}>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/InvalidValue.tsx b/packages/sanity/src/core/form/inputs/PortableText/InvalidValue.tsx
index 68ed5fc3eb2..36fc8892f66 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/InvalidValue.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/InvalidValue.tsx
@@ -1,5 +1,14 @@
 import type {InvalidValueResolution} from '@sanity/portable-text-editor'
-import {Box, Button, Card, Code, Grid, Stack, Text} from '@sanity/ui'
+import {
+  Box,
+  // eslint-disable-next-line no-restricted-imports
+  Button,
+  Card,
+  Code,
+  Grid,
+  Stack,
+  Text,
+} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {Translate, useTranslation} from '../../../i18n'
 import {Alert} from '../../components/Alert'
@@ -35,6 +44,7 @@ export function InvalidValue(props: InvalidValueProps) {
                 onClick={onIgnore}
                 text={t('inputs.portable-text.invalid-value.ignore-button.text')}
               />
+              {/* @todo: use plain string */}
               {!readOnly && (
                 <Button
                   onClick={handleAction}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
index e2e28d1c459..b08094ee6c4 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/_common/resolvePreviewComponent.tsx
@@ -1,5 +1,6 @@
-import {Button, Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
+import {Card, Code, ErrorBoundary, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
+import {Button} from '../../../../../../ui-components'
 import {SanityDefaultPreview, PreviewLoader} from '../../../../../preview'
 
 export const resolvePreviewComponent = () => TestPreview
diff --git a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
index b54872d59e9..17a15bf6045 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
@@ -1,9 +1,9 @@
-import {Box, Button, Text, Tooltip} from '@sanity/ui'
 import React, {memo, useCallback} from 'react'
 import {CopyIcon} from '@sanity/icons'
 import {keyGenerator} from '@sanity/portable-text-editor'
 import {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {RenderBlockActionsCallback} from '../../../../types/_transitional'
+import {Button} from '../../../../../../ui-components'
 
 const BlockActions = memo(function BlockActions(props: {
   block: PortableTextBlock
@@ -28,24 +28,13 @@ const BlockActions = memo(function BlockActions(props: {
   }, [block, insert])
 
   return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>Duplicate</Text>
-        </Box>
-      }
-      placement="right"
-      portal="default"
-    >
-      <Button
-        aria-label="Duplicate"
-        fontSize={1}
-        icon={CopyIcon}
-        onClick={handleDuplicate}
-        padding={2}
-        mode="bleed"
-      />
-    </Tooltip>
+    <Button
+      aria-label="Duplicate"
+      icon={CopyIcon}
+      onClick={handleDuplicate}
+      tooltipProps={{content: 'Duplicate', placement: 'right', portal: 'default'}}
+      mode="bleed"
+    />
   )
 })
 
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
index 7e8179f6fc6..1dcdb2f7d16 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
@@ -1,8 +1,8 @@
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import type {ObjectSchemaType, Path, PortableTextObject} from '@sanity/types'
-import {Tooltip} from '@sanity/ui'
 import React, {ComponentType, useCallback, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
+import {Tooltip} from '../../../../../ui-components'
 import {pathToString} from '../../../../field'
 import type {
   BlockAnnotationProps,
@@ -123,7 +123,7 @@ export function Annotation(props: AnnotationProps) {
           placement="bottom"
           portal="default"
           content={
-            <TooltipBox padding={2}>
+            <TooltipBox>
               <Markers
                 markers={markers}
                 renderCustomMarkers={renderCustomMarkers}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
index 74791a63bf1..1ef8028bce4 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
@@ -1,23 +1,8 @@
 import React, {useState, useRef, useMemo, useEffect, useCallback, startTransition} from 'react'
-import {
-  Box,
-  Button,
-  Inline,
-  Popover,
-  PopoverProps,
-  Text,
-  useGlobalKeyDown,
-  useTheme,
-} from '@sanity/ui'
-import styled from 'styled-components'
+import {Box, Flex, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
 import {useTranslation} from '../../../../i18n'
-
-const ToolbarPopover = styled(Popover)`
-  &[data-popper-reference-hidden='true'] {
-    display: none !important;
-  }
-`
+import {Button, Popover, PopoverProps} from '../../../../../ui-components'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['top', 'bottom']
 
@@ -170,36 +155,36 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
   }
 
   return (
-    <ToolbarPopover
+    <Popover
       open={popoverOpen}
       floatingBoundary={floatingBoundary}
       constrainSize
       content={
         <Box padding={1} data-testid="annotation-toolbar-popover">
-          <Inline space={1}>
+          <Flex gap={1}>
             <Box padding={2}>
-              <Text weight="semibold" size={1}>
+              <Text weight="medium" size={1}>
                 {title}
               </Text>
             </Box>
             <Button
+              aria-label={t('inputs.portable-text.action.edit-annotation')}
               icon={EditIcon}
               mode="bleed"
               onClick={handleEditButtonClicked}
-              padding={2}
-              alt={t('inputs.portable-text.action.edit-annotation')}
               tabIndex={0}
+              tooltipProps={null}
             />
             <Button
+              aria-label={t('inputs.portable-text.action.remove-annotation')}
               icon={TrashIcon}
               mode="bleed"
-              padding={2}
               onClick={handleRemoveButtonClicked}
-              tone="critical"
-              alt={t('inputs.portable-text.action.remove-annotation')}
               tabIndex={0}
+              tone="critical"
+              tooltipProps={null}
             />
-          </Inline>
+          </Flex>
         </Box>
       }
       fallbackPlacements={POPOVER_FALLBACK_PLACEMENTS}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts
index 0ed9d8046ae..a83e4de5f91 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts
@@ -24,7 +24,7 @@ export const Root = styled(Card)((props: {theme: Theme}) => {
     position: relative;
 
     &[data-focused] {
-      box-shadow: 0 0 0 1px ${color.selectable?.primary.selected.border};
+      --card-border-color: var(--card-focus-ring-color);
     }
 
     &:not([data-focused]):not([data-selected]) {
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
index 15e89f01eff..d4955b726fd 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
@@ -5,9 +5,10 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, isImage} from '@sanity/types'
-import {Tooltip, Flex, ResponsivePaddingProps, Box} from '@sanity/ui'
+import {Box, Flex, ResponsivePaddingProps} from '@sanity/ui'
 import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
+import {Tooltip} from '../../../../../ui-components'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -187,7 +188,7 @@ export function BlockObject(props: BlockObjectProps) {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             validation={validation}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
index 8c071e09632..2eea2bef726 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
@@ -1,14 +1,5 @@
-import {EditIcon, LinkIcon, TrashIcon, EyeOpenIcon, EllipsisVerticalIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  useGlobalKeyDown,
-} from '@sanity/ui'
+import {EditIcon, LinkIcon, TrashIcon, EyeOpenIcon, EllipsisHorizontalIcon} from '@sanity/icons'
+import {Box, Flex, Menu, useGlobalKeyDown} from '@sanity/ui'
 import React, {
   type PropsWithChildren,
   type ReactElement,
@@ -20,6 +11,7 @@ import React, {
   useRef,
 } from 'react'
 import {type PortableTextBlock, isReference} from '@sanity/types'
+import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {IntentLink} from 'sanity/router'
 
@@ -102,11 +94,11 @@ export function BlockObjectActionsMenu(props: BlockObjectActionsMenuProps): Reac
           button={
             <Button
               aria-label={t('inputs.portable-text.block.open-menu-aria-label')}
-              fontSize={1}
-              iconRight={EllipsisVerticalIcon}
+              icon={EllipsisHorizontalIcon}
               mode="bleed"
-              paddingX={2}
+              paddingY={3}
               tabIndex={focused ? 0 : 1}
+              tooltipProps={{content: 'Open menu'}}
             />
           }
           ref={menuButton}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
index f886216daa6..06affe1822c 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -5,8 +5,8 @@ import {
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import {Tooltip} from '@sanity/ui'
 import {isEqual} from '@sanity/util/paths'
+import {Tooltip} from '../../../../../ui-components'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -186,7 +186,7 @@ export const InlineObject = (props: InlineObjectProps) => {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             validation={validation}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
index 2298a594c36..6c21ce5d07d 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
@@ -1,23 +1,8 @@
 import React, {useRef, useCallback, useMemo} from 'react'
-import {
-  Box,
-  Button,
-  Inline,
-  Popover,
-  PopoverProps,
-  Text,
-  useGlobalKeyDown,
-  useTheme,
-} from '@sanity/ui'
-import styled from 'styled-components'
+import {Box, Inline, Text, useGlobalKeyDown, useTheme} from '@sanity/ui'
 import {EditIcon, TrashIcon} from '@sanity/icons'
 import {useTranslation} from '../../../../i18n'
-
-const ToolbarPopover = styled(Popover)`
-  &[data-popper-reference-hidden='true'] {
-    display: none !important;
-  }
-`
+import {Button, Popover, PopoverProps} from '../../../../../ui-components'
 
 const POPOVER_FALLBACK_PLACEMENTS: PopoverProps['fallbackPlacements'] = ['top', 'bottom']
 
@@ -89,7 +74,7 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
       <Box padding={1}>
         <Inline space={1}>
           <Box padding={2}>
-            <Text weight="semibold" size={1}>
+            <Text weight="medium" size={1}>
               {title}
             </Text>
           </Box>
@@ -97,18 +82,16 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
             icon={EditIcon}
             mode="bleed"
             onClick={onEdit}
-            padding={2}
             ref={editButtonRef}
-            alt={t('inputs.portable-text.inline-object.edit')}
+            tooltipProps={{content: t('inputs.portable-text.inline-object.edit')}}
           />
           <Button
             ref={deleteButtonRef}
             icon={TrashIcon}
             mode="bleed"
-            padding={2}
             onClick={handleDelete}
             tone="critical"
-            alt={t('inputs.portable-text.inline-object.remove')}
+            tooltipProps={{content: t('inputs.portable-text.inline-object.remove')}}
           />
         </Inline>
       </Box>
@@ -117,7 +100,7 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
   )
 
   return (
-    <ToolbarPopover
+    <Popover
       constrainSize
       content={popoverContent}
       fallbackPlacements={POPOVER_FALLBACK_PLACEMENTS}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
index 66d2cd5a7f7..3b633317c0b 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/DialogModal.tsx
@@ -1,7 +1,8 @@
 import React, {useId, useRef, useState} from 'react'
-import {Box, Dialog} from '@sanity/ui'
+import {Box} from '@sanity/ui'
 import {PresenceOverlay} from '../../../../../presence'
 import {VirtualizerScrollInstanceProvider} from '../../../arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
+import {Dialog} from '../../../../../../ui-components'
 import {ModalWidth} from './types'
 
 interface DefaultEditDialogProps {
@@ -36,9 +37,7 @@ export function DefaultEditDialog(props: DefaultEditDialogProps) {
           scrollElement={contentElement}
           containerElement={containerElement}
         >
-          <Box padding={4} ref={containerElement}>
-            {children}
-          </Box>
+          <Box ref={containerElement}>{children}</Box>
         </VirtualizerScrollInstanceProvider>
       </PresenceOverlay>
     </Dialog>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
index 3dcf515d99c..46af15cc7db 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.styles.ts
@@ -1,12 +1,8 @@
-import {Box, Popover} from '@sanity/ui'
+import {Box} from '@sanity/ui'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui-components'
 
 export const RootPopover = styled(Popover)`
-  &[data-popper-reference-hidden='true'] {
-    visibility: hidden;
-    pointer-events: none;
-  }
-
   & > div {
     overflow: hidden;
     overflow: clip;
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
index 8dc81cad6c6..4c8c2920c99 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable react/no-unused-prop-types */
 
 import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Flex, PopoverProps, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
+import {Box, Flex, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
+import {Button, PopoverProps} from '../../../../../../ui-components'
 import {PresenceOverlay} from '../../../../../presence'
 import {PortableTextEditorElement} from '../../Compositor'
 import {VirtualizerScrollInstanceProvider} from '../../../arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider'
@@ -82,7 +83,7 @@ function Content(props: PopoverEditDialogProps) {
         <ContentHeaderBox flex="none" padding={1}>
           <Flex align="center">
             <Box flex={1} padding={2}>
-              <Text weight="semibold">{title}</Text>
+              <Text weight="medium">{title}</Text>
             </Box>
 
             <Button
@@ -90,7 +91,7 @@ function Content(props: PopoverEditDialogProps) {
               icon={CloseIcon}
               mode="bleed"
               onClick={onClose}
-              padding={2}
+              tooltipProps={{content: 'Close'}}
             />
           </Flex>
         </ContentHeaderBox>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts
index 5dbb949da47..031f0d4afeb 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts
+++ b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts
@@ -1,6 +1,9 @@
+/* eslint-disable camelcase */
+
 import {hues} from '@sanity/color'
 import {Box, Flex, Theme} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {getTheme_v2, rgba} from '@sanity/ui/theme'
 import {TEXT_BULLET_MARKERS, TEXT_NUMBER_FORMATS} from './constants'
 import {createListName} from './helpers'
 
@@ -9,15 +12,16 @@ interface TextBlockStyleProps {
 }
 
 function textBlockStyle(props: TextBlockStyleProps & {theme: Theme}) {
-  const {$level, theme} = props
-  const {color, fonts, radius, space} = theme.sanity
+  const {$level} = props
+  const {color, font, radius, space} = getTheme_v2(props.theme)
+
   const numberMarker = TEXT_NUMBER_FORMATS[($level - 1) % TEXT_NUMBER_FORMATS.length]
   const bulletMarker = TEXT_BULLET_MARKERS[($level - 1) % TEXT_BULLET_MARKERS.length]
 
   return css`
     --marker-bg-color: transparent;
 
-    mix-blend-mode: ${color.dark ? 'screen' : 'multiply'};
+    mix-blend-mode: ${color._dark ? 'screen' : 'multiply'};
     position: relative;
 
     & > [data-ui='TextBlock_inner'] {
@@ -39,17 +43,17 @@ function textBlockStyle(props: TextBlockStyleProps & {theme: Theme}) {
     }
 
     &[data-markers] {
-      --marker-bg-color: ${color.dark ? hues.purple[950].hex : hues.purple[50].hex};
+      --marker-bg-color: ${color._dark ? hues.purple[950].hex : hues.purple[50].hex};
     }
 
     &[data-warning] {
-      --card-border-color: ${color.muted.caution.enabled.border};
-      --marker-bg-color: ${color.muted.caution.hovered.bg};
+      --card-border-color: ${color.button.ghost.caution.enabled.border};
+      --marker-bg-color: ${color.button.ghost.caution.hovered.bg};
     }
 
     &[data-error] {
-      --card-border-color: ${color.muted.critical.enabled.border};
-      --marker-bg-color: ${color.muted.critical.hovered.bg};
+      --card-border-color: ${color.button.ghost.critical.enabled.border};
+      --marker-bg-color: ${color.button.ghost.critical.hovered.bg};
     }
 
     & [data-list-prefix] {
@@ -85,11 +89,11 @@ function textBlockStyle(props: TextBlockStyleProps & {theme: Theme}) {
       overflow-wrap: anywhere;
       text-transform: none;
       white-space: pre-wrap;
-      font-family: ${fonts.text.family};
+      font-family: ${font.text.family};
       flex: 1;
 
       *::selection {
-        background-color: ${color.selectable?.primary.pressed.bg};
+        background-color: ${rgba(color.focusRing, 0.3)};
       }
     }
   `
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
index e8cf732dc34..2bb08e9b35d 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
@@ -1,4 +1,4 @@
-import {Box, Flex, ResponsivePaddingProps, Tooltip, Text} from '@sanity/ui'
+import {Box, Flex, ResponsivePaddingProps, Text} from '@sanity/ui'
 import React, {RefObject, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, PortableTextTextBlock} from '@sanity/types'
 import {
@@ -7,6 +7,7 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {isEqual} from '@sanity/util/paths'
+import {Tooltip} from '../../../../../ui-components'
 import {
   BlockProps,
   RenderAnnotationCallback,
@@ -249,7 +250,7 @@ export function TextBlock(props: TextBlockProps) {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             renderCustomMarkers={renderCustomMarkers}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
index c0a6f7ff388..98937965904 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -1,6 +1,4 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {Button, ButtonProps, PopoverProps} from '@sanity/ui'
-import {EllipsisVerticalIcon} from '@sanity/icons'
 import {useTranslation} from 'react-i18next'
 import {
   PortableTextEditor,
@@ -8,7 +6,9 @@ import {
   usePortableTextEditorSelection,
 } from '@sanity/portable-text-editor'
 import {isKeySegment} from '@sanity/types'
+import {PopoverProps} from '../../../../../ui-components'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 import {PTEToolbarAction, PTEToolbarActionGroup} from './types'
 import {useActiveActionKeys, useFocusBlock} from './hooks'
 import {getActionIcon} from './helpers'
@@ -16,7 +16,6 @@ import {getActionIcon} from './helpers'
 const CollapseMenuMemo = memo(CollapseMenu)
 
 const MENU_POPOVER_PROPS: PopoverProps = {constrainSize: true, portal: true}
-const COLLAPSE_BUTTON_PROPS: ButtonProps = {padding: 2, mode: 'bleed'}
 
 interface ActionMenuProps {
   disabled: boolean
@@ -71,6 +70,8 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
     PortableTextEditor.focus(editor)
   }, [editor])
 
+  const tooltipPlacement = isFullscreen ? 'bottom' : 'top'
+
   const children = useMemo(
     () =>
       actions.map((action) => {
@@ -89,7 +90,7 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
           <CollapseMenuButton
             data-testid={`action-button-${action.key}`}
             disabled={disabled || annotationDisabled}
-            {...COLLAPSE_BUTTON_PROPS}
+            mode="bleed"
             dividerBefore={action.firstInGroup}
             icon={getActionIcon(action, active)}
             key={action.key}
@@ -100,22 +101,35 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
             tooltipText={annotationDisabled ? annotationDisabledText : action.title || action.key}
             tooltipProps={{
               disabled: disabled,
-              placement: isFullscreen ? 'bottom' : 'top',
+              placement: tooltipPlacement,
               portal: 'default',
             }}
           />
         )
       }),
-    [actions, activeKeys, disabled, isEmptyTextBlock, isFullscreen, isSelectingMultipleBlocks, t],
+    [
+      actions,
+      activeKeys,
+      disabled,
+      isEmptyTextBlock,
+      isSelectingMultipleBlocks,
+      t,
+      tooltipPlacement,
+    ],
   )
 
   const menuButtonProps = useMemo(
     () => ({
-      button: <Button icon={EllipsisVerticalIcon} mode="bleed" padding={2} disabled={disabled} />,
+      button: (
+        <ContextMenuButton
+          data-testid="action-menu-button"
+          disabled={disabled}
+          tooltipProps={{placement: tooltipPlacement}}
+        />
+      ),
       popover: MENU_POPOVER_PROPS,
     }),
-
-    [disabled],
+    [disabled, tooltipPlacement],
   )
 
   return (
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
index 0f68c736cb5..25314d77488 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
@@ -1,7 +1,12 @@
 import React, {memo, useCallback, useMemo} from 'react'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
-import {Button, Menu, MenuButton, MenuButtonProps, MenuItem, Text} from '@sanity/ui'
-import {SelectIcon} from '@sanity/icons'
+import {
+  Menu,
+  // eslint-disable-next-line no-restricted-imports
+  MenuItem,
+  Text,
+} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {useTranslation} from '../../../../i18n'
 import {
@@ -14,6 +19,7 @@ import {
   BlockQuote,
   Normal,
 } from '../text/textStyles'
+import {Button, MenuButton, MenuButtonProps} from '../../../../../ui-components'
 import {useActiveStyleKeys, useFocusBlock} from './hooks'
 import {BlockStyleItem} from './types'
 
@@ -34,10 +40,6 @@ const StyledMenuItem = styled(MenuItem)`
   }
 `
 
-const StyledButton = styled(Button)`
-  width: 100%;
-`
-
 const MENU_POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
   placement: 'bottom-start',
@@ -128,13 +130,13 @@ export const BlockStyleSelect = memo(function BlockStyleSelect(
 
   const button = useMemo(
     () => (
-      <StyledButton
+      <Button
         disabled={_disabled}
-        iconRight={SelectIcon}
+        iconRight={ChevronDownIcon}
         mode="bleed"
         onClick={preventDefault}
-        padding={2}
         text={menuButtonText}
+        width="fill"
       />
     ),
     [_disabled, menuButtonText],
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
index b3832d8b44a..25907618abe 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -1,8 +1,8 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {AddIcon} from '@sanity/icons'
-import {Button, PopoverProps} from '@sanity/ui'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {upperFirst} from 'lodash'
+import {PopoverProps} from '../../../../../ui-components'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 import {useTranslation} from '../../../../i18n'
 import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
 import {BlockItem} from './types'
@@ -31,6 +31,8 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
     PortableTextEditor.focus(editor)
   }, [editor])
 
+  const tooltipPlacement = isFullscreen ? 'bottom' : 'top'
+
   const children = useMemo(() => {
     return items.map((item) => {
       const title = item.type.title || upperFirst(item.type.name)
@@ -43,7 +45,6 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
               : 'inputs.portable-text.action.insert-block-aria-label',
             {typeName: title},
           )}
-          padding={2}
           mode="bleed"
           disabled={disabled || (isVoidFocus && item.inline === true)}
           icon={item.icon}
@@ -59,21 +60,26 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
           )}
           tooltipProps={{
             disabled,
-            placement: isFullscreen ? 'bottom' : 'top',
+            placement: tooltipPlacement,
             portal: 'default',
           }}
         />
       )
     })
-  }, [disabled, isFullscreen, isVoidFocus, items, t])
+  }, [disabled, isVoidFocus, items, t, tooltipPlacement])
 
   const menuButtonProps = useMemo(
     () => ({
-      button: <Button icon={AddIcon} mode="bleed" padding={2} disabled={disabled} />,
+      button: (
+        <ContextMenuButton
+          data-testid="insert-menu-button"
+          disabled={disabled}
+          tooltipProps={{placement: tooltipPlacement}}
+        />
+      ),
       popover: MENU_POPOVER_PROPS,
     }),
-
-    [disabled],
+    [disabled, tooltipPlacement],
   )
 
   return (
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
index 50a2be4b25f..d3c2d405b18 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
@@ -6,11 +6,12 @@ import {
 } from '@sanity/portable-text-editor'
 import React, {memo, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, SchemaType} from '@sanity/types'
-import {Box, Button, Flex, Hotkeys, Text, Tooltip, useElementRect, useToast} from '@sanity/ui'
+import {Box, Flex, useElementRect, useToast} from '@sanity/ui'
 import {CollapseIcon, ExpandIcon} from '@sanity/icons'
 import styled, {css} from 'styled-components'
 import {useRovingFocus} from '../../../../components'
 import {useResolveInitialValueForType} from '../../../../store'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {ActionMenu} from './ActionMenu'
 import {BlockStyleSelect} from './BlockStyleSelect'
@@ -128,33 +129,21 @@ const InnerToolbar = memo(function InnerToolbar({
         )}
       </Flex>
       <FullscreenButtonBox padding={isFullscreen ? 2 : 1}>
-        <Tooltip
-          content={
-            <Flex align="center" padding={1}>
-              <Box flex={1} paddingX={1}>
-                <Text size={1}>
-                  {t(
-                    isFullscreen
-                      ? 'inputs.portable-text.action.collapse-editor'
-                      : 'inputs.portable-text.action.expand-editor',
-                  )}
-                </Text>
-              </Box>
-              <Box marginLeft={1}>
-                <Hotkeys keys={[`${IS_MAC ? 'Cmd' : 'Ctrl'}`, 'Enter']} />
-              </Box>
-            </Flex>
-          }
-          placement={isFullscreen ? 'bottom' : 'top'}
-          portal="default"
-        >
-          <Button
-            padding={2}
-            icon={isFullscreen ? CollapseIcon : ExpandIcon}
-            mode="bleed"
-            onClick={onToggleFullscreen}
-          />
-        </Tooltip>
+        <Button
+          icon={isFullscreen ? CollapseIcon : ExpandIcon}
+          mode="bleed"
+          onClick={onToggleFullscreen}
+          tooltipProps={{
+            content: t(
+              isFullscreen
+                ? 'inputs.portable-text.action.collapse-editor'
+                : 'inputs.portable-text.action.expand-editor',
+            ),
+            hotkeys: [`${IS_MAC ? 'Cmd' : 'Ctrl'}`, 'Enter'],
+            placement: isFullscreen ? 'bottom' : 'top',
+            portal: 'default',
+          }}
+        />
       </FullscreenButtonBox>
     </RootFlex>
   )
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
index f32c5129073..5c784d55e2d 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -1,12 +1,20 @@
-import React, {ComponentProps} from 'react'
+import React from 'react'
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Tooltip} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {useGetI18nText, useTranslation} from '../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../components'
+import {
+  Button,
+  MenuButton,
+  type MenuButtonProps,
+  MenuItem,
+  Tooltip,
+} from '../../../../ui-components'
 import {useCurrentUser} from '../../../store'
 import type {CreateReferenceOption} from './types'
 
-interface Props extends ComponentProps<typeof Button> {
+interface Props
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size' | 'width' | 'type' | 'ref'> {
   id: string
   createOptions: CreateReferenceOption[]
   menuRef?: React.RefObject<HTMLDivElement>
@@ -38,12 +46,10 @@ export function CreateButton(props: Props) {
     return (
       <Tooltip
         content={
-          <Box padding={2}>
-            <InsufficientPermissionsMessage
-              currentUser={currentUser}
-              context="create-new-reference"
-            />
-          </Box>
+          <InsufficientPermissionsMessage
+            currentUser={currentUser}
+            context="create-new-reference"
+          />
         }
       >
         {/* this wrapper div is needed because disabled button doesn't trigger mouse events */}
@@ -69,6 +75,7 @@ export function CreateButton(props: Props) {
           text={t('inputs.reference.action.create-new-document-select')}
           mode="ghost"
           icon={AddIcon}
+          size="large"
         />
       }
       id={id}
@@ -79,12 +86,10 @@ export function CreateButton(props: Props) {
               disabled={createOption.permission.granted}
               key={createOption.id}
               content={
-                <Box padding={2}>
-                  <InsufficientPermissionsMessage
-                    currentUser={currentUser}
-                    context="create-document-type"
-                  />
-                </Box>
+                <InsufficientPermissionsMessage
+                  currentUser={currentUser}
+                  context="create-document-type"
+                />
               }
               portal
             >
@@ -113,6 +118,7 @@ export function CreateButton(props: Props) {
       // eslint-disable-next-line react/jsx-no-bind
       onClick={() => onCreate(createOptions[0])}
       icon={AddIcon}
+      size="large"
     />
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
index 72fe875a794..f88973a4499 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
@@ -1,28 +1,30 @@
 import React, {ComponentType, ReactNode, Fragment} from 'react'
 import type {Reference, ReferenceSchemaType} from '@sanity/types'
-import {Box, Flex, Inline, Label, Stack, Text, Tooltip} from '@sanity/ui'
+import {Badge, Box, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon} from '@sanity/icons'
+import {Tooltip} from '../../../../ui-components'
 import type {RenderPreviewCallback} from '../../types'
 import {SanityDefaultPreview} from '../../../preview'
 import {Translate, useTranslation} from '../../../i18n'
 import {useListFormat} from '../../../hooks'
-import {TextWithTone} from '../../../components'
+import {PreviewLayoutKey, TextWithTone} from '../../../components'
 import {ReferencePreview} from './ReferencePreview'
 import {Loadable} from './useReferenceInfo'
 import type {ReferenceInfo} from './types'
 
 export function PreviewReferenceValue(props: {
+  layout?: PreviewLayoutKey
   referenceInfo: Loadable<ReferenceInfo>
   renderPreview: RenderPreviewCallback
   type: ReferenceSchemaType
   value: Reference
   showTypeLabel?: boolean
 }) {
-  const {referenceInfo, renderPreview, type, value, showTypeLabel} = props
+  const {layout = 'default', referenceInfo, renderPreview, type, value, showTypeLabel} = props
   const {t} = useTranslation()
 
   if (referenceInfo.isLoading || referenceInfo.error) {
-    return <SanityDefaultPreview isPlaceholder />
+    return <SanityDefaultPreview isPlaceholder layout={layout} />
   }
 
   // Special handling for "create refs in place"
@@ -54,7 +56,7 @@ export function PreviewReferenceValue(props: {
       <Flex align="center">
         <Box flex={1}>
           {renderPreview({
-            layout: 'default',
+            layout,
             schemaType: refType,
             value: stub,
             skipVisibilityCheck: true,
@@ -62,11 +64,7 @@ export function PreviewReferenceValue(props: {
         </Box>
         <Box>
           <Inline space={4}>
-            {showTypeLabel && (
-              <Label size={1} muted>
-                {refType.title}
-              </Label>
-            )}
+            {showTypeLabel && <Badge mode="outline">{refType.title}</Badge>}
           </Inline>
         </Box>
       </Flex>
@@ -142,7 +140,7 @@ export function PreviewReferenceValue(props: {
   return (
     <ReferencePreview
       id={value._ref}
-      layout="default"
+      layout={layout}
       preview={referenceInfo.result?.preview}
       refType={refType}
       renderPreview={renderPreview}
@@ -154,14 +152,12 @@ export function PreviewReferenceValue(props: {
 function UnavailableMessage(props: {icon: ComponentType; children: ReactNode; title: ReactNode}) {
   const Icon = props.icon
   return (
-    <Flex padding={3}>
-      <Box>
-        <Text size={1}>
-          <Icon />
-        </Text>
-      </Box>
+    <Flex>
+      <Text size={1}>
+        <Icon />
+      </Text>
       <Box flex={1} marginLeft={3}>
-        <Text size={1} weight="semibold">
+        <Text size={1} weight="medium">
           {props.title}
         </Text>
 
@@ -199,7 +195,7 @@ function InvalidType({
         <Tooltip
           portal
           content={
-            <Stack space={3} padding={3}>
+            <Stack space={3}>
               <Text size={1}>
                 <Translate
                   t={t}
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
index 973aa9a0058..04097dd9c0c 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceAutocomplete.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef, useCallback} from 'react'
-import {Autocomplete, Box, Flex, Placement, Popover, Text} from '@sanity/ui'
+import {Autocomplete, Box, Flex, Placement, Text} from '@sanity/ui'
 import styled from 'styled-components'
+import {Popover} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 const StyledPopover = styled(Popover)`
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
index 91b2b28bc1f..f1f11a62660 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -10,22 +10,15 @@ import React, {
 import type {Reference, ReferenceSchemaType} from '@sanity/types'
 import {
   Box,
-  Button,
   Card,
   CardTone,
   Flex,
   Menu,
-  MenuButton,
   MenuDivider,
-  MenuItem,
   Stack,
+  TooltipDelayGroupProvider,
 } from '@sanity/ui'
-import {
-  EllipsisVerticalIcon,
-  LaunchIcon as OpenInNewTabIcon,
-  SyncIcon as ReplaceIcon,
-  TrashIcon,
-} from '@sanity/icons'
+import {LaunchIcon as OpenInNewTabIcon, SyncIcon as ReplaceIcon, TrashIcon} from '@sanity/icons'
 import type {ObjectFieldProps, RenderPreviewCallback} from '../../types'
 import {FormField} from '../../components'
 import {useScrollIntoViewOnFocusWithin} from '../../hooks/useScrollIntoViewOnFocusWithin'
@@ -35,6 +28,8 @@ import {FieldActionsProvider, FieldActionsResolver} from '../../field'
 import {DocumentFieldActionNode} from '../../../config'
 import {usePublishedId} from '../../contexts/DocumentIdProvider'
 import {useTranslation} from '../../../i18n'
+import {MenuButton, MenuItem, TOOLTIP_DELAY_PROPS} from '../../../../ui-components'
+import {ContextMenuButton} from '../../../components/contextMenuButton'
 import {useReferenceInput} from './useReferenceInput'
 import {useReferenceInfo} from './useReferenceInfo'
 import {PreviewReferenceValue} from './PreviewReferenceValue'
@@ -195,9 +190,9 @@ export function ReferenceField(props: ReferenceFieldProps) {
   const menu = useMemo(
     () =>
       readOnly ? null : (
-        <Box marginLeft={1}>
+        <Box flex="none">
           <MenuButton
-            button={<Button paddingY={3} paddingX={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+            button={<ContextMenuButton paddingY={3} />}
             id={`${inputId}-menuButton`}
             menu={
               <Menu>
@@ -266,33 +261,33 @@ export function ReferenceField(props: ReferenceFieldProps) {
           {isEditing ? (
             <Box>{children}</Box>
           ) : (
-            <Card shadow={1} radius={1} padding={1} tone={tone}>
+            <Card border radius={2} padding={1} tone={tone}>
               <Stack space={1}>
-                <Flex gap={1} align="center">
-                  <ReferenceLinkCard
-                    __unstable_focusRing
-                    as={EditReferenceLink}
-                    data-pressed={pressed ? true : undefined}
-                    data-selected={selected ? true : undefined}
-                    documentId={value?._ref}
-                    documentType={refType?.name}
-                    flex={1}
-                    paddingX={2}
-                    paddingY={1}
-                    pressed={pressed}
-                    radius={2}
-                    ref={elementRef}
-                    selected={selected}
-                    tone="inherit"
-                  >
-                    <PreviewReferenceValue
-                      value={value}
-                      referenceInfo={loadableReferenceInfo}
-                      renderPreview={renderPreview}
-                      type={schemaType}
-                    />
-                  </ReferenceLinkCard>
-                  <Box>{menu}</Box>
+                <Flex gap={1} align="center" style={{lineHeight: 0}}>
+                  <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+                    <ReferenceLinkCard
+                      __unstable_focusRing
+                      as={EditReferenceLink}
+                      data-pressed={pressed ? true : undefined}
+                      data-selected={selected ? true : undefined}
+                      documentId={value?._ref}
+                      documentType={refType?.name}
+                      flex={1}
+                      pressed={pressed}
+                      radius={2}
+                      ref={elementRef}
+                      selected={selected}
+                      tone="inherit"
+                    >
+                      <PreviewReferenceValue
+                        value={value}
+                        referenceInfo={loadableReferenceInfo}
+                        renderPreview={renderPreview}
+                        type={schemaType}
+                      />
+                    </ReferenceLinkCard>
+                    <Box>{menu}</Box>
+                  </TooltipDelayGroupProvider>
                 </Flex>
                 {footer}
               </Stack>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
index 5482f17c33d..211f7c401d7 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceFinalizeAlertStrip.tsx
@@ -1,8 +1,8 @@
 import type {ReferenceSchemaType} from '@sanity/types'
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import {AlertStrip} from '../../components/AlertStrip'
+import {Button} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
-import React from 'react'
 
 /**
  * Alert strip that shows an explanation and action prompting the user to finalize a reference,
@@ -41,7 +41,9 @@ export function ReferenceFinalizeAlertStrip({
           />
         </Text>
         <Button
+          mode="ghost"
           onClick={handleRemoveStrengthenOnPublish}
+          size="large"
           text={t('inputs.reference.incomplete-reference.strengthen-button-label')}
           tone="positive"
         />
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
index 4cd11f2301e..321a4fd2c79 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
@@ -8,7 +8,7 @@ import React, {
 } from 'react'
 import {concat, Observable, of} from 'rxjs'
 import {catchError, filter, map, scan, switchMap, tap} from 'rxjs/operators'
-import {Box, Button, Stack, Text, useToast} from '@sanity/ui'
+import {Box, Stack, Text, useToast} from '@sanity/ui'
 import {useObservableCallback} from 'react-rx'
 import {uuid} from '@sanity/uuid'
 import styled from 'styled-components'
@@ -18,6 +18,7 @@ import {PreviewCard} from '../../../components'
 import {getPublishedId, isNonNullable} from '../../../util'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {useOnClickOutside} from '../../hooks/useOnClickOutside'
+import {Button} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 import {useReferenceInput} from './useReferenceInput'
 import type {
@@ -213,14 +214,12 @@ export function ReferenceInput(props: ReferenceInputProps) {
 
       return (
         <StyledPreviewCard forwardedAs="button" type="button" radius={2} tone="inherit">
-          <Box paddingX={3} paddingY={1}>
-            <OptionPreview
-              getReferenceInfo={getReferenceInfo}
-              id={documentId}
-              renderPreview={renderPreview}
-              type={schemaType}
-            />
-          </Box>
+          <OptionPreview
+            getReferenceInfo={getReferenceInfo}
+            id={documentId}
+            renderPreview={renderPreview}
+            type={schemaType}
+          />
         </StyledPreviewCard>
       )
     },
@@ -323,7 +322,7 @@ export function ReferenceInput(props: ReferenceInputProps) {
             loading={searchState.isLoading}
             referenceElement={autocompletePopoverReferenceElementRef.current}
             options={hits}
-            radius={1}
+            radius={2}
             placeholder={t('inputs.reference.search-placeholder')}
             onKeyDown={handleAutocompleteKeyDown}
             readOnly={loadableReferenceInfo.isLoading || readOnly}
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index 5f2a585e0b8..8329dee58c2 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -1,21 +1,8 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, CardTone, Menu, MenuDivider} from '@sanity/ui'
 import React, {ComponentProps, ForwardedRef, forwardRef, useCallback, useMemo, useRef} from 'react'
 import {
   CloseIcon,
   CopyIcon as DuplicateIcon,
-  EllipsisVerticalIcon,
   LaunchIcon as OpenInNewTabIcon,
   SyncIcon as ReplaceIcon,
   TrashIcon,
@@ -27,6 +14,9 @@ import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {randomKey} from '../../utils/randomKey'
 import {FormFieldSet, FormFieldValidationStatus} from '../../components/formField'
 import {FieldPresence} from '../../../presence'
+import {MenuButton, MenuItem} from '../../../../ui-components'
+import {LoadingBlock} from '../../../components/loadingBlock'
+import {ContextMenuButton} from '../../../components/contextMenuButton'
 import {useTranslation} from '../../../i18n'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {RowLayout} from '../arrays/layouts/RowLayout'
@@ -69,14 +59,6 @@ function getTone({
   return hasWarnings ? 'caution' : 'default'
 }
 const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const
-const INITIAL_VALUE_CARD_STYLE = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  opacity: 0.6,
-} as const
 
 export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemValue>(
   props: ReferenceItemProps<Item>,
@@ -199,52 +181,50 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
   const menu = useMemo(
     () =>
       readOnly ? null : (
-        <Box marginLeft={1}>
-          <MenuButton
-            button={<Button paddingY={3} paddingX={2} mode="bleed" icon={EllipsisVerticalIcon} />}
-            id={`${inputId}-menuButton`}
-            menu={
-              <Menu ref={menuRef}>
-                {!readOnly && (
-                  <>
-                    <MenuItem
-                      text={t('inputs.reference.action.remove')}
-                      tone="critical"
-                      icon={TrashIcon}
-                      onClick={onRemove}
-                    />
-                    <MenuItem
-                      text={t(
-                        hasRef && isEditing
-                          ? 'inputs.reference.action.replace-cancel'
-                          : 'inputs.reference.action.replace',
-                      )}
-                      icon={hasRef && isEditing ? CloseIcon : ReplaceIcon}
-                      onClick={handleReplace}
-                    />
-                    <MenuItem
-                      text={t('inputs.reference.action.duplicate')}
-                      icon={DuplicateIcon}
-                      onClick={handleDuplicate}
-                    />
-                    <InsertMenu onInsert={handleInsert} types={insertableTypes} />
-                  </>
-                )}
-
-                {!readOnly && !isEditing && hasRef && <MenuDivider />}
-                {!isEditing && hasRef && (
+        <MenuButton
+          button={<ContextMenuButton paddingY={3} />}
+          id={`${inputId}-menuButton`}
+          menu={
+            <Menu ref={menuRef}>
+              {!readOnly && (
+                <>
                   <MenuItem
-                    as={OpenLink}
-                    data-as="a"
-                    text={t('inputs.reference.action.open-in-new-tab')}
-                    icon={OpenInNewTabIcon}
+                    text={t('inputs.reference.action.remove')}
+                    tone="critical"
+                    icon={TrashIcon}
+                    onClick={onRemove}
                   />
-                )}
-              </Menu>
-            }
-            popover={MENU_POPOVER_PROPS}
-          />
-        </Box>
+                  <MenuItem
+                    text={t(
+                      hasRef && isEditing
+                        ? 'inputs.reference.action.replace-cancel'
+                        : 'inputs.reference.action.replace',
+                    )}
+                    icon={hasRef && isEditing ? CloseIcon : ReplaceIcon}
+                    onClick={handleReplace}
+                  />
+                  <MenuItem
+                    text={t('inputs.reference.action.duplicate')}
+                    icon={DuplicateIcon}
+                    onClick={handleDuplicate}
+                  />
+                  <InsertMenu onInsert={handleInsert} types={insertableTypes} />
+                </>
+              )}
+
+              {!readOnly && !isEditing && hasRef && <MenuDivider />}
+              {!isEditing && hasRef && (
+                <MenuItem
+                  as={OpenLink}
+                  data-as="a"
+                  text={t('inputs.reference.action.open-in-new-tab')}
+                  icon={OpenInNewTabIcon}
+                />
+              )}
+            </Menu>
+          }
+          popover={MENU_POPOVER_PROPS}
+        />
       ),
     [
       handleDuplicate,
@@ -340,8 +320,6 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
             documentId={value?._ref}
             documentType={refType?.name}
             disabled={resolvingInitialValue}
-            paddingX={2}
-            paddingY={1}
             __unstable_focusRing
             selected={selected}
             pressed={pressed}
@@ -350,28 +328,13 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
             {...elementProps}
           >
             <PreviewReferenceValue
+              layout="compact"
               value={value}
               referenceInfo={loadableReferenceInfo}
               renderPreview={renderPreview}
               type={schemaType}
             />
-            {resolvingInitialValue && (
-              <Card
-                style={INITIAL_VALUE_CARD_STYLE}
-                tone="transparent"
-                radius={2}
-                as={Flex}
-                // @ts-expect-error composed from as={Flex}
-                justify="center"
-              >
-                <Flex align="center" justify="center" padding={3}>
-                  <Box marginX={3}>
-                    <Spinner muted />
-                  </Box>
-                  <Text>{t('inputs.reference.resolving-initial-value')}</Text>
-                </Flex>
-              </Card>
-            )}
+            {resolvingInitialValue && <LoadingBlock fill />}
           </ReferenceLinkCard>
         )}
       </RowLayout>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
index 7f0f076ba75..f096b210a2c 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
@@ -5,7 +5,7 @@ import {Card, CardProps} from '@sanity/ui'
 export const StyledCard = styled(Card)`
   /* this is a hack to avoid layout jumps while previews are loading
      there's probably better ways of solving this */
-  min-height: 35px;
+  min-height: 33px;
   position: relative;
 
   /* TextWithTone uses its own logic to set color, and we therefore need */
@@ -48,6 +48,7 @@ export const ReferenceLinkCard = forwardRef(function ReferenceLinkCard(
     <StyledCard
       {...cardProps}
       {...linkProps}
+      data-ui="ReferenceLinkCard"
       ref={ref as unknown as React.ForwardedRef<HTMLDivElement>}
     />
   )
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
index a1119cee9f5..e26470e0cad 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceMetadataLoadFailure.tsx
@@ -1,7 +1,8 @@
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
+import React from 'react'
+import {Button} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import {AlertStrip} from '../../components/AlertStrip'
-import React from 'react'
 
 /**
  * Alert strip that shows error encountered while fetching reference metadata, and allowing user
@@ -29,7 +30,9 @@ export function ReferenceMetadataLoadErrorAlertStrip({
           {errorMessage}
         </Text>
         <Button
+          mode="ghost"
           onClick={onHandleRetry}
+          size="large"
           text={t('inputs.reference.metadata-error.retry-button-label')}
           tone="primary"
         />
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
index b204e9abee4..390089cc8de 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -1,11 +1,10 @@
 import React, {useMemo} from 'react'
 import {ObjectSchemaType} from '@sanity/types'
-import {Box, Flex, Inline, Label, Text, Tooltip, useRootTheme} from '@sanity/ui'
-import {EditIcon, PublishIcon} from '@sanity/icons'
-import {RelativeTime} from '../../../components/RelativeTime'
-import {Translate, useTranslation} from '../../../i18n'
+import {Badge, Box, Inline} from '@sanity/ui'
+import {DocumentStatus} from '../../../components/documentStatus'
+import {DocumentStatusIndicator} from '../../../components/documentStatusIndicator'
+import {PreviewLayoutKey} from '../../../components'
 import {RenderPreviewCallback} from '../../types'
-import {PreviewLayoutKey, TextWithTone} from '../../../components'
 import {useDocumentPresence} from '../../../store'
 import {DocumentPreviewPresence} from '../../../presence'
 import {ReferenceInfo} from './types'
@@ -24,8 +23,6 @@ export function ReferencePreview(props: {
 }) {
   const {id, layout, preview, refType, renderPreview, showTypeLabel} = props
 
-  const {t} = useTranslation()
-  const theme = useRootTheme()
   const documentPresence = useDocumentPresence(id)
 
   const previewId =
@@ -46,117 +43,40 @@ export function ReferencePreview(props: {
     [previewId, refType.name],
   )
 
+  const {draft, published} = preview
+
   const previewProps = useMemo(
     () => ({
+      children: (
+        <Box paddingLeft={3}>
+          <Inline space={3}>
+            {showTypeLabel && <Badge mode="outline">{refType.title}</Badge>}
+
+            {documentPresence && documentPresence.length > 0 && (
+              <DocumentPreviewPresence presence={documentPresence} />
+            )}
+
+            <DocumentStatusIndicator draft={preview.draft} published={preview.published} />
+          </Inline>
+        </Box>
+      ),
       layout,
       schemaType: refType,
+      tooltip: <DocumentStatus draft={draft} published={published} />,
       value: previewStub,
     }),
-    [layout, previewStub, refType],
+    [
+      documentPresence,
+      draft,
+      layout,
+      preview.draft,
+      preview.published,
+      previewStub,
+      published,
+      refType,
+      showTypeLabel,
+    ],
   )
 
-  const publishedAt = preview.published?._updatedAt
-  const draftEditedAt = preview.draft?._updatedAt
-
-  return (
-    <Flex align="center">
-      <Box flex={1}>{renderPreview(previewProps)}</Box>
-
-      <Box paddingLeft={3}>
-        <Inline space={3}>
-          {showTypeLabel && (
-            <Label size={1} muted>
-              {refType.title}
-            </Label>
-          )}
-
-          {documentPresence && documentPresence.length > 0 && (
-            <DocumentPreviewPresence presence={documentPresence} />
-          )}
-
-          <Inline space={4}>
-            <Box>
-              <Tooltip
-                portal
-                content={
-                  <Box padding={2}>
-                    <Text size={1}>
-                      {publishedAt ? (
-                        <Translate
-                          t={t}
-                          i18nKey="inputs.reference.preview.published-at-time"
-                          components={{
-                            RelativeTime: () => (
-                              <RelativeTime time={publishedAt} useTemporalPhrase />
-                            ),
-                          }}
-                        />
-                      ) : (
-                        <>{t('inputs.reference.preview.not-published')}</>
-                      )}
-                    </Text>
-                  </Box>
-                }
-              >
-                <TextWithTone
-                  tone={theme.tone === 'default' ? 'positive' : 'default'}
-                  size={1}
-                  dimmed={!preview.published}
-                  muted={!preview.published}
-                >
-                  <PublishIcon
-                    aria-label={
-                      preview.published
-                        ? t('inputs.reference.preview.is-published-aria-label')
-                        : t('inputs.reference.preview.is-not-published-aria-label')
-                    }
-                  />
-                </TextWithTone>
-              </Tooltip>
-            </Box>
-
-            <Box>
-              <Tooltip
-                portal
-                content={
-                  <Box padding={2}>
-                    <Text size={1}>
-                      {draftEditedAt ? (
-                        <Translate
-                          t={t}
-                          i18nKey="inputs.reference.preview.edited-at-time"
-                          components={{
-                            RelativeTime: () => (
-                              <RelativeTime time={draftEditedAt} useTemporalPhrase />
-                            ),
-                          }}
-                        />
-                      ) : (
-                        <>{t('inputs.reference.preview.no-unpublished-edits')}</>
-                      )}
-                    </Text>
-                  </Box>
-                }
-              >
-                <TextWithTone
-                  tone={theme.tone === 'default' ? 'caution' : 'default'}
-                  size={1}
-                  dimmed={!preview.draft}
-                  muted={!preview.draft}
-                >
-                  <EditIcon
-                    aria-label={
-                      preview.draft
-                        ? t('inputs.reference.preview.has-unpublished-changes-aria-label')
-                        : t('inputs.reference.preview.has-no-unpublished-changes-aria-label')
-                    }
-                  />
-                </TextWithTone>
-              </Tooltip>
-            </Box>
-          </Inline>
-        </Inline>
-      </Box>
-    </Flex>
-  )
+  return renderPreview(previewProps)
 }
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
index f574512a6af..68bed43a45f 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceStrengthMismatchAlertStrip.tsx
@@ -1,7 +1,8 @@
-import {Button, Stack, Text} from '@sanity/ui'
-import {AlertStrip} from '../../components/AlertStrip'
-import {Translate, useTranslation} from '../../../i18n'
+import {Stack, Text} from '@sanity/ui'
 import React from 'react'
+import {Button} from '../../../../ui-components'
+import {Translate, useTranslation} from '../../../i18n'
+import {AlertStrip} from '../../components/AlertStrip'
 
 /**
  * Alert strip that shows an explanation and action prompting the user to fix a mismatch in
@@ -46,7 +47,9 @@ export function ReferenceStrengthMismatchAlertStrip({
           )}
         </Text>
         <Button
+          mode="ghost"
           onClick={handleFixStrengthMismatch}
+          size="large"
           text={t(
             shouldBe === 'weak'
               ? 'inputs.reference.strength-mismatch.weaken-button-label'
diff --git a/packages/sanity/src/core/form/inputs/SelectInput.tsx b/packages/sanity/src/core/form/inputs/SelectInput.tsx
index c88e8552f78..09f8ee2f426 100644
--- a/packages/sanity/src/core/form/inputs/SelectInput.tsx
+++ b/packages/sanity/src/core/form/inputs/SelectInput.tsx
@@ -130,7 +130,7 @@ const RadioSelect = forwardRef(function RadioSelect(
 
   const Layout = direction === 'horizontal' ? Inline : Stack
   return (
-    <Card border padding={3} radius={1}>
+    <Card border padding={3} radius={2}>
       <Layout space={3} role="group">
         {items.map((item, index) => (
           <RadioSelectItem
@@ -182,7 +182,7 @@ const RadioSelectItem = forwardRef(function RadioSelectItem(
       />
 
       <Box marginLeft={2}>
-        <Text size={1} weight="semibold">
+        <Text size={1} weight="medium">
           {item.title}
         </Text>
       </Box>
diff --git a/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx b/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
index 20e2775e56a..4e7712d04fb 100644
--- a/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
+++ b/packages/sanity/src/core/form/inputs/Slug/SlugInput.tsx
@@ -9,7 +9,8 @@ import type {
   SlugValue,
 } from '@sanity/types'
 import * as PathUtils from '@sanity/util/paths'
-import {Box, Button, Card, Flex, Stack, TextInput} from '@sanity/ui'
+import {Box, Card, Flex, Stack, TextInput} from '@sanity/ui'
+import {Button} from '../../../../ui-components'
 import {PatchEvent, set, setIfMissing, unset} from '../../patch'
 import type {ObjectInputProps} from '../../types'
 import {useGetFormValue} from '../../contexts/GetFormValue'
@@ -98,7 +99,7 @@ export function SlugInput(props: SlugInputProps) {
 
   return (
     <Stack space={3}>
-      <Flex>
+      <Flex gap={1}>
         <Box flex={1}>
           <TextInput
             customValidity={errors.length > 0 ? errors[0].message : ''}
@@ -116,19 +117,18 @@ export function SlugInput(props: SlugInputProps) {
           )}
         </Box>
         {sourceField && (
-          <Box marginLeft={1}>
-            <Button
-              mode="ghost"
-              type="button"
-              disabled={readOnly || isUpdating}
-              onClick={handleGenerateSlug}
-              text={
-                generateState?.status === 'pending'
-                  ? t('inputs.slug.action.generating')
-                  : t('inputs.slug.action.generate')
-              }
-            />
-          </Box>
+          <Button
+            mode="ghost"
+            type="button"
+            disabled={readOnly || isUpdating}
+            onClick={handleGenerateSlug}
+            size="large"
+            text={
+              generateState?.status === 'pending'
+                ? t('inputs.slug.action.generating')
+                : t('inputs.slug.action.generate')
+            }
+          />
         )}
       </Flex>
     </Stack>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index 6c4f80d6252..dd8195125e1 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -1,18 +1,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useId, useCallback} from 'react'
-import {
-  Box,
-  Button,
-  Grid,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Tooltip,
-  Text,
-  MenuButtonProps,
-} from '@sanity/ui'
+import {Grid, Menu} from '@sanity/ui'
 import {ArrayInputFunctionsProps, ObjectItem} from '../../../types'
+import {Button, MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -54,16 +45,9 @@ export function ArrayOfObjectsFunctions<
 
   if (readOnly) {
     return (
-      <Tooltip
-        portal
-        content={
-          <Box padding={2} sizing="border">
-            <Text size={1}>{t('inputs.array.read-only-label')}</Text>
-          </Box>
-        }
-      >
+      <Tooltip portal content={t('inputs.array.read-only-label')}>
         <Grid>
-          <Button icon={AddIcon} mode="ghost" disabled text={t(addItemI18nKey)} />
+          <Button icon={AddIcon} mode="ghost" disabled size="large" text={t(addItemI18nKey)} />
         </Grid>
       </Tooltip>
     )
@@ -72,10 +56,16 @@ export function ArrayOfObjectsFunctions<
   return (
     <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
       {schemaType.of.length === 1 ? (
-        <Button icon={AddIcon} mode="ghost" onClick={handleAddBtnClick} text={t(addItemI18nKey)} />
+        <Button
+          icon={AddIcon}
+          mode="ghost"
+          onClick={handleAddBtnClick}
+          size="large"
+          text={t(addItemI18nKey)}
+        />
       ) : (
         <MenuButton
-          button={<Button icon={AddIcon} mode="ghost" text={t(addItemI18nKey)} />}
+          button={<Button icon={AddIcon} mode="ghost" size="large" text={t(addItemI18nKey)} />}
           id={menuButtonId || ''}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
index cf37b9bb14e..ab8b8d274c7 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
@@ -1,10 +1,12 @@
 import React, {useCallback, useId} from 'react'
-import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {TrashIcon} from '@sanity/icons'
+import {Menu} from '@sanity/ui'
+import {ContextMenuButton} from '../../../../../components/contextMenuButton'
 import {ArrayItemError} from '../../../../store'
 import {useFormCallbacks} from '../../../../studio/contexts/FormCallbacks'
 import {PatchEvent, unset} from '../../../../patch'
 import {CellLayout} from '../../layouts/CellLayout'
+import {MenuButton, MenuItem} from '../../../../../../ui-components'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
@@ -27,7 +29,7 @@ export function ErrorItem(props: {member: ArrayItemError; sortable?: boolean}) {
       style={{height: '100%'}}
       menu={
         <MenuButton
-          button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${id}-menuButton`}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx
index b916aa8563b..a9c7006eea0 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx
@@ -59,7 +59,7 @@ export function GridArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
   const memberKeys = useMemo(() => members.map((member) => member.key), [members])
 
   return (
-    <Stack space={3}>
+    <Stack space={2}>
       <UploadTargetCard
         types={schemaType.of}
         resolveUploader={resolveUploader}
@@ -67,9 +67,9 @@ export function GridArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
         {...elementProps}
         tabIndex={0}
       >
-        <Stack data-ui="ArrayInput__content" space={3}>
+        <Stack data-ui="ArrayInput__content" space={2}>
           {members?.length === 0 && (
-            <Card padding={3} border style={{borderStyle: 'dashed'}} radius={2}>
+            <Card padding={3} border radius={2}>
               <Text align="center" muted size={1}>
                 {schemaType.placeholder || <>{t('inputs.array.no-items-label')}</>}
               </Text>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
index cabb0fa068d..6571e76ab9b 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
@@ -1,20 +1,11 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, Card, CardTone, Menu} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
+import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {getSchemaTypeTitle} from '../../../../../schema'
+import {MenuButton, MenuItem} from '../../../../../../ui-components'
+import {ContextMenuButton} from '../../../../../components/contextMenuButton'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
 import {useDidUpdate} from '../../../../hooks/useDidUpdate'
@@ -29,6 +20,7 @@ import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {FIXME} from '../../../../../FIXME'
 import {EditPortal} from '../../../../components/EditPortal'
+import {LoadingBlock} from '../../../../../components/loadingBlock'
 import {useTranslation} from '../../../../../i18n'
 
 type GridItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
@@ -68,13 +60,6 @@ function getTone({
   return hasWarnings ? 'caution' : 'default'
 }
 const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const
-const INITIAL_VALUE_CARD_STYLE = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-} as const
 
 export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemProps<Item>) {
   const {
@@ -140,7 +125,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
   const childValidation = useChildValidation(path, true)
   const validation = useMemo(() => {
     return childValidation.length === 0 ? null : (
-      <Box marginLeft={1} paddingX={1} paddingY={3}>
+      <Box paddingX={1} paddingY={3}>
         <FormFieldValidationStatus validation={childValidation} __unstable_showSummary />
       </Box>
     )
@@ -153,7 +138,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
     () =>
       readOnly ? null : (
         <MenuButton
-          button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
@@ -213,18 +198,8 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
           withBorder: false,
           withShadow: false,
         })}
-        {resolvingInitialValue && (
-          <Card as={Flex} style={INITIAL_VALUE_CARD_STYLE}>
-            <Flex align="center" justify="center" gap={1} padding={1}>
-              <Box padding={3}>
-                <Spinner muted />
-              </Box>
-              <Text muted size={1}>
-                {t('inputs.array.resolving-initial-value')}
-              </Text>
-            </Flex>
-          </Card>
-        )}
+
+        {resolvingInitialValue && <LoadingBlock fill />}
       </PreviewCard>
     </CellLayout>
   )
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
index 4aec8be9a95..a460159fd2f 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/IncompatibleItemType.tsx
@@ -1,8 +1,9 @@
-import {Box, Card, Code, Popover, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
+import {Box, Card, Code, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui-components'
 import {Translate, useTranslation} from '../../../../../i18n'
 
 const PopoverCard = styled(Card)`
@@ -47,7 +48,7 @@ export function IncompatibleItemType(props: Props) {
         <PopoverCard margin={1} padding={3} onKeyDown={handleKeyDown} tabIndex={0} overflow="auto">
           <Stack space={4}>
             <Box>
-              <Text weight="semibold">{t('inputs.array.error.type-is-incompatible-title')}</Text>
+              <Text weight="medium">{t('inputs.array.error.type-is-incompatible-title')}</Text>
             </Box>
             <Text size={1}>
               <Translate
@@ -62,7 +63,7 @@ export function IncompatibleItemType(props: Props) {
               </Text>
             </Box>
             <Stack space={2}>
-              <Text size={1} weight="semibold">
+              <Text size={1} weight="medium">
                 {t('inputs.array.error.json-representation-description')}
               </Text>
               <Card padding={2} overflow="auto" border>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
index 461b4cd5e7b..59acbee52a4 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-no-bind */
 import {SchemaType} from '@sanity/types'
 import React, {ComponentProps, memo} from 'react'
-import {MenuGroup, MenuItem, PopoverProps} from '@sanity/ui'
 import {InsertAboveIcon, InsertBelowIcon} from '@sanity/icons'
+import {MenuGroup, MenuItem, PopoverProps} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 interface Props {
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
index c04dbf9948a..97ee129b6f8 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
@@ -1,8 +1,10 @@
-import React, {useCallback, useId} from 'react'
-import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import React, {useId} from 'react'
+import {TrashIcon} from '@sanity/icons'
+import {Box, Menu} from '@sanity/ui'
 import {ArrayItemError} from '../../../../store'
 import {RowLayout} from '../../layouts/RowLayout'
+import {MenuButton, MenuItem} from '../../../../../../ui-components'
+import {ContextMenuButton} from '../../../../../components/contextMenuButton'
 import {useTranslation} from '../../../../../i18n'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
@@ -25,7 +27,7 @@ export function ErrorItem(props: {
         tone="caution"
         menu={
           <MenuButton
-            button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+            button={<ContextMenuButton paddingY={3} />}
             id={`${id}-menuButton`}
             menu={
               <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
index 8fc7ea30fb8..671cd6935a9 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/IncompatibleItemType.tsx
@@ -1,8 +1,9 @@
-import {Box, Card, Code, Flex, Popover, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
+import {Box, Card, Code, Flex, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../ui-components'
 import {Translate, useTranslation} from '../../../../../i18n'
 
 const PopoverCard = styled(Card)`
@@ -47,7 +48,7 @@ export function IncompatibleItemType(props: Props) {
         <PopoverCard margin={1} padding={3} onKeyDown={handleKeyDown} tabIndex={0} overflow="auto">
           <Stack space={4}>
             <Box>
-              <Text weight="semibold">{t('inputs.array.error.type-is-incompatible-title')}</Text>
+              <Text weight="medium">{t('inputs.array.error.type-is-incompatible-title')}</Text>
             </Box>
             <Text size={1}>
               <Translate
@@ -62,7 +63,7 @@ export function IncompatibleItemType(props: Props) {
               </Text>
             </Box>
             <Stack space={2}>
-              <Text size={1} weight="semibold">
+              <Text size={1} weight="medium">
                 {t('inputs.array.error.json-representation-description')}
               </Text>
               <Card padding={2} overflow="auto" border>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx
index 47ba6bf7de5..3e96b4d93fb 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx
@@ -187,7 +187,7 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
   const paddingY = 1
 
   return (
-    <Stack space={3} ref={parentRef}>
+    <Stack space={2} ref={parentRef}>
       <UploadTargetCard
         types={schemaType.of}
         resolveUploader={resolveUploader}
@@ -195,9 +195,9 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
         {...elementProps}
         tabIndex={0}
       >
-        <Stack data-ui="ArrayInput__content" space={3}>
+        <Stack data-ui="ArrayInput__content" space={2}>
           {members.length === 0 ? (
-            <Card padding={3} border style={{borderStyle: 'dashed'}} radius={2}>
+            <Card padding={3} border radius={2}>
               <Text align="center" muted size={1}>
                 {schemaType.placeholder || <>{t('inputs.array.no-items-label')}</>}
               </Text>
@@ -205,7 +205,7 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
           ) : (
             <Card
               border
-              radius={1}
+              radius={2}
               style={{
                 // This is not memoized since it changes on scroll so it will change anyways making memo useless
                 // Account for grid gap
@@ -271,7 +271,6 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
           )}
         </Stack>
       </UploadTargetCard>
-
       <ArrayFunctions
         onChange={onChange}
         onItemAppend={handleAppend}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
index f5dff7e3161..d3bfef2aa78 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -1,18 +1,9 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, Card, CardTone, Menu} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
+import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
+import {MenuButton, MenuItem} from '../../../../../../ui-components'
+import {ContextMenuButton} from '../../../../../components/contextMenuButton'
 import {getSchemaTypeTitle} from '../../../../../schema'
 import {ObjectItem, ObjectItemProps} from '../../../../types'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
@@ -27,6 +18,7 @@ import {RowLayout} from '../../layouts/RowLayout'
 import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {EditPortal} from '../../../../components/EditPortal'
+import {LoadingBlock} from '../../../../../components/loadingBlock'
 import {useTranslation} from '../../../../../i18n'
 
 type PreviewItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
@@ -49,14 +41,6 @@ function getTone({
   return hasWarnings ? 'caution' : 'default'
 }
 const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const
-const INITIAL_VALUE_CARD_STYLE = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  opacity: 0.6,
-} as const
 
 const BUTTON_CARD_STYLE = {position: 'relative'} as const
 
@@ -124,7 +108,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
   const childValidation = useChildValidation(path, true)
   const validation = useMemo(() => {
     return childValidation.length === 0 ? null : (
-      <Box marginLeft={1} paddingX={1} paddingY={3}>
+      <Box paddingX={1} paddingY={3}>
         <FormFieldValidationStatus validation={childValidation} __unstable_showSummary />
       </Box>
     )
@@ -137,7 +121,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
     () =>
       readOnly ? null : (
         <MenuButton
-          button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
@@ -176,9 +160,8 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
         as="button"
         type="button"
         tone="inherit"
-        radius={2}
+        radius={1}
         disabled={resolvingInitialValue}
-        padding={1}
         onClick={onOpen}
         ref={previewCardRef}
         onFocus={onFocus}
@@ -188,29 +171,12 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
         {renderPreview({
           schemaType: props.schemaType,
           value: props.value,
-          layout: 'default',
+          layout: 'compact',
           // Don't do visibility check for virtualized items as the calculation will be incorrect causing it to scroll
           skipVisibilityCheck: true,
         })}
-        {resolvingInitialValue && (
-          <Card
-            style={INITIAL_VALUE_CARD_STYLE}
-            tone="transparent"
-            radius={2}
-            as={Flex}
-            // @ts-expect-error composed from as={Flex}
-            justify="center"
-          >
-            <Flex align="center" justify="center" padding={3}>
-              <Box marginX={3}>
-                <Spinner muted />
-              </Box>
-              <Text size={1} muted>
-                {t('inputs.array.resolving-initial-value')}
-              </Text>
-            </Flex>
-          </Card>
-        )}
+
+        {resolvingInitialValue && <LoadingBlock fill />}
       </Card>
     </RowLayout>
   )
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
index f420137b1ec..77ad03ddebf 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
@@ -2,8 +2,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useMemo, useId} from 'react'
-import {Box, Button, Grid, Menu, MenuButton, MenuItem, Tooltip, Text} from '@sanity/ui'
+import {Grid, Menu} from '@sanity/ui'
 import {ArrayInputFunctionsProps} from '../../../types'
+import {Tooltip, Button, MenuButton, MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 /**
@@ -39,16 +40,9 @@ export function ArrayOfPrimitivesFunctions<
 
   if (readOnly) {
     return (
-      <Tooltip
-        portal
-        content={
-          <Box padding={2} sizing="border">
-            <Text size={1}>{t('inputs.array.read-only-label')}</Text>
-          </Box>
-        }
-      >
+      <Tooltip portal content={t('inputs.array.read-only-label')}>
         <Grid>
-          <Button icon={AddIcon} mode="ghost" disabled text={t(addItemI18nKey)} />
+          <Button icon={AddIcon} mode="ghost" disabled size="large" text={t(addItemI18nKey)} />
         </Grid>
       </Tooltip>
     )
@@ -57,10 +51,16 @@ export function ArrayOfPrimitivesFunctions<
   return (
     <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
       {schemaType.of.length === 1 ? (
-        <Button icon={AddIcon} mode="ghost" onClick={handleAddBtnClick} text={t(addItemI18nKey)} />
+        <Button
+          icon={AddIcon}
+          mode="ghost"
+          onClick={handleAddBtnClick}
+          size="large"
+          text={t(addItemI18nKey)}
+        />
       ) : (
         <MenuButton
-          button={<Button icon={AddIcon} mode="ghost" text={t(addItemI18nKey)} />}
+          button={<Button icon={AddIcon} mode="ghost" size="large" text={t(addItemI18nKey)} />}
           id={menuButtonId || ''}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
index d3233ed2962..71ad2f62325 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
@@ -170,7 +170,7 @@ export class ArrayOfPrimitivesInput extends React.PureComponent<
     }))
 
     return (
-      <Stack space={3} data-testid="array-primitives-input">
+      <Stack space={2} data-testid="array-primitives-input">
         <UploadTargetCard
           types={schemaType.of}
           resolveUploader={resolveUploader}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
index 9cd8522a556..e831f8ef1eb 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -1,13 +1,15 @@
 import React, {useCallback, useMemo} from 'react'
-import {Box, Button, Flex, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Box, Flex, Menu} from '@sanity/ui'
 import {SchemaType} from '@sanity/types'
-import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
+import {CopyIcon as DuplicateIcon, TrashIcon} from '@sanity/icons'
 import {FormFieldValidationStatus} from '../../../components/formField'
 import {InsertMenu} from '../ArrayOfObjectsInput/InsertMenu'
 import {useTranslation} from '../../../../i18n'
 import {PrimitiveItemProps} from '../../../types/itemProps'
 import {RowLayout} from '../layouts/RowLayout'
 import {FieldPresence} from '../../../../presence'
+import {MenuButton, MenuItem} from '../../../../../ui-components'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 import {getEmptyValue} from './getEmptyValue'
 
 export type DefaultItemProps = Omit<PrimitiveItemProps, 'renderDefault'> & {
@@ -64,7 +66,7 @@ export const ItemRow = React.forwardRef(function ItemRow(
 
   const menu = (
     <MenuButton
-      button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+      button={<ContextMenuButton paddingY={3} />}
       id={`${inputId}-menuButton`}
       popover={MENU_BUTTON_POPOVER_PROPS}
       menu={
@@ -94,7 +96,7 @@ export const ItemRow = React.forwardRef(function ItemRow(
       presence={presence.length === 0 ? null : <FieldPresence presence={presence} maxAvatars={1} />}
       validation={
         validation.length > 0 ? (
-          <Box marginLeft={1} paddingX={1} paddingY={3}>
+          <Box paddingX={1} paddingY={3}>
             <FormFieldValidationStatus validation={validation} />
           </Box>
         ) : null
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/NoItemsPlaceholder.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/NoItemsPlaceholder.tsx
index d5706a47012..2c801e7929f 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/NoItemsPlaceholder.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/NoItemsPlaceholder.tsx
@@ -1,9 +1,7 @@
 import type {ArraySchemaType} from '@sanity/types'
 import {Card, Text} from '@sanity/ui'
-import {useTranslation} from '../../../../i18n'
 import React from 'react'
-
-const CARD_STYLE = {borderStyle: 'dashed'} as const
+import {useTranslation} from '../../../../i18n'
 
 /**
  * Shows a placeholder for an empty array of primitives.
@@ -13,7 +11,7 @@ const CARD_STYLE = {borderStyle: 'dashed'} as const
 export function NoItemsPlaceholder({schemaType}: {schemaType: ArraySchemaType}) {
   const {t} = useTranslation()
   return (
-    <Card padding={3} border style={CARD_STYLE} radius={2}>
+    <Card padding={3} border radius={2}>
       <Text align="center" muted size={1}>
         {schemaType.placeholder || t('inputs.array.no-items-label')}
       </Text>
diff --git a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
index cac8edb267d..0ae588b4b93 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/DragHandle.tsx
@@ -1,8 +1,9 @@
 import styled from 'styled-components'
-import {Button, ButtonProps} from '@sanity/ui'
 import React, {useContext} from 'react'
 import {DragHandleIcon} from '@sanity/icons'
 import {useSortable} from '@dnd-kit/sortable'
+import {Button, ButtonProps} from '../../../../../ui-components'
+import {useTranslation} from '../../../../i18n'
 
 const DragHandleButton = styled(Button)<{grid?: boolean}>`
   cursor: ${(props) => (props.grid ? 'move' : 'ns-resize')};
@@ -10,21 +11,30 @@ const DragHandleButton = styled(Button)<{grid?: boolean}>`
 
 export const SortableItemIdContext = React.createContext<string | null>(null)
 
-export const DragHandle = function DragHandle(
-  props: {
-    grid?: boolean
-  } & ButtonProps,
-) {
+interface DragHandleProps {
+  grid?: boolean
+  size?: ButtonProps['size']
+  mode?: ButtonProps['mode']
+  paddingY?: ButtonProps['paddingY']
+}
+
+export const DragHandle = function DragHandle(props: DragHandleProps) {
   const id = useContext(SortableItemIdContext)!
   const {listeners, attributes} = useSortable({id})
+  const {t} = useTranslation()
+  const {mode = 'bleed', ...rest} = props
 
   return (
     <DragHandleButton
       icon={DragHandleIcon}
-      mode="bleed"
+      tooltipProps={{
+        content: t('inputs.array.action.drag.tooltip'),
+        delay: {open: 1000},
+      }}
+      mode={mode}
       data-ui="DragHandleButton"
       {...attributes}
-      {...props}
+      {...rest}
       {...listeners}
     />
   )
diff --git a/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx b/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
index ee101b42164..33bfc8445fb 100644
--- a/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/common/uploadTarget/uploadTarget.tsx
@@ -79,11 +79,11 @@ export function uploadTarget<Props>(Component: React.ComponentType<Props>) {
               count: rejected.length,
             }),
             description: rejected.map((task, i) => (
-              <Flex key={i} padding={2}>
-                <Box marginLeft={1}>
-                  <Text weight="semibold">{task.file.name}</Text>
+              <Flex key={i} gap={2} padding={2}>
+                <Box>
+                  <Text weight="medium">{task.file.name}</Text>
                 </Box>
-                <Box paddingLeft={2}>
+                <Box>
                   <Text size={1}>({task.file.type})</Text>
                 </Box>
               </Flex>
diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
index 38ca9e01cc3..34522e4b184 100644
--- a/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/layouts/CellLayout.tsx
@@ -17,13 +17,13 @@ interface RowLayoutProps {
 }
 
 const FooterFlex = styled(Flex)`
-  min-height: 35px;
+  min-height: 33px;
 `
 const PresenceFlex = styled(Flex)`
   position: absolute;
   top: 0;
   right: 0;
-  height: 35px;
+  height: 33px;
 `
 
 const DragHandleCard = styled(Card)`
@@ -75,7 +75,7 @@ export function CellLayout(props: RowLayoutProps & ComponentProps<typeof Root>)
       border
       selected={selected}
       aria-selected={selected}
-      radius={2}
+      radius={1}
       tone={tone}
       {...rest}
     >
@@ -89,7 +89,7 @@ export function CellLayout(props: RowLayoutProps & ComponentProps<typeof Root>)
           tone="inherit"
           data-ui="DragHandleCard"
         >
-          <DragHandle grid padding={2} mode="ghost" />
+          <DragHandle grid mode="ghost" />
         </DragHandleCard>
       )}
 
diff --git a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
index 309d3c017b1..2f4b69016ed 100644
--- a/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/layouts/RowLayout.tsx
@@ -56,24 +56,20 @@ export function RowLayout(props: RowLayoutProps) {
       ref={elementRef}
       selected={selected}
       aria-selected={selected}
-      radius={2}
+      radius={1}
       padding={1}
       tone={tone}
     >
       <Stack space={1}>
-        <Flex align="center">
-          {dragHandle && (
-            <Box marginRight={1} paddingY={1}>
-              <DragHandle paddingX={1} paddingY={3} />
-            </Box>
-          )}
+        <Flex align="center" gap={1}>
+          {dragHandle && <DragHandle paddingY={3} />}
 
           <Box flex={1}>{children}</Box>
 
           {(presence || validation || menu) && (
-            <Flex align="center" marginLeft={1}>
-              {presence && <Box marginLeft={1}>{presence}</Box>}
-              {validation && <Box marginLeft={1}>{validation}</Box>}
+            <Flex align="center" flex="none" gap={2} style={{lineHeight: 0}}>
+              {presence && <Box flex="none">{presence}</Box>}
+              {validation && <Box flex="none">{validation}</Box>}
               {menu}
             </Flex>
           )}
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
index c39e149fdfe..e5aebe0ca97 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileActionsMenu.tsx
@@ -1,19 +1,10 @@
-import {BinaryDocumentIcon, EllipsisVerticalIcon} from '@sanity/icons'
+import {BinaryDocumentIcon} from '@sanity/icons'
 import React, {ReactNode, useCallback, useEffect, useState} from 'react'
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Menu,
-  Popover,
-  Stack,
-  Text,
-  useClickOutside,
-  useGlobalKeyDown,
-} from '@sanity/ui'
+import {Box, Card, Flex, Menu, Stack, Text, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import {formatBytes} from '../../common/helper'
 import {useTranslation} from '../../../../i18n'
+import {Popover} from '../../../../../ui-components'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 
 type Props = {
   children: ReactNode
@@ -100,6 +91,7 @@ export function FileActionsMenu(props: Props) {
         onClick={onClick}
         flex={1}
       >
+        {/* todo: consider replacing with <SanityDefaultPreview> */}
         <Flex wrap="nowrap" align="center">
           <Card padding={3} tone="transparent" shadow={1} radius={1}>
             <Text muted={muted}>
@@ -107,7 +99,13 @@ export function FileActionsMenu(props: Props) {
             </Text>
           </Card>
           <Stack flex={1} space={2} marginLeft={3}>
-            <Text size={2} textOverflow="ellipsis" muted={muted} data-testid="file-name">
+            <Text
+              size={1}
+              textOverflow="ellipsis"
+              muted={muted}
+              data-testid="file-name"
+              weight="medium"
+            >
               {originalFilename}
             </Text>
             <Text size={1} muted data-testid="file-size">
@@ -128,12 +126,11 @@ export function FileActionsMenu(props: Props) {
             open={isMenuOpen}
             constrainSize
           >
-            <Button
+            <ContextMenuButton
               aria-label={t('inputs.file.actions-menu.file-options.aria-label')}
               data-testid="options-menu-button"
-              icon={EllipsisVerticalIcon}
-              mode="bleed"
               onClick={handleClick}
+              paddingY={3}
               ref={setOptionsButtonRef}
             />
           </Popover>
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
index fa9f5d4ebe1..af7cc17ad9e 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
@@ -13,19 +13,11 @@ import {
   UploadState,
 } from '@sanity/types'
 import {ImageIcon, SearchIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Menu,
-  MenuButton,
-  MenuItem,
-  ThemeColorToneKey,
-  ToastParams,
-} from '@sanity/ui'
+import {Box, Card, Menu, ThemeColorToneKey, ToastParams} from '@sanity/ui'
 import {SanityClient} from '@sanity/client'
 import {isFileSource} from '@sanity/asset-utils'
 import {WithReferencedAsset} from '../../../utils/WithReferencedAsset'
+import {Button, MenuButton, MenuItem} from '../../../../../ui-components'
 import {Uploader, UploaderResolver, UploadOptions} from '../../../studio/uploads/types'
 import {FileInfo, FileTarget} from '../common/styles'
 import {UploadProgress} from '../common/UploadProgress'
@@ -475,7 +467,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
     const rejectedFilesCount = hoveringFiles.length - acceptedFiles.length
 
     return (
-      <CardOverlay tone={tone}>
+      <CardOverlay radius={2} tone={tone}>
         <FlexContainer align="center" justify="center" gap={2} flex={1}>
           <PlaceholderText
             readOnly={readOnly}
@@ -502,7 +494,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
           ref={this.setBrowseButtonElement}
           button={
             <Button
-              mode="ghost"
+              mode="bleed"
               text={t('inputs.file.multi-browse-button.text')}
               data-testid="file-input-multi-browse-button"
               icon={SearchIcon}
@@ -534,10 +526,9 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
 
     return (
       <Button
-        fontSize={2}
         text={t('inputs.file.browse-button.text')}
         icon={SearchIcon}
-        mode="ghost"
+        mode="bleed"
         onClick={() => {
           this.setState({isMenuOpen: false})
           this.handleSelectFileFromAssetSource(assetSources[0])
@@ -559,11 +550,13 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
     const accept = get(schemaType, 'options.accept', '')
 
     return (
-      <div style={{padding: 1}}>
+      <>
         <Card
           tone={readOnly ? 'transparent' : 'inherit'}
           border
-          padding={3}
+          paddingX={3}
+          paddingY={2}
+          radius={2}
           style={
             hoveringFiles.length === 0
               ? {borderStyle: 'dashed'}
@@ -582,7 +575,7 @@ export class BaseFileInput extends React.PureComponent<BaseFileInputProps, BaseF
             directUploads={directUploads}
           />
         </Card>
-      </div>
+      </>
     )
   }
 
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileSkeleton.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileSkeleton.tsx
index 4be2937e4f1..ba5a5fe9198 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileSkeleton.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileSkeleton.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import {Skeleton, Flex, Stack, LabelSkeleton} from '@sanity/ui'
+import {Skeleton, Flex, Stack, TextSkeleton} from '@sanity/ui'
 
 export function FileSkeleton() {
   return (
     <Flex align="center" justify="flex-start" padding={2}>
       <Skeleton padding={3} radius={1} animated />
       <Stack flex={1} space={2} marginLeft={3}>
-        <LabelSkeleton style={{width: '100%'}} radius={1} animated />
-        <LabelSkeleton style={{width: '100%'}} radius={1} animated />
+        <TextSkeleton style={{width: '100%'}} radius={1} animated />
+        <TextSkeleton style={{width: '100%'}} radius={1} animated />
       </Stack>
     </Flex>
   )
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
index e7ba5211aa6..a1e8f81cd56 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/InvalidFileWarning.tsx
@@ -1,17 +1,13 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
+import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import styled from 'styled-components'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 type Props = {
   onClearValue?: () => void
 }
 
-const ButtonWrapper = styled(Button)`
-  width: 100%;
-`
-
 export function InvalidFileWarning({onClearValue}: Props) {
   const {t} = useTranslation()
   return (
@@ -23,17 +19,18 @@ export function InvalidFileWarning({onClearValue}: Props) {
           </Text>
         </Box>
         <Stack space={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {t('inputs.file.invalid-file-warning.title')}
           </Text>
           <Text size={1}>{t('inputs.file.invalid-file-warning.description')}</Text>
         </Stack>
       </Flex>
-      <ButtonWrapper
+      <Button
         icon={ResetIcon}
-        text={t('inputs.file.invalid-file-warning.reset-button.text')}
-        onClick={onClearValue}
         mode="ghost"
+        onClick={onClearValue}
+        text={t('inputs.file.invalid-file-warning.reset-button.text')}
+        width="fill"
       />
     </Card>
   )
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
index 7f58b90a553..6d5bbc84d78 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
@@ -1,17 +1,16 @@
 import React, {MouseEventHandler, ReactNode, useCallback, useEffect, useState} from 'react'
-import {EllipsisVerticalIcon, CropIcon} from '@sanity/icons'
+import {CropIcon} from '@sanity/icons'
 import {
-  Button,
   Inline,
   Menu,
-  Popover,
-  Text,
-  Tooltip,
+  TooltipDelayGroupProvider,
   useClickOutside,
   useGlobalKeyDown,
 } from '@sanity/ui'
 import styled from 'styled-components'
+import {Button, Popover, TOOLTIP_DELAY_PROPS} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 
 export const MenuActionsWrapper = styled(Inline)`
   position: absolute;
@@ -91,12 +90,9 @@ export function ImageActionsMenu(props: ImageActionsMenuProps) {
 
   const {t} = useTranslation()
   return (
-    <MenuActionsWrapper data-buttons space={1} padding={2}>
-      {showEdit && (
-        <Tooltip
-          content={<Text size={1}>{t('inputs.image.actions-menu.crop-image-tooltip')}</Text>}
-          padding={2}
-        >
+    <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+      <MenuActionsWrapper data-buttons space={1} padding={2}>
+        {showEdit && (
           <Button
             aria-label={t('inputs.image.actions-menu.edit-details.aria-label')}
             data-testid="options-menu-edit-details"
@@ -104,27 +100,27 @@ export function ImageActionsMenu(props: ImageActionsMenuProps) {
             mode="ghost"
             onClick={onEdit}
             ref={setHotspotButtonElement}
+            tooltipProps={{content: t('inputs.image.actions-menu.crop-image-tooltip')}}
           />
-        </Tooltip>
-      )}
-      {/* Using a customized Popover instead of MenuButton because a MenuButton will close on click
+        )}
+        {/* Using a customized Popover instead of MenuButton because a MenuButton will close on click
      and break replacing an uploaded file. */}
-      <Popover
-        id="image-actions-menu"
-        content={<Menu ref={setMenuElement}>{children}</Menu>}
-        portal
-        open={isMenuOpen}
-        constrainSize
-      >
-        <Button
-          aria-label={t('inputs.image.actions-menu.options.aria-label')}
-          data-testid="options-menu-button"
-          icon={EllipsisVerticalIcon}
-          mode="ghost"
-          onClick={handleClick}
-          ref={setOptionsButtonRef}
-        />
-      </Popover>
-    </MenuActionsWrapper>
+        <Popover
+          id="image-actions-menu"
+          content={<Menu ref={setMenuElement}>{children}</Menu>}
+          portal
+          open={isMenuOpen}
+          constrainSize
+        >
+          <ContextMenuButton
+            aria-label={t('inputs.image.actions-menu.options.aria-label')}
+            data-testid="options-menu-button"
+            mode="ghost"
+            onClick={handleClick}
+            ref={setOptionsButtonRef}
+          />
+        </Popover>
+      </MenuActionsWrapper>
+    </TooltipDelayGroupProvider>
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index dc3b9770163..a39d67b9339 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -1,18 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable import/no-unresolved,react/jsx-handler-names, react/display-name, react/no-this-in-sfc */
 
-import {
-  Box,
-  Button,
-  Card,
-  Dialog,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  Stack,
-  ToastParams,
-} from '@sanity/ui'
+import {Box, Card, Menu, Stack, ToastParams} from '@sanity/ui'
 import {get, startCase} from 'lodash'
 import {Observable, Subscription} from 'rxjs'
 import {ChevronDownIcon, ImageIcon, SearchIcon} from '@sanity/icons'
@@ -28,6 +17,7 @@ import {
 import React, {ReactNode} from 'react'
 import {SanityClient} from '@sanity/client'
 import {isImageSource} from '@sanity/asset-utils'
+import {Button, Dialog, MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui-components'
 import {PatchEvent, setIfMissing, unset} from '../../../patch'
 import {FieldMember} from '../../../store'
 import {InputProps, ObjectInputProps} from '../../../types'
@@ -408,19 +398,17 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
         width={1}
       >
         <PresenceOverlay>
-          <Box padding={4}>
-            <Stack space={5}>
-              {withImageTool && value?.asset && (
-                <ImageToolInput
-                  {...this.props}
-                  imageUrl={imageUrlBuilder.image(value.asset).url()}
-                  value={value as FIXME}
-                  presence={hotspotInputProps.presence}
-                  changed={changed}
-                />
-              )}
-            </Stack>
-          </Box>
+          <Stack space={5}>
+            {withImageTool && value?.asset && (
+              <ImageToolInput
+                {...this.props}
+                imageUrl={imageUrlBuilder.image(value.asset).url()}
+                value={value as FIXME}
+                presence={hotspotInputProps.presence}
+                changed={changed}
+              />
+            )}
+          </Stack>
         </PresenceOverlay>
       </Dialog>
     )
@@ -567,7 +555,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
               data-testid="file-input-multi-browse-button"
               icon={SearchIcon}
               iconRight={ChevronDownIcon}
-              mode="ghost"
+              mode="bleed"
               text={t('inputs.image.browse-menu.text')}
             />
           }
@@ -600,10 +588,9 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
 
     return (
       <Button
-        fontSize={2}
         text={t('inputs.image.browse-menu.text')}
         icon={SearchIcon}
-        mode="ghost"
+        mode="bleed"
         onClick={() => {
           this.setState({isMenuOpen: false})
           this.handleSelectImageFromAssetSource(assetSources[0])
@@ -629,12 +616,10 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
         <Card
           tone={readOnly ? 'transparent' : 'inherit'}
           border
-          padding={3}
-          style={
-            hoveringFiles.length === 0
-              ? {borderStyle: 'dashed'}
-              : {borderStyle: 'dashed', borderColor: 'transparent'}
-          }
+          paddingX={3}
+          paddingY={2}
+          radius={2}
+          style={hoveringFiles.length === 0 ? {} : {borderColor: 'transparent'}}
         >
           <UploadPlaceholder
             browse={this.renderBrowser()}
@@ -773,7 +758,6 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
               onFilesOut={this.handleFilesOut}
               tone={this.getFileTone()}
               $border={hasValueOrUpload || hoveringFiles.length > 0}
-              style={{padding: 1}}
               sizing="border"
               radius={2}
             >
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
index 271d5b718cd..fc950b2c98e 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -1,4 +1,4 @@
-import {studioTheme, rgba, Card, Flex, CardTone, Spinner} from '@sanity/ui'
+import {studioTheme, rgba, Card, Flex, CardTone} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
 export const MAX_DEFAULT_HEIGHT = 30
@@ -27,10 +27,6 @@ export const RatioBox = styled(Card)`
   }
 `
 
-export const SpinnerWrapper = styled(Spinner)`
-  position: absolute;
-`
-
 export const Overlay = styled(Flex)<{
   $drag: boolean
   $tone: Exclude<CardTone, 'inherit'>
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
index e31e8f7b844..805cd3fdd89 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -2,14 +2,9 @@ import React, {ComponentProps, useCallback, useEffect, useState} from 'react'
 
 import {AccessDeniedIcon, ImageIcon, ReadOnlyIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Heading, Text, useElementRect} from '@sanity/ui'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useTranslation} from '../../../../i18n'
-import {
-  MAX_DEFAULT_HEIGHT,
-  RatioBox,
-  Overlay,
-  FlexOverlay,
-  SpinnerWrapper,
-} from './ImagePreview.styled'
+import {MAX_DEFAULT_HEIGHT, RatioBox, Overlay, FlexOverlay} from './ImagePreview.styled'
 
 interface Props {
   readOnly?: boolean | null
@@ -72,7 +67,9 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
   return (
     <RatioBox {...rest} ref={setRootElement} style={{height: rootHeight}} tone="transparent">
       <Card data-container tone="inherit">
-        {!isLoaded && <OverlayComponent cardTone="transparent" drag content={<SpinnerWrapper />} />}
+        {!isLoaded && (
+          <OverlayComponent cardTone="transparent" drag content={<LoadingBlock showText />} />
+        )}
         <img
           src={src}
           data-testid="hotspot-image-input"
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
index 56def8de7ec..0d6a7ee645b 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
@@ -1,17 +1,13 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
+import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import styled from 'styled-components'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 
 type Props = {
   onClearValue?: () => void
 }
 
-const ButtonWrapper = styled(Button)`
-  width: 100%;
-`
-
 export function InvalidImageWarning({onClearValue}: Props) {
   const {t} = useTranslation()
   return (
@@ -23,17 +19,18 @@ export function InvalidImageWarning({onClearValue}: Props) {
           </Text>
         </Box>
         <Stack space={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {t('inputs.image.invalid-image-warning.title')}
           </Text>
           <Text size={1}>{t('inputs.image.invalid-image-warning.description')}</Text>
         </Stack>
       </Flex>
-      <ButtonWrapper
+      <Button
         icon={ResetIcon}
-        text={t('inputs.image.invalid-image-warning.reset-button.text')}
-        onClick={onClearValue}
         mode="ghost"
+        onClick={onClearValue}
+        text={t('inputs.image.invalid-image-warning.reset-button.text')}
+        width="fill"
       />
     </Card>
   )
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
index 3a2b3fd4a2a..627c5afe983 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
@@ -10,6 +10,7 @@ import {useDidUpdate} from '../../../hooks/useDidUpdate'
 import {ChangeIndicator} from '../../../../changeIndicators'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useTranslation} from '../../../../i18n'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {ImageTool, HotspotImage, DEFAULT_CROP, DEFAULT_HOTSPOT} from './imagetool'
 import {useLoadImage} from './useLoadImage'
 
@@ -142,11 +143,10 @@ export function ImageToolInput(props: ImageToolInputProps) {
                       </Text>
                     </Card>
                   ) : (
-                    <Text muted>{t('inputs.imagetool.loading')}</Text>
+                    <LoadingBlock showText />
                   )}
                 </LoadStatus>
               )}
-
               {!isImageLoading && image && (
                 <Box margin={1}>
                   <ImageTool
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
index 3e1d4710341..acfb871ca5a 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/imagetool/ImageTool.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import {LoadingBlock} from '../../../../../components/loadingBlock'
 import {ImageLoader} from './ImageLoader'
 import {ToolCanvas} from './ToolCanvas'
 import {Resize} from './Resize'
@@ -14,7 +15,7 @@ export function ImageTool(props: ImageToolProps) {
     <ImageLoader src={props.src}>
       {({isLoading, image, error}) => {
         if (isLoading) {
-          return <div>Loading...</div>
+          return <LoadingBlock showText />
         }
         if (error) {
           return <div>{error.message}</div>
diff --git a/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx b/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
index 500eca730a8..78ec425cee2 100644
--- a/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
+++ b/packages/sanity/src/core/form/inputs/files/__workshop__/UploadPlaceholderStory.tsx
@@ -1,6 +1,7 @@
-import {Button, Card, Container, Flex} from '@sanity/ui'
+import {Card, Container, Flex} from '@sanity/ui'
 import React from 'react'
 import {UploadPlaceholder} from '../common/UploadPlaceholder'
+import {Button} from '../../../../../ui-components'
 
 export default function UploadPlaceholderStory() {
   return (
diff --git a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
index 208173e9399..5b94b3b078d 100644
--- a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
@@ -1,7 +1,8 @@
 import React, {MouseEventHandler, useCallback} from 'react'
 
 import {UploadIcon, CopyIcon, ResetIcon, DownloadIcon} from '@sanity/icons'
-import {Box, MenuItem, MenuDivider, Label, useToast} from '@sanity/ui'
+import {MenuDivider, useToast} from '@sanity/ui'
+import {MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {FileInputMenuItem} from './FileInputMenuItem/FileInputMenuItem'
 
@@ -33,20 +34,13 @@ export function ActionsMenu(props: Props) {
 
   return (
     <>
-      <Box padding={2}>
-        <Label muted size={1}>
-          {t('inputs.files.common.actions-menu.replace.label')}
-        </Label>
-      </Box>
       <FileInputMenuItem
         icon={UploadIcon}
-        mode="bleed"
         onSelect={onUpload}
         accept={accept}
         text={t('inputs.files.common.actions-menu.upload.label')}
         data-testid="file-input-upload-button"
         disabled={readOnly || !directUploads}
-        fontSize={2}
       />
       {browse}
 
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
index 3166f3075e3..9115a6940a0 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/FileInputButton.tsx
@@ -1,9 +1,8 @@
-import React, {createElement, isValidElement, useId} from 'react'
-import {isValidElementType} from 'react-is'
-import {Box, ButtonProps, Flex, Text, useTheme} from '@sanity/ui'
+import React, {useId} from 'react'
+import {ButtonProps} from '../../../../../../ui-components'
 import {FileButton} from './styles'
 
-export interface FileInputButtonProps extends ButtonProps {
+export type FileInputButtonProps = ButtonProps & {
   accept?: string
   capture?: 'user' | 'environment'
   multiple?: boolean
@@ -16,23 +15,8 @@ export const FileInputButton = React.forwardRef(function FileInputButton(
     Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref' | 'type' | 'value' | 'onSelect'>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
-  const {
-    icon,
-    id: idProp,
-    accept,
-    capture,
-    fontSize,
-    multiple,
-    onSelect,
-    padding = 3,
-    space = 3,
-    textAlign,
-    text,
-    disabled,
-    ...rest
-  } = props
+  const {icon, id: idProp, accept, capture, multiple, onSelect, text, disabled, ...rest} = props
   const id = `${idProp || ''}-${useId()}`
-  const theme = useTheme()
 
   const handleChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -43,36 +27,8 @@ export const FileInputButton = React.forwardRef(function FileInputButton(
     [onSelect],
   )
 
-  const content = (
-    <Flex align="center" justify="center" padding={padding}>
-      {/* Icon */}
-      {icon && (
-        <Box marginRight={text ? space : undefined}>
-          <Text size={fontSize}>
-            {isValidElement(icon) && icon}
-            {isValidElementType(icon) && createElement(icon)}
-          </Text>
-        </Box>
-      )}
-
-      {/* Text */}
-      {text && (
-        <Text
-          align={textAlign}
-          size={fontSize}
-          textOverflow="ellipsis"
-          weight={theme.sanity.button.textWeight}
-        >
-          {text}
-        </Text>
-      )}
-    </Flex>
-  )
-
   return (
-    <FileButton {...rest} htmlFor={id} padding={0} fontSize={2} disabled={disabled}>
-      {content}
-
+    <FileButton {...rest} icon={icon} text={text} htmlFor={id} disabled={disabled}>
       {/* Visibly hidden input */}
       <input
         data-testid="file-button-input"
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
index fc8719e40f8..65b1c00cb2f 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputButton/styles.ts
@@ -1,5 +1,6 @@
-import {Button, Theme} from '@sanity/ui'
+import {Theme} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {Button} from '../../../../../../ui-components'
 import {focusRingStyle} from '../../../../components/withFocusRing/helpers'
 
 export const FileButton = styled(Button).attrs({forwardedAs: 'label'})(
@@ -15,7 +16,11 @@ export const FileButton = styled(Button).attrs({forwardedAs: 'label'})(
         }
       }
 
-      & input {
+      // The underlying file input is rendered as children within a Sanity UI <Button> component.
+      // The below visibly hides it by targeting the input's parent <span> element, which is
+      // added by the <Button> component.
+      // TODO: refactor, avoid nth-child selector usage
+      & > span:nth-child(2) {
         overflow: hidden;
         overflow: clip;
         top: 0;
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
index a6b29dd6acd..09ec9e154ae 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
@@ -1,5 +1,5 @@
-import {MenuItem} from '@sanity/ui'
 import styled from 'styled-components'
+import {MenuItem} from '../../../../../../ui-components'
 
 export const FileMenuItem = styled(MenuItem)`
   position: relative;
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
index de864737015..26edab1d5c3 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
@@ -1,9 +1,8 @@
-import React, {createElement, isValidElement, useId} from 'react'
-import {isValidElementType} from 'react-is'
-import {Box, ButtonProps, Flex, Text} from '@sanity/ui'
+import React, {useCallback, useId} from 'react'
+import {MenuItemProps} from '../../../../../../ui-components'
 import {FileMenuItem} from './FileInputMenuItem.styled'
 
-export interface FileInputMenuItemProps extends ButtonProps {
+export interface FileInputMenuItemProps extends Omit<MenuItemProps, 'onSelect'> {
   accept?: string
   capture?: 'user' | 'environment'
   multiple?: boolean
@@ -16,21 +15,7 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
     Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref' | 'type' | 'value' | 'onSelect'>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
-  const {
-    icon,
-    id: idProp,
-    accept,
-    capture,
-    fontSize,
-    multiple,
-    onSelect,
-    padding = 3,
-    space = 3,
-    textAlign,
-    text,
-    disabled,
-    ...rest
-  } = props
+  const {icon, id: idProp, accept, capture, multiple, onSelect, text, disabled, ...rest} = props
   const id = `${idProp || ''}-${useId()}`
 
   const handleChange = React.useCallback(
@@ -42,50 +27,35 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
     [onSelect],
   )
 
-  const content = (
-    <Flex align="center" justify="flex-start" padding={padding}>
-      {/* Icon */}
-      {icon && (
-        <Box marginRight={text ? space : undefined}>
-          <Text size={fontSize}>
-            {isValidElement(icon) && icon}
-            {isValidElementType(icon) && createElement(icon)}
-          </Text>
-        </Box>
-      )}
-
-      {/* Text */}
-      {text && (
-        <Text align={textAlign} size={fontSize} textOverflow="ellipsis">
-          {text}
-        </Text>
-      )}
-    </Flex>
+  const renderMenuItem = useCallback(
+    (item: React.JSX.Element) => (
+      <div>
+        {item}
+        {/* Visibly hidden input */}
+        <input
+          data-testid="file-menuitem-input"
+          accept={accept}
+          capture={capture}
+          id={id}
+          multiple={multiple}
+          onChange={handleChange}
+          type="file"
+          value=""
+          disabled={disabled}
+        />
+      </div>
+    ),
+    [accept, capture, disabled, handleChange, id, multiple],
   )
-
   return (
     <FileMenuItem
       {...rest}
       htmlFor={id}
-      padding={0}
-      fontSize={2}
       disabled={disabled}
       ref={forwardedRef}
-    >
-      {content}
-
-      {/* Visibly hidden input */}
-      <input
-        data-testid="file-menuitem-input"
-        accept={accept}
-        capture={capture}
-        id={id}
-        multiple={multiple}
-        onChange={handleChange}
-        type="file"
-        value=""
-        disabled={disabled}
-      />
-    </FileMenuItem>
+      icon={icon}
+      text={text}
+      renderMenuItem={renderMenuItem}
+    />
   )
 })
diff --git a/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx b/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
index 2468e9f85be..6c0bfcaae25 100644
--- a/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
@@ -60,8 +60,10 @@ export function PlaceholderText(props: Props) {
   }, [acceptedFiles.length, directUploads, hoveringFiles, readOnly, rejectedFilesCount, t, type])
 
   return (
-    <RootFlex align="center" gap={2} justify="center">
-      <Text muted>{messageIcon}</Text>
+    <RootFlex align="center" gap={3} justify="center" paddingLeft={1}>
+      <Text muted size={1}>
+        {messageIcon}
+      </Text>
 
       <Text size={1} muted>
         {messageText}
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
index 304fd3c300c..e6d102a0b3f 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
@@ -47,7 +47,7 @@ function UploadPlaceholderComponent(props: UploadPlaceholderProps) {
       paddingY={collapsed ? 1 : undefined}
       ref={setRootElement}
     >
-      <Flex flex={1} justify="center">
+      <Flex flex={1}>
         <PlaceholderText
           acceptedFiles={acceptedFiles}
           directUploads={directUploads}
@@ -58,13 +58,13 @@ function UploadPlaceholderComponent(props: UploadPlaceholderProps) {
         />
       </Flex>
 
-      <Flex align="center" gap={2} justify="center" wrap="wrap">
+      <Flex align="center" gap={1} justify="center" wrap="wrap">
         <FileInputButton
           accept={accept}
           data-testid="file-input-upload-button"
           disabled={readOnly || !directUploads}
           icon={UploadIcon}
-          mode="ghost"
+          mode="bleed"
           onSelect={onUpload}
           text={t('input.files.common.upload-placeholder.file-input-button.text')}
         />
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
index 132b1eb5e8e..6cc3bd18eb6 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
@@ -1,7 +1,8 @@
 import React, {useEffect} from 'react'
-import {Flex, Text, Button, Inline, Card} from '@sanity/ui'
+import {Flex, Text, Inline, Card} from '@sanity/ui'
 import {UploadState} from '@sanity/types'
 import {LinearProgress} from '../../../../components'
+import {Button} from '../../../../../ui-components'
 import {Translate, useTranslation} from '../../../../i18n'
 import {STALE_UPLOAD_MS} from '../constants'
 import {CardWrapper, FlexWrapper, LeftSection, CodeWrapper} from './UploadProgress.styled'
@@ -42,18 +43,17 @@ export function UploadProgress({uploadState, onCancel, onStale, height}: Props)
             </Text>
           </Flex>
 
-          <Card marginTop={3} radius={5} shadow={1}>
+          <Card border marginTop={3} radius={5}>
             <LinearProgress value={uploadState.progress} />
           </Card>
         </LeftSection>
 
         {onCancel ? (
           <Button
-            fontSize={2}
-            text={t('input.files.common.cancel-upload')}
             mode="ghost"
-            tone="critical"
             onClick={onCancel}
+            text={t('input.files.common.cancel-upload')}
+            tone="critical"
           />
         ) : null}
       </FlexWrapper>
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
index a2f551497ac..4bf92fb61ff 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
@@ -1,7 +1,7 @@
 import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
-import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
+import {Card, Flex, Box, Text, Stack} from '@sanity/ui'
 import React from 'react'
-import styled from 'styled-components'
+import {Button} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {STALE_UPLOAD_MS} from '../constants'
 
@@ -9,10 +9,6 @@ type Props = {
   onClearStale?: () => void
 }
 
-const ButtonWrapper = styled(Button)`
-  width: 100%;
-`
-
 export function UploadWarning({onClearStale}: Props) {
   const {t} = useTranslation()
 
@@ -25,7 +21,7 @@ export function UploadWarning({onClearStale}: Props) {
           </Text>
         </Box>
         <Stack space={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {t('inputs.files.common.stale-upload-warning.title')}
           </Text>
           <Text size={1}>
@@ -35,11 +31,12 @@ export function UploadWarning({onClearStale}: Props) {
           </Text>
         </Stack>
       </Flex>
-      <ButtonWrapper
+      <Button
         icon={ResetIcon}
-        text={t('inputs.files.common.stale-upload-warning.clear')}
-        onClick={onClearStale}
         mode="ghost"
+        onClick={onClearStale}
+        text={t('inputs.files.common.stale-upload-warning.clear')}
+        width="fill"
       />
     </Card>
   )
diff --git a/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx b/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
index d3527a6917e..60944d0a566 100644
--- a/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
+++ b/packages/sanity/src/core/form/members/array/IncompatibleItemType.tsx
@@ -1,8 +1,9 @@
-import {Box, Card, Code, Flex, Popover, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
+import {Box, Card, Code, Flex, Stack, Text, Theme, useClickOutside} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {BulbOutlineIcon, UnknownIcon} from '@sanity/icons'
 import {resolveTypeName} from '@sanity/util/content'
 import styled from 'styled-components'
+import {Popover} from '../../../../ui-components'
 import {Translate, useTranslation} from '../../../i18n'
 
 const PopoverCard = styled(Card)`
@@ -46,14 +47,14 @@ export function IncompatibleItemType(props: Props) {
       content={
         <PopoverCard margin={1} padding={3} onKeyDown={handleKeyDown} tabIndex={0} overflow="auto">
           <Stack space={4}>
-            <Text weight="semibold">
+            <Text weight="medium">
               <Translate
                 t={t}
                 i18nKey="inputs.array.error.type-is-incompatible-prompt"
                 values={{typeName}}
               />
             </Text>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               {t('inputs.array.error.type-is-incompatible-title')}
             </Text>
             <Text size={1}>
@@ -69,7 +70,7 @@ export function IncompatibleItemType(props: Props) {
               </Text>
             </Box>
             <Stack space={2}>
-              <Text size={1} weight="semibold">
+              <Text size={1} weight="medium">
                 {t('inputs.array.error.json-representation-description')}
               </Text>
               <Card padding={2} overflow="auto" border>
diff --git a/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx b/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
index fd8fa9d0485..52215bb4748 100644
--- a/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/DuplicateKeysAlert.tsx
@@ -1,6 +1,7 @@
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {FormField} from '../../../components/formField'
+import {Button} from '../../../../../ui-components'
 import {Alert} from '../../../components/Alert'
 import {DuplicateKeysError} from '../../../store/types/memberErrors'
 import {PatchEvent, set} from '../../../patch'
diff --git a/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx b/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
index b9f472884a0..4f9764ddfb7 100644
--- a/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/MissingKeysAlert.tsx
@@ -1,6 +1,7 @@
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {randomKey} from '@sanity/util/content'
+import {Button} from '../../../../../ui-components'
 import {MissingKeysError} from '../../../store/types/memberErrors'
 import {Details} from '../../../components/Details'
 import {Alert} from '../../../components/Alert'
diff --git a/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx b/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
index d08ebf7e015..ba403e14ebd 100644
--- a/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
+++ b/packages/sanity/src/core/form/members/object/errors/MixedArrayAlert.tsx
@@ -1,6 +1,7 @@
-import {Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import React from 'react'
 import {isPlainObject} from 'lodash'
+import {Button} from '../../../../../ui-components'
 import {Alert} from '../../../components/Alert'
 import {Details} from '../../../components/Details'
 import {isDev} from '../../../../environment'
diff --git a/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx b/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
index 302179726cb..56c2df2ba6f 100644
--- a/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/file/AssetRow.tsx
@@ -1,9 +1,20 @@
 import type {Subscription} from 'rxjs'
 import React, {useCallback, useMemo, useRef, useState} from 'react'
 import styled, {css} from 'styled-components'
-import {Box, Button, Card, Flex, Grid, Label, Stack, Text, Tooltip, useToast} from '@sanity/ui'
+import {
+  Box,
+  // eslint-disable-next-line no-restricted-imports
+  Button,
+  Card,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+  useToast,
+} from '@sanity/ui'
 import {ChevronDownIcon, ChevronUpIcon, DocumentIcon, LinkIcon, TrashIcon} from '@sanity/icons'
 import {Asset as AssetType} from '@sanity/types'
+import {Tooltip} from '../../../../../ui-components'
 import {useClient, useRelativeTime, useUnitFormatter} from '../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
 import {AssetDeleteDialog} from '../shared/AssetDeleteDialog'
@@ -60,7 +71,7 @@ const RowButton = styled(Button)<RowProps>`
   &:before {
     z-index: 0;
     pointer-events: none;
-    border-radius: 0.1875rem;
+    border-radius: inherit;
   }
 
   ${(props) =>
@@ -247,6 +258,7 @@ export const AssetRow = (props: RowProps) => {
             data-id={_id}
             onClick={onClick}
             paddingY={1}
+            radius={2}
           >
             <Flex gap={2} flex={2} align="center">
               <Card as={CardIconWrapper} padding={2} tone="transparent" radius={2}>
@@ -273,25 +285,25 @@ export const AssetRow = (props: RowProps) => {
           <>
             <Grid marginTop={3} columns={3} gap={1}>
               <Stack space={2}>
-                <Label size={1} muted>
+                <Text size={1} muted weight="medium">
                   {t('asset-source.file.asset-list.header.size')}
-                </Label>
+                </Text>
                 <Text size={1} muted>
                   {formattedSize}
                 </Text>
               </Stack>
               <Stack space={2}>
-                <Label size={1} muted>
+                <Text size={1} muted weight="medium">
                   {t('asset-source.file.asset-list.header.type')}
-                </Label>
+                </Text>
                 <Text size={1} muted>
                   {formattedMimeType}
                 </Text>
               </Stack>
               <Stack space={2}>
-                <Label size={1} muted>
+                <Text size={1} muted weight="medium">
                   {t('asset-source.file.asset-list.header.date-added')}
-                </Label>
+                </Text>
                 <Text size={1} muted>
                   {formattedTime}
                 </Text>
@@ -361,6 +373,7 @@ export const AssetRow = (props: RowProps) => {
             filename: originalFilename,
           })}
           isSelected={isSelected}
+          radius={2}
         >
           <CustomFlex
             gap={2}
@@ -383,16 +396,7 @@ export const AssetRow = (props: RowProps) => {
               </Text>
             </Card>
             {showTooltip && (
-              <Tooltip
-                content={
-                  <Box padding={2}>
-                    <Text size={1}>{originalFilename}</Text>
-                  </Box>
-                }
-                fallbackPlacements={['right', 'left']}
-                placement="top"
-                portal
-              >
+              <Tooltip content={originalFilename}>
                 <Text size={1} align="left" textOverflow="ellipsis" style={STYLES_BUTTON_TEXT}>
                   {originalFilename}
                 </Text>
diff --git a/packages/sanity/src/core/form/studio/assetSource/file/FileListView.tsx b/packages/sanity/src/core/form/studio/assetSource/file/FileListView.tsx
index a05887410df..7a5bc445336 100644
--- a/packages/sanity/src/core/form/studio/assetSource/file/FileListView.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/file/FileListView.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Box, Card, Flex, Grid, Label, Spinner, Stack, useMediaIndex} from '@sanity/ui'
+import {Box, Card, Flex, Grid, Spinner, Stack, Text, useMediaIndex} from '@sanity/ui'
 import {Asset} from '@sanity/types'
 import {useTranslation} from '../../../../i18n'
 import {AssetRow} from './AssetRow'
@@ -23,37 +23,37 @@ export function FileListView(props: Props) {
 
   const {t} = useTranslation()
   return (
-    <Box padding={4}>
+    <Box>
       <Card borderBottom paddingBottom={2} marginBottom={1}>
         {isMobile ? (
           <Grid style={STYLES_GRID}>
             <Box flex={2} paddingLeft={5}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.filename')}
-              </Label>
+              </Text>
             </Box>
           </Grid>
         ) : (
           <Grid gap={1} style={STYLES_GRID}>
             <Box flex={2} style={STYLES_FILENAME}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.filename')}
-              </Label>
+              </Text>
             </Box>
             <Box flex={1}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.size')}
-              </Label>
+              </Text>
             </Box>
             <Box flex={1}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.type')}
-              </Label>
+              </Text>
             </Box>
             <Box flex={1}>
-              <Label muted size={1}>
+              <Text muted size={1} weight="medium">
                 {t('asset-source.file.asset-list.header.date-added')}
-              </Label>
+              </Text>
             </Box>
           </Grid>
         )}
diff --git a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
index bb6aa9f8a61..0fbfdedceee 100644
--- a/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/image/AssetThumb.tsx
@@ -1,11 +1,16 @@
 import type {Subscription} from 'rxjs'
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
-import {Button, Card, useToast} from '@sanity/ui'
+import {
+  // eslint-disable-next-line no-restricted-imports
+  Button,
+  Card,
+  useToast,
+} from '@sanity/ui'
 import {Asset} from '@sanity/types'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useClient} from '../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
-import {FullscreenSpinner} from '../../../components/FullscreenSpinner'
 import {AssetMenu} from '../shared/AssetMenu'
 import {AssetUsageDialog} from '../shared/AssetUsageDialog'
 import {AssetDeleteDialog} from '../shared/AssetDeleteDialog'
@@ -202,7 +207,6 @@ export const AssetThumb = React.memo(function AssetThumb(props: AssetProps) {
   return (
     <Root>
       <Button
-        tone="primary"
         selected={isSelected}
         tabIndex={0}
         data-id={_id}
@@ -213,7 +217,7 @@ export const AssetThumb = React.memo(function AssetThumb(props: AssetProps) {
       >
         <Container __unstable_checkered>
           <Image alt={originalFilename} src={imageUrl} onClick={onClick} data-id={_id} />
-          {isDeleting && <FullscreenSpinner />}
+          {isDeleting && <LoadingBlock />}
         </Container>
       </Button>
       <MenuContainer>
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
index badc5bfa1c9..c8ff7f7f8a8 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetDeleteDialog.tsx
@@ -1,8 +1,9 @@
 import React, {useMemo} from 'react'
 import {TrashIcon} from '@sanity/icons'
-import {Box, Button, Dialog, Grid, Stack} from '@sanity/ui'
+import {Box, Stack} from '@sanity/ui'
 import {Asset as AssetType} from '@sanity/types'
-import {SpinnerWithText} from '../../../components/SpinnerWithText'
+import {Dialog} from '../../../../../ui-components'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useReferringDocuments} from '../../../../hooks/useReferringDocuments'
 import {useTranslation} from '../../../../i18n'
 import {AssetUsageList} from './AssetUsageList'
@@ -38,31 +39,22 @@ export function AssetDeleteDialog({
 
   const {t} = useTranslation()
 
-  const footer = useMemo(
-    () => (
-      <Grid padding={2} gap={2} columns={2}>
-        <Button
-          mode="bleed"
-          text={t('asset-source.delete-dialog.action.cancel')}
-          onClick={onClose}
-        />
-        <Button
-          text={t('asset-source.delete-dialog.action.delete')}
-          tone="critical"
-          icon={TrashIcon}
-          onClick={onDelete}
-          loading={isDeleting}
-          disabled={hasResults}
-        />
-      </Grid>
-    ),
-    [hasResults, isDeleting, onClose, onDelete, t],
-  )
-
   return (
     <Dialog
       __unstable_autoFocus={isLoading}
-      footer={footer}
+      footer={{
+        cancelButton: {
+          onClick: onClose,
+          text: t('asset-source.delete-dialog.action.cancel'),
+        },
+        confirmButton: {
+          disabled: hasResults,
+          icon: TrashIcon,
+          loading: isDeleting,
+          onClick: onDelete,
+          text: t('asset-source.delete-dialog.action.delete'),
+        },
+      }}
       header={t('asset-source.delete-dialog.header', {context: assetType})}
       id="asset-dialog"
       onClickOutside={onClose}
@@ -71,7 +63,7 @@ export function AssetDeleteDialog({
     >
       {isLoading ? (
         <Box padding={4}>
-          <SpinnerWithText text={t('asset-source.delete-dialog.loading')} />
+          <LoadingBlock showText />
         </Box>
       ) : (
         <Stack
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
index 1dae799fc2f..b713f6d9fe1 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetMenu.tsx
@@ -1,8 +1,10 @@
-import {EllipsisVerticalIcon, LinkIcon, TrashIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
-import {AssetMenuAction} from '../types'
-import {useTranslation} from '../../../../i18n'
+import {LinkIcon, TrashIcon} from '@sanity/icons'
+import {Menu} from '@sanity/ui'
 import React from 'react'
+import {MenuButton, MenuItem} from '../../../../../ui-components'
+import {useTranslation} from '../../../../i18n'
+import {AssetMenuAction} from '../types'
+import {ContextMenuButton} from '../../../../components/contextMenuButton'
 
 const MENU_POPOVER_PROPS = {portal: true, placement: 'right'} as const
 
@@ -22,10 +24,8 @@ export function AssetMenu({
   return (
     <MenuButton
       button={
-        <Button
-          padding={2}
+        <ContextMenuButton
           mode={border ? 'ghost' : triggerButtonMode}
-          icon={EllipsisVerticalIcon}
           tone={border ? 'default' : triggerButtonTone}
         />
       }
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
index aa60180d13e..6a3f9ea9c17 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageDialog.tsx
@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react'
-import {Box, Dialog, Stack} from '@sanity/ui'
 import {Asset as AssetType} from '@sanity/types'
+import {Dialog} from '../../../../../ui-components'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useReferringDocuments} from '../../../../hooks/useReferringDocuments'
-import {SpinnerWithText} from '../../../components/SpinnerWithText'
 import {useTranslation} from '../../../../i18n'
 import {AssetUsageList} from './AssetUsageList'
 
@@ -36,17 +36,13 @@ export function AssetUsageDialog({asset, assetType, onClose}: UsageDialogProps)
       width={1}
     >
       {isLoading ? (
-        <Box padding={4}>
-          <SpinnerWithText text={t('asset-source.asset-usage-dialog.loading')} />
-        </Box>
+        <LoadingBlock showText />
       ) : (
-        <Stack paddingX={[2, 3, 4]} paddingY={[3, 3, 3, 4]} space={1}>
-          <AssetUsageList
-            asset={asset}
-            referringDocuments={publishedDocuments}
-            assetType={assetType}
-          />
-        </Stack>
+        <AssetUsageList
+          asset={asset}
+          referringDocuments={publishedDocuments}
+          assetType={assetType}
+        />
       )}
     </Dialog>
   )
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageList.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageList.tsx
index 106594045e0..292b5d04815 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageList.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/AssetUsageList.tsx
@@ -19,8 +19,8 @@ export const AssetUsageList = ({
   const count = referringDocuments.length
   return (
     <>
-      <Card borderBottom marginTop={2} paddingBottom={2} marginBottom={1}>
-        <Text size={[1, 1, 2, 2]} as="h2" weight="regular">
+      <Card borderBottom={count > 0} marginTop={2} paddingBottom={2} marginBottom={1}>
+        <Text size={1} as="h2" weight="medium">
           <Translate
             t={t}
             i18nKey={`asset-source.usage-list.documents-using-${assetType}`}
@@ -48,15 +48,7 @@ const DocumentLink = ({document}: {document: SanityDocument}) => {
   )
 
   return (
-    <Card
-      as={LinkComponent}
-      paddingY={2}
-      paddingX={1}
-      radius={2}
-      key={document._id}
-      data-as="a"
-      tabIndex={0}
-    >
+    <Card as={LinkComponent} radius={2} key={document._id} data-as="a" tabIndex={0}>
       <Flex align="center" gap={2}>
         <Preview
           layout="default"
diff --git a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
index cb73776d4ce..b327003dcfa 100644
--- a/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/shared/DefaultSource.tsx
@@ -1,7 +1,7 @@
 import type {Subscription} from 'rxjs'
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {DownloadIcon, InfoOutlineIcon} from '@sanity/icons'
-import {Button, Card, Dialog, Flex, Text} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {Asset, AssetFromSource, AssetSourceComponentProps} from '@sanity/types'
 import {uniqueId} from 'lodash'
 import styled from 'styled-components'
@@ -10,6 +10,7 @@ import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../studioClient'
 import {Translate, useTranslation} from '../../../../i18n'
 import {FileListView} from '../file/FileListView'
 import {ImageListView} from '../image/ImageListView'
+import {Button, Dialog} from '../../../../../ui-components'
 
 const PER_PAGE = 200
 const ASSET_TYPE_IMAGE = 'sanity.imageAsset'
@@ -222,58 +223,61 @@ const DefaultAssetSource = function DefaultAssetSource(
       ref={ref}
       width={2}
     >
-      {!isImageOnlyWildCard && !isLoading && accept?.length > 0 && (
-        <Card tone="primary" marginTop={4} marginX={4} padding={[3, 3, 4]} border radius={2}>
-          <Flex gap={[3, 4]} align="center">
-            <Text>
-              <InfoOutlineIcon />
-            </Text>
-            <Text size={1}>
-              <Translate
-                t={t}
-                i18nKey="asset-source.dialog.accept-message"
-                values={{
-                  acceptTypes: listFormat.format(accept.split(',').map((type) => type.trim())),
-                }}
+      <Stack space={5}>
+        {!isImageOnlyWildCard && !isLoading && accept?.length > 0 && (
+          <Card tone="primary" padding={3} border radius={2}>
+            <Flex gap={3} align="center">
+              <Text size={1}>
+                <InfoOutlineIcon />
+              </Text>
+              <Text size={1}>
+                <Translate
+                  t={t}
+                  i18nKey="asset-source.dialog.accept-message"
+                  values={{
+                    acceptTypes: listFormat.format(accept.split(',').map((type) => type.trim())),
+                  }}
+                />
+              </Text>
+            </Flex>
+          </Card>
+        )}
+        {assetType === 'file' && (
+          <FileListView
+            assets={assets}
+            onDeleteFinished={handleDeleteFinished}
+            onClick={handleItemClick}
+            onKeyPress={handleItemKeyPress}
+            isLoading={isLoading}
+            selectedAssets={selectedAssets}
+          />
+        )}
+        {assetType === 'image' && (
+          <ImageListView
+            assets={assets}
+            onDeleteFinished={handleDeleteFinished}
+            onItemClick={handleItemClick}
+            onItemKeyPress={handleItemKeyPress}
+            isLoading={isLoading}
+            selectedAssets={selectedAssets}
+          />
+        )}
+        {assets.length > 0 && !isLastPage && (
+          <CardLoadMore tone="default" padding={4}>
+            <Flex direction="column">
+              <Button
+                type="button"
+                icon={DownloadIcon}
+                loading={isLoading}
+                onClick={handleFetchNextPage}
+                size="large"
+                text={t('asset-source.dialog.load-more')}
+                tone="primary"
               />
-            </Text>
-          </Flex>
-        </Card>
-      )}
-      {assetType === 'file' && (
-        <FileListView
-          assets={assets}
-          onDeleteFinished={handleDeleteFinished}
-          onClick={handleItemClick}
-          onKeyPress={handleItemKeyPress}
-          isLoading={isLoading}
-          selectedAssets={selectedAssets}
-        />
-      )}
-      {assetType === 'image' && (
-        <ImageListView
-          assets={assets}
-          onDeleteFinished={handleDeleteFinished}
-          onItemClick={handleItemClick}
-          onItemKeyPress={handleItemKeyPress}
-          isLoading={isLoading}
-          selectedAssets={selectedAssets}
-        />
-      )}
-      {assets.length > 0 && !isLastPage && (
-        <CardLoadMore tone="default" padding={4}>
-          <Flex direction="column">
-            <Button
-              type="button"
-              icon={DownloadIcon}
-              loading={isLoading}
-              onClick={handleFetchNextPage}
-              text={t('asset-source.dialog.load-more')}
-              tone="primary"
-            />
-          </Flex>
-        </CardLoadMore>
-      )}
+            </Flex>
+          </CardLoadMore>
+        )}
+      </Stack>
     </Dialog>
   )
 }
diff --git a/packages/sanity/src/core/hooks/useRelativeTime.ts b/packages/sanity/src/core/hooks/useRelativeTime.ts
index 3d938fd6e58..6fddce0f6c3 100644
--- a/packages/sanity/src/core/hooks/useRelativeTime.ts
+++ b/packages/sanity/src/core/hooks/useRelativeTime.ts
@@ -93,9 +93,17 @@ function useFormatRelativeTime(date: Date | string, opts: RelativeTimeOptions =
   const format = useCallback(
     function formatWithUnit(count: number, unit: Intl.RelativeTimeFormatUnit): string {
       const isNextOrPrevDay = unit === 'day' && Math.abs(count) === 1
+      const isNextOrPrevWeek = unit === 'week' && Math.abs(count) === 1
+
       if (useTemporalPhrase || isNextOrPrevDay) {
         return intlCache
-          .relativeTimeFormat(currentLocale, {style: minimal ? 'narrow' : 'long', numeric: 'auto'})
+          .relativeTimeFormat(currentLocale, {
+            // Force 'long' formatting for dates within the next/previous week as `Intl.RelativeTimeFormat`
+            // will display these as `next wk.` or `last wk.` – which we don't want!
+            // Idiomatic dates should always be displayed in full. There may be a more elegant way to handle this.
+            style: minimal && !isNextOrPrevWeek ? 'narrow' : 'long',
+            numeric: 'auto',
+          })
           .format(count, unit)
       }
 
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 3431baad49f..7a8caae766c 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -141,7 +141,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Label for selecting an hour preset. Receives a `time` param as a string on hh:mm format and a `date` param as a Date instance denoting the preset date */
   'calendar.action.set-to-time-preset': '{{time}} on {{date, datetime}}',
   /** Error message displayed in calendar when entered date is not the correct format */
-  'calendar.error.must-be-in-format': 'Must be in the format <Emphasis>{{exampleDate}}</Emphasis>',
+  'calendar.error.must-be-in-format': 'Must be in the format: {{exampleDate}}',
   /** Month name for April */
   'calendar.month-names.april': 'April',
   /** Month name for August */
@@ -300,6 +300,24 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Title for the Review Changes pane */
   'changes.title': 'Review changes',
 
+  /** --- Common components --- */
+  /** Tooltip text for context menu buttons */
+  'common.context-menu-button.tooltip': 'Show more',
+
+  /** Default text for dialog cancel button */
+  'common.dialog.cancel-button.text': 'Cancel',
+
+  /** Default text for dialog confirm button */
+  'common.dialog.confirm-button.text': 'Confirm',
+
+  /** Default text in shared loader text / spinner lockup */
+  'common.loading': 'Loading',
+
+  /** --- Configuration issues --- */
+
+  /** Tooltip displayed on configuration issues button */
+  'configuration-issues.button.tooltip': 'Found configuration issues',
+
   /** The fallback title for an ordering menu item if no localized titles are provided. */
   'default-menu-item.fallback-title': 'Sort by {{title}}',
 
@@ -318,6 +336,13 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Title for the default ordering/SortOrder if no orderings are provided and the title field is found */
   'default-orderings.title': 'Sort by Title',
 
+  /** Label to show in the document footer indicating the last edited date of the document */
+  'document-status.edited': 'Edited {{date}}',
+  /** Label to show in the document footer indicating the document is not published*/
+  'document-status.not-published': 'Not published',
+  /** Label to show in the document footer indicating the published date of the document */
+  'document-status.published': 'Published {{date}}',
+
   /** The value of the <code>_key</code> property must be a unique string. */
   'form.error.duplicate-keys-alert.details.additional-description':
     'The value of the <code>_key</code> property must be a unique string.',
@@ -428,6 +453,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
    * eg. will prompt the user to select a type once triggered
    */
   'inputs.array.action.add-item-select-type': 'Add item...',
+  /** Array drag handle button tooltip */
+  'inputs.array.action.drag.tooltip': 'Drag to re-order',
   /** Label for duplicating an array item  */
   'inputs.array.action.duplicate': 'Duplicate',
   /** Label for editing the item of a specific type, eg "Edit Person" */
@@ -579,12 +606,10 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
     'Adjust the rectangle to crop image. Adjust the circle to specify the area that should always be visible.',
   /** Error: `{{errorMessage}}` */
   'inputs.imagetool.load-error': 'Error: {{errorMessage}}',
-  /** Loading image… */
-  'inputs.imagetool.loading': 'Loading image…',
   /** Hotspot & Crop */
   'inputs.imagetool.title': 'Hotspot & Crop',
-  /** Convert to <code>`{{targetType}}`</code> */
-  'inputs.invalid-value.convert-button.text': 'Convert to <code>{{targetType}}</code>',
+  /** Convert to `{{targetType}}` */
+  'inputs.invalid-value.convert-button.text': 'Convert to {{targetType}}',
   /** The current value (<code>`{{actualType}}`</code>) */
   'inputs.invalid-value.current-type': 'The current value (<code>{{actualType}}</code>)',
   /** The property value is stored as a value type that does not match the expected type. */
@@ -794,12 +819,12 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.portable-text.style.normal': 'Normal',
   /** Title of the "quote" block style */
   'inputs.portable-text.style.quote': 'Quote',
+  /** Label for action to create a new document from the reference input, when there are multiple templates or document types to choose from */
+  'inputs.reference.action-create-new-document-select': 'Create…',
   /** Label for action to clear the current value of the reference field */
   'inputs.reference.action.clear': 'Clear',
   /** Label for action to create a new document from the reference input */
-  'inputs.reference.action.create-new-document': 'Create new',
-  /** Label for action to create a new document from the reference input, when there are multiple templates or document types to choose from */
-  'inputs.reference.action.create-new-document-select': 'Create new…',
+  'inputs.reference.action.create-new-document': 'Create',
   /** Label for action to duplicate the current item to a new item (used within arrays) */
   'inputs.reference.action.duplicate': 'Duplicate',
   /** Label for action that opens the referenced document in a new tab */
@@ -925,8 +950,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.tags.placeholder': 'Enter tag and press ENTER…',
   /** Placeholder for an empty tag input on touch devices */
   'inputs.tags.placeholder_touch': 'Enter tag…',
-  /** Convert to <code>`{{targetType}}`</code> */
-  'inputs.untyped-value.convert-button.text': 'Convert to <code>{{targetType}}</code>',
+  /** Convert to `{{targetType}}` */
+  'inputs.untyped-value.convert-button.text': 'Convert to {{targetType}}',
   /** Encountered an object value without a <code>_type</code> property. */
   'inputs.untyped-value.description':
     'Encountered an object value without a <code>_type</code> property.',
@@ -983,6 +1008,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Unexpected error: `{{error}}` */
   'member-field-error.unexpected-error': 'Unexpected error: {{error}}',
 
+  /** Button label for "Create new document" button */
+  'new-document.button': 'Create',
   /**
    * Tooltip message displayed when hovering/activating the "Create new document" action,
    * when there are templates/types available for creation
@@ -1073,6 +1100,14 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'search.action.toggle-filters-aria-label_hide': 'Hide filters',
   /** Accessibility label for when the search is full screen (on narrow screens) and you want to show filters */
   'search.action.toggle-filters-aria-label_show': 'Show filters',
+  /** Label for when the search is full screen (on narrow screens) and you want to hide filters */
+  'search.action.toggle-filters-label_hide': 'Hide filters',
+  /** Label for when the search is full screen (on narrow screens) and you want to show filters */
+  'search.action.toggle-filters-label_show': 'Show filters',
+
+  /** Tooltip text for the global search button */
+  'search.button.tooltip': 'Search',
+
   /**
    * A list of provided types (use `list` formatter preferably).
    */
@@ -1573,7 +1608,6 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'user-menu.locale-title': 'Language',
   /** Label for tooltip to show which provider the currently logged in user is using */
   'user-menu.login-provider': 'Signed in with {{providerTitle}}',
-
   /**
    * Label for action to add a workspace (currently a developer-oriented action, as this will
    * lead to the documentation on workspace configuration)
diff --git a/packages/sanity/src/core/i18n/components/LocaleProvider.tsx b/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
index 42a8df662b4..4f74d6b42b3 100644
--- a/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
+++ b/packages/sanity/src/core/i18n/components/LocaleProvider.tsx
@@ -1,8 +1,8 @@
 import {I18nextProvider} from 'react-i18next'
 import React, {PropsWithChildren, Suspense, useCallback, useMemo, useSyncExternalStore} from 'react'
 import type {i18n} from 'i18next'
+import {LoadingBlock} from '../../components/loadingBlock'
 import {useSource} from '../../studio'
-import {LoadingScreen} from '../../studio/screens'
 import {storePreferredLocale} from '../localeStore'
 import {LocaleContext, type LocaleContextValue} from '../LocaleContext'
 import type {Locale} from '../types'
@@ -74,7 +74,7 @@ export function LocaleProviderBase({
   )
 
   return (
-    <Suspense fallback={<LoadingScreen />}>
+    <Suspense fallback={<LoadingBlock />}>
       <I18nextProvider i18n={i18next}>
         {/* Use locale as key to force re-render, updating non-reactive parts */}
         <LocaleContext.Provider value={context} key={currentLocale.id}>
diff --git a/packages/sanity/src/core/i18n/i18nConfig.ts b/packages/sanity/src/core/i18n/i18nConfig.ts
index 53c9d956648..6298fc1acca 100644
--- a/packages/sanity/src/core/i18n/i18nConfig.ts
+++ b/packages/sanity/src/core/i18n/i18nConfig.ts
@@ -133,7 +133,7 @@ const defaultOptions: InitOptions = {
   fallbackLng: defaultLocale.id,
 
   // This will be overriden with the users detected/preferred locale before initing,
-  // but to satisfy the init options and prevent mistakes, we include a defualt here.
+  // but to satisfy the init options and prevent mistakes, we include a default here.
   lng: defaultLocale.id,
 
   // In rare cases we'll want to be able to debug i18next - there is a `debug` option
diff --git a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
index 06b69b53bed..2c3acc4a3a3 100644
--- a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
+++ b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
@@ -1,9 +1,13 @@
-import {AvatarStack, Box, Card, Text, Tooltip, TooltipProps} from '@sanity/ui'
+/* eslint-disable camelcase */
+
+import {AvatarStack} from '@sanity/ui'
 import React, {useMemo} from 'react'
-import styled, {css, useTheme} from 'styled-components'
-import {usePreviewCard, UserAvatar} from '../components'
+import styled, {css} from 'styled-components'
+import {getTheme_v2} from '@sanity/ui/theme'
+import {UserAvatar} from '../components'
 import {DocumentPresence} from '../store'
 import {isNonNullable} from '../util'
+import {Tooltip, TooltipProps} from '../../ui-components'
 
 /** @internal */
 export interface DocumentPreviewPresenceProps {
@@ -14,20 +18,14 @@ const PRESENCE_MENU_POPOVER_PROPS: TooltipProps = {
   portal: true,
 }
 
-const AvatarStackCard = styled(Card)<{$selected?: boolean}>(({theme, $selected}) => {
-  const {color} = theme.sanity
+const AvatarStackBox = styled.div((props) => {
+  const {space} = getTheme_v2(props.theme)
 
   return css`
-    --card-bg-color: inherit;
-    --card-fg-color: inherit;
-    --card-hairline-hard-color: ${$selected ? color.selectable?.default.pressed.border : undefined};
+    margin: ${0 - space[1]}px;
   `
 })
 
-const TooltipContentBox = styled(Box)`
-  max-width: 150px;
-`
-
 const getTooltipText = (presence: Omit<DocumentPresence, 'path'>[]) => {
   if (presence.length === 1) {
     return `${presence[0].user.displayName} is editing this document`
@@ -43,9 +41,6 @@ const getTooltipText = (presence: Omit<DocumentPresence, 'path'>[]) => {
 /** @internal */
 export function DocumentPreviewPresence(props: DocumentPreviewPresenceProps) {
   const {presence} = props
-  const {color} = useTheme().sanity
-  const invertedScheme = color.dark ? 'light' : 'dark'
-  const {selected} = usePreviewCard()
 
   const uniqueUsers = useMemo(
     () =>
@@ -57,25 +52,17 @@ export function DocumentPreviewPresence(props: DocumentPreviewPresenceProps) {
     [presence],
   )
 
-  const tooltipContent = useMemo(() => {
-    return (
-      <TooltipContentBox padding={2}>
-        <Text align="center" size={1}>
-          {getTooltipText(uniqueUsers)}
-        </Text>
-      </TooltipContentBox>
-    )
-  }, [uniqueUsers])
+  const tooltipContent = useMemo(() => getTooltipText(uniqueUsers), [uniqueUsers])
 
   return (
     <Tooltip content={tooltipContent} {...PRESENCE_MENU_POPOVER_PROPS}>
-      <AvatarStackCard scheme={selected ? invertedScheme : undefined} $selected={selected}>
-        <AvatarStack maxLength={2} aria-label={getTooltipText(uniqueUsers)}>
+      <AvatarStackBox>
+        <AvatarStack maxLength={2} aria-label={getTooltipText(uniqueUsers)} size={0}>
           {uniqueUsers.map((item) => (
-            <UserAvatar key={item.user.id} user={item.user} />
+            <UserAvatar key={item.user.id} size={0} user={item.user} />
           ))}
         </AvatarStack>
-      </AvatarStackCard>
+      </AvatarStackBox>
     </Tooltip>
   )
 }
diff --git a/packages/sanity/src/core/presence/FieldPresence.styled.tsx b/packages/sanity/src/core/presence/FieldPresence.styled.tsx
index 776ea5dfd3a..4bdc1831091 100644
--- a/packages/sanity/src/core/presence/FieldPresence.styled.tsx
+++ b/packages/sanity/src/core/presence/FieldPresence.styled.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 import {Flex} from '@sanity/ui'
+import {AVATAR_SIZE} from './constants'
 
 export const FlexWrapper = styled(Flex)`
   & > div:first-child {
@@ -9,7 +10,7 @@ export const FlexWrapper = styled(Flex)`
 `
 
 export const InnerBox = styled(Flex)`
-  height: 23px;
+  height: ${AVATAR_SIZE}px;
   min-width: 23px;
   vertical-align: top;
 `
diff --git a/packages/sanity/src/core/presence/PresenceTooltip.tsx b/packages/sanity/src/core/presence/PresenceTooltip.tsx
index 7e1045bc08c..292aaa6976d 100644
--- a/packages/sanity/src/core/presence/PresenceTooltip.tsx
+++ b/packages/sanity/src/core/presence/PresenceTooltip.tsx
@@ -1,5 +1,6 @@
 import React, {useMemo} from 'react'
-import {Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {Flex, Stack, Text} from '@sanity/ui'
+import {Tooltip} from '../../ui-components'
 import {UserAvatar} from '../components/userAvatar'
 import {FormNodePresence} from './types'
 
@@ -19,9 +20,9 @@ export function PresenceTooltip(props: PresenceTooltipProps) {
 
   const content = useMemo(
     () => (
-      <Stack padding={1} sizing="border">
+      <Stack sizing="border">
         {items.map((item) => (
-          <Flex align="center" gap={2} padding={1} key={item.user.id}>
+          <Flex align="center" gap={2} key={item.user.id}>
             <div>
               <UserAvatar user={item.user} status="online" />
             </div>
diff --git a/packages/sanity/src/core/presence/constants.ts b/packages/sanity/src/core/presence/constants.ts
index 4442ee569bf..514dc24b0b3 100644
--- a/packages/sanity/src/core/presence/constants.ts
+++ b/packages/sanity/src/core/presence/constants.ts
@@ -10,7 +10,7 @@ export const DEFAULT_MAX_AVATARS_FIELDS = 3
 export const AVATAR_DISTANCE = -4
 
 // height/width of the avatars in pixels
-export const AVATAR_SIZE = 23
+export const AVATAR_SIZE = 25
 
 export const AVATAR_ARROW_HEIGHT = 4
 
diff --git a/packages/sanity/src/core/preview/__workshop__/SanityDefaultPreviewStory.tsx b/packages/sanity/src/core/preview/__workshop__/SanityDefaultPreviewStory.tsx
new file mode 100644
index 00000000000..3d78a09054c
--- /dev/null
+++ b/packages/sanity/src/core/preview/__workshop__/SanityDefaultPreviewStory.tsx
@@ -0,0 +1,15 @@
+import {Box, Card, Container} from '@sanity/ui'
+import React from 'react'
+import {SanityDefaultPreview} from '../components/SanityDefaultPreview'
+
+export default function SanityDefaultPreviewStory() {
+  return (
+    <Box padding={4}>
+      <Container width={1}>
+        <Card border>
+          <SanityDefaultPreview title="Hello" />
+        </Card>
+      </Container>
+    </Box>
+  )
+}
diff --git a/packages/sanity/src/core/preview/__workshop__/index.ts b/packages/sanity/src/core/preview/__workshop__/index.ts
index 93cc55df5a6..08ade6154d3 100644
--- a/packages/sanity/src/core/preview/__workshop__/index.ts
+++ b/packages/sanity/src/core/preview/__workshop__/index.ts
@@ -10,5 +10,10 @@ export default defineScope({
       title: 'SanityPreview',
       component: lazy(() => import('./SanityPreviewStory')),
     },
+    {
+      name: 'sanity-default-preview',
+      title: 'SanityDefaultPreview',
+      component: lazy(() => import('./SanityDefaultPreviewStory')),
+    },
   ],
 })
diff --git a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
index 23e564e01cf..88471ba410c 100644
--- a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
+++ b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
@@ -7,12 +7,14 @@ import React, {
   ElementType,
   isValidElement,
   ReactElement,
+  ReactNode,
   useCallback,
   useMemo,
 } from 'react'
 import {isValidElementType} from 'react-is'
 import {SanityImageSource} from '@sanity/image-url/lib/types/types'
 import {isImageSource} from '@sanity/asset-utils'
+import {Tooltip} from '../../../ui-components'
 import {PreviewProps} from '../../components/previews'
 import {useClient} from '../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../studioClient'
@@ -27,6 +29,7 @@ function FallbackIcon() {
 export interface SanityDefaultPreviewProps extends Omit<PreviewProps, 'renderDefault'> {
   error?: Error | null
   icon?: ElementType | false
+  tooltip?: ReactNode
 }
 
 /**
@@ -34,7 +37,7 @@ export interface SanityDefaultPreviewProps extends Omit<PreviewProps, 'renderDef
  * @internal
  * */
 export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactElement {
-  const {icon, layout, media: mediaProp, imageUrl, title, ...restProps} = props
+  const {icon, layout, media: mediaProp, imageUrl, title, tooltip, ...restProps} = props
 
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
   const imageBuilder = useMemo(() => imageUrlBuilder(client), [client])
@@ -118,8 +121,24 @@ export function SanityDefaultPreview(props: SanityDefaultPreviewProps): ReactEle
 
   const layoutComponent = _previewComponents[layout || 'default']
 
-  return createElement(
+  const children = createElement(
     layoutComponent as ComponentType<Omit<PreviewProps, 'renderDefault'>>,
     previewProps,
   )
+
+  if (tooltip) {
+    return (
+      <Tooltip
+        content={tooltip}
+        disabled={!tooltip}
+        fallbackPlacements={['top-end']}
+        placement="bottom-end"
+      >
+        {/* Currently tooltips won't trigger without a wrapping element */}
+        <div>{children}</div>
+      </Tooltip>
+    )
+  }
+
+  return children
 }
diff --git a/packages/sanity/src/core/preview/components/_previewComponents.ts b/packages/sanity/src/core/preview/components/_previewComponents.ts
index 1e4a249cb80..ec878b3f305 100644
--- a/packages/sanity/src/core/preview/components/_previewComponents.ts
+++ b/packages/sanity/src/core/preview/components/_previewComponents.ts
@@ -1,7 +1,7 @@
-import {ComponentType} from 'react'
 import {
   BlockImagePreview,
   BlockPreview,
+  CompactPreview,
   DefaultPreview,
   DetailPreview,
   InlinePreview,
@@ -9,10 +9,11 @@ import {
 } from '../../components'
 
 export const _previewComponents = {
+  block: BlockPreview,
+  blockImage: BlockImagePreview,
+  compact: CompactPreview,
   default: DefaultPreview,
-  media: MediaPreview,
   detail: DetailPreview,
   inline: InlinePreview,
-  block: BlockPreview,
-  blockImage: BlockImagePreview,
+  media: MediaPreview,
 } as const
diff --git a/packages/sanity/src/core/schema/__workshop__/ReferenceSchemaStory.tsx b/packages/sanity/src/core/schema/__workshop__/ReferenceSchemaStory.tsx
index d3ca23c0e71..d04ad5ce9a2 100644
--- a/packages/sanity/src/core/schema/__workshop__/ReferenceSchemaStory.tsx
+++ b/packages/sanity/src/core/schema/__workshop__/ReferenceSchemaStory.tsx
@@ -1,5 +1,5 @@
 import {SchemaType} from '@sanity/types'
-import {Box, Card, Code, Flex, Label} from '@sanity/ui'
+import {Box, Card, Code, Flex, Text} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import {createSchema} from '../createSchema'
 
@@ -35,7 +35,9 @@ export default function ReferenceSchemaStory() {
     <Card height="fill">
       <Flex height="fill">
         <Card flex={1} overflow="auto" padding={4}>
-          <Label size={1}>Schema definitions</Label>
+          <Text muted size={1} weight="medium">
+            Schema definitions
+          </Text>
 
           <Box paddingTop={4} />
 
@@ -44,7 +46,9 @@ export default function ReferenceSchemaStory() {
           </Code>
         </Card>
         <Card borderLeft flex={1} overflow="auto" padding={4}>
-          <Label size={1}>Schema types</Label>
+          <Text muted size={1} weight="medium">
+            Schema types
+          </Text>
 
           <Box paddingTop={4} />
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
index f83e750cffe..cee3186b5c4 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/CurrentUserStory.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import {Box, Button, Code, Text} from '@sanity/ui'
+import {Box, Code, Text} from '@sanity/ui'
+import {Button} from '../../../../ui-components'
 import {useSource} from '../../../studio'
 
 export default function CurrentUserStory() {
@@ -7,7 +8,7 @@ export default function CurrentUserStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`userStore.me`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
index cd5af242552..bdfbc09b3e7 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPairStory.tsx
@@ -1,5 +1,6 @@
-import {Box, Button, Code, Text} from '@sanity/ui'
+import {Box, Code, Text} from '@sanity/ui'
 import React, {useEffect, useState} from 'react'
+import {Button} from '../../../../ui-components'
 import {useDocumentStore} from '../datastores'
 import {RemoteSnapshotVersionEvent} from '../document/document-pair/checkoutPair'
 
@@ -27,7 +28,7 @@ export default function DocumentPairStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`documentStore.checkoutPair({draftId: string, publishedId: string})`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPermissionStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPermissionStory.tsx
index 5026f734dcf..2f49e7a5422 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPermissionStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/DocumentPermissionStory.tsx
@@ -18,7 +18,7 @@ export default function DocumentPermissionStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`grantsStore.checkDocumentPermission(permissionName: DocumentValuePermission, document: SanityDocument)`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryStory.tsx
index 546cb93524f..015a73ea274 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryStory.tsx
@@ -21,7 +21,7 @@ export default function HistoryStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`historyStore.getHistory`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
index 56767f3ba85..26c998ed3ab 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
@@ -1,9 +1,10 @@
 import {RestoreIcon} from '@sanity/icons'
 import {SanityDocument} from '@sanity/types'
-import {Box, Button, Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
+import {Box, Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {format} from 'date-fns'
 import {omit} from 'lodash'
 import React, {useCallback, useMemo, useState} from 'react'
+import {Button} from '../../../../ui-components'
 import {ChangeFieldWrapper} from '../../../changeIndicators'
 import {
   ChangeList,
@@ -130,7 +131,7 @@ export default function HistoryTimelineStory() {
           <Flex gap={1}>
             <Stack flex={1} space={1}>
               <Box padding={3}>
-                <Text size={1} weight="semibold">
+                <Text size={1} weight="medium">
                   Revision
                 </Text>
               </Box>
@@ -156,7 +157,7 @@ export default function HistoryTimelineStory() {
             {changesOpen && (
               <Stack flex={1} space={1}>
                 <Box padding={3}>
-                  <Text size={1} weight="semibold">
+                  <Text size={1} weight="medium">
                     Changes since
                   </Text>
                 </Box>
diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/PresenceStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/PresenceStory.tsx
index 5783a6a5389..285f5b3bf1b 100644
--- a/packages/sanity/src/core/store/_legacy/__workshop__/PresenceStory.tsx
+++ b/packages/sanity/src/core/store/_legacy/__workshop__/PresenceStory.tsx
@@ -15,7 +15,7 @@ export default function PresenceStory() {
 
   return (
     <Box padding={4}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         <code>{`presenceStore.globalPresence$`}</code>
       </Text>
 
diff --git a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
index 45d1e34ce91..1aeed183afb 100644
--- a/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
+++ b/packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx
@@ -1,10 +1,12 @@
 /* eslint-disable i18next/no-literal-string */
 import type {AuthProvider, AuthProviderResponse, SanityClient} from '@sanity/client'
-import {Button, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import {Heading, Stack} from '@sanity/ui'
 import React, {useEffect, useState} from 'react'
 import type {Observable} from 'rxjs'
 import type {AuthConfig} from '../../../config'
 import {createHookFromObservableFactory} from '../../../util'
+import {Button} from '../../../../ui-components'
+import {LoadingBlock} from '../../../components/loadingBlock'
 import {CustomLogo, providerLogos} from './providerLogos'
 import type {LoginComponentProps} from './types'
 
@@ -130,19 +132,7 @@ export function createLoginComponent({
     }, [redirectUrl])
 
     if (loading) {
-      return (
-        <Flex
-          align="center"
-          direction="column"
-          gap={4}
-          justify="center"
-          padding={6}
-          sizing="border"
-        >
-          <Text muted>Loading…</Text>
-          <Spinner muted />
-        </Flex>
-      )
+      return <LoadingBlock showText />
     }
 
     return (
@@ -165,6 +155,7 @@ export function createLoginComponent({
                 basePath,
               })}
               mode="ghost"
+              size="large"
               text={provider.title}
             />
           ))}
diff --git a/packages/sanity/src/core/studio/AuthBoundary.tsx b/packages/sanity/src/core/studio/AuthBoundary.tsx
index 7b138c1e740..665c56877b3 100644
--- a/packages/sanity/src/core/studio/AuthBoundary.tsx
+++ b/packages/sanity/src/core/studio/AuthBoundary.tsx
@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react'
-import {LoadingScreen, AuthenticateScreen, NotAuthenticatedScreen} from './screens'
+import {LoadingBlock} from '../components/loadingBlock'
+import {AuthenticateScreen, NotAuthenticatedScreen} from './screens'
 import {useActiveWorkspace} from './activeWorkspaceMatcher'
 
 interface AuthBoundaryProps {
@@ -12,7 +13,7 @@ interface AuthBoundaryProps {
 export function AuthBoundary({
   children,
   AuthenticateComponent = AuthenticateScreen,
-  LoadingComponent = LoadingScreen,
+  LoadingComponent = LoadingBlock,
   NotAuthenticatedComponent = NotAuthenticatedScreen,
 }: AuthBoundaryProps) {
   const [error, handleError] = useState<unknown>(null)
diff --git a/packages/sanity/src/core/studio/GlobalStyle.tsx b/packages/sanity/src/core/studio/GlobalStyle.tsx
index 6bbc3a776aa..a2b8122dd18 100644
--- a/packages/sanity/src/core/studio/GlobalStyle.tsx
+++ b/packages/sanity/src/core/studio/GlobalStyle.tsx
@@ -1,15 +1,56 @@
-import {createGlobalStyle} from 'styled-components'
+/* eslint-disable camelcase */
 
-export const GlobalStyle = createGlobalStyle(({theme}) => {
-  const {color, fonts} = theme.sanity
+import {getTheme_v2, rgba} from '@sanity/ui/theme'
+import {createGlobalStyle, css} from 'styled-components'
 
-  return {
-    html: {
-      backgroundColor: color.base.bg,
-    },
+const SCROLLBAR_SIZE = 12 // px
+const SCROLLBAR_BORDER_SIZE = 4 // px
 
-    '#sanity': {
-      fontFamily: fonts.text.family,
-    },
-  }
+export const GlobalStyle = createGlobalStyle((props) => {
+  const {color, font} = getTheme_v2(props.theme)
+
+  return css`
+    ::-webkit-scrollbar {
+      width: ${SCROLLBAR_SIZE}px;
+      height: ${SCROLLBAR_SIZE}px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-clip: content-box;
+      background-color: var(--card-border-color, ${color.border});
+      border: ${SCROLLBAR_BORDER_SIZE}px solid transparent;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--card-muted-fg-color, ${color.muted.fg});
+    }
+
+    ::-webkit-scrollbar-track {
+      background: var(--card-bg-color, transparent);
+    }
+
+    *::selection {
+      background-color: ${rgba(color.focusRing, 0.3)};
+    }
+
+    html {
+      background-color: ${color.bg};
+    }
+
+    body {
+      scrollbar-gutter: stable;
+    }
+
+    #sanity {
+      font-family: ${font.text.family};
+    }
+
+    b {
+      font-weight: ${font.text.weights.medium};
+    }
+
+    strong {
+      font-weight: ${font.text.weights.medium};
+    }
+  `
 })
diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index d1710a6817b..a46a7d691ce 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -43,8 +43,9 @@ describe('Studio', () => {
     const sheet = new ServerStyleSheet()
     try {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
+
       expect(html).toMatchInlineSnapshot(
-        `"<div data-as=\\"div\\" data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-pGaPU iDvIQX sc-hBEZvw cXzyYZ sc-pGaPU dcGziJ sc-crrtmM fLXKCO\\"><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eQziRi\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU eQziRi sc-dQpIV gAtGZm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-LwRDc bWjezh\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-hPCzDb hyezHQ\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -61,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div data-as=\\"div\\" data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-pGaPU iDvIQX sc-hBEZvw cXzyYZ sc-pGaPU dcGziJ sc-crrtmM fLXKCO\\"><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eQziRi\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU eQziRi sc-dQpIV gAtGZm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-LwRDc bWjezh\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-hPCzDb hyezHQ\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -81,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div data-as=\\"div\\" data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-pGaPU iDvIQX sc-hBEZvw cXzyYZ sc-pGaPU dcGziJ sc-crrtmM fLXKCO\\"><div data-ui=\\"Text\\" class=\\"sc-bdfCDU eQziRi\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-bdfCDU eQziRi sc-dQpIV gAtGZm\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div class=\\"sc-LwRDc bWjezh\\"><div data-ui=\\"Spinner\\" class=\\"sc-iqHXzD gpIjtP sc-kstpWv yLrdd sc-hPCzDb hyezHQ\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 
diff --git a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
index a0d63e191a9..a3690a200e6 100644
--- a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
+++ b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable i18next/no-literal-string */
 /* eslint-disable @sanity/i18n/no-attribute-string-literals */
 import React, {useCallback, useState} from 'react'
-import {Button, Card, Code, Container, ErrorBoundary, Heading, Stack} from '@sanity/ui'
+import {Card, Code, Container, ErrorBoundary, Heading, Stack} from '@sanity/ui'
 import {useHotModuleReload} from 'use-hot-module-reload'
+import {Button} from '../../ui-components'
 import {SchemaError} from '../config'
 import {isRecord} from '../util'
 import {CorsOriginError} from '../store'
diff --git a/packages/sanity/src/core/studio/StudioLayout.tsx b/packages/sanity/src/core/studio/StudioLayout.tsx
index a233720e122..9b186e525b3 100644
--- a/packages/sanity/src/core/studio/StudioLayout.tsx
+++ b/packages/sanity/src/core/studio/StudioLayout.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable i18next/no-literal-string, @sanity/i18n/no-attribute-template-literals */
-import {Card, Flex, Spinner, Text} from '@sanity/ui'
+import {Card, Flex} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {
   createContext,
@@ -11,6 +11,7 @@ import React, {
   useState,
 } from 'react'
 import styled from 'styled-components'
+import {LoadingBlock} from '../components/loadingBlock'
 import {NoToolsScreen} from './screens/NoToolsScreen'
 import {RedirectingScreen} from './screens/RedirectingScreen'
 import {ToolNotFoundScreen} from './screens/ToolNotFoundScreen'
@@ -33,15 +34,19 @@ const SearchFullscreenPortalCard = styled(Card)`
 /** @internal */
 export interface NavbarContextValue {
   onSearchFullscreenOpenChange: (open: boolean) => void
+  onSearchOpenChange: (open: boolean) => void
   searchFullscreenOpen: boolean
   searchFullscreenPortalEl: HTMLElement | null
+  searchOpen: boolean
 }
 
 /** @internal */
 export const NavbarContext = createContext<NavbarContextValue>({
   onSearchFullscreenOpenChange: () => '',
+  onSearchOpenChange: () => '',
   searchFullscreenOpen: false,
   searchFullscreenPortalEl: null,
+  searchOpen: false,
 })
 
 /**
@@ -94,6 +99,7 @@ export function StudioLayoutComponent() {
   const [searchFullscreenPortalEl, setSearchFullscreenPortalEl] = useState<HTMLDivElement | null>(
     null,
   )
+  const [searchOpen, setSearchOpen] = useState<boolean>(false)
 
   const documentTitle = useMemo(() => {
     const mainTitle = title || startCase(name)
@@ -117,13 +123,25 @@ export function StudioLayoutComponent() {
     setSearchFullscreenOpen(open)
   }, [])
 
+  const handleSearchOpenChange = useCallback((open: boolean) => {
+    setSearchOpen(open)
+  }, [])
+
   const navbarContextValue = useMemo(
     () => ({
       searchFullscreenOpen,
       searchFullscreenPortalEl,
+      searchOpen,
       onSearchFullscreenOpenChange: handleSearchFullscreenOpenChange,
+      onSearchOpenChange: handleSearchOpenChange,
     }),
-    [searchFullscreenOpen, searchFullscreenPortalEl, handleSearchFullscreenOpenChange],
+    [
+      searchFullscreenOpen,
+      searchFullscreenPortalEl,
+      searchOpen,
+      handleSearchFullscreenOpenChange,
+      handleSearchOpenChange,
+    ],
   )
 
   const Navbar = useNavbarComponent()
@@ -173,7 +191,7 @@ export function StudioLayoutComponent() {
                 activeTool.router?.__unsafe_disableScopedSearchParams
               }
             >
-              <Suspense fallback={<LoadingTool />}>
+              <Suspense fallback={<LoadingBlock showText />}>
                 {createElement(activeTool.component, {tool: activeTool})}
               </Suspense>
             </RouteScope>
@@ -183,13 +201,3 @@ export function StudioLayoutComponent() {
     </Flex>
   )
 }
-
-// @TODO re-use `LoadingComponent`, which is `LoadingScreen` by default, to reduce "popping" during initial load
-function LoadingTool() {
-  return (
-    <Flex justify="center" align="center" height="fill" direction="column" gap={4}>
-      <Text muted>Loading…</Text>
-      <Spinner muted />
-    </Flex>
-  )
-}
diff --git a/packages/sanity/src/core/studio/StudioProvider.tsx b/packages/sanity/src/core/studio/StudioProvider.tsx
index 7d181c2a089..781fa32b71f 100644
--- a/packages/sanity/src/core/studio/StudioProvider.tsx
+++ b/packages/sanity/src/core/studio/StudioProvider.tsx
@@ -6,6 +6,7 @@ import javascript from 'refractor/lang/javascript'
 import json from 'refractor/lang/json'
 import jsx from 'refractor/lang/jsx'
 import typescript from 'refractor/lang/typescript'
+import {LoadingBlock} from '../components/loadingBlock'
 import {UserColorManagerProvider} from '../user-color'
 import {ErrorLogger} from '../error/ErrorLogger'
 import {ResourceCacheProvider} from '../store'
@@ -19,7 +20,6 @@ import {ColorSchemeProvider} from './colorScheme'
 import {Z_OFFSET} from './constants'
 import {
   ConfigErrorsScreen,
-  LoadingScreen,
   AuthenticateScreen,
   NotFoundScreen,
   NotAuthenticatedScreen,
@@ -53,7 +53,7 @@ export function StudioProvider({
   unstable_noAuthBoundary: noAuthBoundary,
 }: StudioProviderProps) {
   const _children = (
-    <WorkspaceLoader LoadingComponent={LoadingScreen} ConfigErrorsComponent={ConfigErrorsScreen}>
+    <WorkspaceLoader LoadingComponent={LoadingBlock} ConfigErrorsComponent={ConfigErrorsScreen}>
       <LocaleProvider>
         <ResourceCacheProvider>{children}</ResourceCacheProvider>
       </LocaleProvider>
@@ -69,7 +69,7 @@ export function StudioProvider({
             <ActiveWorkspaceMatcher
               unstable_history={history}
               NotFoundComponent={NotFoundScreen}
-              LoadingComponent={LoadingScreen}
+              LoadingComponent={LoadingBlock}
             >
               <StudioThemeProvider>
                 <UserColorManagerProvider>
@@ -77,7 +77,7 @@ export function StudioProvider({
                     _children
                   ) : (
                     <AuthBoundary
-                      LoadingComponent={LoadingScreen}
+                      LoadingComponent={LoadingBlock}
                       AuthenticateComponent={AuthenticateScreen}
                       NotAuthenticatedComponent={NotAuthenticatedScreen}
                     >
diff --git a/packages/sanity/src/core/studio/StudioThemeProvider.tsx b/packages/sanity/src/core/studio/StudioThemeProvider.tsx
index a2ec9d23256..dc1924866e5 100644
--- a/packages/sanity/src/core/studio/StudioThemeProvider.tsx
+++ b/packages/sanity/src/core/studio/StudioThemeProvider.tsx
@@ -18,7 +18,7 @@ export function StudioThemeProvider({children}: StudioThemeProviderProps) {
     return (
       <ColorSchemeSetValueContext.Provider value={false}>
         <ColorSchemeValueContext.Provider value={scheme}>
-          <ThemeProvider scheme={scheme} theme={theme} tone="transparent">
+          <ThemeProvider scheme={scheme} theme={theme}>
             <LayerProvider>{children}</LayerProvider>
           </ThemeProvider>
         </ColorSchemeValueContext.Provider>
@@ -27,7 +27,7 @@ export function StudioThemeProvider({children}: StudioThemeProviderProps) {
   }
 
   return (
-    <ThemeProvider theme={theme} tone="transparent">
+    <ThemeProvider theme={theme}>
       <LayerProvider>{children}</LayerProvider>
     </ThemeProvider>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/LogoButton.tsx b/packages/sanity/src/core/studio/components/navbar/LogoButton.tsx
deleted file mode 100644
index 368a505ae5c..00000000000
--- a/packages/sanity/src/core/studio/components/navbar/LogoButton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import {Button} from '@sanity/ui'
-
-interface LogoButtonProps {
-  onClick: React.MouseEventHandler<HTMLElement>
-  children: React.ReactNode
-  href: string
-  title: string
-}
-
-export function LogoButton(props: LogoButtonProps) {
-  const {title, children, href, onClick} = props
-
-  return (
-    <Button
-      aria-label={title}
-      as="a"
-      data-testid="logo"
-      href={href}
-      mode="bleed"
-      onClick={onClick}
-      padding={0}
-    >
-      {children}
-    </Button>
-  )
-}
diff --git a/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx b/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
deleted file mode 100644
index 89ab515e367..00000000000
--- a/packages/sanity/src/core/studio/components/navbar/NavDrawer.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import {Layer, Card, Flex, Text, Box, Button, Stack, Label} from '@sanity/ui'
-import {CheckmarkIcon, CloseIcon, CogIcon, LeaveIcon, UsersIcon} from '@sanity/icons'
-import React, {memo, useCallback} from 'react'
-import styled from 'styled-components'
-import TrapFocus from 'react-focus-lock'
-import {AnimatePresence, motion, Transition, Variants} from 'framer-motion'
-import {useWorkspace} from '../../workspace'
-import {Tool} from '../../../config'
-import {useToolMenuComponent} from '../../studio-components-hooks'
-import {UserAvatar} from '../../../components'
-import {useWorkspaces} from '../../workspaces'
-import {useColorSchemeOptions, useColorSchemeSetValue} from '../../colorScheme'
-import {StudioThemeColorSchemeKey} from '../../../theme'
-import {userHasRole} from '../../../util/userHasRole'
-import {useTranslation} from '../../../i18n'
-import {WorkspaceMenuButton} from './workspace'
-import {FreeTrial} from './free-trial'
-
-const ANIMATION_TRANSITION: Transition = {
-  duration: 0.2,
-}
-
-const BACKDROP_VARIANTS: Variants = {
-  open: {
-    opacity: 1,
-  },
-  closed: {
-    opacity: 0,
-  },
-}
-
-const INNER_CARD_VARIANTS: Variants = {
-  open: {
-    x: '0%',
-  },
-  closed: {
-    x: '-100%',
-  },
-}
-
-const Root = styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`
-
-const BackdropMotion = styled(motion(Card))`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--card-shadow-penumbra-color);
-`
-
-const InnerCardMotion = styled(motion(Card))`
-  position: relative;
-  pointer-events: all;
-  flex-direction: column;
-  height: 100%;
-  min-width: 200px;
-  max-width: 280px;
-  overflow: auto;
-`
-
-function AppearanceMenu({setScheme}: {setScheme: (nextScheme: StudioThemeColorSchemeKey) => void}) {
-  const {t} = useTranslation()
-  // Subscribe to just what we need, if the menu isn't shown then we're not subscribed to these contexts
-  const options = useColorSchemeOptions(setScheme, t)
-
-  return (
-    <>
-      <Card borderTop flex="none" padding={3} overflow="auto">
-        <Box padding={2}>
-          <Label size={1} muted>
-            {t('user-menu.appearance-title')}
-          </Label>
-        </Box>
-
-        <Stack as="ul" marginTop={1} space={1}>
-          {options.map(({icon, label, name, onSelect, selected, title}) => (
-            <Stack as="li" key={name}>
-              <Button
-                aria-label={label}
-                icon={icon}
-                iconRight={selected && <CheckmarkIcon />}
-                justify="flex-start"
-                mode="bleed"
-                onClick={onSelect}
-                selected={selected}
-                text={title}
-              />
-            </Stack>
-          ))}
-        </Stack>
-      </Card>
-    </>
-  )
-}
-
-interface NavDrawerProps {
-  activeToolName?: string
-  isOpen: boolean
-  onClose: () => void
-  tools: Tool[]
-}
-
-export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
-  const {activeToolName, isOpen, onClose, tools} = props
-
-  const setScheme = useColorSchemeSetValue()
-  const {auth, currentUser, projectId} = useWorkspace()
-  const workspaces = useWorkspaces()
-  const ToolMenu = useToolMenuComponent()
-
-  const isAdmin = Boolean(currentUser && userHasRole(currentUser, 'administrator'))
-  const {t} = useTranslation()
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'Escape') {
-        onClose()
-      }
-    },
-    [onClose],
-  )
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <TrapFocus autoFocus returnFocus>
-          <Root onKeyDown={handleKeyDown}>
-            <BackdropMotion
-              animate="open"
-              data-open={isOpen}
-              exit="closed"
-              initial="closed"
-              onClick={onClose}
-              transition={ANIMATION_TRANSITION}
-              variants={BACKDROP_VARIANTS}
-            />
-            <InnerCardMotion
-              animate="open"
-              data-open={isOpen}
-              display="flex"
-              exit="closed"
-              height="fill"
-              initial="closed"
-              shadow={1}
-              transition={ANIMATION_TRANSITION}
-              variants={INNER_CARD_VARIANTS}
-            >
-              <Card borderBottom>
-                <Stack space={3} padding={3}>
-                  <Flex align="center">
-                    <Flex flex={1} align="center" paddingRight={2}>
-                      <Flex flex={1} align="center">
-                        <Box>
-                          <UserAvatar size={1} user="me" />
-                        </Box>
-
-                        <Box
-                          flex={1}
-                          marginLeft={2}
-                          title={currentUser?.name || currentUser?.email}
-                        >
-                          <Text textOverflow="ellipsis">
-                            {currentUser?.name || currentUser?.email}
-                          </Text>
-                        </Box>
-                      </Flex>
-                    </Flex>
-
-                    <Box>
-                      <Button
-                        icon={CloseIcon}
-                        mode="bleed"
-                        onClick={onClose}
-                        title={t('user-menu.close-menu')}
-                      />
-                    </Box>
-                  </Flex>
-
-                  {workspaces.length > 1 && <WorkspaceMenuButton />}
-                </Stack>
-              </Card>
-
-              <Flex direction="column" flex={1} justify="space-between" overflow="auto">
-                {/* Tools */}
-                <Card flex="none" padding={3}>
-                  <ToolMenu
-                    activeToolName={activeToolName}
-                    closeSidebar={onClose}
-                    context="sidebar"
-                    isSidebarOpen={isOpen}
-                    tools={tools}
-                  />
-                </Card>
-
-                {/* Theme picker and Manage */}
-                <Flex direction="column">
-                  {setScheme && <AppearanceMenu setScheme={setScheme} />}
-                  <Card borderTop flex="none" padding={3}>
-                    <Stack as="ul" space={1}>
-                      <FreeTrial type="sidebar" />
-                      <Stack as="li">
-                        <Button
-                          aria-label={t('user-menu.action.manage-project-aria-label')}
-                          as="a"
-                          href={`https://sanity.io/manage/project/${projectId}`}
-                          icon={CogIcon}
-                          justify="flex-start"
-                          mode="bleed"
-                          target="_blank"
-                          text={t('user-menu.action.manage-project')}
-                        />
-                      </Stack>
-
-                      {isAdmin && (
-                        <Stack as="li">
-                          <Button
-                            aria-label={t('user-menu.action.invite-members-aria-label')}
-                            as="a"
-                            href={`https://sanity.io/manage/project/${projectId}/members`}
-                            icon={UsersIcon}
-                            justify="flex-start"
-                            mode="bleed"
-                            target="_blank"
-                            text={t('user-menu.action.invite-members')}
-                          />
-                        </Stack>
-                      )}
-                    </Stack>
-                  </Card>
-                </Flex>
-              </Flex>
-
-              {auth.logout && (
-                <Card flex="none" padding={3} borderTop>
-                  <Stack>
-                    <Button
-                      iconRight={LeaveIcon}
-                      justify="flex-start"
-                      mode="bleed"
-                      // eslint-disable-next-line react/jsx-handler-names
-                      onClick={auth.logout}
-                      text={t('user-menu.action.sign-out')}
-                    />
-                  </Stack>
-                </Card>
-              )}
-            </InnerCardMotion>
-          </Root>
-        </TrapFocus>
-      )}
-    </AnimatePresence>
-  )
-})
diff --git a/packages/sanity/src/core/studio/components/navbar/SanityLogo.tsx b/packages/sanity/src/core/studio/components/navbar/SanityLogo.tsx
new file mode 100644
index 00000000000..d6771de00b9
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/SanityLogo.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+export function SanityLogo() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 33 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="100%" height="100%" fill="#EC5446" />
+      <path
+        d="M10.1637 8.5498C10.1637 11.3854 11.9461 13.0725 15.5143 13.9622L19.2955 14.8235C22.6725 15.5855 24.729 17.4783 24.729 20.5619C24.7553 21.9053 24.3107 23.2168 23.4698 24.2765C23.4698 21.1999 21.8499 19.5376 17.9425 18.538L14.2299 17.7086C11.257 17.0423 8.9623 15.4863 8.9623 12.1368C8.94666 10.8433 9.36932 9.58143 10.1637 8.5498Z"
+        fill="white"
+      />
+      <path
+        d="M21.1463 19.8069C22.7591 20.8206 23.4662 22.2384 23.4662 24.2729C22.1313 25.953 19.7861 26.8958 17.0297 26.8958C12.3899 26.8958 9.1427 24.6521 8.42111 20.7533H12.8769C13.4506 22.5432 14.9695 23.3726 16.9972 23.3726C19.4722 23.3726 21.1175 22.0753 21.1499 19.7998"
+        fill="#F8B1AA"
+      />
+      <path
+        d="M12.4801 12.7536C11.7436 12.3236 11.1394 11.7057 10.7316 10.9656C10.3238 10.2255 10.1276 9.3907 10.1638 8.54984C11.4518 6.88396 13.6923 5.8667 16.4235 5.8667C21.1499 5.8667 23.8848 8.31945 24.5595 11.7717H20.2732C19.8006 10.4107 18.6172 9.35089 16.4596 9.35089C14.1541 9.35089 12.5811 10.6694 12.4909 12.7536"
+        fill="#F8B1AA"
+      />
+    </svg>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioLogo.tsx b/packages/sanity/src/core/studio/components/navbar/StudioLogo.tsx
index e9822631a1a..6299ad89f55 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioLogo.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioLogo.tsx
@@ -10,7 +10,7 @@ export function StudioLogo(props: LogoProps) {
 
   return (
     <Box padding={3} data-testid="studio-logo">
-      <Text weight="bold">{title}</Text>
+      <Text weight="medium">{title}</Text>
     </Box>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
index 83e3cbf5aee..e5015d084a2 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -1,40 +1,35 @@
-import {MenuIcon, SearchIcon} from '@sanity/icons'
+import {MenuIcon} from '@sanity/icons'
 import {
   BoundaryElementProvider,
-  Box,
-  Button,
   Card,
   Flex,
   Layer,
   LayerProvider,
   PortalProvider,
   useMediaIndex,
-  useRootTheme,
+  TooltipDelayGroupProvider,
+  Box,
 } from '@sanity/ui'
 import React, {useCallback, useState, useMemo, useEffect, useRef, useContext} from 'react'
-import {startCase} from 'lodash'
 import styled from 'styled-components'
 import {isDev} from '../../../environment'
 import {useWorkspace} from '../../workspace'
-import {useColorScheme} from '../../colorScheme'
-import {useWorkspaces} from '../../workspaces'
+import {Button, TOOLTIP_DELAY_PROPS} from '../../../../ui-components'
 import {NavbarContext} from '../../StudioLayout'
-import {useLogoComponent, useToolMenuComponent} from '../../studio-components-hooks'
-import {StudioTheme} from '../../../theme'
-import {useTranslation} from '../../../i18n'
+import {useToolMenuComponent} from '../../studio-components-hooks'
 import {UserMenu} from './userMenu'
 import {NewDocumentButton, useNewDocumentOptions} from './new-document'
 import {PresenceMenu} from './presence'
-import {NavDrawer} from './NavDrawer'
+import {NavDrawer} from './navDrawer'
 import {WorkspaceMenuButton} from './workspace'
 import {ConfigIssuesButton} from './configIssues/ConfigIssuesButton'
-import {LogoButton} from './LogoButton'
-import {SearchDialog, SearchField} from './search'
+import {SearchButton, SearchDialog} from './search'
 import {SearchProvider} from './search/contexts/search/SearchProvider'
 import {ResourcesButton} from './resources/ResourcesButton'
 import {FreeTrial} from './free-trial'
 import {FreeTrialProvider} from './free-trial/FreeTrialProvider'
-import {RouterState, useRouterState, useStateLink} from 'sanity/router'
+import {SearchPopover} from './search/components/SearchPopover'
+import {RouterState, useRouterState} from 'sanity/router'
 
 const RootLayer = styled(Layer)`
   min-height: auto;
@@ -50,29 +45,33 @@ const RootCard = styled(Card)`
   line-height: 0;
 `
 
-const LeftFlex = styled(Flex)`
-  width: max-content;
+// Grid container which renders our navbar in a 3-column grid.
+// Where possible, we try and ensure the center column is always centered, regardless of the
+// amount of content in both LHS and RHS columns.
+const NavGrid = styled.div`
+  display: grid;
+  grid-template-columns: minmax(max-content, 1fr) 3fr minmax(max-content, 1fr);
 `
 
 /**
  * @hidden
  * @beta */
 export function StudioNavbar() {
-  const {name, tools, ...workspace} = useWorkspace()
-  const theme = useRootTheme().theme as StudioTheme
-  const workspaces = useWorkspaces()
+  const {name, tools} = useWorkspace()
   const routerState = useRouterState()
-  const {scheme} = useColorScheme()
-  const {href: rootHref, onClick: handleRootClick} = useStateLink({state: {}})
   const mediaIndex = useMediaIndex()
   const activeToolName = typeof routerState.tool === 'string' ? routerState.tool : undefined
 
   const newDocumentOptions = useNewDocumentOptions()
 
-  const {onSearchFullscreenOpenChange, searchFullscreenOpen, searchFullscreenPortalEl} =
-    useContext(NavbarContext)
+  const {
+    onSearchFullscreenOpenChange,
+    onSearchOpenChange,
+    searchFullscreenOpen,
+    searchFullscreenPortalEl,
+    searchOpen,
+  } = useContext(NavbarContext)
 
-  const Logo = useLogoComponent()
   const ToolMenu = useToolMenuComponent()
 
   const [drawerOpen, setDrawerOpen] = useState<boolean>(false)
@@ -80,8 +79,6 @@ export function StudioNavbar() {
   const routerStateRef = useRef<RouterState>(routerState)
   const workspaceNameRef = useRef<string>(name)
 
-  const {t} = useTranslation()
-
   // Close the NavDrawer when changing tool or workspace
   useEffect(() => {
     if (routerStateRef.current.tool !== routerState.tool || name !== workspaceNameRef.current) {
@@ -97,35 +94,45 @@ export function StudioNavbar() {
 
   const shouldRender = useMemo(
     () => ({
-      brandingCenter: mediaIndex <= 1,
       resources: mediaIndex > 1,
       collapsedPresenceMenu: mediaIndex <= 1,
       loginStatus: mediaIndex > 1,
       searchFullscreen: mediaIndex <= 1,
       configIssues: mediaIndex > 1 && isDev,
-      workspaces: mediaIndex >= 3 && workspaces.length > 1,
+      newDocumentFullscreen: mediaIndex <= 1,
       tools: mediaIndex >= 3,
     }),
-    [mediaIndex, workspaces.length],
+    [mediaIndex],
   )
-  const formattedName = typeof name === 'string' && name !== 'root' ? startCase(name) : null
-  const title = workspace.title || formattedName || 'Studio'
 
   useEffect(() => {
     onSearchFullscreenOpenChange(searchFullscreenOpen)
   }, [searchFullscreenOpen, onSearchFullscreenOpenChange])
 
-  // Disable fullscreen search on media query change (if already open)
+  // On desktop: force search dialog to be hidden
+  // On mobile: force search popover to be hidden
+  // This is a bit of a micro optimisation to prevent search surfaces from remaining open
+  // when jumping between both mobile / desktop breakpoints.
   useEffect(() => {
-    if (onSearchFullscreenOpenChange && !shouldRender.searchFullscreen) {
+    if (shouldRender.searchFullscreen) {
+      onSearchOpenChange(false)
+    } else {
       onSearchFullscreenOpenChange(false)
     }
-  }, [onSearchFullscreenOpenChange, shouldRender.searchFullscreen])
+  }, [onSearchFullscreenOpenChange, onSearchOpenChange, shouldRender.searchFullscreen])
+
+  const handleOpenSearch = useCallback(() => {
+    onSearchOpenChange(true)
+  }, [onSearchOpenChange])
 
   const handleOpenSearchFullscreen = useCallback(() => {
     onSearchFullscreenOpenChange(true)
   }, [onSearchFullscreenOpenChange])
 
+  const handleCloseSearch = useCallback(() => {
+    onSearchOpenChange(false)
+  }, [onSearchOpenChange])
+
   const handleCloseSearchFullscreen = useCallback(() => {
     onSearchFullscreenOpenChange(false)
     searchOpenButtonEl?.focus()
@@ -144,112 +151,104 @@ export function StudioNavbar() {
     <FreeTrialProvider>
       <RootLayer zOffset={100} data-search-open={searchFullscreenOpen}>
         <RootCard
+          borderBottom
           data-testid="studio-navbar"
           data-ui="Navbar"
-          padding={2}
-          scheme="dark"
-          shadow={theme.__legacy || scheme === 'dark' ? 1 : undefined}
+          padding={3}
           sizing="border"
         >
-          <Flex align="center" justify="space-between">
-            <LeftFlex align="center" flex={shouldRender.brandingCenter ? undefined : 1}>
-              {!shouldRender.tools && (
-                <Box marginRight={1}>
-                  <Button
-                    mode="bleed"
-                    icon={MenuIcon}
-                    onClick={handleOpenDrawer}
-                    ref={setDrawerButtonEl}
-                  />
-                </Box>
-              )}
-
-              {!shouldRender.brandingCenter && (
-                <Box marginRight={1}>
-                  <LogoButton href={rootHref} onClick={handleRootClick} title={title}>
-                    <Logo title={title} />
-                  </LogoButton>
-                </Box>
-              )}
+          <NavGrid>
+            {/** Left flex */}
+            <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+              <Flex align="center" gap={2} justify="flex-start">
+                <Flex align="center" gap={2}>
+                  {/* Menu button */}
+                  {!shouldRender.tools && (
+                    <Button
+                      mode="bleed"
+                      icon={MenuIcon}
+                      onClick={handleOpenDrawer}
+                      ref={setDrawerButtonEl}
+                      tooltipProps={{content: 'Open drawer', placement: 'right'}}
+                    />
+                  )}
 
-              {shouldRender.workspaces && (
-                <Box marginRight={2}>
-                  <WorkspaceMenuButton collapsed />
-                </Box>
-              )}
-
-              <Box marginRight={shouldRender.brandingCenter ? undefined : 2}>
+                  {/* Workspace menu button */}
+                  <WorkspaceMenuButton />
+                </Flex>
+                {/* New document button */}
                 <NewDocumentButton
                   {...newDocumentOptions}
-                  modal={shouldRender.brandingCenter ? 'dialog' : 'popover'}
+                  modal={shouldRender.newDocumentFullscreen ? 'dialog' : 'popover'}
                 />
-              </Box>
-
-              {/* Search */}
-              <LayerProvider>
-                <SearchProvider fullscreen={shouldRender.searchFullscreen}>
-                  <BoundaryElementProvider element={document.body}>
-                    <PortalProvider element={searchFullscreenPortalEl}>
-                      {shouldRender.searchFullscreen && (
-                        <SearchDialog
-                          onClose={handleCloseSearchFullscreen}
-                          onOpen={handleOpenSearchFullscreen}
-                          open={searchFullscreenOpen}
-                        />
-                      )}
-                    </PortalProvider>
-                    {!shouldRender.searchFullscreen && <SearchField />}
-                  </BoundaryElementProvider>
-                </SearchProvider>
-              </LayerProvider>
+              </Flex>
+            </TooltipDelayGroupProvider>
 
+            {/** Center flex */}
+            <Flex align="center" justify="center">
               {shouldRender.tools && (
-                <Card flex={1} marginX={2} overflow="visible" paddingRight={1}>
-                  <ToolMenu
-                    activeToolName={activeToolName}
-                    closeSidebar={handleCloseDrawer}
-                    context="topbar"
-                    isSidebarOpen={false}
-                    tools={tools}
-                  />
-                </Card>
+                <ToolMenu
+                  activeToolName={activeToolName}
+                  closeSidebar={handleCloseDrawer}
+                  context="topbar"
+                  isSidebarOpen={false}
+                  tools={tools}
+                />
               )}
-            </LeftFlex>
+            </Flex>
 
-            {shouldRender.brandingCenter && (
-              <Box marginX={1}>
-                <LogoButton href={rootHref} onClick={handleRootClick} title={title}>
-                  <Logo title={title} />
-                </LogoButton>
-              </Box>
-            )}
+            {/** Right flex */}
+            <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+              <Flex align="center" gap={1} justify="flex-end">
+                <Flex gap={1}>
+                  {/* Search */}
+                  <LayerProvider>
+                    <SearchProvider fullscreen={shouldRender.searchFullscreen}>
+                      <BoundaryElementProvider element={document.body}>
+                        {shouldRender.searchFullscreen ? (
+                          <PortalProvider element={searchFullscreenPortalEl}>
+                            <SearchDialog
+                              onClose={handleCloseSearchFullscreen}
+                              onOpen={handleOpenSearchFullscreen}
+                              open={searchFullscreenOpen}
+                            />
+                          </PortalProvider>
+                        ) : (
+                          <SearchPopover
+                            onClose={handleCloseSearch}
+                            onOpen={handleOpenSearch}
+                            open={searchOpen}
+                          />
+                        )}
+                      </BoundaryElementProvider>
+                    </SearchProvider>
+                  </LayerProvider>
 
-            <Flex gap={2}>
-              {(shouldRender.configIssues || shouldRender.resources || shouldRender.tools) && (
-                <Card borderRight>
-                  <Flex gap={1} paddingX={2}>
-                    {shouldRender.tools && <FreeTrial type="topbar" />}
-                    {shouldRender.configIssues && <ConfigIssuesButton />}
-                    {shouldRender.resources && <ResourcesButton />}
-                  </Flex>
-                </Card>
-              )}
+                  {shouldRender.tools && <FreeTrial type="topbar" />}
+                  {/* Search button (desktop) */}
+                  {!shouldRender.searchFullscreen && (
+                    <SearchButton onClick={handleOpenSearch} ref={setSearchOpenButtonEl} />
+                  )}
 
-              <Flex align="center" gap={1}>
-                <PresenceMenu collapse={shouldRender.collapsedPresenceMenu} />
-                {shouldRender.tools && <UserMenu />}
-                {shouldRender.searchFullscreen && (
-                  <Button
-                    aria-label={t('search.action-open-aria-label')}
-                    icon={SearchIcon}
-                    mode="bleed"
-                    onClick={handleOpenSearchFullscreen}
-                    ref={setSearchOpenButtonEl}
-                  />
+                  {shouldRender.configIssues && <ConfigIssuesButton />}
+                  {shouldRender.resources && <ResourcesButton />}
+                  <PresenceMenu />
+                  {/* Search button (mobile) */}
+                  {shouldRender.searchFullscreen && (
+                    <SearchButton
+                      onClick={handleOpenSearchFullscreen}
+                      ref={setSearchOpenButtonEl}
+                    />
+                  )}
+                </Flex>
+                {shouldRender.tools && (
+                  <Box flex="none" marginLeft={1}>
+                    <UserMenu />
+                  </Box>
                 )}
               </Flex>
-            </Flex>
-          </Flex>
+            </TooltipDelayGroupProvider>
+          </NavGrid>
         </RootCard>
 
         {!shouldRender.tools && (
diff --git a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
index a0b07655281..04c434152d9 100644
--- a/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/configIssues/ConfigIssuesButton.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
 import React, {useCallback, useState, useId} from 'react'
-import {Dialog, Heading, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import {WarningOutlineIcon} from '@sanity/icons'
+import {Dialog} from '../../../../../ui-components'
 import {useSchema} from '../../../../hooks'
 import {SchemaProblemGroups} from '../../../screens/schemaErrors/SchemaProblemGroups'
 import {useColorScheme} from '../../../colorScheme'
@@ -41,26 +42,17 @@ export function ConfigIssuesButton() {
     <>
       <StatusButton
         icon={WarningOutlineIcon}
-        label="Found configuration issues"
         mode="bleed"
         onClick={handleOpen}
         ref={setButtonElement}
         selected={isDialogOpen}
         tone="caution"
-        tooltip={{scheme}}
+        tooltipProps={{scheme, content: t('configuration-issues.button.tooltip')}}
       />
 
       {isDialogOpen && (
         <Dialog
-          header={
-            <Stack space={3}>
-              <Text weight="semibold">Configuration issues</Text>
-              <Text muted size={1}>
-                Configuration checks are only performed during development and will not be visible
-                in production builds
-              </Text>
-            </Stack>
-          }
+          header="Configuration issues"
           width={2}
           onClickOutside={handleClose}
           onClose={handleClose}
@@ -68,10 +60,16 @@ export function ConfigIssuesButton() {
           scheme={scheme}
           id={dialogId}
         >
-          <Stack space={4} padding={4}>
-            <Heading as="h2" size={1}>
-              Found {groupsWithWarnings.length} schema warnings
-            </Heading>
+          <Stack space={4}>
+            <Stack space={3}>
+              <Text as="h2" size={1} weight="medium">
+                Found {groupsWithWarnings.length} schema warnings
+              </Text>{' '}
+              <Text muted size={1}>
+                Configuration checks are only performed during development and will not be visible
+                in production builds
+              </Text>
+            </Stack>
             <SchemaProblemGroups problemGroups={groupsWithWarnings} />
           </Stack>
         </Dialog>
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
index 2a9728972ae..4efb17b88eb 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/DialogContent.tsx
@@ -1,7 +1,8 @@
-import {Box, Button, Dialog, Flex, Heading} from '@sanity/ui'
+import {Box, Flex, Heading} from '@sanity/ui'
 import styled from 'styled-components'
 import {CloseIcon} from '@sanity/icons'
 import {useColorSchemeValue} from '../../../colorScheme'
+import {Button, Dialog} from '../../../../../ui-components'
 import {FreeTrialDialog} from './types'
 import {DescriptionSerializer} from './DescriptionSerializer'
 
@@ -50,50 +51,42 @@ export function DialogContent({handleClose, handleOpenNext, content, open}: Moda
       id="free-trial-modal"
       onClose={handleClose}
       onClickOutside={handleClose}
+      padding={false}
       __unstable_hideCloseButton
       scheme={schemeValue}
-      cardRadius={3}
-      footer={
-        <Flex width="full" gap={3} justify="flex-end" padding={3}>
-          {content.secondaryButton?.text && (
-            <Button
-              mode="bleed"
-              padding={2}
-              fontSize={1}
-              text={content.secondaryButton?.text}
-              tone="default"
-              onClick={handleClose}
-            />
-          )}
-          <Button
-            mode="default"
-            padding={2}
-            fontSize={1}
-            text={content.ctaButton?.text}
-            autoFocus
-            tone="primary"
-            {...(content.ctaButton?.action === 'openUrl'
-              ? {
-                  href: content.ctaButton.url,
-                  target: '_blank',
-                  rel: 'noopener noreferrer',
-                  as: 'a',
-                }
-              : {
-                  onClick: content.ctaButton?.action === 'openNext' ? handleOpenNext : handleClose,
-                })}
-          />
-        </Flex>
-      }
+      footer={{
+        cancelButton: content.secondaryButton?.text
+          ? {
+              text: content.secondaryButton.text,
+              mode: 'bleed',
+              tone: 'default',
+              onClick: handleClose,
+            }
+          : undefined,
+        confirmButton: {
+          text: content.ctaButton?.text,
+          mode: 'default',
+          tone: 'primary',
+          ...(content.ctaButton?.action === 'openUrl'
+            ? {
+                href: content.ctaButton.url,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+                as: 'a',
+              }
+            : {
+                onClick: content.ctaButton?.action === 'openNext' ? handleOpenNext : handleClose,
+              }),
+        },
+      }}
     >
       <StyledButton
         icon={CloseIcon}
-        fontSize={1}
-        padding={2}
         mode="bleed"
         tone="default"
         onClick={handleClose}
         tabIndex={-1}
+        tooltipProps={null}
       />
       {content.image && (
         <Image src={content.image.asset.url} alt={content.image.asset.altText ?? ''} />
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
index 1cdbe94827c..c89119782dc 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrial.tsx
@@ -1,5 +1,5 @@
 import {useCallback, useEffect, useRef, useState} from 'react'
-import {Popover} from '@sanity/ui'
+import {Popover} from '../../../../../ui-components'
 import {useColorSchemeValue} from '../../../colorScheme'
 import {PopoverContent} from './PopoverContent'
 import {DialogContent} from './DialogContent'
@@ -59,7 +59,7 @@ export function FreeTrial({type}: FreeTrialProps) {
         open={showDialog && showPopover}
         size={0}
         scheme={scheme}
-        radius={2}
+        radius={3}
         portal
         placement={type === 'sidebar' ? 'top' : 'bottom-end'}
         content={
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
index 333aae3a3eb..9fd6d2bbc01 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialButton.tsx
@@ -1,12 +1,20 @@
 import styled from 'styled-components'
-import {Button, Text, Card, Stack} from '@sanity/ui'
+
+import {
+  // eslint-disable-next-line no-restricted-imports
+  Button as UIButton, // Button with necessary custom styles.
+  Text,
+  Card,
+} from '@sanity/ui'
 import {BoltIcon} from '@sanity/icons'
 import {purple, yellow} from '@sanity/color'
 import {useTranslation} from 'react-i18next'
 import {forwardRef} from 'react'
+import {Button} from '../../../../../ui-components'
 
-const StyledButton = styled(Button)<{smallIcon: boolean}>`
-  padding: ${(props) => (props.smallIcon ? '1px' : 0)};
+const StyledButton = styled(UIButton)`
+  padding: 2px;
+  margin: -2px;
   position: relative;
 `
 
@@ -74,16 +82,21 @@ export const FreeTrialButtonTopbar = forwardRef(function FreeTrialButtonTopbar(
   {toggleShowContent, daysLeft, totalDays}: FreeTrialButtonProps,
   ref: React.Ref<HTMLButtonElement>,
 ) {
+  if (!daysLeft) {
+    return (
+      <Button
+        size="default"
+        ref={ref}
+        icon={BoltIcon}
+        mode="bleed"
+        onClick={toggleShowContent}
+        tooltipProps={{content: 'Upgrade your project'}}
+      />
+    )
+  }
   return (
-    <StyledButton
-      ref={ref}
-      padding={3}
-      fontSize={1}
-      mode="bleed"
-      onClick={toggleShowContent}
-      smallIcon={!!daysLeft}
-    >
-      <Text size={daysLeft ? 1 : 2}>
+    <StyledButton ref={ref} padding={2} mode="bleed" onClick={toggleShowContent}>
+      <Text size={1}>
         <BoltIcon />
       </Text>
       {daysLeft > 0 && <SvgFilledOutline daysLeft={daysLeft} totalDays={totalDays} />}
@@ -98,19 +111,18 @@ export const FreeTrialButtonSidebar = forwardRef(function FreeTrialButtonSidebar
   const {t} = useTranslation()
 
   return (
-    <Stack as="li">
-      <Button
-        ref={ref}
-        icon={BoltIcon}
-        justify="flex-start"
-        mode="bleed"
-        onClick={toggleShowContent}
-        text={
-          daysLeft
-            ? t('user-menu.action.free-trial', {count: daysLeft})
-            : t('user-menu.action.free-trial-finished')
-        }
-      />
-    </Stack>
+    <Button
+      ref={ref}
+      icon={BoltIcon}
+      justify="flex-start"
+      mode="bleed"
+      size="large"
+      onClick={toggleShowContent}
+      text={
+        daysLeft
+          ? t('user-menu.action.free-trial', {count: daysLeft})
+          : t('user-menu.action.free-trial-finished')
+      }
+    />
   )
 })
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx
index f21b1dc00b7..4ecd9bdabfb 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx
@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useState} from 'react'
+import React, {useCallback, useEffect, useState} from 'react'
 import {useClient} from '../../../../hooks'
 import {SANITY_VERSION} from '../../../../version'
 import {supportsLocalStorage} from '../../../../util/supportsLocalStorage'
diff --git a/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx b/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
index 9bcccbbed19..fb65c73f22e 100644
--- a/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/free-trial/PopoverContent.tsx
@@ -1,6 +1,6 @@
-import {Card, Heading, Flex, Button, Box, Container} from '@sanity/ui'
+import {Card, Heading, Flex, Box, Container} from '@sanity/ui'
 import styled from 'styled-components'
-import {useColorSchemeValue} from '../../../colorScheme'
+import {Button} from '../../../../../ui-components'
 import {FreeTrialDialog} from './types'
 import {DescriptionSerializer} from './DescriptionSerializer'
 
@@ -18,10 +18,8 @@ interface PopoverContentProps {
 }
 
 export function PopoverContent({content, handleClose, handleOpenNext}: PopoverContentProps) {
-  const schemeValue = useColorSchemeValue()
-
   return (
-    <Card scheme={schemeValue} radius={3}>
+    <Card radius={3} overflow={'hidden'} width={0}>
       <Container width={0}>
         {content.image && (
           <Image src={content.image.asset.url} alt={content.image.asset.altText ?? ''} />
@@ -38,8 +36,6 @@ export function PopoverContent({content, handleClose, handleOpenNext}: PopoverCo
           {content.secondaryButton?.text && (
             <Button
               mode="bleed"
-              padding={2}
-              fontSize={1}
               text={content.secondaryButton.text}
               tone="default"
               onClick={handleClose}
@@ -47,8 +43,7 @@ export function PopoverContent({content, handleClose, handleOpenNext}: PopoverCo
           )}
           <Button
             mode="default"
-            padding={2}
-            fontSize={1}
+            tooltipProps={null}
             text={content.ctaButton?.text}
             autoFocus
             tone="primary"
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx
new file mode 100644
index 00000000000..5be956c163c
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/ApperaranceMenu.tsx
@@ -0,0 +1,38 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {Card, Stack} from '@sanity/ui'
+import {Button} from '../../../../../ui-components'
+import {type StudioThemeColorSchemeKey} from '../../../../theme'
+import {useTranslation} from '../../../../i18n'
+import {useColorSchemeOptions} from '../../../colorScheme'
+
+export function AppearanceMenu({
+  setScheme,
+}: {
+  setScheme: (nextScheme: StudioThemeColorSchemeKey) => void
+}) {
+  const {t} = useTranslation()
+  // Subscribe to just what we need, if the menu isn't shown then we're not subscribed to these contexts
+  const options = useColorSchemeOptions(setScheme, t)
+
+  return (
+    <Card borderTop flex="none" padding={2} overflow="auto">
+      <Stack as="ul" space={1}>
+        {options.map(({icon, label, name, onSelect, selected, title}) => (
+          <Stack as="li" key={name}>
+            <Button
+              aria-label={label}
+              icon={icon}
+              iconRight={selected && <CheckmarkIcon />}
+              justify="flex-start"
+              mode="bleed"
+              onClick={onSelect}
+              selected={selected}
+              size="large"
+              text={title}
+            />
+          </Stack>
+        ))}
+      </Stack>
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx
new file mode 100644
index 00000000000..a58d64d66fc
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/LocaleMenu.tsx
@@ -0,0 +1,52 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {Card, Stack} from '@sanity/ui'
+import React, {useCallback} from 'react'
+import {useLocale} from '../../../../i18n/hooks/useLocale'
+import {Button} from '../../../../../ui-components'
+
+export function LocaleMenu() {
+  const {changeLocale, currentLocale, locales} = useLocale()
+
+  if (!locales || locales.length < 2) {
+    return null
+  }
+
+  return (
+    <Card borderTop flex="none" padding={2} overflow="auto">
+      <Stack as="ul" space={1}>
+        {locales.map((item) => (
+          <LocaleItem
+            key={item.id}
+            locale={item}
+            changeLocale={changeLocale}
+            selectedLocale={currentLocale.id}
+          />
+        ))}
+      </Stack>
+    </Card>
+  )
+}
+
+function LocaleItem(props: {
+  locale: {id: string; title: string}
+  changeLocale: (lang: string) => void
+  selectedLocale: string
+}) {
+  const {locale, changeLocale, selectedLocale: selectedLang} = props
+  const localeId = locale.id
+  const onClick = useCallback(() => changeLocale(localeId), [localeId, changeLocale])
+  const selected = selectedLang == localeId
+
+  return (
+    <Button
+      aria-label={locale.title}
+      iconRight={selected && <CheckmarkIcon />}
+      justify="flex-start"
+      mode="bleed"
+      onClick={onClick}
+      selected={selected}
+      size="large"
+      text={locale.title}
+    />
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx
new file mode 100644
index 00000000000..16625323bc2
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/ManageMenu.tsx
@@ -0,0 +1,51 @@
+import {CogIcon, UsersIcon} from '@sanity/icons'
+import {Card, Stack} from '@sanity/ui'
+import {Button} from '../../../../../ui-components'
+import {useTranslation} from '../../../../i18n'
+import {userHasRole} from '../../../../util'
+import {useWorkspace} from '../../../workspace'
+import {FreeTrial} from '../free-trial'
+
+export function ManageMenu() {
+  const {currentUser, projectId} = useWorkspace()
+  const isAdmin = Boolean(currentUser && userHasRole(currentUser, 'administrator'))
+
+  const {t} = useTranslation()
+
+  return (
+    <Card borderTop flex="none" padding={2}>
+      <Stack as="ul" space={1}>
+        <Stack as="li">
+          <FreeTrial type="sidebar" />
+          <Button
+            aria-label={t('user-menu.action.manage-project-aria-label')}
+            as="a"
+            href={`https://sanity.io/manage/project/${projectId}`}
+            icon={CogIcon}
+            justify="flex-start"
+            mode="bleed"
+            size="large"
+            target="_blank"
+            text={t('user-menu.action.manage-project')}
+          />
+        </Stack>
+
+        {isAdmin && (
+          <Stack as="li">
+            <Button
+              aria-label={t('user-menu.action.invite-members-aria-label')}
+              as="a"
+              href={`https://sanity.io/manage/project/${projectId}/members`}
+              icon={UsersIcon}
+              justify="flex-start"
+              mode="bleed"
+              size="large"
+              target="_blank"
+              text={t('user-menu.action.invite-members')}
+            />
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
new file mode 100644
index 00000000000..57b254b5cfa
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
@@ -0,0 +1,198 @@
+import {Layer, Card, Flex, Text, Box, Stack} from '@sanity/ui'
+import {CloseIcon, LeaveIcon} from '@sanity/icons'
+import React, {memo, useCallback} from 'react'
+import styled from 'styled-components'
+import TrapFocus from 'react-focus-lock'
+import {AnimatePresence, motion, Transition, Variants} from 'framer-motion'
+import {Button} from '../../../../../ui-components'
+import {useWorkspace} from '../../../workspace'
+import {Tool} from '../../../../config'
+import {useToolMenuComponent} from '../../../studio-components-hooks'
+import {UserAvatar} from '../../../../components'
+import {useWorkspaces} from '../../../workspaces'
+import {useColorSchemeSetValue} from '../../../colorScheme'
+import {useTranslation} from '../../../../i18n'
+import {WorkspaceMenuButton} from '../workspace'
+import {AppearanceMenu} from './ApperaranceMenu'
+import {LocaleMenu} from './LocaleMenu'
+import {ManageMenu} from './ManageMenu'
+
+const ANIMATION_TRANSITION: Transition = {
+  bounce: 0,
+  damping: 20,
+  mass: 0.5,
+  stiffness: 200,
+  type: 'spring',
+}
+
+const BACKDROP_VARIANTS: Variants = {
+  open: {
+    opacity: 1,
+  },
+  closed: {
+    opacity: 0,
+  },
+}
+
+const INNER_CARD_VARIANTS: Variants = {
+  open: {
+    x: '0%',
+  },
+  closed: {
+    x: '-100%',
+  },
+}
+
+const Root = styled(Layer)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`
+
+const BackdropMotion = styled(motion(Card))`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--card-shadow-penumbra-color);
+`
+
+const InnerCardMotion = styled(motion(Card))`
+  position: relative;
+  pointer-events: all;
+  flex-direction: column;
+  height: 100%;
+  min-width: 200px;
+  max-width: 280px;
+  overflow: auto;
+`
+
+interface NavDrawerProps {
+  activeToolName?: string
+  isOpen: boolean
+  onClose: () => void
+  tools: Tool[]
+}
+
+export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
+  const {activeToolName, isOpen, onClose, tools} = props
+
+  const setScheme = useColorSchemeSetValue()
+  const {auth, currentUser} = useWorkspace()
+  const workspaces = useWorkspaces()
+  const ToolMenu = useToolMenuComponent()
+
+  const {t} = useTranslation()
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    },
+    [onClose],
+  )
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <TrapFocus returnFocus>
+          <Root onKeyDown={handleKeyDown}>
+            <BackdropMotion
+              animate="open"
+              data-open={isOpen}
+              exit="closed"
+              initial="closed"
+              onClick={onClose}
+              transition={ANIMATION_TRANSITION}
+              variants={BACKDROP_VARIANTS}
+            />
+            <InnerCardMotion
+              animate="open"
+              data-open={isOpen}
+              display="flex"
+              exit="closed"
+              height="fill"
+              initial="closed"
+              shadow={1}
+              transition={ANIMATION_TRANSITION}
+              variants={INNER_CARD_VARIANTS}
+            >
+              <Card borderBottom>
+                <Stack space={3} padding={3}>
+                  <Flex align="center">
+                    <Flex flex={1} align="center" paddingRight={2}>
+                      <Flex flex={1} align="center">
+                        <UserAvatar size={1} user="me" />
+                        <Box
+                          flex={1}
+                          marginLeft={2}
+                          title={currentUser?.name || currentUser?.email}
+                        >
+                          <Text size={1} textOverflow="ellipsis" weight="medium">
+                            {currentUser?.name || currentUser?.email}
+                          </Text>
+                        </Box>
+                      </Flex>
+                    </Flex>
+
+                    <Button
+                      icon={CloseIcon}
+                      mode="bleed"
+                      onClick={onClose}
+                      tooltipProps={{content: t('user-menu.close-menu')}}
+                    />
+                  </Flex>
+
+                  {workspaces.length > 1 && (
+                    <Flex>
+                      <WorkspaceMenuButton />
+                    </Flex>
+                  )}
+                </Stack>
+              </Card>
+
+              <Flex direction="column" flex={1} justify="space-between" overflow="auto">
+                {/* Tools */}
+                <Card flex="none" padding={2}>
+                  <ToolMenu
+                    activeToolName={activeToolName}
+                    closeSidebar={onClose}
+                    context="sidebar"
+                    isSidebarOpen={isOpen}
+                    tools={tools}
+                  />
+                </Card>
+
+                <Flex direction="column">
+                  {setScheme && <AppearanceMenu setScheme={setScheme} />}
+                  <LocaleMenu />
+                  <ManageMenu />
+                </Flex>
+              </Flex>
+
+              {auth.logout && (
+                <Card flex="none" padding={2} borderTop>
+                  <Stack>
+                    <Button
+                      iconRight={LeaveIcon}
+                      justify="flex-start"
+                      mode="bleed"
+                      // eslint-disable-next-line react/jsx-handler-names
+                      onClick={auth.logout}
+                      size="large"
+                      text={t('user-menu.action.sign-out')}
+                    />
+                  </Stack>
+                </Card>
+              )}
+            </InnerCardMotion>
+          </Root>
+        </TrapFocus>
+      )}
+    </AnimatePresence>
+  )
+})
diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/index.ts b/packages/sanity/src/core/studio/components/navbar/navDrawer/index.ts
new file mode 100644
index 00000000000..528817c2d40
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/navDrawer/index.ts
@@ -0,0 +1 @@
+export * from './NavDrawer'
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
index c07e29d8967..88027bf500b 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.style.ts
@@ -1,5 +1,6 @@
-import {Box, Popover, Dialog, Flex, Card} from '@sanity/ui'
+import {Flex, Card} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {Dialog, Popover} from '../../../../../ui-components'
 
 export const StyledPopover = styled(Popover)(() => {
   return css`
@@ -26,10 +27,6 @@ export const StyledDialog = styled(Dialog)(() => {
   `
 })
 
-export const TooltipContentBox = styled(Box)`
-  max-width: 300px;
-`
-
 export const RootFlex = styled(Flex)``
 
 export const PopoverHeaderCard = styled(Card)`
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 8130b228e28..935aec8be30 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -1,25 +1,12 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {
-  Box,
-  Tooltip,
-  Text,
-  useClickOutside,
-  Stack,
-  TextInput,
-  ButtonProps,
-  TooltipProps,
-  TextInputProps,
-  Label,
-  Card,
-  Flex,
-  Button,
-} from '@sanity/ui'
+import {Text, useClickOutside, Stack, TextInput, TextInputProps, Card, Flex} from '@sanity/ui'
 import {AddIcon, SearchIcon} from '@sanity/icons'
 import ReactFocusLock from 'react-focus-lock'
 import {useGetI18nText, useTranslation} from '../../../../i18n'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useCurrentUser} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
+import {Button, ButtonProps, Tooltip, TooltipProps} from '../../../../../ui-components'
 import {NewDocumentList, NewDocumentListProps} from './NewDocumentList'
 import {ModalType, NewDocumentOption} from './types'
 import {filterOptions} from './filter'
@@ -29,7 +16,6 @@ import {
   RootFlex,
   StyledDialog,
   StyledPopover,
-  TooltipContentBox,
   PopoverListFlex,
 } from './NewDocumentButton.style'
 import {INLINE_PREVIEW_HEIGHT} from './NewDocumentListOption'
@@ -136,7 +122,9 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   // Shared text input props for the popover and dialog
   const sharedTextInputProps: TextInputProps = useMemo(
     () => ({
+      __unstable_disableFocusRing: true,
       border: false,
+      'data-testid': 'new-document-button-search-input',
       defaultValue: searchQuery,
       disabled: loading,
       icon: SearchIcon,
@@ -154,12 +142,13 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
       'data-testid': 'new-document-button',
       disabled: disabled || loading,
       icon: AddIcon,
-      mode: 'bleed',
+      text: t('new-document.button'),
+      mode: 'ghost',
       onClick: handleToggleOpen,
       ref: setButtonElement,
       selected: open,
     }),
-    [disabled, handleToggleOpen, loading, open, openDialogAriaLabel],
+    [disabled, handleToggleOpen, loading, open, openDialogAriaLabel, t],
   )
 
   // Tooltip content for the open button
@@ -180,10 +169,8 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   // Shared tooltip props for the popover and dialog
   const sharedTooltipProps: TooltipProps = useMemo(
     () => ({
-      content: <TooltipContentBox padding={2}>{tooltipContent}</TooltipContentBox>,
+      content: tooltipContent,
       disabled: loading || open,
-      placement: 'bottom',
-      portal: true,
       scheme: scheme,
     }),
     [loading, open, scheme, tooltipContent],
@@ -247,20 +234,8 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
         >
           <PopoverHeaderCard sizing="border">
             <Stack>
-              <Box paddingX={3} paddingY={3}>
-                <Box paddingY={1}>
-                  <Label size={1} muted>
-                    {title}
-                  </Label>
-                </Box>
-              </Box>
-              <Card borderTop borderBottom padding={1}>
-                <TextInput
-                  data-testid="new-document-button-search-input"
-                  {...sharedTextInputProps}
-                  fontSize={1}
-                  radius={1}
-                />
+              <Card borderBottom padding={1}>
+                <TextInput {...sharedTextInputProps} fontSize={1} radius={1} />
               </Card>
             </Stack>
           </PopoverHeaderCard>
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
index 1c9861e140e..e4b52f2ecc6 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentList.tsx
@@ -1,9 +1,10 @@
-import {Flex, Inline, Spinner, Text} from '@sanity/ui'
+import {Flex, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {CurrentUser} from '@sanity/types'
 import styled from 'styled-components'
 import {CommandList} from '../../../../components'
 import {supportsTouch} from '../../../../util'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {Translate, useTranslation} from '../../../../i18n'
 import {NewDocumentOption, PreviewLayout} from './types'
 import {INLINE_PREVIEW_HEIGHT, NewDocumentListOption} from './NewDocumentListOption'
@@ -12,10 +13,6 @@ const ContentFlex = styled(Flex)`
   min-height: 100px;
 `
 
-const QueryString = styled.strong`
-  word-break: break-all;
-`
-
 export interface NewDocumentListProps {
   currentUser: CurrentUser | null
   loading: boolean
@@ -58,24 +55,7 @@ export function NewDocumentList(props: NewDocumentListProps) {
 
   // Render loading state
   if (loading) {
-    return (
-      <ContentFlex
-        align="center"
-        flex={1}
-        height="fill"
-        justify="center"
-        padding={4}
-        sizing="border"
-      >
-        <Inline space={2}>
-          <Spinner muted size={1} />
-
-          <Text muted size={1}>
-            {t('new-document.loading')}
-          </Text>
-        </Inline>
-      </ContentFlex>
-    )
+    return <LoadingBlock showText />
   }
 
   // Render no search results state
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
index cae7996fde8..17aef8de80e 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
@@ -1,16 +1,12 @@
 import {CurrentUser} from '@sanity/types'
-import {Tooltip, Box, Card, Text} from '@sanity/ui'
+import {Card, Text} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
-import styled from 'styled-components'
+import {Tooltip} from '../../../../../ui-components'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useI18nText} from '../../../../i18n'
 import {NewDocumentOption, PreviewLayout} from './types'
 import {useIntentLink} from 'sanity/router'
 
-const TooltipContentBox = styled(Box)`
-  max-width: 300px;
-`
-
 // This value is used to calculate the max-height of the popover and for the virtual list item size.
 // This value is not used anywhere in this file, but it is exported
 // from here to make it easier to maintain the value in the future
@@ -51,14 +47,13 @@ export function NewDocumentListOption(props: NewDocumentListOptionProps) {
       key={option.id}
       portal
       content={
-        <TooltipContentBox padding={2}>
-          <InsufficientPermissionsMessage currentUser={currentUser} context="create-document" />
-        </TooltipContentBox>
+        <InsufficientPermissionsMessage currentUser={currentUser} context="create-document" />
       }
     >
       <div>
         <Card
           as={option.hasPermission ? 'a' : 'button'}
+          data-testid={`create-new-${option.templateId}`}
           disabled={!option.hasPermission}
           href={href}
           marginBottom={1}
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
index c51d5a2db2b..346c5c5ea25 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
@@ -1,35 +1,17 @@
 import {CogIcon, UsersIcon} from '@sanity/icons'
-import {
-  AvatarStack,
-  Box,
-  Button,
-  Card,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuDivider,
-  MenuItem,
-  Stack,
-  Text,
-} from '@sanity/ui'
+import {Box, Menu, MenuDivider, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
 import styled from 'styled-components'
-import {StatusButton, UserAvatar} from '../../../../components'
+import {StatusButton} from '../../../../components'
 import {useGlobalPresence} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui-components'
+import {useTranslation} from '../../../../i18n'
 import {useWorkspace} from '../../../workspace'
 import {PresenceMenuItem} from './PresenceMenuItem'
-import {useTranslation} from '../../../../i18n'
-
-const MAX_AVATARS = 4
-
-const AvatarStackCard = styled(Card)`
-  background: transparent;
-`
 
 const StyledMenu = styled(Menu)`
-  max-width: 350px;
-  min-width: 250px;
+  max-width: 260px;
 `
 
 const FooterStack = styled(Stack)`
@@ -38,12 +20,7 @@ const FooterStack = styled(Stack)`
   background-color: var(--card-bg-color);
 `
 
-interface PresenceMenuProps {
-  collapse?: boolean
-}
-
-export function PresenceMenu(props: PresenceMenuProps) {
-  const {collapse} = props
+export function PresenceMenu() {
   const presence = useGlobalPresence()
   const {projectId} = useWorkspace()
   const {scheme} = useColorScheme()
@@ -64,25 +41,23 @@ export function PresenceMenu(props: PresenceMenuProps) {
     setFocusedId('')
   }, [])
 
-  const button = useMemo(() => {
-    if (collapse) {
-      return (
-        <StatusButton icon={UsersIcon} mode="bleed" tone={hasPresence ? 'positive' : undefined} />
-      )
-    }
+  const handleClose = useCallback(() => {
+    setFocusedId('')
+  }, [])
 
+  const button = useMemo(() => {
     return (
-      <Button mode="bleed" padding={1}>
-        <AvatarStackCard>
-          <AvatarStack maxLength={MAX_AVATARS} aria-label={t('presence.aria-label')}>
-            {presence.map((item) => (
-              <UserAvatar key={item.user.id} user={item.user} />
-            ))}
-          </AvatarStack>
-        </AvatarStackCard>
-      </Button>
+      <StatusButton
+        icon={UsersIcon}
+        mode="bleed"
+        tone={hasPresence ? 'positive' : undefined}
+        tooltipProps={{
+          // @todo: rename, as its no longer an aria-label
+          content: t('presence.aria-label'),
+        }}
+      />
     )
-  }, [collapse, hasPresence, presence, t])
+  }, [hasPresence, t])
 
   const popoverProps = useMemo(
     (): MenuButtonProps['popover'] => ({
@@ -99,26 +74,22 @@ export function PresenceMenu(props: PresenceMenuProps) {
     <MenuButton
       button={button}
       id="global-presence-menu"
-      onClose={handleClearFocusedItem}
       menu={
-        <StyledMenu padding={1} paddingBottom={0}>
-          {hasPresence && (
-            <Stack>
-              {presence.map((item) => (
-                <PresenceMenuItem
-                  focused={focusedId === item.user.id}
-                  key={item.user.id}
-                  onFocus={handleItemFocus}
-                  presence={item}
-                />
-              ))}
-            </Stack>
-          )}
+        <StyledMenu>
+          {hasPresence &&
+            presence.map((item) => (
+              <PresenceMenuItem
+                focused={focusedId === item.user.id}
+                key={item.user.id}
+                onFocus={handleItemFocus}
+                presence={item}
+              />
+            ))}
 
           {!hasPresence && (
-            <Box paddingX={3} paddingY={4}>
+            <Box padding={3}>
               <Stack space={3}>
-                <Text weight="semibold" size={2}>
+                <Text weight="medium" size={1}>
                   {t('presence.no-one-else-title')}
                 </Text>
 
@@ -129,7 +100,7 @@ export function PresenceMenu(props: PresenceMenuProps) {
             </Box>
           )}
 
-          <FooterStack space={1} paddingBottom={1}>
+          <FooterStack space={1}>
             <MenuDivider />
 
             <MenuItem
@@ -137,7 +108,6 @@ export function PresenceMenu(props: PresenceMenuProps) {
               href={`https://sanity.io/manage/project/${projectId}`}
               iconRight={CogIcon}
               onFocus={handleClearFocusedItem}
-              paddingY={4}
               rel="noopener noreferrer"
               target="_blank"
               text={t('presence.action.manage-members')}
@@ -145,6 +115,7 @@ export function PresenceMenu(props: PresenceMenuProps) {
           </FooterStack>
         </StyledMenu>
       }
+      onClose={handleClose}
       popover={popoverProps}
     />
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index 686c700b8fb..6c5fa002145 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -1,17 +1,11 @@
 import React, {forwardRef, memo, useCallback, useEffect, useMemo, useState} from 'react'
 import {orderBy} from 'lodash'
 import * as PathUtils from '@sanity/util/paths'
-import {Card, Flex, MenuItem, Stack, Text} from '@sanity/ui'
-import styled from 'styled-components'
 import {GlobalPresence} from '../../../../store'
 import {UserAvatar} from '../../../../components'
-import {IntentLink} from 'sanity/router'
+import {MenuItem} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
-
-const AvatarCard = styled(Card)`
-  background: transparent;
-  margin: calc((-35px + 11px) / 2);
-`
+import {IntentLink} from 'sanity/router'
 
 interface PresenceListRowProps {
   focused: boolean
@@ -72,32 +66,15 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi
   return (
     <MenuItem
       as={lastActiveLocation ? LinkComponent : 'div'}
-      data-as={lastActiveLocation ? 'a' : 'div'}
+      data-as="a"
+      disabled={!hasLink}
       onFocus={handleFocus}
-      paddingY={hasLink ? 4 : 3}
-      paddingLeft={4}
-      paddingRight={3}
+      preview={<UserAvatar key={presence.user.id} size={1} user={presence.user} />}
       ref={setMenuItemElement}
-    >
-      <Flex align="center">
-        <AvatarCard>
-          <UserAvatar
-            size={1}
-            key={presence.user.id}
-            user={presence.user}
-            status={hasLink ? 'editing' : 'inactive'}
-          />
-        </AvatarCard>
-
-        <Stack space={2} marginLeft={4}>
-          <Text textOverflow="ellipsis">{presence.user.displayName}</Text>
-          {!hasLink && (
-            <Text size={0} muted textOverflow="ellipsis">
-              {t('presence.not-in-a-document')}
-            </Text>
-          )}
-        </Stack>
-      </Flex>
-    </MenuItem>
+      text={presence.user.displayName}
+      tooltipProps={
+        hasLink ? undefined : {content: t('presence.not-in-a-document'), placement: 'left'}
+      }
+    />
   )
 })
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
index 66652f07b8e..7e29ea2ae21 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
@@ -1,8 +1,8 @@
-import {HelpCircleIcon} from '@sanity/icons'
-import {Box, Button, Flex, Menu, MenuButton, Text, Tooltip} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {InfoOutlineIcon} from '@sanity/icons'
+import {Menu} from '@sanity/ui'
+import React from 'react'
 import styled from 'styled-components'
-import {useColorScheme} from '../../../colorScheme'
+import {Button, MenuButton} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {useGetHelpResources} from './helper-functions/hooks'
 import {ResourcesMenuItems} from './ResourcesMenuItems'
@@ -13,50 +13,27 @@ const StyledMenu = styled(Menu)`
 `
 
 export function ResourcesButton() {
-  const {scheme} = useColorScheme()
-  const [menuOpen, setMenuOpen] = useState(false)
   const {t} = useTranslation()
 
   const {value, error, isLoading} = useGetHelpResources()
 
-  const handleOnOpen = useCallback(() => setMenuOpen(true), [])
-  const handleOnClose = useCallback(() => setMenuOpen(false), [])
-
   return (
-    <Flex>
-      <Tooltip
-        content={
-          <Box padding={2}>
-            <Text size={1}>{t('help-resources.title')}</Text>
-          </Box>
-        }
-        scheme={scheme}
-        placement="bottom"
-        portal
-        disabled={menuOpen}
-      >
-        <div>
-          <MenuButton
-            button={
-              <Button
-                aria-label={t('help-resources.title')}
-                icon={HelpCircleIcon}
-                mode="bleed"
-                fontSize={2}
-              />
-            }
-            id="menu-button-resources"
-            menu={
-              <StyledMenu>
-                <ResourcesMenuItems error={error} isLoading={isLoading} value={value} />
-              </StyledMenu>
-            }
-            popover={{constrainSize: true, placement: 'bottom', portal: true, scheme}}
-            onClose={handleOnClose}
-            onOpen={handleOnOpen}
-          />
-        </div>
-      </Tooltip>
-    </Flex>
+    <MenuButton
+      button={
+        <Button
+          aria-label={t('help-resources.title')}
+          icon={InfoOutlineIcon}
+          mode="bleed"
+          tooltipProps={{content: t('help-resources.title')}}
+        />
+      }
+      id="menu-button-resources"
+      menu={
+        <StyledMenu>
+          <ResourcesMenuItems error={error} isLoading={isLoading} value={value} />
+        </StyledMenu>
+      }
+      popover={{constrainSize: true}}
+    />
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
index 8a5294cc48b..85d0f4b4254 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
@@ -1,6 +1,8 @@
-import {Box, Card, Flex, Label, MenuDivider, MenuItem, Spinner, Text} from '@sanity/ui'
+import {Box, MenuDivider, Text} from '@sanity/ui'
 import React from 'react'
 import {SANITY_VERSION} from '../../../../version'
+import {MenuItem} from '../../../../../ui-components'
+import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useTranslation} from '../../../../i18n'
 import {ResourcesResponse, Section} from './helper-functions/types'
 
@@ -16,11 +18,7 @@ export function ResourcesMenuItems({error, isLoading, value}: ResourcesMenuItemP
   const {t} = useTranslation()
 
   if (isLoading) {
-    return (
-      <Flex align="center" justify="center" padding={3}>
-        <Spinner />
-      </Flex>
-    )
+    return <LoadingBlock showText />
   }
 
   const fallbackLinks = (
@@ -28,26 +26,20 @@ export function ResourcesMenuItems({error, isLoading, value}: ResourcesMenuItemP
       <MenuItem
         as="a"
         text={t('help-resources.action.join-our-community')}
-        size={0}
         href="https://www.sanity.io/exchange/community"
         target="_blank"
-        muted={false}
       />
       <MenuItem
         as="a"
         text={t('help-resources.action.help-and-support')}
-        size={0}
         href="https://www.sanity.io/contact/support"
         target="_blank"
-        muted={false}
       />
       <MenuItem
         as="a"
         text={t('help-resources.action.contact-sales')}
-        size={0}
         href="https://www.sanity.io/contact/sales?ref=studio"
         target="_blank"
-        muted={false}
       />
       <MenuDivider />
     </>
@@ -86,13 +78,6 @@ export function ResourcesMenuItems({error, isLoading, value}: ResourcesMenuItemP
 function SubSection({subSection}: {subSection: Section}) {
   return (
     <>
-      {subSection.sectionTitle && (
-        <Card padding={2} paddingTop={3} marginLeft={1}>
-          <Label muted size={1}>
-            {subSection.sectionTitle}
-          </Label>
-        </Card>
-      )}
       {subSection?.items?.map((item) => {
         if (!item || !item.title) return null
         switch (item._type) {
@@ -104,7 +89,6 @@ function SubSection({subSection}: {subSection: Section}) {
                 tone="default"
                 key={item._key}
                 text={item.title}
-                size={0}
                 href={item.url}
                 target="_blank"
               />
@@ -112,9 +96,7 @@ function SubSection({subSection}: {subSection: Section}) {
           case 'internalAction': // TODO: Add support for internal actions (MVI-2)
             if (!item.type) return null
             return (
-              item.type === 'show-welcome-modal' && (
-                <MenuItem key={item._key} text={item.title} size={0} />
-              )
+              item.type === 'show-welcome-modal' && <MenuItem key={item._key} text={item.title} />
             )
 
           default:
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/helper-functions/types.ts b/packages/sanity/src/core/studio/components/navbar/resources/helper-functions/types.ts
index 5562774acdf..e56e7c99da0 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/helper-functions/types.ts
+++ b/packages/sanity/src/core/studio/components/navbar/resources/helper-functions/types.ts
@@ -30,6 +30,8 @@ interface Resource {
 
 export interface Section {
   _key: string
+  /* @todo Update with the correct version when released  */
+  /** @deprecated No longer displayed in Sanity Studio 3.xx.x */
   sectionTitle?: string
   items?: (InternalAction | ExternalLink)[]
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
new file mode 100644
index 00000000000..e96bd596923
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx
@@ -0,0 +1,35 @@
+import {SearchIcon} from '@sanity/icons'
+import React, {forwardRef} from 'react'
+import {useTranslation} from 'react-i18next'
+import {Button} from '../../../../../ui-components'
+import {GLOBAL_SEARCH_KEY, GLOBAL_SEARCH_KEY_MODIFIER} from './constants'
+
+interface SearchButtonProps {
+  onClick: () => void
+}
+
+/**
+ * @internal
+ */
+export const SearchButton = forwardRef(function SearchButton(
+  {onClick}: SearchButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {t} = useTranslation()
+
+  return (
+    <Button
+      aria-label={t('search.action-open-aria-label')}
+      data-testid="studio-search"
+      icon={SearchIcon}
+      tooltipProps={{
+        content: t('search.button.tooltip'),
+        hotkeys: [GLOBAL_SEARCH_KEY_MODIFIER, GLOBAL_SEARCH_KEY.toUpperCase()],
+        portal: true,
+      }}
+      onClick={onClick}
+      mode="bleed"
+      ref={ref}
+    />
+  )
+})
diff --git a/packages/sanity/src/core/studio/components/navbar/search/SearchDialog.tsx b/packages/sanity/src/core/studio/components/navbar/search/SearchDialog.tsx
index 93fabe9d9a7..ed29468d15f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/SearchDialog.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/SearchDialog.tsx
@@ -55,33 +55,35 @@ export function SearchDialog({onClose, onOpen, open}: SearchDialogProps) {
 
   return (
     <SearchWrapper hasValidTerms={hasValidTerms} onClose={onClose} onOpen={onOpen} open={open}>
-      <Portal>
-        <FocusLock autoFocus={!supportsTouch} returnFocus>
-          <SearchDialogBox>
-            <InnerCard display="flex" height="fill" scheme={scheme} tone="default">
-              <SearchHeader
-                ariaInputLabel={
-                  hasValidTerms
-                    ? t('search.search-results-aria-label')
-                    : t('search.recent-searches-aria-label')
-                }
-                onClose={onClose}
-                ref={setInputElement}
-              />
-              {filtersVisible && (
-                <Card borderTop flex="none">
-                  <Filters />
-                </Card>
-              )}
-              {hasValidTerms ? (
-                <SearchResults inputElement={inputElement} />
-              ) : (
-                <RecentSearches inputElement={inputElement} />
-              )}
-            </InnerCard>
-          </SearchDialogBox>
-        </FocusLock>
-      </Portal>
+      {open && (
+        <Portal>
+          <FocusLock autoFocus={!supportsTouch} returnFocus>
+            <SearchDialogBox>
+              <InnerCard display="flex" height="fill" scheme={scheme} tone="default">
+                <SearchHeader
+                  ariaInputLabel={
+                    hasValidTerms
+                      ? t('search.search-results-aria-label')
+                      : t('search.recent-searches-aria-label')
+                  }
+                  onClose={onClose}
+                  ref={setInputElement}
+                />
+                {filtersVisible && (
+                  <Card borderTop flex="none">
+                    <Filters />
+                  </Card>
+                )}
+                {hasValidTerms ? (
+                  <SearchResults inputElement={inputElement} />
+                ) : (
+                  <RecentSearches inputElement={inputElement} />
+                )}
+              </InnerCard>
+            </SearchDialogBox>
+          </FocusLock>
+        </Portal>
+      )}
     </SearchWrapper>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/SearchField.tsx b/packages/sanity/src/core/studio/components/navbar/search/SearchField.tsx
deleted file mode 100644
index b999b016062..00000000000
--- a/packages/sanity/src/core/studio/components/navbar/search/SearchField.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import {PlaceholderSearchInput} from './components/PlaceholderSearchInput'
-import {PopoverPosition, SearchPopover} from './components/SearchPopover'
-import {POPOVER_INPUT_PADDING, POPOVER_MAX_WIDTH} from './constants'
-
-/**
- * @internal
- */
-export function SearchField() {
-  const [placeholderElement, setPlaceholderElement] = useState<HTMLInputElement | null>(null)
-  const [open, setOpen] = useState(false)
-
-  const handleClose = useCallback(() => setOpen(false), [])
-  const handleOpen = useCallback(() => setOpen(true), [])
-
-  const popoverPosition = usePopoverPosition(placeholderElement)
-
-  return (
-    <>
-      <PlaceholderSearchInput onOpen={handleOpen} ref={setPlaceholderElement} />
-      {popoverPosition && (
-        <SearchPopover
-          onClose={handleClose}
-          onOpen={handleOpen}
-          open={open}
-          position={popoverPosition}
-        />
-      )}
-    </>
-  )
-}
-
-function calcDialogPosition(element: HTMLElement): PopoverPosition {
-  const placeholderRect = element.getBoundingClientRect()
-
-  // Offset positioning to account for dialog padding. This should ensure that our popover search input
-  // sits directly over the top of the existing placeholder input.
-  return {
-    x:
-      window.innerWidth - placeholderRect.x > POPOVER_MAX_WIDTH
-        ? placeholderRect.x - POPOVER_INPUT_PADDING
-        : null,
-    y: placeholderRect.y - POPOVER_INPUT_PADDING,
-  }
-}
-
-function usePopoverPosition(element: HTMLElement | null) {
-  const [popoverPosition, setPopoverPosition] = useState<PopoverPosition | null>(null)
-
-  /**
-   * Update popover position on window resize based off current placeholder input
-   */
-  const handleWindowResize = useCallback(() => {
-    if (element) {
-      setPopoverPosition(calcDialogPosition(element))
-    }
-  }, [element])
-
-  useEffect(() => {
-    if (element) {
-      setPopoverPosition(calcDialogPosition(element))
-    }
-  }, [element])
-
-  useEffect(() => {
-    window.addEventListener('resize', handleWindowResize)
-    return () => window.removeEventListener('resize', handleWindowResize)
-  }, [handleWindowResize])
-
-  return popoverPosition
-}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateDirectionStory.tsx b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateDirectionStory.tsx
index 06ad176f3ce..7c9bf99c2d3 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateDirectionStory.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateDirectionStory.tsx
@@ -36,7 +36,7 @@ export default function CommonDateDirectionStory() {
       </Card>
       <Card margin={3} padding={3} shadow={1} tone="primary">
         <Inline space={1}>
-          <Text muted size={1} weight="semibold">
+          <Text muted size={1} weight="medium">
             Value:
           </Text>
           <Text muted size={1}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateEqualStory.tsx b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateEqualStory.tsx
index 1704a2efe47..eb5685fd73f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateEqualStory.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateEqualStory.tsx
@@ -21,7 +21,7 @@ export default function CommonDateEqualStory() {
       </Card>
       <Card margin={3} padding={3} shadow={1} tone="primary">
         <Inline space={1}>
-          <Text muted size={1} weight="semibold">
+          <Text muted size={1} weight="medium">
             Value:
           </Text>
           <Text muted size={1}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateRangeStory.tsx b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateRangeStory.tsx
index f6a6c7ff13e..c5ca3f39a51 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateRangeStory.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/CommonDateRangeStory.tsx
@@ -22,7 +22,7 @@ export default function CommonDateRangeStory() {
       <Card margin={3} padding={3} shadow={1} tone="primary">
         <Stack space={3}>
           <Inline space={1}>
-            <Text muted size={1} weight="semibold">
+            <Text muted size={1} weight="medium">
               Start:
             </Text>
             <Text muted size={1}>
@@ -30,7 +30,7 @@ export default function CommonDateRangeStory() {
             </Text>
           </Inline>
           <Inline space={1}>
-            <Text muted size={1} weight="semibold">
+            <Text muted size={1} weight="medium">
               End:
             </Text>
             <Text muted size={1}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/SearchPopoverStory.tsx b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/SearchPopoverStory.tsx
index 086f14a1a46..93ff5434de8 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/__workshop__/SearchPopoverStory.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/__workshop__/SearchPopoverStory.tsx
@@ -14,7 +14,6 @@ export default function SearchFieldStory() {
           onClose={noop}
           onOpen={noop}
           open
-          position={{x: 0, y: 0}}
         />
       </SearchProvider>
     </LayerProvider>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
index 1edd708f1a6..bf1baa9f39e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/NoResults.tsx
@@ -8,7 +8,7 @@ export function NoResults() {
   return (
     <Container width={0}>
       <Stack aria-live="assertive" space={4} paddingX={4} paddingY={5}>
-        <Text align="center" muted weight="semibold">
+        <Text align="center" muted size={1} weight="medium">
           {t('search.no-results-title')}
         </Text>
         <Text align="center" muted size={1}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchError.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchError.tsx
index 1dc8b8784c1..8914145924c 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchError.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchError.tsx
@@ -22,7 +22,7 @@ export function SearchError() {
           <WarningOutlineIcon />
         </TextWithTone>
       </Box>
-      <TextWithTone size={2} tone="critical" weight="semibold">
+      <TextWithTone size={2} tone="critical" weight="medium">
         {t('search.error.unspecified-error-title')}
       </TextWithTone>
       <TextWithTone size={1} tone="critical">
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
index 150b33ae9c9..f5c9bc80a7a 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchHeader.tsx
@@ -1,10 +1,12 @@
 import {ArrowLeftIcon, ControlsIcon, SearchIcon, SpinnerIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Theme} from '@sanity/ui'
+import {Box, Card, Flex} from '@sanity/ui'
 import React, {forwardRef, useCallback, useEffect, useRef} from 'react'
 import styled, {keyframes} from 'styled-components'
+import {Button} from '../../../../../../ui-components'
+import {StatusButton} from '../../../../../components'
+import {useTranslation} from '../../../../../i18n'
 import {useSearchState} from '../contexts/search/useSearchState'
 import {CustomTextInput} from './common/CustomTextInput'
-import {useTranslation} from '../../../../../i18n'
 
 const rotate = keyframes`
   from {
@@ -19,20 +21,11 @@ const AnimatedSpinnerIcon = styled(SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `
 
-const FilterBox = styled(Box)`
+const FilterDiv = styled.div`
+  line-height: 0;
   position: relative;
 `
 
-const NotificationBadge = styled.div`
-  background: ${({theme}: {theme: Theme}) => theme.sanity.color.selectable?.primary.enabled.fg};
-  border-radius: 100%;
-  height: 6px;
-  position: absolute;
-  right: 2px;
-  top: 2px;
-  width: 6px;
-`
-
 interface SearchHeaderProps {
   ariaInputLabel: string
   onClose?: () => void
@@ -89,32 +82,33 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
       <Flex align="center" flex={1} gap={fullscreen ? 2 : 1} padding={fullscreen ? 2 : 1}>
         {/* (Fullscreen) Close button */}
         {fullscreen && (
-          <Card>
-            <Button
-              aria-label={t('search.action.close-search-aria-label')}
-              icon={ArrowLeftIcon}
-              mode="bleed"
-              onClick={onClose}
-            />
-          </Card>
+          <Button
+            aria-label={t('search.action.close-search-aria-label')}
+            icon={ArrowLeftIcon}
+            mode="bleed"
+            onClick={onClose}
+            size="large"
+            tooltipProps={{content: t('search.action.close-search-aria-label')}}
+          />
         )}
 
         {/* Search field */}
         <Box flex={1}>
           <CustomTextInput
+            __unstable_disableFocusRing
+            $background={fullscreen}
+            $smallClearButton={fullscreen}
             aria-label={ariaInputLabel}
             autoComplete="off"
-            background={fullscreen}
             border={false}
             clearButton={!!query}
-            fontSize={2}
+            fontSize={[2, 2, 1]}
             icon={loading ? AnimatedSpinnerIcon : SearchIcon}
             onChange={handleQueryChange}
             onClear={handleQueryClear}
             placeholder={t('search.placeholder')}
-            radius={fullscreen ? 2 : 1}
+            radius={2}
             ref={ref}
-            smallClearButton={fullscreen}
             spellCheck={false}
             value={query}
           />
@@ -122,22 +116,25 @@ export const SearchHeader = forwardRef<HTMLInputElement, SearchHeaderProps>(func
 
         {/* Filter toggle */}
         {fullscreen && (
-          <FilterBox>
-            <Button
+          <FilterDiv>
+            <StatusButton
               aria-expanded={filtersVisible}
               aria-label={t('search.action.toggle-filters-aria-label', {
                 context: filtersVisible ? 'hide' : 'show',
               })}
-              height="fill"
               icon={ControlsIcon}
               mode="bleed"
               onClick={handleFiltersToggle}
-              padding={3}
               selected={filtersVisible}
-              tone="default"
+              size="large"
+              tone={notificationBadgeVisible ? 'primary' : undefined}
+              tooltipProps={{
+                content: t('search.action.toggle-filters-label', {
+                  context: filtersVisible ? 'hide' : 'show',
+                }),
+              }}
             />
-            {notificationBadgeVisible && <NotificationBadge />}
-          </FilterBox>
+          </FilterDiv>
         )}
       </Flex>
     </Card>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
index b296bdfa565..861bd141e38 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SearchPopover.tsx
@@ -1,9 +1,9 @@
-import {Card, Portal, Theme, useClickOutside, useLayer} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {Card, Portal, useClickOutside, useLayer} from '@sanity/ui'
+import {AnimatePresence, motion, Transition, Variants} from 'framer-motion'
+import React, {useCallback, useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
-import styled, {css} from 'styled-components'
+import styled from 'styled-components'
 import {supportsTouch} from '../../../../../util'
-import {useColorScheme} from '../../../../colorScheme'
 import {
   POPOVER_INPUT_PADDING,
   POPOVER_MAX_HEIGHT,
@@ -19,20 +19,32 @@ import {RecentSearches} from './recentSearches/RecentSearches'
 import {SearchHeader} from './SearchHeader'
 import {SearchResults} from './searchResults/SearchResults'
 
-export type PopoverPosition = {
-  x: number | null
-  y: number
-}
 export interface SearchPopoverProps {
   disableFocusLock?: boolean
   onClose: () => void
   onOpen: () => void
   open: boolean
-  position: PopoverPosition
 }
 
-const Overlay = styled.div`
-  background-color: ${({theme}: {theme: Theme}) => theme.sanity.color.base.shadow.ambient};
+const ANIMATION_TRANSITION: Transition = {
+  duration: 0.4,
+  type: 'spring',
+}
+
+const CARD_VARIANTS: Variants = {
+  open: {opacity: 1, scale: 1, x: '-50%'},
+  closed: {opacity: 0, scale: 0.99, x: '-50%'},
+}
+
+const OVERLAY_VARIANTS: Variants = {
+  open: {opacity: 1},
+  closed: {opacity: 0},
+}
+
+const Y_POSITION = 12 // vh
+
+const MotionOverlay = styled(motion(Card))`
+  background-color: var(--card-backdrop-color);
   bottom: 0;
   left: 0;
   position: absolute;
@@ -40,37 +52,25 @@ const Overlay = styled.div`
   top: 0;
 `
 
-const SearchPopoverCard = styled(Card)<{$position: PopoverPosition}>`
-  ${({$position}) =>
-    $position.x
-      ? css`
-          left: ${$position.x}px;
-        `
-      : css`
-          left: 50%;
-          transform: translateX(-50%);
-        `}
+const SearchMotionCard = styled(motion(Card))`
   display: flex !important;
   flex-direction: column;
-  max-height: ${({$position}) =>
-    `min(calc(100vh - ${$position.y}px - ${POPOVER_INPUT_PADDING}px), ${POPOVER_MAX_HEIGHT}px)`};
+  left: 50%;
+  max-height: min(
+    calc(100vh - ${Y_POSITION}vh - ${POPOVER_INPUT_PADDING}px),
+    ${POPOVER_MAX_HEIGHT}px
+  );
   position: absolute;
-  top: ${({$position}) => $position.y}px;
+  top: ${Y_POSITION}vh;
   width: min(calc(100vw - ${POPOVER_INPUT_PADDING * 2}px), ${POPOVER_MAX_WIDTH}px);
 `
 
-export function SearchPopover({
-  disableFocusLock,
-  onClose,
-  onOpen,
-  open,
-  position,
-}: SearchPopoverProps) {
-  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+export function SearchPopover({disableFocusLock, onClose, onOpen, open}: SearchPopoverProps) {
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
+  const popoverElement = useRef<HTMLElement | null>(null)
+
   const {isTopLayer, zIndex} = useLayer()
-  const {scheme} = useColorScheme()
   const {t} = useTranslation()
 
   const {
@@ -89,45 +89,59 @@ export function SearchPopover({
     }
   }, [isTopLayer, onSearchClose, open])
 
-  useClickOutside(handleClickOutside, [popoverElement])
+  useClickOutside(handleClickOutside, [popoverElement.current])
 
   return (
     <SearchWrapper hasValidTerms={hasValidTerms} onClose={onClose} onOpen={onOpen} open={open}>
-      <Portal>
-        <FocusLock autoFocus={!supportsTouch} disabled={disableFocusLock} returnFocus>
-          <Overlay style={{zIndex}} />
-
-          <SearchPopoverCard
-            $position={position}
-            overflow="hidden"
-            radius={POPOVER_RADIUS}
-            ref={setPopoverElement}
-            scheme={scheme}
-            shadow={2}
-            style={{zIndex}}
-          >
-            <SearchHeader
-              ariaInputLabel={
-                hasValidTerms
-                  ? t('search.search-results-aria-label')
-                  : t('search.recent-searches-aria-label')
-              }
-              onClose={onClose}
-              ref={setInputElement}
-            />
-            {filtersVisible && (
-              <Card borderTop flex="none">
-                <Filters />
-              </Card>
-            )}
-            {hasValidTerms ? (
-              <SearchResults inputElement={inputElement} />
-            ) : (
-              <RecentSearches inputElement={inputElement} />
-            )}
-          </SearchPopoverCard>
-        </FocusLock>
-      </Portal>
+      <AnimatePresence>
+        {open && (
+          <Portal>
+            <FocusLock autoFocus={!supportsTouch} disabled={disableFocusLock} returnFocus>
+              <MotionOverlay
+                animate="open"
+                exit="closed"
+                initial="closed"
+                style={{zIndex}}
+                transition={ANIMATION_TRANSITION}
+                variants={OVERLAY_VARIANTS}
+              />
+
+              <SearchMotionCard
+                animate="open"
+                exit="closed"
+                initial="closed"
+                overflow="hidden"
+                radius={POPOVER_RADIUS}
+                ref={popoverElement}
+                shadow={2}
+                style={{zIndex}}
+                transition={ANIMATION_TRANSITION}
+                variants={CARD_VARIANTS}
+              >
+                <SearchHeader
+                  ariaInputLabel={
+                    hasValidTerms
+                      ? t('search.search-results-aria-label')
+                      : t('search.recent-searches-aria-label')
+                  }
+                  onClose={onClose}
+                  ref={setInputElement}
+                />
+                {filtersVisible && (
+                  <Card borderTop flex="none">
+                    <Filters />
+                  </Card>
+                )}
+                {hasValidTerms ? (
+                  <SearchResults inputElement={inputElement} />
+                ) : (
+                  <RecentSearches inputElement={inputElement} />
+                )}
+              </SearchMotionCard>
+            </FocusLock>
+          </Portal>
+        )}
+      </AnimatePresence>
     </SearchWrapper>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
index eb4f431d3cd..482655b5ba4 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
@@ -1,21 +1,11 @@
 import {SortIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Inline,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
+import {Card, Flex, Menu, MenuDivider} from '@sanity/ui'
 import isEqual from 'lodash/isEqual'
 import React, {useCallback, useId, useMemo} from 'react'
 import styled from 'styled-components'
 import {useTranslation} from '../../../../../i18n'
 import {ORDERINGS} from '../definitions/orderings'
+import {Button, MenuButton, MenuItem} from '../../../../../../ui-components'
 import {useSearchState} from '../contexts/search/useSearchState'
 import type {SearchOrdering} from '../types'
 
@@ -55,13 +45,12 @@ function CustomMenuItem({ordering}: {ordering: SearchOrdering}) {
   const isSelected = useMemo(() => isEqual(currentOrdering, ordering), [currentOrdering, ordering])
 
   return (
-    <MenuItem onClick={handleClick} padding={3} pressed={isSelected} tone="default">
-      <Flex align="center" justify="space-between" paddingRight={2}>
-        <Text size={1} weight="medium">
-          {t(ordering.titleKey)}
-        </Text>
-      </Flex>
-    </MenuItem>
+    <MenuItem
+      onClick={handleClick}
+      pressed={isSelected}
+      tone="default"
+      text={t(ordering.titleKey)}
+    />
   )
 }
 
@@ -85,22 +74,7 @@ export function SortMenu() {
     <Card borderBottom>
       <SortMenuContentFlex align="center" flex={1} padding={2}>
         <MenuButton
-          button={
-            <Button mode="bleed" padding={2}>
-              <Flex align="center" gap={1} justify="space-between">
-                <Box marginRight={1}>
-                  <Text size={1}>
-                    <SortIcon />
-                  </Text>
-                </Box>
-                <Inline space={2}>
-                  <Text size={1} weight="medium">
-                    {t(currentMenuItem.titleKey)}
-                  </Text>
-                </Inline>
-              </Flex>
-            </Button>
-          }
+          button={<Button mode="bleed" icon={SortIcon} text={t(currentMenuItem.titleKey)} />}
           id={menuButtonId || ''}
           menu={
             <Menu>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/CustomTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/CustomTextInput.tsx
index 85dd8ce7daf..73c4c384af9 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/common/CustomTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/CustomTextInput.tsx
@@ -3,16 +3,16 @@ import React, {ComponentProps, forwardRef} from 'react'
 import {CustomTextInputBox} from './CustomTextInputBox'
 
 interface CustomTextInputProps extends ComponentProps<typeof TextInput> {
-  background?: boolean
-  smallClearButton?: boolean
+  $background?: boolean
+  $smallClearButton?: boolean
 }
 
 export const CustomTextInput = forwardRef<HTMLInputElement, CustomTextInputProps>(
   function CustomTextInput(props, ref) {
-    const {background, smallClearButton, ...rest} = props
+    const {$background, $smallClearButton, ...rest} = props
 
     return (
-      <CustomTextInputBox $background={background} $smallClearButton={smallClearButton}>
+      <CustomTextInputBox $background={$background} $smallClearButton={$smallClearButton}>
         <TextInput {...rest} ref={ref} />
       </CustomTextInputBox>
     )
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx
index 621fbf6f7b2..8f37d6449cf 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx
@@ -35,7 +35,7 @@ export function FilterLabel({filter, fontSize = 1, showContent = true}: FilterLa
     () => ({
       Field: () => (
         <CustomBox $flexShrink={fullscreen ? 1 : 0}>
-          <TextWithTone tone="default" size={fontSize} textOverflow="ellipsis" weight="semibold">
+          <TextWithTone tone="default" size={fontSize} textOverflow="ellipsis" weight="medium">
             <FilterTitle filter={filter} maxLength={fullscreen ? 25 : 40} />
           </TextWithTone>
         </CustomBox>
@@ -51,7 +51,7 @@ export function FilterLabel({filter, fontSize = 1, showContent = true}: FilterLa
       Value: ({children}) =>
         showContent ? (
           <CustomBox $flexShrink={1}>
-            <TextWithTone tone="default" size={fontSize} textOverflow="ellipsis" weight="semibold">
+            <TextWithTone tone="default" size={fontSize} textOverflow="ellipsis" weight="medium">
               {ButtonValue ? <ButtonValue value={filterValue} /> : children}
             </TextWithTone>
           </CustomBox>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
index 2a4e930d70a..c15251f84ef 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/SearchWrapper.tsx
@@ -74,9 +74,5 @@ export function SearchWrapper({
     }
   }, [])
 
-  if (!open) {
-    return null
-  }
-
-  return <div>{children}</div>
+  return children
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
index 59c29f9230e..1eec4b5dd56 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/Filters.tsx
@@ -1,8 +1,9 @@
-import {Button, Flex} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import React, {useCallback, useEffect, useRef} from 'react'
 import {DEBUG_MODE} from '../../constants'
 import {useSearchState} from '../../contexts/search/useSearchState'
 import {getFilterKey} from '../../utils/filterUtils'
+import {Button} from '../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../i18n'
 import {AddFilterButton} from './addFilter/AddFilterButton'
 import {DebugDocumentTypesNarrowed} from './debug/_DebugDocumentTypesNarrowed'
@@ -39,10 +40,9 @@ export function Filters() {
 
   const ClearFiltersButton = () => (
     <Button
-      fontSize={1}
       mode="bleed"
       onClick={handleClear}
-      padding={fullscreen ? 3 : 2}
+      size={fullscreen ? 'large' : 'default'}
       text={t('search.action.clear-filters')}
       tone="critical"
     />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
index 0041bdf79ab..81ef7d180cd 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
@@ -1,9 +1,9 @@
 import {AddIcon} from '@sanity/icons'
-import {Button, Popover} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
+import {Button, Popover} from '../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../i18n'
 import {AddFilterPopoverContent} from './AddFilterPopoverContent'
 
@@ -33,14 +33,12 @@ export function AddFilterButton() {
       portal
     >
       <Button
-        fontSize={1}
         icon={AddIcon}
         mode="bleed"
         onClick={handleOpen}
-        padding={fullscreen ? 3 : 2}
+        size={fullscreen ? 'large' : 'default'}
         ref={setButtonElement}
         selected={open}
-        space={2}
         text={t('search.action.add-filter')}
       />
     </Popover>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
index 40b2a764ad2..b484a0ffac4 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
@@ -1,6 +1,8 @@
-import {Card, Code, Flex, Inline, Label, Stack, Text, Tooltip} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {startCase, uniq} from 'lodash'
 import React, {ReactElement, useMemo} from 'react'
+import {Tooltip} from '../../../../../../../../../ui-components'
+import {TextWithTone} from '../../../../../../../../components'
 import {useSchema} from '../../../../../../../../hooks'
 import {isNonNullable, truncateString} from '../../../../../../../../util'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
@@ -77,28 +79,31 @@ export function FilterTooltip({
     <Tooltip
       content={
         <Card tone="default" radius={2} style={{maxWidth: '250px'}}>
-          <Stack padding={3} space={4}>
+          <Stack space={4}>
             {/* Field name */}
             {fieldDefinition && (
-              <Stack space={2}>
-                <Label muted size={0}>
+              <Stack space={3}>
+                <Text muted size={1} weight="medium">
                   {t('search.filter-field-tooltip-name')}
-                </Label>
-                <Inline>
-                  <Card tone="caution" padding={1} radius={2}>
-                    <Code size={0}>{fieldDefinition?.name}</Code>
-                  </Card>
-                </Inline>
+                </Text>
+                <TextWithTone
+                  size={1}
+                  style={{fontFamily: 'monospace'}}
+                  tone="primary"
+                  textOverflow="ellipsis"
+                >
+                  {fieldDefinition?.name}
+                </TextWithTone>
               </Stack>
             )}
 
             {/* Field description */}
             {fieldDefinitionDescription && (
               <Stack space={3}>
-                <Label muted size={0}>
+                <Text muted size={1} weight="medium">
                   {t('search.filter-field-tooltip-description')}
-                </Label>
-                <Text muted size={0}>
+                </Text>
+                <Text muted size={1}>
                   {truncateString(fieldDefinitionDescription, 256)}
                 </Text>
               </Stack>
@@ -106,7 +111,7 @@ export function FilterTooltip({
 
             {/* Filter description */}
             {filterDefinition?.description && (
-              <Text muted size={0}>
+              <Text muted size={1}>
                 {truncateString(filterDefinition.description, 256)}
               </Text>
             )}
@@ -115,16 +120,16 @@ export function FilterTooltip({
             {!documentTypesNarrowed.length && fieldDefinitionDocumentTypeTitles.length > 0 && (
               <Stack space={2}>
                 <Flex align="center" gap={1}>
-                  <Label muted size={0}>
+                  <Text muted size={1} weight="medium">
                     {t('search.filter-field-tooltip-used-in-document-types')}
-                  </Label>
+                  </Text>
                   <Card padding={1} radius={2} tone="transparent">
-                    <Text size={0} muted>
+                    <Text size={1} muted>
                       {fieldDefinitionDocumentTypeTitles.length}
                     </Text>
                   </Card>
                 </Flex>
-                <Text size={0} weight="regular" muted>
+                <Text size={1} weight="regular" muted>
                   {fieldDefinitionDocumentTypeTitles.slice(0, MAX_VISIBLE_TYPES).join(', ')}
                   {fieldDefinitionDocumentTypeTitles?.length > MAX_VISIBLE_TYPES
                     ? ` +${fieldDefinitionDocumentTypeTitles.length - MAX_VISIBLE_TYPES} more`
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
index dea885d2502..b2a4294c0c7 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
@@ -1,5 +1,11 @@
-import {Box, Button, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+import {
+  Box,
+  ResponsiveMarginProps,
+  ResponsivePaddingProps,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children.
+} from '@sanity/ui'
+import React, {useCallback} from 'react'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
 import type {FilterMenuItemFilter} from '../../../../types'
 import {getFilterKey} from '../../../../utils/filterUtils'
@@ -16,8 +22,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
   onClose,
   ...rest
 }: FilterMenuItemProps) {
-  const [tooltipVisible, setTooltipVisible] = useState(false)
-
   const {
     dispatch,
     state: {filters},
@@ -30,20 +34,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
 
   const isAlreadyActive = !!filters.find((f) => getFilterKey(f) === getFilterKey(item.filter))
 
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
-
-  const handleMouseEnter = useCallback(() => {
-    timeoutRef.current = setTimeout(() => setTooltipVisible(true), 500)
-  }, [])
-  const handleMouseLeave = useCallback(() => {
-    setTooltipVisible(false)
-    clearTimeout(timeoutRef.current)
-  }, [])
-
-  useEffect(() => {
-    return () => clearTimeout(timeoutRef.current)
-  }, [])
-
   // Only enable tooltips if an associated field definition exists, or the filter has a valid description
   const tooltipEnabled = !!(item.fieldDefinition || item.filterDefinition.description)
 
@@ -55,8 +45,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
         justify="flex-start"
         mode="bleed"
         onClick={isAlreadyActive ? undefined : handleClick}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         padding={0}
         style={{position: 'relative', whiteSpace: 'normal', width: '100%'}}
         tabIndex={-1}
@@ -65,7 +53,7 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
         <FilterTooltip
           fieldDefinition={item.fieldDefinition}
           filterDefinition={item.filterDefinition}
-          visible={tooltipEnabled && tooltipVisible}
+          visible={tooltipEnabled}
         >
           <Box padding={3}>
             <FilterDetails filter={item.filter} />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemHeader.tsx
index c341ab678ab..6bcda11fdd1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemHeader.tsx
@@ -1,4 +1,4 @@
-import {Box, Card, Label} from '@sanity/ui'
+import {Box, Card, Text} from '@sanity/ui'
 import React from 'react'
 import type {FilterMenuItemHeader} from '../../../../types'
 
@@ -9,10 +9,10 @@ interface MenuItemHeaderFields {
 export const MenuItemHeader = React.memo(function MenuItemHeader({item}: MenuItemHeaderFields) {
   return (
     <Box paddingTop={1}>
-      <Card borderBottom padding={3} tone={item?.tone}>
-        <Label muted size={0} textOverflow="ellipsis">
+      <Card borderBottom paddingX={2} paddingY={3} tone={item?.tone}>
+        <Text muted size={1} textOverflow="ellipsis" weight="medium">
           {item.title}
-        </Label>
+        </Text>
       </Card>
     </Box>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterDetails.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterDetails.tsx
index 43aa5e50e09..b438253c315 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterDetails.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterDetails.tsx
@@ -9,21 +9,20 @@ import {FilterIcon} from './FilterIcon'
 
 interface FilterDetailsProps {
   filter: SearchFilter
-  small?: boolean
 }
 
-export function FilterDetails({filter, small = true}: FilterDetailsProps) {
+export function FilterDetails({filter}: FilterDetailsProps) {
   const {
     state: {definitions},
   } = useSearchState()
   const fieldDefinition = getFieldFromFilter(definitions.fields, filter)
 
   return (
-    <Stack space={small ? 2 : 3}>
+    <Stack space={2}>
       {/* Path */}
       {fieldDefinition?.titlePath && fieldDefinition.titlePath?.length > 1 && (
         <Box marginLeft={4}>
-          <Text muted size={small ? 0 : 1}>
+          <Text muted size={0}>
             {fieldDefinition.titlePath.slice(0, -1).map((pathTitle, index) => {
               return (
                 <React.Fragment
@@ -51,11 +50,11 @@ export function FilterDetails({filter, small = true}: FilterDetailsProps) {
 
       <Flex align="flex-start" gap={3}>
         <Box style={{flexShrink: 0}}>
-          <Text size={small ? 1 : 2}>
+          <Text size={1}>
             <FilterIcon filter={filter} />
           </Text>
         </Box>
-        <Text size={small ? 1 : 2} weight="medium">
+        <Text size={1} weight="medium">
           <FilterTitle filter={filter} />
         </Text>
       </Flex>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterPopoverContentHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterPopoverContentHeader.tsx
index e972239d6e9..f5dcf36981b 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterPopoverContentHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/common/FilterPopoverContentHeader.tsx
@@ -35,6 +35,8 @@ export const FilterPopoverContentHeader = forwardRef<
     <SearchHeaderBox>
       <SearchHeaderContentFlex align="center" flex={1} padding={1}>
         <CustomTextInput
+          __unstable_disableFocusRing
+          $smallClearButton
           aria-label={ariaInputLabel}
           autoComplete="off"
           border={false}
@@ -46,7 +48,6 @@ export const FilterPopoverContentHeader = forwardRef<
           onClear={onClear}
           placeholder={t('search.filter-placeholder')}
           ref={ref}
-          smallClearButton
           spellCheck={false}
           radius={2}
           value={typeFilter}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypes.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypes.tsx
index 3b3bde4a6e6..f405242a677 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypes.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypes.tsx
@@ -19,7 +19,7 @@ export function DebugDocumentTypes({filter}: DebugDocumentTypesProps) {
   return (
     <Card borderTop padding={3} tone="transparent">
       <Stack space={2}>
-        <Code size={0} weight="semibold">
+        <Code size={0} weight="medium">
           Document types
         </Code>
         <Code muted size={0} style={{whiteSpace: 'normal'}}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypesNarrowed.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypesNarrowed.tsx
index 197c6f4fc8a..9d9fdd36774 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypesNarrowed.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugDocumentTypesNarrowed.tsx
@@ -10,7 +10,7 @@ export function DebugDocumentTypesNarrowed() {
   return (
     <Card borderTop padding={4} tone="transparent">
       <Stack space={3}>
-        <Code size={1} weight="semibold">
+        <Code size={1} weight="medium">
           Document types (narrowed)
         </Code>
         <Code muted size={1} style={{whiteSpace: 'normal'}}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterQuery.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterQuery.tsx
index 3f3b9fbf7e9..a0c4fd7fe3f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterQuery.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterQuery.tsx
@@ -16,7 +16,7 @@ export function DebugFilterQuery() {
   return (
     <Card padding={4} tone="transparent">
       <Stack space={3}>
-        <Code size={1} weight="semibold">
+        <Code size={1} weight="medium">
           Filter
         </Code>
         {filter && (
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterValues.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterValues.tsx
index 2586ca69bf9..e832d1895e8 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterValues.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/debug/_DebugFilterValues.tsx
@@ -17,7 +17,7 @@ export function DebugFilterValues({filter}: DebugFilterValuesProps) {
   return (
     <Card borderTop padding={3} tone="transparent">
       <Stack space={2}>
-        <Code size={0} weight="semibold">
+        <Code size={0} weight="medium">
           Filter
         </Code>
         {fieldDefinition?.fieldPath && <Code size={0}>fieldPath: {fieldDefinition.fieldPath}</Code>}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
index 551d759d1cd..9f5997368a5 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesButton.tsx
@@ -1,24 +1,14 @@
-import {SelectIcon} from '@sanity/icons'
-import {Button, Placement, Popover, Theme, useClickOutside} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Placement, useClickOutside} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
-import styled, {css} from 'styled-components'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {documentTypesTruncated} from '../../../utils/documentTypesTruncated'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
+import {Button, Popover} from '../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../i18n'
 import {DocumentTypesPopoverContent} from './DocumentTypesPopoverContent'
 
-const StyledButton = styled(Button)(({theme}: {theme: Theme}) => {
-  const {regular} = theme.sanity.fonts.text.weights
-
-  return css`
-    [data-ui='Text'] {
-      font-weight: ${regular};
-    }
-  `
-})
-
 const FALLBACK_PLACEMENTS: Placement[] = ['top-start', 'bottom-start']
 
 export function DocumentTypesButton() {
@@ -56,15 +46,13 @@ export function DocumentTypesButton() {
       radius={POPOVER_RADIUS}
       ref={setPopoverElement}
     >
-      <StyledButton
-        fontSize={1}
-        iconRight={SelectIcon}
+      <Button
+        iconRight={ChevronDownIcon}
         mode="ghost"
         onClick={handleOpen}
-        padding={fullscreen ? 3 : 2}
+        size={fullscreen ? 'large' : 'default'}
         ref={setButtonElement}
         selected={open}
-        style={{maxWidth: '100%'}}
         text={title}
         tone="default"
       />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
index 3b436340d2d..10dca521ad2 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/DocumentTypesPopoverContent.tsx
@@ -1,5 +1,5 @@
 import {Schema} from '@sanity/types'
-import {Box, Button, Flex, Label, MenuDivider, Stack, Text} from '@sanity/ui'
+import {Box, Flex, MenuDivider, Stack, Text} from '@sanity/ui'
 import {partition} from 'lodash'
 import React, {useCallback, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
@@ -14,6 +14,7 @@ import type {SearchableType} from '../../../../../../../search'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import type {DocumentTypeMenuItem} from '../../../types'
 import {getSelectableOmnisearchTypes} from '../../../utils/selectors'
+import {Button} from '../../../../../../../../ui-components'
 import {FilterPopoverContentHeader} from '../common/FilterPopoverContentHeader'
 import {useTranslation} from '../../../../../../../i18n'
 import {DocumentTypeFilterItem} from './items/DocumentTypeFilterItem'
@@ -92,10 +93,10 @@ export function DocumentTypesPopoverContent() {
     }
     if (item.type === 'header') {
       return (
-        <Box margin={1} paddingBottom={2} paddingTop={3}>
-          <Label muted size={0}>
+        <Box margin={2} padding={1}>
+          <Text muted size={1} weight="medium">
             {item.title}
-          </Label>
+          </Text>
         </Box>
       )
     }
@@ -187,10 +188,8 @@ function ClearButton({
           aria-label={t('search.action.clear-type-filters-aria-label')}
           data-name="type-filter-button"
           disabled={selectedTypes.length === 0}
-          fontSize={1}
           mode="bleed"
           onClick={onClick}
-          padding={3}
           text={t('search.action.clear-type-filters-label')}
           tone="primary"
         />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
index c14e6c0ddef..d91892b2f79 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/documentTypes/items/DocumentTypeFilterItem.tsx
@@ -1,8 +1,9 @@
 import {CheckmarkIcon} from '@sanity/icons'
-import {Box, Button, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
+import {Box, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import type {SearchableType} from '../../../../../../../../search'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
+import {Button} from '../../../../../../../../../ui-components'
 
 interface DocumentTypeFilterItemProps extends ResponsiveMarginProps, ResponsivePaddingProps {
   selected: boolean
@@ -35,13 +36,13 @@ export const DocumentTypeFilterItem = React.memo(function TypeFilterItem({
   return (
     <Box {...rest}>
       <Button
-        fontSize={1}
         iconRight={selected && CheckmarkIcon}
         justify="flex-start"
         key={type.title ?? type.name}
         mode="bleed"
         onClick={handleClick}
-        style={{width: '100%'}}
+        width="fill"
+        size="large"
         tabIndex={-1}
         text={type.title ?? type.name}
         tone={selected ? 'primary' : 'default'}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
index 217b974e361..be07c410b34 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
@@ -1,7 +1,13 @@
 import {CloseIcon} from '@sanity/icons'
-import {Button, Card, Popover, rem} from '@sanity/ui'
+import {
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children behavior.
+  Card,
+  rem,
+} from '@sanity/ui'
 import React, {KeyboardEvent, useCallback, useState} from 'react'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../../../ui-components'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import type {SearchFilter} from '../../../types'
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterError.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterError.tsx
index 22f3d227630..064a25bc875 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterError.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterError.tsx
@@ -14,7 +14,7 @@ export function FilterError(props: ResponsivePaddingProps) {
           <ErrorOutlineIcon />
         </TextWithTone>
         <Stack space={4}>
-          <TextWithTone size={1} tone="critical" weight="semibold">
+          <TextWithTone size={1} tone="critical" weight="medium">
             {t('search.error.display-filter-title')}
           </TextWithTone>
           <TextWithTone size={1} tone="critical">
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
index 1f4138a1665..920a4a78175 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/FilterForm.tsx
@@ -1,7 +1,8 @@
 import {TrashIcon} from '@sanity/icons'
-import {Box, Button, Card, ErrorBoundary, Flex, Stack, Text} from '@sanity/ui'
+import {Box, Card, ErrorBoundary, Flex, Stack, Text} from '@sanity/ui'
 import React, {ErrorInfo, useCallback, useState} from 'react'
 import FocusLock from 'react-focus-lock'
+import {Button} from '../../../../../../../../ui-components'
 import {supportsTouch} from '../../../../../../../util'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {getFilterDefinition} from '../../../definitions/filters'
@@ -83,23 +84,17 @@ export function FilterForm({filter}: FilterFormProps) {
           <Card padding={3}>
             <Stack space={3}>
               <Flex align="flex-start" gap={3} justify="space-between">
-                <Box
-                  paddingBottom={1}
-                  paddingLeft={1}
-                  paddingRight={2}
-                  paddingTop={fullscreen ? 2 : 1}
-                >
-                  <FilterDetails filter={filter} small={!fullscreen} />
+                <Box paddingLeft={1} paddingRight={2} paddingY={1}>
+                  <FilterDetails filter={filter} />
                 </Box>
 
                 {fullscreen && (
                   <Button
-                    fontSize={2}
                     icon={TrashIcon}
                     mode="bleed"
                     onClick={handleClose}
-                    padding={2}
                     tone="critical"
+                    tooltipProps={{content: 'Remove filter'}}
                   />
                 )}
               </Flex>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
index 29258c30fb4..5684ce65d1b 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
@@ -1,7 +1,8 @@
-import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Flex, Inline, Menu, MenuButton, MenuDivider, MenuItem, Text} from '@sanity/ui'
-import React, {createElement, useCallback, useId} from 'react'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Inline, Menu, MenuDivider} from '@sanity/ui'
+import React, {useCallback, useId} from 'react'
 import {useSearchState} from '../../../contexts/search/useSearchState'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../ui-components'
 import {getFilterDefinition} from '../../../definitions/filters'
 import {getOperatorDefinition, SearchOperatorDefinition} from '../../../definitions/operators'
 import type {SearchFilter} from '../../../types'
@@ -26,20 +27,13 @@ function CustomMenuItem({
   const {t} = useTranslation()
 
   return (
-    <MenuItem onClick={handleClick} padding={3} pressed={selected} tone="default">
-      <Flex align="center" justify="space-between" gap={3}>
-        <Box paddingRight={2}>
-          <Text size={1} weight="regular">
-            {t(operator.nameKey)}
-          </Text>
-        </Box>
-        {operator?.icon && (
-          <Text muted size={1}>
-            {createElement(operator.icon)}
-          </Text>
-        )}
-      </Flex>
-    </MenuItem>
+    <MenuItem
+      onClick={handleClick}
+      pressed={selected}
+      tone="default"
+      text={t(operator.nameKey)}
+      iconRight={operator?.icon}
+    />
   )
 }
 
@@ -68,20 +62,7 @@ export function OperatorsMenuButton({filter, operator}: OperatorsMenuButtonProps
   return (
     <Inline>
       <MenuButton
-        button={
-          <Button mode="ghost" padding={3}>
-            <Flex align="center" gap={2} justify="space-between">
-              <Text size={state.fullscreen ? 2 : 1} weight="regular">
-                {t(operator.nameKey)}
-              </Text>
-              <Box marginLeft={1}>
-                <Text size={1}>
-                  <SelectIcon />
-                </Text>
-              </Box>
-            </Flex>
-          </Button>
-        }
+        button={<Button mode="ghost" iconRight={ChevronDownIcon} text={t(operator.nameKey)} />}
         id={menuButtonId || ''}
         menu={
           <Menu>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
index 5d5f43ac176..d4849561556 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
@@ -1,10 +1,11 @@
 import {ChevronDownIcon, ImageIcon, SearchIcon, UndoIcon} from '@sanity/icons'
 import type {AssetFromSource, AssetSource, ReferenceValue} from '@sanity/types'
-import {Box, Button, Flex, Menu, MenuButton, MenuItem, Portal, Stack} from '@sanity/ui'
+import {Box, Flex, Menu, Portal, Stack} from '@sanity/ui'
 import {get, startCase} from 'lodash'
 import React, {useCallback, useEffect, useId, useMemo, useState} from 'react'
 import styled from 'styled-components'
 import {Source} from '../../../../../../../../../config'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../../../ui-components'
 import {FileSource, ImageSource} from '../../../../../../../../../form/studio/assetSource'
 import {useClient} from '../../../../../../../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../../../../../../studioClient'
@@ -140,11 +141,10 @@ export function SearchFilterAssetInput(type?: AssetType) {
                   <MenuButton
                     button={
                       <Button
-                        fontSize={fontSize}
                         icon={value ? UndoIcon : SearchIcon}
                         iconRight={ChevronDownIcon}
                         mode="ghost"
-                        style={{flex: value ? 1 : 0}}
+                        width={value ? 'fill' : undefined}
                         text={buttonText}
                       />
                     }
@@ -153,7 +153,6 @@ export function SearchFilterAssetInput(type?: AssetType) {
                       <Menu>
                         {assetSources.map((source) => (
                           <MenuItem
-                            fontSize={fontSize}
                             icon={source.icon || ImageIcon}
                             key={source.name}
                             // eslint-disable-next-line react/jsx-no-bind
@@ -174,12 +173,11 @@ export function SearchFilterAssetInput(type?: AssetType) {
                   />
                 ) : (
                   <Button
-                    fontSize={fontSize}
                     icon={value ? UndoIcon : SearchIcon}
                     mode="ghost"
                     // eslint-disable-next-line react/jsx-no-bind
                     onClick={() => handleSelectAssetSource(assetSources[0])}
-                    style={{flex: value ? 1 : 0}}
+                    width={value ? 'fill' : undefined}
                     text={buttonText}
                   />
                 )}
@@ -189,10 +187,9 @@ export function SearchFilterAssetInput(type?: AssetType) {
             {/* Clear selected asset */}
             {value && (
               <Button
-                fontSize={fullscreen ? 2 : 1}
                 mode="ghost"
                 onClick={handleClear}
-                style={{flex: 1}}
+                width="fill"
                 text={t('search.filter-asset-clear')}
                 tone="critical"
               />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/AssetSourceError.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/AssetSourceError.tsx
index eeeda93998c..3a2f5298cf2 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/AssetSourceError.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/AssetSourceError.tsx
@@ -14,7 +14,7 @@ export function AssetSourceError(props: ResponsivePaddingProps) {
           <WarningOutlineIcon />
         </TextWithTone>
         <Stack space={4}>
-          <TextWithTone size={1} tone="caution" weight="semibold">
+          <TextWithTone size={1} tone="caution" weight="medium">
             {t('search.error.no-valid-asset-source-title')}
           </TextWithTone>
           <TextWithTone size={1} tone="caution">
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/FileReferencePreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/FileReferencePreview.tsx
index c6e97e9d678..a56f31d05f5 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/FileReferencePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/FileReferencePreview.tsx
@@ -1,6 +1,6 @@
 import {BinaryDocumentIcon} from '@sanity/icons'
 import type {FileAsset, ReferenceValue} from '@sanity/types'
-import {Card, Flex, LabelSkeleton, Stack, Text} from '@sanity/ui'
+import {Card, Flex, Stack, Text, TextSkeleton} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {formatBytes} from '../../../../../../../../../../form/inputs/common/helper'
 import {observeFileAsset} from '../../../../../../../../../../form/studio/inputs/client-adapters/assets'
@@ -29,6 +29,7 @@ export function FileReferencePreview({reference}: FileReferencePreviewProps) {
 }
 
 function FilePreview({asset}: {asset: FileAsset}) {
+  // todo: consider replacing with <SanityDefaultPreview>
   return (
     <Card padding={2} shadow={1}>
       <Flex align="center" justify="space-between" wrap="nowrap">
@@ -38,7 +39,7 @@ function FilePreview({asset}: {asset: FileAsset}) {
           </Text>
         </Card>
         <Stack flex={1} space={2} marginLeft={3}>
-          <Text size={2} textOverflow="ellipsis" muted>
+          <Text muted size={1} textOverflow="ellipsis" weight="medium">
             {asset?.originalFilename || asset._id}
           </Text>
           <Text size={1} muted>
@@ -60,8 +61,8 @@ function FileSkeleton() {
           </Text>
         </Card>
         <Stack flex={1} space={2} marginLeft={3}>
-          <LabelSkeleton animated style={{width: '100%'}} radius={1} />
-          <LabelSkeleton animated style={{width: '100%'}} radius={1} />
+          <TextSkeleton animated style={{width: '100%'}} radius={1} />
+          <TextSkeleton animated style={{width: '100%'}} radius={1} />
         </Stack>
       </Flex>
     </Card>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
index 3aa792f8f6f..afdcffb55bc 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/preview/ImageReferencePreview.tsx
@@ -1,10 +1,11 @@
 import type {ImageAsset, ReferenceValue} from '@sanity/types'
-import {Card, Flex, Spinner} from '@sanity/ui'
+import {Card} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {observeImageAsset} from '../../../../../../../../../../form/studio/inputs/client-adapters/assets'
 import {WithReferencedAsset} from '../../../../../../../../../../form/utils/WithReferencedAsset'
 import {useDocumentPreviewStore} from '../../../../../../../../../../store'
+import {LoadingBlock} from '../../../../../../../../../../components/loadingBlock'
 
 interface ImageReferencePreviewProps {
   reference: ReferenceValue
@@ -25,12 +26,6 @@ const Image = styled.img`
   object-fit: contain;
 `
 
-const SpinnerFlex = styled(Flex)`
-  height: 100%;
-  position: absolute;
-  width: 100%;
-`
-
 export function ImageReferencePreview({reference}: ImageReferencePreviewProps) {
   const documentPreviewStore = useDocumentPreviewStore()
   const observeAsset = useCallback(
@@ -51,11 +46,7 @@ function ImagePreview({asset}: {asset: ImageAsset}) {
 
   return (
     <Container __unstable_checkered border>
-      {!loaded && (
-        <SpinnerFlex align="center" justify="center">
-          <Spinner />
-        </SpinnerFlex>
-      )}
+      {!loaded && <LoadingBlock fill showText />}
       <Image onLoad={handleLoad} src={imageUrl} />
     </Container>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
index 4dc0a529d51..540f76af11e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
@@ -1,6 +1,3 @@
-import {hues} from '@sanity/color'
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {Flex, Text, Theme, Tooltip} from '@sanity/ui'
 import {format, isValid, parse} from 'date-fns'
 import React, {
   ChangeEvent,
@@ -11,8 +8,8 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import styled, {css} from 'styled-components'
-import {Translate, useTranslation} from '../../../../../../../../../i18n'
+import {Tooltip} from '../../../../../../../../../../ui-components'
+import {useTranslation} from '../../../../../../../../../i18n'
 import {CustomTextInput} from '../../../../common/CustomTextInput'
 import {getDateISOString} from './utils/getDateISOString'
 
@@ -51,16 +48,6 @@ const FORMAT: Record<
   },
 }
 
-const Emphasis = styled.span(({theme}: {theme: Theme}) => {
-  return css`
-    font-weight: ${theme.sanity.fonts.text.weights.medium};
-  `
-})
-
-const IconTextCritical = styled(Text)`
-  color: ${hues.red[500].hex};
-`
-
 export function ParsedDateTextInput({
   isDateTime,
   onChange,
@@ -161,44 +148,25 @@ export function ParsedDateTextInput({
 
   return (
     <Tooltip
-      content={
-        <Flex gap={2}>
-          <IconTextCritical size={1}>
-            <ErrorOutlineIcon />
-          </IconTextCritical>
-          <Text muted size={1}>
-            <Translate
-              t={t}
-              i18nKey="calendar.error.must-be-in-format"
-              components={{Emphasis}}
-              values={{
-                exampleDate: isDateTimeFormat
-                  ? FORMAT.datetime.exampleDate
-                  : FORMAT.date.exampleDate,
-              }}
-            />
-          </Text>
-        </Flex>
-      }
+      content={t('calendar.error.must-be-in-format', {
+        exampleDate: isDateTimeFormat ? FORMAT.datetime.exampleDate : FORMAT.date.exampleDate,
+      })}
       disabled={!customValidity}
-      padding={3}
       placement="top"
       portal
     >
       {/* HACK: Wrapping element required for <Tooltip> to function */}
-      <div>
-        <CustomTextInput
-          {...rest}
-          clearButton={!!inputValue}
-          customValidity={customValidity}
-          onBlur={handleTextInputBlur}
-          onChange={handleTextInputChange}
-          onClear={handleTextInputClear}
-          onKeyDown={handleTextInputKeyDown}
-          placeholder={formattedPlaceholder}
-          value={inputValue}
-        />
-      </div>
+      <CustomTextInput
+        {...rest}
+        clearButton={!!inputValue}
+        customValidity={customValidity}
+        onBlur={handleTextInputBlur}
+        onChange={handleTextInputChange}
+        onClear={handleTextInputClear}
+        onKeyDown={handleTextInputKeyDown}
+        placeholder={formattedPlaceholder}
+        value={inputValue}
+      />
     </Tooltip>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/DatePicker.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/DatePicker.tsx
index c2e7bc48006..674a0570b01 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/DatePicker.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/DatePicker.tsx
@@ -1,5 +1,4 @@
 import React, {useCallback} from 'react'
-import {useSearchState} from '../../../../../../contexts/search/useSearchState'
 import {Calendar} from './calendar/Calendar'
 
 interface DatePickerProps {
@@ -11,10 +10,6 @@ interface DatePickerProps {
 }
 
 export function DatePicker({date, endDate, onChange, selectRange, selectTime}: DatePickerProps) {
-  const {
-    state: {fullscreen},
-  } = useSearchState()
-
   const handleSelect = useCallback(
     (dates: {date: Date | null; endDate?: Date | null}) => {
       onChange(dates)
@@ -26,7 +21,6 @@ export function DatePicker({date, endDate, onChange, selectRange, selectTime}: D
     <Calendar
       date={date}
       endDate={endDate}
-      fontSize={fullscreen ? 2 : 1}
       onSelect={handleSelect}
       selectRange={selectRange}
       selectTime={selectTime}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/LazyTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/LazyTextInput.tsx
deleted file mode 100644
index 1ef64f330d0..00000000000
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/LazyTextInput.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react'
-import {TextInput} from '@sanity/ui'
-import {useCalendar} from './calendar/contexts/useDatePicker'
-
-type TextInputProps = React.ComponentProps<typeof TextInput>
-
-type Props = Omit<TextInputProps, 'onChange'> & {
-  onChange?: (
-    event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>,
-  ) => void
-}
-
-/**
- * A TextInput that only emit onChange when it has to
- * By default it will only emit onChange when: 1) user hits enter or 2) user leaves the
- * field (e.g. onBlur) and the input value at this time is different from the given `value` prop
- */
-export const LazyTextInput = React.forwardRef(function LazyTextInput(
-  {onChange, onBlur, onKeyPress, value, ...rest}: Props,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
-  const [inputValue, setInputValue] = React.useState<string>()
-
-  const {fontSize} = useCalendar()
-
-  const handleChange = React.useCallback((event: any) => {
-    setInputValue(event.currentTarget.value)
-  }, [])
-
-  const checkEvent = React.useCallback(
-    (event: any) => {
-      const currentValue = event.currentTarget.value
-      if (currentValue !== `${value}`) {
-        if (onChange) {
-          onChange(event)
-        }
-      }
-      setInputValue(undefined)
-    },
-    [onChange, value],
-  )
-
-  const handleBlur = React.useCallback(
-    (e: any) => {
-      checkEvent(e)
-      if (onBlur) {
-        onBlur(e)
-      }
-    },
-    [checkEvent, onBlur],
-  )
-
-  const handleKeyPress = React.useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        checkEvent(e)
-      }
-      if (onKeyPress) {
-        onKeyPress(e)
-      }
-    },
-    [checkEvent, onKeyPress],
-  )
-
-  return (
-    <TextInput
-      {...rest}
-      data-testid="date-input"
-      fontSize={fontSize}
-      ref={forwardedRef}
-      value={inputValue === undefined ? value : inputValue}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      onKeyPress={handleKeyPress}
-    />
-  )
-})
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
index fe973982f4f..e79f6fcc6b1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx
@@ -10,7 +10,6 @@ import {ARROW_KEYS} from './constants'
 type CalendarProps = Omit<React.ComponentProps<'div'>, 'onSelect'> & {
   date?: Date
   endDate?: Date
-  fontSize: number
   onSelect: ({date, endDate}: {date: Date | null; endDate?: Date | null}) => void
   selectRange?: boolean
   selectTime?: boolean
@@ -32,7 +31,7 @@ const PRESERVE_FOCUS_ELEMENT = (
 )
 
 export function Calendar(props: CalendarProps) {
-  const {date, endDate, fontSize, onSelect, selectRange, selectTime} = props
+  const {date, endDate, onSelect, selectRange, selectTime} = props
 
   const [calendarElement, setCalendarElement] = useState<HTMLElement | null>(null)
   const [selectEndValue, setSelectEndValue] = useState(false)
@@ -184,7 +183,6 @@ export function Calendar(props: CalendarProps) {
         date,
         endDate,
         focusedDate,
-        fontSize,
         selectRange,
         selectTime,
         firstWeekDay,
@@ -194,11 +192,7 @@ export function Calendar(props: CalendarProps) {
         {/* Select month and year */}
         <Flex>
           <Box flex={1}>
-            <CalendarHeader
-              fontSize={fontSize}
-              moveFocusedDate={moveFocusedDate}
-              onNowClick={handleNowClick}
-            />
+            <CalendarHeader moveFocusedDate={moveFocusedDate} onNowClick={handleNowClick} />
           </Box>
         </Flex>
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarDay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarDay.tsx
index c28309fec19..c9d65ce63f8 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarDay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarDay.tsx
@@ -52,13 +52,7 @@ export function CalendarDay({date, onSelect}: CalendarDayProps) {
     onSelect(date)
   }, [date, onSelect])
 
-  const {
-    date: selectedDate,
-    endDate: selectedEndDate,
-    focusedDate,
-    fontSize,
-    selectRange,
-  } = useCalendar()
+  const {date: selectedDate, endDate: selectedEndDate, focusedDate, selectRange} = useCalendar()
 
   const isSelected = selectedDate && isSameDay(date, selectedDate)
   const isStartDate = selectRange && selectedDate && isSameDay(date, selectedDate)
@@ -89,7 +83,8 @@ export function CalendarDay({date, onSelect}: CalendarDayProps) {
       data-within-range={isWithinRange ? true : undefined}
       forwardedAs="button"
       onClick={handleClick}
-      padding={3}
+      paddingX={3}
+      paddingY={2}
       radius={2}
       role="button"
       selected={isSelected || isStartDate || isEndDate}
@@ -110,8 +105,8 @@ export function CalendarDay({date, onSelect}: CalendarDayProps) {
       <Text
         align="center"
         muted={!isSelected && !isCurrentMonth}
-        size={fontSize}
-        weight={isToday ? 'medium' : 'regular'}
+        size={1}
+        weight={isCurrentMonth ? 'medium' : 'regular'}
       >
         {date.getDate()}
       </Text>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
index 325468615d3..d495cb4b841 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarHeader.tsx
@@ -1,13 +1,13 @@
 import {upperFirst} from 'lodash'
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
-import {Box, Button, Flex, Inline, Text} from '@sanity/ui'
+import {Flex, Inline, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Button} from '../../../../../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../../../../../i18n'
 import {useDateTimeFormat} from '../../../../../../../../../../../hooks/useDateTimeFormat'
 import {useCalendar} from './contexts/useDatePicker'
 
 export function CalendarHeader(props: {
-  fontSize?: number
   moveFocusedDate: (by: number) => void
   onNowClick: () => void
 }) {
@@ -15,7 +15,7 @@ export function CalendarHeader(props: {
   const monthFormatter = useDateTimeFormat({month: 'long', year: 'numeric'})
   const {focusedDate} = useCalendar()
 
-  const {fontSize, moveFocusedDate, onNowClick} = props
+  const {moveFocusedDate, onNowClick} = props
 
   const handlePrevMonthClick = useCallback(() => moveFocusedDate(-1), [moveFocusedDate])
 
@@ -25,29 +25,30 @@ export function CalendarHeader(props: {
     <Flex align="center" flex={1} justify="space-between">
       <Inline paddingLeft={2} space={1}>
         {/* Technically not correct to simply uppercase first here, but simplifying for now */}
-        <Text weight="medium">{upperFirst(monthFormatter.format(focusedDate))}</Text>
+        <Text size={1} weight="medium">
+          {upperFirst(monthFormatter.format(focusedDate))}
+        </Text>
       </Inline>
-      <Box>
+      <Flex align="center">
         <Button
           aria-label={t('calendar.action.go-to-today-aria-label')}
-          fontSize={fontSize}
           mode="bleed"
           onClick={onNowClick}
           text={t('calendar.action.go-to-today')}
         />
         <Button
-          aria-label={t('calendar.action.go-to-previous-month')}
           icon={ChevronLeftIcon}
           mode="bleed"
           onClick={handlePrevMonthClick}
+          tooltipProps={{content: t('calendar.action.go-to-previous-month')}}
         />
         <Button
-          aria-label={t('calendar.action.go-to-next-month')}
           icon={ChevronRightIcon}
           mode="bleed"
           onClick={handleNextMonthClick}
+          tooltipProps={{content: t('calendar.action.go-to-next-month')}}
         />
-      </Box>
+      </Flex>
     </Flex>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarMonth.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarMonth.tsx
index 34301ad4f16..f1364c2cb5e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarMonth.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/CalendarMonth.tsx
@@ -25,15 +25,15 @@ const CustomGrid = styled(Grid)`
 `
 
 export function CalendarMonth({hidden, onSelect}: CalendarMonthProps) {
-  const {focusedDate, fontSize, firstWeekDay} = useCalendar()
+  const {focusedDate, firstWeekDay} = useCalendar()
   const {t} = useTranslation()
 
   return (
     <Box aria-hidden={hidden || false} data-ui="CalendarMonth">
-      <CustomGrid>
+      <CustomGrid gapY={1}>
         {WEEK_DAY_NAME_KEYS[firstWeekDay].map((weekdayDay) => (
           <Box key={weekdayDay} paddingBottom={3} paddingTop={2}>
-            <Text align="center" size={fontSize} weight="medium">
+            <Text align="center" size={1} weight="medium">
               {t(weekdayDay)}
             </Text>
           </Box>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/contexts/CalendarContext.ts b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/contexts/CalendarContext.ts
index cc12173baf7..ba8a02ab403 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/contexts/CalendarContext.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/contexts/CalendarContext.ts
@@ -4,7 +4,6 @@ export interface CalendarContextValue {
   date?: Date
   endDate?: Date
   focusedDate: Date
-  fontSize: number
   selectRange?: boolean
   selectTime?: boolean
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
index 154c552b6bc..bd336269da1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/Reference.tsx
@@ -1,6 +1,7 @@
 import {isArraySchemaType, isReferenceSchemaType, ReferenceValue} from '@sanity/types'
-import {Box, Button, Card, Stack} from '@sanity/ui'
+import {Box, Card, Stack} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
+import {Button} from '../../../../../../../../../../ui-components'
 import {useSchema} from '../../../../../../../../../hooks'
 import {SearchableType} from '../../../../../../../../../search'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
@@ -17,7 +18,7 @@ export function SearchFilterReferenceInput({
 }: OperatorInputComponentProps<ReferenceValue>) {
   const {
     onClose,
-    state: {documentTypesNarrowed, fullscreen},
+    state: {documentTypesNarrowed},
   } = useSearchState()
   const schema = useSchema()
   const {t} = useTranslation()
@@ -68,14 +69,13 @@ export function SearchFilterReferenceInput({
         <Stack space={3}>
           <Card padding={1} radius={1} shadow={1}>
             <SearchResultItem
-              compact
               documentId={value._ref}
               documentType={value._type}
+              layout="compact"
               onClick={handleClick}
             />
           </Card>
           <Button
-            fontSize={fullscreen ? 2 : 1}
             mode="ghost"
             onClick={handleClear}
             text={t('search.filter-reference-clear')}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
index b3a8df8ba0c..c69fb75a2bd 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/reference/ReferenceAutocomplete.tsx
@@ -1,7 +1,8 @@
 import type {ReferenceValue} from '@sanity/types'
-import {Autocomplete, Box, Flex, Popover, Text} from '@sanity/ui'
+import {Autocomplete, Box, Flex, Text} from '@sanity/ui'
 import React, {forwardRef, ReactElement, useCallback, useId, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
+import {Popover} from '../../../../../../../../../../ui-components'
 import {useSchema} from '../../../../../../../../../hooks'
 import type {SearchableType, WeightedHit} from '../../../../../../../../../search'
 import {getPublishedId} from '../../../../../../../../../util'
@@ -142,10 +143,10 @@ export const ReferenceAutocomplete = forwardRef(function ReferenceAutocomplete(
     const documentType = option.hit.hit._type
     return (
       <SearchResultItem
-        compact
         disableIntentLink
         documentId={option.value}
         documentType={documentType}
+        layout="compact"
       />
     )
   }, [])
@@ -156,7 +157,6 @@ export const ReferenceAutocomplete = forwardRef(function ReferenceAutocomplete(
       const hasResults = hits && hits.length > 0
       return (
         <Popover
-          arrow={false}
           constrainSize
           content={
             <div ref={contentRef}>
@@ -177,6 +177,7 @@ export const ReferenceAutocomplete = forwardRef(function ReferenceAutocomplete(
                   )}
             </div>
           }
+          fallbackPlacements={['bottom', 'bottom-end']}
           matchReferenceWidth
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
index d40305c413a..45a573ab7ed 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
@@ -1,6 +1,6 @@
-import {SelectIcon} from '@sanity/icons'
+import {ChevronDownIcon} from '@sanity/icons'
 import {isTitledListValue, StringOptions, TitledListValue} from '@sanity/types'
-import {Box, Button, Code, Flex, Menu, MenuButton, MenuItem, Stack, Text} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {capitalize, uniq} from 'lodash'
 import React, {useCallback, useId, useMemo} from 'react'
 import {useSchema} from '../../../../../../../../../hooks'
@@ -8,6 +8,7 @@ import {isNonNullable} from '../../../../../../../../../util'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
 import {OperatorInputComponentProps} from '../../../../../definitions/operators/operatorTypes'
 import {getSchemaField} from '../../../../../utils/getSchemaField'
+import {Button, MenuButton, MenuItem} from '../../../../../../../../../../ui-components'
 import {useTranslation} from '../../../../../../../../../i18n'
 
 interface TitledListValueGroup extends Omit<TitledListValue<number | string>, 'title'> {
@@ -27,22 +28,12 @@ function CustomMenuItem({
 }) {
   const handleClick = useCallback(() => onClick(value), [onClick, value])
 
-  return (
-    <MenuItem onClick={handleClick} padding={3} pressed={selected} tone="default">
-      <Flex align="center" justify="space-between" gap={3}>
-        <Stack paddingRight={2} space={2}>
-          <Text size={1} weight="regular">
-            {title}
-          </Text>
-          {value && (
-            <Code muted size={0}>
-              {value}
-            </Code>
-          )}
-        </Stack>
-      </Flex>
-    </MenuItem>
-  )
+  let menuItemText = `${title}`
+  if (typeof value !== 'undefined' && title !== value) {
+    menuItemText += ` (${value})`
+  }
+
+  return <MenuItem onClick={handleClick} pressed={selected} tone="default" text={menuItemText} />
 }
 
 export function SearchFilterStringListInput({
@@ -110,18 +101,11 @@ export function SearchFilterStringListInput({
   return (
     <MenuButton
       button={
-        <Button mode="ghost" padding={3}>
-          <Flex align="center" gap={2} justify="space-between">
-            <Text size={1} weight="regular">
-              {value ? value : t('search.filter-string-value-select-predefined-value')}
-            </Text>
-            <Box marginLeft={1}>
-              <Text size={1}>
-                <SelectIcon />
-              </Text>
-            </Box>
-          </Flex>
-        </Button>
+        <Button
+          mode="ghost"
+          iconRight={ChevronDownIcon}
+          text={value ? String(value) : t('search.filter-string-value-select-predefined-value')}
+        />
       }
       id={menuButtonId || ''}
       menu={
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
index ca32c20face..5559e94b53f 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx
@@ -1,4 +1,4 @@
-import {Box, Button, Card, Label, Text, useMediaIndex} from '@sanity/ui'
+import {Box, Card, Text, useMediaIndex} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {
@@ -6,6 +6,7 @@ import {
   CommandListHandle,
   CommandListRenderItemCallback,
 } from '../../../../../../components'
+import {Button} from '../../../../../../../ui-components'
 import {useSearchState} from '../../contexts/search/useSearchState'
 import {RecentSearch} from '../../datastores/recentSearches'
 import {Instructions} from '../Instructions'
@@ -80,9 +81,9 @@ export function RecentSearches({inputElement}: RecentSearchesProps) {
       {recentSearches.length > 0 ? (
         <>
           <Box paddingBottom={2} paddingTop={4} paddingX={3}>
-            <Label muted size={1}>
+            <Text muted size={1} weight="medium">
               {t('search.recent-searches-label')}
-            </Label>
+            </Text>
           </Box>
           <Box>
             <CommandList
@@ -99,17 +100,12 @@ export function RecentSearches({inputElement}: RecentSearchesProps) {
           </Box>
           <Box paddingBottom={2} paddingTop={1} paddingX={2}>
             <Button
-              fontSize={1}
-              justify="flex-start"
               mode="bleed"
               onClick={handleClearRecentSearchesClick}
-              padding={2}
               tone="default"
-            >
-              <Text muted size={1}>
-                {t('search.action.clear-recent-searches')}
-              </Text>
-            </Button>
+              text={t('search.action.clear-recent-searches')}
+              muted
+            />
           </Box>
         </>
       ) : (
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx
index 1768cdc5c83..17511be4ede 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx
@@ -1,13 +1,14 @@
 import {ClockIcon, CloseIcon} from '@sanity/icons'
 import {
   Box,
-  Button,
   Flex,
   Inline,
   rem,
   ResponsiveMarginProps,
   ResponsivePaddingProps,
   Text,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children behavior.
 } from '@sanity/ui'
 import React, {MouseEvent, useCallback} from 'react'
 import styled from 'styled-components'
@@ -34,7 +35,7 @@ const SearchItemPillsBox = styled(Box)`
   flex-shrink: 3;
 `
 
-const SearchItemQueryBox = styled(Box)`
+const SearchItemQueryFlex = styled(Flex)`
   flex-shrink: 2;
 `
 
@@ -107,11 +108,11 @@ export function RecentSearchItem({
           <Flex align="stretch" flex={1} gap={2} justify="flex-start" marginLeft={3} wrap="wrap">
             {/* Text query */}
             {value.query && (
-              <SearchItemQueryBox paddingY={2}>
-                <Text muted textOverflow="ellipsis">
+              <SearchItemQueryFlex align="center" paddingY={2}>
+                <Text muted size={1} textOverflow="ellipsis" weight="medium">
                   {value.query}
                 </Text>
-              </SearchItemQueryBox>
+              </SearchItemQueryFlex>
             )}
             {/* Document type */}
             {value.types.length > 0 && (
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx
index 265eb6af11f..8bc68f4d29e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx
@@ -12,7 +12,7 @@ import {useTranslation} from '../../../../../../i18n'
 import {DebugOverlay} from './item/DebugOverlay'
 import {SearchResultItem} from './item/SearchResultItem'
 
-const VIRTUAL_LIST_SEARCH_RESULT_ITEM_HEIGHT = 59 // px
+const VIRTUAL_LIST_SEARCH_RESULT_ITEM_HEIGHT = 57 // px
 const VIRTUAL_LIST_OVERSCAN = 4
 
 const SearchResultsInnerFlex = styled(Flex)<{$loading: boolean}>`
@@ -61,7 +61,7 @@ export function SearchResults({inputElement}: SearchResultsProps) {
             documentId={getPublishedId(item.hit._id) || ''}
             documentType={item.hit._type}
             onClick={handleSearchResultClick}
-            paddingBottom={2}
+            paddingY={1}
           />
           {debug && <DebugOverlay data={item} />}
         </>
@@ -96,8 +96,8 @@ export function SearchResults({inputElement}: SearchResultsProps) {
                     itemHeight={VIRTUAL_LIST_SEARCH_RESULT_ITEM_HEIGHT}
                     items={result.hits}
                     overscan={VIRTUAL_LIST_OVERSCAN}
-                    padding={2}
-                    paddingBottom={0}
+                    paddingX={2}
+                    paddingY={1}
                     ref={setSearchCommandList}
                     renderItem={renderItem}
                   />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
index cbcbe2ac0dc..efe9e7bfa54 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
-import {Box, Card, CardTone, Code, Inline, Stack, Tooltip} from '@sanity/ui'
+import {Card, CardTone, Code, Inline, Stack} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
+import {Tooltip} from '../../../../../../../../ui-components'
 import type {WeightedHit} from '../../../../../../../search'
 
 interface DebugScoreProps {
@@ -31,24 +32,22 @@ export function DebugOverlay({data}: DebugScoreProps) {
     <>
       <Tooltip
         content={
-          <Box padding={2}>
-            <Stack space={2}>
-              {matchingStories.length ? (
-                <>
-                  {matchingStories.map((story) => (
-                    <Inline key={story.path} space={3}>
-                      <Code size={0} weight="semibold">
-                        {story.path}
-                      </Code>
-                      <Code size={0}>{story.why}</Code>
-                    </Inline>
-                  ))}
-                </>
-              ) : (
-                <Code size={0}>No matches</Code>
-              )}
-            </Stack>
-          </Box>
+          <Stack space={2}>
+            {matchingStories.length ? (
+              <>
+                {matchingStories.map((story) => (
+                  <Inline key={story.path} space={3}>
+                    <Code size={0} weight="medium">
+                      {story.path}
+                    </Code>
+                    <Code size={0}>{story.why}</Code>
+                  </Inline>
+                ))}
+              </>
+            ) : (
+              <Code size={0}>No matches</Code>
+            )}
+          </Stack>
         }
         placement="bottom-start"
         portal
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx
index 33f941e196f..3b309311a69 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItem.tsx
@@ -1,24 +1,24 @@
 import {Box, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
 import React, {MouseEvent, useCallback, useMemo} from 'react'
-import {PreviewCard} from '../../../../../../../components'
+import {GeneralPreviewLayoutKey, PreviewCard} from '../../../../../../../components'
 import {useSchema} from '../../../../../../../hooks'
 import {useDocumentPresence} from '../../../../../../../store'
 import SearchResultItemPreview from './SearchResultItemPreview'
 import {useIntentLink} from 'sanity/router'
 
 interface SearchResultItemProps extends ResponsiveMarginProps, ResponsivePaddingProps {
-  compact?: boolean
   disableIntentLink?: boolean
   documentId: string
   documentType: string
+  layout?: GeneralPreviewLayoutKey
   onClick?: () => void
 }
 
 export function SearchResultItem({
-  compact,
   disableIntentLink,
   documentId,
   documentType,
+  layout,
   onClick,
   ...rest
 }: SearchResultItemProps) {
@@ -52,12 +52,12 @@ export function SearchResultItem({
         flex={1}
         href={disableIntentLink ? undefined : href}
         onClick={handleClick}
-        padding={compact ? 1 : 2}
         radius={2}
         tabIndex={-1}
       >
         <SearchResultItemPreview
           documentId={documentId}
+          layout={layout}
           presence={documentPresence}
           schemaType={type}
         />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
index 800af68c3d9..4add24c9ec6 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx
@@ -1,9 +1,11 @@
 import type {SanityDocument} from '@sanity/client'
 import type {SchemaType} from '@sanity/types'
-import {Box, Inline, Label} from '@sanity/ui'
+import {Badge, Box, Flex} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import {useMemoObservable} from 'react-rx'
 import styled from 'styled-components'
+import {DocumentStatus} from '../../../../../../../components/documentStatus'
+import {DocumentStatusIndicator} from '../../../../../../../components/documentStatusIndicator'
 import {DocumentPreviewPresence} from '../../../../../../../presence'
 import {
   getPreviewStateObservable,
@@ -11,9 +13,11 @@ import {
   SanityDefaultPreview,
 } from '../../../../../../../preview'
 import {DocumentPresence, useDocumentPreviewStore} from '../../../../../../../store'
+import {GeneralPreviewLayoutKey} from '../../../../../../../components'
 
 interface SearchResultItemPreviewProps {
   documentId: string
+  layout?: GeneralPreviewLayoutKey
   presence?: DocumentPresence[]
   schemaType: SchemaType
 }
@@ -30,12 +34,9 @@ const SearchResultItemPreviewBox = styled(Box)`
   }
 `
 
-const TypeLabel = styled(Label)`
-  max-width: 150px;
-`
-
 export default function SearchResultItemPreview({
   documentId,
+  layout,
   presence,
   schemaType,
 }: SearchResultItemPreviewProps) {
@@ -58,14 +59,15 @@ export default function SearchResultItemPreview({
   const status = useMemo(() => {
     if (isLoading) return null
     return (
-      <Inline space={3}>
+      <Flex align="center" gap={3}>
         {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
-        <TypeLabel size={0} muted textOverflow="ellipsis">
-          {schemaType.title}
-        </TypeLabel>
-      </Inline>
+        <Badge>{schemaType.title}</Badge>
+        <DocumentStatusIndicator draft={draft} published={published} />
+      </Flex>
     )
-  }, [isLoading, presence, schemaType.title])
+  }, [draft, isLoading, presence, published, schemaType.title])
+
+  const tooltip = <DocumentStatus draft={draft} published={published} />
 
   return (
     <SearchResultItemPreviewBox>
@@ -76,9 +78,10 @@ export default function SearchResultItemPreview({
           value: sanityDocument,
         })}
         isPlaceholder={isLoading ?? true}
-        layout="default"
+        layout={layout || 'default'}
         icon={schemaType.icon}
         status={status}
+        tooltip={tooltip}
       />
     </SearchResultItemPreviewBox>
   )
diff --git a/packages/sanity/src/core/studio/components/navbar/search/constants.ts b/packages/sanity/src/core/studio/components/navbar/search/constants.ts
index 29f91bd9e6a..ded8295067d 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/constants.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/constants.ts
@@ -17,11 +17,11 @@ export const SEARCH_LIMIT = 1000
 export const GLOBAL_SEARCH_KEY = 'k'
 export const GLOBAL_SEARCH_KEY_MODIFIER = IS_MAC ? 'Cmd' : 'Ctrl'
 
-export const POPOVER_INPUT_PADDING = studioTheme.space[1] // px
+export const POPOVER_INPUT_PADDING = studioTheme.space[4] // px
 export const POPOVER_MAX_HEIGHT = 735 // px
 export const POPOVER_MAX_WIDTH = 800 // px
 
 // Custom space between buttons and popover content
 export const POPOVER_VERTICAL_MARGIN = 5 // px
 
-export const POPOVER_RADIUS = 2
+export const POPOVER_RADIUS = 3
diff --git a/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts b/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
index a5001650b35..53f451a9882 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/definitions/defaultFilters.ts
@@ -2,11 +2,11 @@ import {
   BlockContentIcon,
   CalendarIcon,
   CheckmarkCircleIcon,
+  ChevronDownIcon,
   DocumentIcon,
   ImageIcon,
   LinkIcon,
   NumberIcon,
-  SelectIcon,
   StringIcon,
   UlistIcon,
 } from '@sanity/icons'
@@ -28,7 +28,7 @@ export const filterDefinitions: SearchFilterDefinition[] = [
       {name: 'dateTimeEqual', type: 'item'},
       {name: 'dateTimeNotEqual', type: 'item'},
     ],
-    title: 'Updated at',
+    title: 'Edited at',
     name: 'updatedAt',
     type: 'pinned',
   }),
@@ -301,7 +301,7 @@ export const filterDefinitions: SearchFilterDefinition[] = [
   }),
   defineSearchFilter<SearchOperatorType>({
     fieldType: 'string',
-    icon: SelectIcon,
+    icon: ChevronDownIcon,
     name: 'stringList',
     operators: [
       {name: 'stringListEqual', type: 'item'},
diff --git a/packages/sanity/src/core/studio/components/navbar/search/index.ts b/packages/sanity/src/core/studio/components/navbar/search/index.ts
index 9d0a75928c1..3d1415b6d07 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/index.ts
+++ b/packages/sanity/src/core/studio/components/navbar/search/index.ts
@@ -1,5 +1,5 @@
+export * from './SearchButton'
 export * from './SearchDialog'
-export * from './SearchField'
 
 export {
   type SearchFilterDefinition,
diff --git a/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx b/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
index ae4cf0a518f..aa053f30391 100644
--- a/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/tools/ToolCollapseMenu.tsx
@@ -1,10 +1,12 @@
-import {UnknownIcon} from '@sanity/icons'
 import React, {forwardRef, useMemo, useState} from 'react'
 import {startCase} from 'lodash'
-import {CollapseMenu, CollapseMenuButton} from '../../../../components/collapseMenu'
+import {Flex} from '@sanity/ui'
+import styled from 'styled-components'
+import {CollapseTabList} from '../../../../components/collapseTabList/CollapseTabList'
 import {useRovingFocus} from '../../../../components'
 import {useColorScheme} from '../../../colorScheme'
 import {Tool} from '../../../../config'
+import {Button} from '../../../../../ui-components'
 import {ToolLink, ToolLinkProps} from './ToolLink'
 import {getToolButtonWrapperElement} from './getToolButtonWrapperElement'
 
@@ -13,6 +15,10 @@ interface ToolCollapseMenuProps {
   tools: Tool[]
 }
 
+const CollapseTabListWrapper = styled(Flex)`
+  margin: 0 80px;
+`
+
 export function ToolCollapseMenu(props: ToolCollapseMenuProps) {
   const {activeToolName, tools} = props
   const {scheme} = useColorScheme()
@@ -33,11 +39,10 @@ export function ToolCollapseMenu(props: ToolCollapseMenuProps) {
     }),
     [scheme],
   )
-
   const children = useMemo(
     () =>
       tools.map((tool, index) => {
-        const title = tool?.title || startCase(tool.name) || undefined
+        const title = tool?.title || startCase(tool.name)
 
         const Link = forwardRef(function Link(
           linkProps: ToolLinkProps,
@@ -53,31 +58,30 @@ export function ToolCollapseMenu(props: ToolCollapseMenuProps) {
         })
 
         return (
-          <CollapseMenuButton
+          <Button
             as={Link}
-            collapsedProps={{tooltipText: tool.title}}
             data-as="a"
-            icon={tool.icon || UnknownIcon}
             // eslint-disable-next-line react/no-array-index-key
             key={`${tool.name}-${index}`}
             mode="bleed"
             selected={activeToolName === tool.name}
             text={title}
-            tooltipProps={{scheme: scheme}}
           />
         )
       }),
-    [activeToolName, scheme, tools],
+    [activeToolName, tools],
   )
 
   return (
-    <CollapseMenu
-      data-testid="tool-collapse-menu"
-      gap={1}
-      menuButtonProps={menuButtonProps}
-      ref={setCollapseMenuEl}
-    >
-      {children}
-    </CollapseMenu>
+    <CollapseTabListWrapper justify="center">
+      <CollapseTabList
+        data-testid="tool-collapse-menu"
+        gap={1}
+        menuButtonProps={menuButtonProps}
+        ref={setCollapseMenuEl}
+      >
+        {children}
+      </CollapseTabList>
+    </CollapseTabListWrapper>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx b/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
index 7667ab48db8..a30f5cba02a 100644
--- a/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/tools/ToolVerticalMenu.tsx
@@ -1,7 +1,7 @@
-import {PlugIcon} from '@sanity/icons'
-import {Button, Stack} from '@sanity/ui'
+import {Stack} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {forwardRef, useMemo} from 'react'
+import {Button} from '../../../../../ui-components'
 import {Tool} from '../../../../config'
 import {ToolLink, ToolLinkProps} from './ToolLink'
 import {getToolButtonWrapperElement} from './getToolButtonWrapperElement'
@@ -19,7 +19,7 @@ export function ToolVerticalMenu(props: ToolVerticalMenuProps) {
     () => (
       <Stack as="ul" space={1}>
         {tools.map((tool) => {
-          const title = tool?.title || startCase(tool.name) || undefined
+          const title = tool?.title || startCase(tool.name)
 
           const Link = forwardRef(function Link(
             linkProps: ToolLinkProps,
@@ -38,10 +38,10 @@ export function ToolVerticalMenu(props: ToolVerticalMenuProps) {
             <Stack as="li" key={tool.name}>
               <Button
                 as={Link}
-                icon={tool.icon || PlugIcon}
                 justify="flex-start"
                 mode="bleed"
                 selected={activeToolName === tool.name}
+                size="large"
                 tabIndex={isVisible ? 0 : -1}
                 text={title}
               />
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx
new file mode 100644
index 00000000000..98008e36e3a
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/ApperanceMenu.tsx
@@ -0,0 +1,34 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {MenuDivider} from '@sanity/ui'
+import {MenuItem} from '../../../../../ui-components'
+import {type StudioThemeColorSchemeKey} from '../../../../theme'
+import {useTranslation} from '../../../../i18n'
+import {useColorSchemeOptions} from '../../../colorScheme'
+
+export function AppearanceMenu({
+  setScheme,
+}: {
+  setScheme: (nextScheme: StudioThemeColorSchemeKey) => void
+}) {
+  const {t} = useTranslation()
+  // Subscribe to just what we need, if the menu isn't shown then we're not subscribed to these contexts
+  const options = useColorSchemeOptions(setScheme, t)
+
+  return (
+    <>
+      <MenuDivider />
+
+      {options.map(({icon, label, name, onSelect, selected, title}) => (
+        <MenuItem
+          key={name}
+          aria-label={label}
+          icon={icon}
+          onClick={onSelect}
+          pressed={selected}
+          text={title}
+          iconRight={selected && <CheckmarkIcon />}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
index 453d0c50942..3c9061411d4 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/LocaleMenu.tsx
@@ -1,13 +1,13 @@
-import {Box, Label, MenuDivider, MenuItem} from '@sanity/ui'
+import {CheckmarkIcon} from '@sanity/icons'
+import {MenuDivider} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import {useTranslation} from '../../../../i18n'
 import {useLocale} from '../../../../i18n/hooks/useLocale'
+import {MenuItem} from '../../../../../ui-components'
 
 const LOCALE_SELECTION_DISABLED = true
 
 export function LocaleMenu() {
   const {changeLocale, currentLocale, locales} = useLocale()
-  const {t} = useTranslation()
 
   if (LOCALE_SELECTION_DISABLED) {
     return null
@@ -21,12 +21,6 @@ export function LocaleMenu() {
     <>
       <MenuDivider />
 
-      <Box padding={2}>
-        <Label size={1} muted>
-          {t('user-menu.locale-title')}
-        </Label>
-      </Box>
-
       {locales.map((item) => (
         <LocaleItem
           key={item.id}
@@ -47,10 +41,13 @@ function LocaleItem(props: {
   const {locale, changeLocale, selectedLocale: selectedLang} = props
   const localeId = locale.id
   const onClick = useCallback(() => changeLocale(localeId), [localeId, changeLocale])
+  const selected = selectedLang == localeId
+
   return (
     <MenuItem
       aria-label={locale.title}
-      pressed={selectedLang == localeId}
+      pressed={selected}
+      iconRight={selected && <CheckmarkIcon />}
       onClick={onClick}
       text={locale.title}
     />
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx
new file mode 100644
index 00000000000..1afb364dbd9
--- /dev/null
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/ManageMenu.tsx
@@ -0,0 +1,37 @@
+import {CogIcon, UsersIcon} from '@sanity/icons'
+import {MenuDivider} from '@sanity/ui'
+import {MenuItem} from '../../../../../ui-components'
+import {useTranslation} from '../../../../i18n'
+import {userHasRole} from '../../../../util'
+import {useWorkspace} from '../../../workspace'
+
+export function ManageMenu() {
+  const {currentUser, projectId} = useWorkspace()
+  const isAdmin = Boolean(currentUser && userHasRole(currentUser, 'administrator'))
+
+  const {t} = useTranslation()
+
+  return (
+    <>
+      <MenuDivider />
+      <MenuItem
+        as="a"
+        aria-label={t('user-menu.action.manage-project-aria-label')}
+        href={`https://sanity.io/manage/project/${projectId}`}
+        target="_blank"
+        text={t('user-menu.action.manage-project')}
+        icon={CogIcon}
+      />
+      {isAdmin && (
+        <MenuItem
+          as="a"
+          aria-label={t('user-menu.action.invite-members-aria-label')}
+          href={`https://sanity.io/manage/project/${projectId}/members`}
+          target="_blank"
+          text={t('user-menu.action.invite-members')}
+          icon={UsersIcon}
+        />
+      )}
+    </>
+  )
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 0a41206af2a..81b1b39be12 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -1,36 +1,27 @@
-import {CheckmarkIcon, ChevronDownIcon, CogIcon, LeaveIcon, UsersIcon} from '@sanity/icons'
+import {LeaveIcon} from '@sanity/icons'
 import {
   Box,
-  Button,
   Card,
   Flex,
-  Label,
   Menu,
-  MenuButton,
-  MenuButtonProps,
   MenuDivider,
-  MenuItem,
   Stack,
   Text,
-  Tooltip,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling, user avatar .
 } from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {UserAvatar} from '../../../../components'
 import {getProviderTitle} from '../../../../store'
-import {type StudioThemeColorSchemeKey} from '../../../../theme'
-import {
-  useColorSchemeOptions,
-  useColorSchemeSetValue,
-  useColorSchemeValue,
-} from '../../../colorScheme'
+import {useColorSchemeSetValue, useColorSchemeValue} from '../../../colorScheme'
 import {useWorkspace} from '../../../workspace'
-import {userHasRole} from '../../../../util/userHasRole'
+import {MenuButton, MenuButtonProps, MenuItem, Tooltip} from '../../../../../ui-components'
 import {useTranslation} from '../../../../i18n'
 import {LoginProviderLogo} from './LoginProviderLogo'
 import {LocaleMenu} from './LocaleMenu'
-
-const AVATAR_SIZE = 1
+import {AppearanceMenu} from './ApperanceMenu'
+import {ManageMenu} from './ManageMenu'
 
 const StyledMenu = styled(Menu)`
   min-width: 200px;
@@ -39,53 +30,22 @@ const StyledMenu = styled(Menu)`
 
 const AvatarBox = styled(Box)`
   position: relative;
-  min-width: ${({theme}) => theme.sanity.avatar.sizes[AVATAR_SIZE].size}px;
-  min-height: ${({theme}) => theme.sanity.avatar.sizes[AVATAR_SIZE].size}px;
+  min-width: ${({theme}) => theme.sanity.avatar.sizes[2].size}px;
+  min-height: ${({theme}) => theme.sanity.avatar.sizes[2].size}px;
 `
 
-function AppearanceMenu({setScheme}: {setScheme: (nextScheme: StudioThemeColorSchemeKey) => void}) {
-  const {t} = useTranslation()
-  // Subscribe to just what we need, if the menu isn't shown then we're not subscribed to these contexts
-  const options = useColorSchemeOptions(setScheme, t)
-
-  return (
-    <>
-      <MenuDivider />
-
-      <Box padding={2}>
-        <Label size={1} muted>
-          {t('user-menu.appearance-title')}
-        </Label>
-      </Box>
-
-      {options.map(({icon, label, name, onSelect, selected, title}) => (
-        <MenuItem
-          key={name}
-          aria-label={label}
-          icon={icon}
-          onClick={onSelect}
-          pressed={selected}
-          text={title}
-          iconRight={selected && <CheckmarkIcon />}
-        />
-      ))}
-    </>
-  )
-}
-
 export function UserMenu() {
-  const {currentUser, projectId, auth} = useWorkspace()
+  const {currentUser, auth} = useWorkspace()
   const scheme = useColorSchemeValue()
   const setScheme = useColorSchemeSetValue()
 
-  const isAdmin = Boolean(currentUser && userHasRole(currentUser, 'administrator'))
   const providerTitle = getProviderTitle(currentUser?.provider)
 
   const {t} = useTranslation()
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
-      placement: 'bottom-end',
+      placement: 'bottom',
       portal: true,
       preventOverflow: true,
       scheme: scheme,
@@ -97,13 +57,8 @@ export function UserMenu() {
   return (
     <MenuButton
       button={
-        <Button mode="bleed" padding={0} paddingX={1}>
-          <Flex align="center" gap={1}>
-            <UserAvatar user="me" size={1} />
-            <Text size={AVATAR_SIZE} muted>
-              <ChevronDownIcon />
-            </Text>
-          </Flex>
+        <Button mode="bleed" padding={0} radius="full">
+          <UserAvatar size={1} user="me" />
         </Button>
       }
       id="user-menu"
@@ -114,22 +69,16 @@ export function UserMenu() {
               <Tooltip
                 disabled={!providerTitle}
                 portal
-                content={
-                  providerTitle && (
-                    <Box padding={2}>
-                      <Text size={1}>{t('user-menu.login-provider', {providerTitle})}</Text>
-                    </Box>
-                  )
-                }
+                content={t('user-menu.login-provider', {providerTitle})}
               >
                 <AvatarBox marginRight={3}>
-                  <UserAvatar size={AVATAR_SIZE} user="me" />
+                  <UserAvatar size={2} user="me" />
                   {currentUser?.provider && <LoginProviderLogo provider={currentUser.provider} />}
                 </AvatarBox>
               </Tooltip>
 
               <Stack space={2} flex={1}>
-                <Text size={2} weight="medium" textOverflow="ellipsis">
+                <Text size={1} weight="medium" textOverflow="ellipsis">
                   {currentUser?.name}
                 </Text>
 
@@ -141,28 +90,8 @@ export function UserMenu() {
           </Card>
 
           {setScheme && <AppearanceMenu setScheme={setScheme} />}
-
           <LocaleMenu />
-          <MenuDivider />
-
-          <MenuItem
-            as="a"
-            aria-label={t('user-menu.action.manage-project-aria-label')}
-            href={`https://sanity.io/manage/project/${projectId}`}
-            target="_blank"
-            text={t('user-menu.action.manage-project')}
-            icon={CogIcon}
-          />
-          {isAdmin && (
-            <MenuItem
-              as="a"
-              aria-label={t('user-menu.action.invite-members-aria-label')}
-              href={`https://sanity.io/manage/project/${projectId}/members`}
-              target="_blank"
-              text={t('user-menu.action.invite-members')}
-              icon={UsersIcon}
-            />
-          )}
+          <ManageMenu />
 
           {auth.logout && (
             <>
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
index 9a75b1aaeb4..ade94d1d135 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceAuth/WorkspaceAuth.tsx
@@ -1,12 +1,13 @@
-import {Box, Button, Card, Flex, Stack} from '@sanity/ui'
+import {Box, Card, Flex, Stack} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {omit} from 'lodash'
 import {AddIcon, ArrowLeftIcon, ChevronRightIcon} from '@sanity/icons'
+import {Button} from '../../../../../../ui-components'
+import {LoadingBlock} from '../../../../../components/loadingBlock'
 import {useActiveWorkspace} from '../../../../activeWorkspaceMatcher'
 import {useWorkspaces} from '../../../../workspaces'
 import {WorkspacePreview} from '../WorkspacePreview'
 import {useWorkspaceAuthStates} from '../hooks'
-import {LoadingScreen} from '../../../../screens'
 import {WORKSPACES_DOCS_URL} from '../constants'
 import {useTranslation} from '../../../../../i18n'
 import {Layout} from './Layout'
@@ -27,7 +28,7 @@ export function WorkspaceAuth() {
   const handleBack = useCallback(() => setSelectedWorkspaceName(null), [])
   const {t} = useTranslation()
 
-  if (!authStates) return <LoadingScreen />
+  if (!authStates) return <LoadingBlock showText />
 
   if (LoginComponent && selectedWorkspace) {
     return (
@@ -35,11 +36,9 @@ export function WorkspaceAuth() {
         {workspaces.length > 1 && (
           <Flex>
             <Button
-              fontSize={1}
               icon={ArrowLeftIcon}
               mode="bleed"
               onClick={handleBack}
-              padding={2}
               text={t('workspaces.action.choose-another-workspace')}
             />
           </Flex>
@@ -76,9 +75,9 @@ export function WorkspaceAuth() {
             as="a"
             href={WORKSPACES_DOCS_URL}
             icon={AddIcon}
-            justify="flex-start"
             mode="bleed"
             rel="noopener noreferrer"
+            size="large"
             target="__blank"
             text={t('workspaces.action.add-workspace')}
           />
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index 7d7ea845275..5fbfff2dd55 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -1,137 +1,162 @@
-import {SelectIcon} from '@sanity/icons'
+import {CheckmarkIcon, ChevronDownIcon} from '@sanity/icons'
 import {
+  Box,
+  // eslint-disable-next-line no-restricted-imports
   Button,
-  MenuButton,
-  MenuItem,
   Menu,
-  MenuButtonProps,
-  Box,
-  Label,
-  Tooltip,
+  Flex,
+  Card,
   Text,
-  Stack,
 } from '@sanity/ui'
-import React, {useCallback, useMemo, useState} from 'react'
+import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {useTranslation} from '../../../../i18n'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
-import {useColorScheme} from '../../../colorScheme'
 import {useWorkspaces} from '../../../workspaces'
+import {MenuButton, MenuButtonProps, MenuItem} from '../../../../../ui-components'
+import {SanityLogo} from '../SanityLogo'
 import {useWorkspaceAuthStates} from './hooks'
-import {WorkspacePreview} from './WorkspacePreview'
-import {useRouter} from 'sanity/router'
+import {STATE_TITLES, WorkspacePreviewIcon} from './WorkspacePreview'
+import {useRouter, useStateLink} from 'sanity/router'
 
 const StyledMenu = styled(Menu)`
   max-width: 350px;
   min-width: 250px;
 `
 
-interface WorkspaceMenuButtonProps {
-  collapsed?: boolean
-}
+const LOGO_MARK_SIZE = 25 // width and height, px
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {constrainSize: true}
 
-export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) {
-  const {collapsed = false} = props
-  const [menuOpen, setMenuOpen] = useState<boolean>(false)
-  const {scheme} = useColorScheme()
+const LogoMarkContainer = styled(Card).attrs({
+  overflow: 'hidden',
+  radius: 2,
+})`
+  height: ${LOGO_MARK_SIZE}px;
+  width: ${LOGO_MARK_SIZE}px;
+`
+
+export function WorkspaceMenuButton() {
   const workspaces = useWorkspaces()
   const {activeWorkspace, setActiveWorkspace} = useActiveWorkspace()
   const [authStates] = useWorkspaceAuthStates(workspaces)
   const {navigateUrl} = useRouter()
   const {t} = useTranslation()
 
-  const handleOnOpen = useCallback(() => setMenuOpen(true), [])
-  const handleOnClose = useCallback(() => setMenuOpen(false), [])
+  const multipleWorkspaces = workspaces.length > 1
 
-  const popoverProps: MenuButtonProps['popover'] = useMemo(
-    () => ({constrainSize: true, scheme, portal: true}),
-    [scheme],
-  )
-  // Tooltip should be disabled in the Navdrawer
-  const tooltipDisabled = menuOpen || !collapsed
-  const ariaLabel = collapsed ? t('workspaces.select-workspace-aria-label') : undefined
-  const buttonText = collapsed ? undefined : t('workspaces.select-workspace-label')
+  const {href: rootHref, onClick: handleRootClick} = useStateLink({state: {}})
 
-  return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>{t('workspaces.title')}</Text>
-        </Box>
-      }
-      disabled={tooltipDisabled}
-      placement="bottom"
-      portal
-      scheme={scheme}
-    >
-      <Stack>
-        <MenuButton
-          button={
-            <Button
-              icon={SelectIcon}
-              mode="bleed"
-              text={buttonText}
-              disabled={!authStates}
-              aria-label={ariaLabel}
-              justify={collapsed ? undefined : 'flex-start'}
-            />
-          }
-          id="workspaces"
-          menu={
-            <StyledMenu>
-              <Box paddingX={3} paddingY={3}>
-                <Label size={1} muted>
-                  {t('workspaces.title')}
-                </Label>
-              </Box>
+  // TODO: add conditional tooltip
+  const button = useMemo(() => {
+    return (
+      <Button
+        aria-label={
+          multipleWorkspaces ? t('workspaces.select-workspace-aria-label') : activeWorkspace.title
+        }
+        disabled={!authStates}
+        href={multipleWorkspaces ? undefined : rootHref}
+        onClick={multipleWorkspaces ? undefined : handleRootClick}
+        mode="bleed"
+        padding={0}
+        paddingRight={2}
+      >
+        <Flex align="center" gap={2}>
+          <LogoMarkContainer>
+            <Flex align="center" height="fill" justify="center">
+              {/* Display the Sanity logo only if one workspace is active and no custom icon is defined */}
+              {multipleWorkspaces || activeWorkspace.customIcon ? (
+                <WorkspacePreviewIcon icon={activeWorkspace.icon} size="small" />
+              ) : (
+                <SanityLogo />
+              )}
+            </Flex>
+          </LogoMarkContainer>
+          <Box>
+            <Text size={1} weight="medium">
+              {activeWorkspace.title}
+            </Text>
+          </Box>
+          {multipleWorkspaces && (
+            <Text size={1}>
+              <ChevronDownIcon />
+            </Text>
+          )}
+        </Flex>
+      </Button>
+    )
+  }, [
+    activeWorkspace.customIcon,
+    activeWorkspace.icon,
+    activeWorkspace.title,
+    authStates,
+    handleRootClick,
+    multipleWorkspaces,
+    rootHref,
+    t,
+  ])
 
-              {authStates &&
-                workspaces.map((workspace) => {
-                  const authState = authStates[workspace.name]
+  if (!multipleWorkspaces) {
+    return button
+  }
 
-                  // eslint-disable-next-line no-nested-ternary
-                  const state = authState.authenticated
-                    ? 'logged-in'
-                    : workspace.auth.LoginComponent
-                      ? 'logged-out'
-                      : 'no-access'
+  // @todo: fix an issue in Sanity UI <MenuButton> components where, when open with a selected item,
+  // clicking the menu button causes the menu to close and immediately re-open.
+  return (
+    <>
+      <MenuButton
+        button={button}
+        id="workspace-menu"
+        menu={
+          <StyledMenu>
+            {authStates &&
+              workspaces.map((workspace) => {
+                const authState = authStates[workspace.name]
 
-                  const handleSelectWorkspace = () => {
-                    if (state === 'logged-in' && workspace.name !== activeWorkspace.name) {
-                      setActiveWorkspace(workspace.name)
-                    }
+                // eslint-disable-next-line no-nested-ternary
+                const state = authState.authenticated
+                  ? 'logged-in'
+                  : workspace.auth.LoginComponent
+                    ? 'logged-out'
+                    : 'no-access'
 
-                    // Navigate to the base path of the workspace to authenticate
-                    if (state === 'logged-out') {
-                      navigateUrl({path: workspace.basePath})
-                    }
+                const handleSelectWorkspace = () => {
+                  if (state === 'logged-in' && workspace.name !== activeWorkspace.name) {
+                    setActiveWorkspace(workspace.name)
                   }
 
-                  return (
-                    <MenuItem
-                      key={workspace.name}
-                      // eslint-disable-next-line react/jsx-no-bind
-                      onClick={handleSelectWorkspace}
-                      padding={2}
-                      pressed={workspace.name === activeWorkspace.name}
-                    >
-                      <WorkspacePreview
-                        icon={workspace?.icon}
-                        selected={workspace.name === activeWorkspace.name}
-                        state={state}
-                        subtitle={workspace?.subtitle}
-                        title={workspace?.title || workspace.name}
-                      />
-                    </MenuItem>
-                  )
-                })}
-            </StyledMenu>
-          }
-          onClose={handleOnClose}
-          onOpen={handleOnOpen}
-          popover={popoverProps}
-        />
-      </Stack>
-    </Tooltip>
+                  // Navigate to the base path of the workspace to authenticate
+                  if (state === 'logged-out') {
+                    navigateUrl({path: workspace.basePath})
+                  }
+                }
+                const isSelected = workspace.name === activeWorkspace.name
+                return (
+                  <MenuItem
+                    badgeText={STATE_TITLES[state]}
+                    iconRight={isSelected ? CheckmarkIcon : undefined}
+                    key={workspace.name}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick={handleSelectWorkspace}
+                    pressed={isSelected}
+                    preview={<WorkspacePreviewIcon icon={workspace.icon} size="small" />}
+                    selected={isSelected}
+                    text={workspace?.title || workspace.name}
+                    tooltipProps={
+                      workspace?.subtitle
+                        ? {
+                            content: workspace.subtitle,
+                            placement: 'right',
+                          }
+                        : undefined
+                    }
+                  />
+                )
+              })}
+          </StyledMenu>
+        }
+        popover={POPOVER_PROPS}
+      />
+    </>
   )
 }
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
index 8ea2e464a53..ad553937b43 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
@@ -1,18 +1,23 @@
 import {CheckmarkIcon} from '@sanity/icons'
-import {Flex, Stack, Box, Text, Card} from '@sanity/ui'
+import {Flex, Stack, Box, Text} from '@sanity/ui'
 import React, {createElement, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 
-const STATE_TITLES = {
+export const STATE_TITLES = {
   'logged-in': '',
   'logged-out': 'Signed out',
   'no-access': '',
 }
 
-export const MediaCard = styled(Card)`
-  width: 35px;
-  height: 35px;
+type PreviewIconSize = 'small' | 'large'
+interface MediaProps {
+  $size: PreviewIconSize
+}
+
+export const Media = styled.div<MediaProps>`
+  width: ${(props) => (props.$size === 'small' ? '25px' : '41px')};
+  height: ${(props) => (props.$size === 'small' ? '25px' : '41px')};
 
   svg {
     width: 100%;
@@ -20,6 +25,18 @@ export const MediaCard = styled(Card)`
   }
 `
 
+export const WorkspacePreviewIcon = ({
+  icon,
+  size = 'small',
+}: {
+  icon: React.ComponentType | React.ReactNode
+  size: PreviewIconSize
+}) => {
+  const iconComponent = useMemo(() => createIcon(icon), [icon])
+
+  return <Media $size={size}>{iconComponent}</Media>
+}
+
 const createIcon = (icon: React.ComponentType | React.ReactNode) => {
   if (isValidElementType(icon)) return createElement(icon)
   if (isValidElement(icon)) return icon
@@ -38,17 +55,14 @@ export interface WorkspacePreviewProps {
 export function WorkspacePreview(props: WorkspacePreviewProps) {
   const {state, subtitle, selected, title, icon, iconRight} = props
 
-  const iconComponent = useMemo(() => createIcon(icon), [icon])
   const iconRightComponent = useMemo(() => createIcon(iconRight), [iconRight])
 
   return (
     <Flex align="center" flex="none" gap={3}>
-      <MediaCard radius={2} tone="transparent">
-        {iconComponent}
-      </MediaCard>
+      <WorkspacePreviewIcon icon={icon} size="small" />
 
       <Stack flex={1} space={2}>
-        <Text textOverflow="ellipsis" weight="medium">
+        <Text size={1} textOverflow="ellipsis" weight="medium">
           {title}
         </Text>
 
diff --git a/packages/sanity/src/core/studio/screens/AuthenticateScreen.tsx b/packages/sanity/src/core/studio/screens/AuthenticateScreen.tsx
index e322892f36d..488ff4648fb 100644
--- a/packages/sanity/src/core/studio/screens/AuthenticateScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/AuthenticateScreen.tsx
@@ -4,7 +4,7 @@ import {WorkspaceAuth} from '../components/navbar/workspace'
 
 export function AuthenticateScreen() {
   return (
-    <Card height="fill" overflow="auto">
+    <Card height="fill" overflow="auto" paddingX={4}>
       <Flex height="fill" direction="column" align="center" justify="center" paddingTop={4}>
         <Container width={0}>
           <WorkspaceAuth />
diff --git a/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx b/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
index 6234c40935c..516a6e3fce2 100644
--- a/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/CorsOriginErrorScreen.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
-import {Card, Dialog, Stack, Button, Text, TextInput, Flex} from '@sanity/ui'
+import {Card, Stack, Text, TextInput, Flex} from '@sanity/ui'
 import React, {useEffect, useMemo} from 'react'
 import {LaunchIcon} from '@sanity/icons'
 import styled from 'styled-components'
+import {Button, Dialog} from '../../../ui-components'
 
 interface CorsOriginErrorScreenProps {
   projectId?: string
@@ -44,8 +45,23 @@ export function CorsOriginErrorScreen(props: CorsOriginErrorScreenProps) {
 
   return (
     <Card height="fill">
-      <Dialog id="cors-error-dialog" header="Before you continue..." width={1}>
-        <Stack paddingX={4} paddingY={5} space={4}>
+      <Dialog
+        id="cors-error-dialog"
+        header="Before you continue..."
+        width={1}
+        footer={{
+          confirmButton: {
+            text: 'Continue',
+            iconRight: LaunchIcon,
+            as: 'a',
+            href: corsUrl,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            tone: 'primary',
+          },
+        }}
+      >
+        <Stack space={4}>
           <Text>
             To access your content, you need to <b>add the following URL as a CORS origin</b> to
             your Sanity project.
@@ -54,15 +70,6 @@ export function CorsOriginErrorScreen(props: CorsOriginErrorScreenProps) {
           {/* added for accessibility */}
           <ScreenReaderLabel aria-hidden="true">CORS URL to be added</ScreenReaderLabel>
           <TextInput value={origin} readOnly />
-
-          <Button as="a" href={corsUrl} target="_blank" rel="noopener noreferrer" tone="primary">
-            <Flex align="center" justify="center" gap={3}>
-              <Text weight="medium">Continue</Text>
-              <Text weight="medium">
-                <LaunchIcon />
-              </Text>
-            </Flex>
-          </Button>
         </Stack>
       </Dialog>
     </Card>
diff --git a/packages/sanity/src/core/studio/screens/LoadingScreen.tsx b/packages/sanity/src/core/studio/screens/LoadingScreen.tsx
deleted file mode 100644
index 185ed1f4707..00000000000
--- a/packages/sanity/src/core/studio/screens/LoadingScreen.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable i18next/no-literal-string */
-import React from 'react'
-import {Flex, Spinner, Card, Text} from '@sanity/ui'
-
-export function LoadingScreen() {
-  return (
-    // TODO: improve the design of this
-    // think about having it load in the `_document` too
-    <Flex
-      // TODO: currently this card is here to accommodate dark mode vs light
-      // mode backgrounds, however that logic should probably exist globally
-      as={Card}
-      justify="center"
-      align="center"
-      height="fill"
-      direction="column"
-      gap={4}
-    >
-      <Text muted>Loading…</Text>
-      <Spinner muted />
-    </Flex>
-  )
-}
diff --git a/packages/sanity/src/core/studio/screens/NoSourcesScreen.tsx b/packages/sanity/src/core/studio/screens/NoSourcesScreen.tsx
index 6b867e80d40..d8040a5f45c 100644
--- a/packages/sanity/src/core/studio/screens/NoSourcesScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NoSourcesScreen.tsx
@@ -16,7 +16,7 @@ export function NoSourcesScreen() {
                 </Text>
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="bold">
+                <Text as="h1" size={1} weight="medium">
                   No configured sources!
                 </Text>
                 <Text as="p" muted size={1}>
diff --git a/packages/sanity/src/core/studio/screens/NoToolsScreen.tsx b/packages/sanity/src/core/studio/screens/NoToolsScreen.tsx
index 43249ffb066..016c6c80a3b 100644
--- a/packages/sanity/src/core/studio/screens/NoToolsScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NoToolsScreen.tsx
@@ -16,7 +16,7 @@ export function NoToolsScreen() {
                 </Text>
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="bold">
+                <Text as="h1" size={1} weight="medium">
                   No configured tools
                 </Text>
                 <Text as="p" muted size={1}>
diff --git a/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx b/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
index 06b3cce657e..b3d42aeccc2 100644
--- a/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NotAuthenticatedScreen.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
 import {CurrentUser} from '@sanity/types'
-import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
+import {Card, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useEffect, useState} from 'react'
+import {Dialog} from '../../../ui-components'
 import {getProviderTitle} from '../../store'
 import {useActiveWorkspace} from '../activeWorkspaceMatcher'
 
@@ -39,13 +40,15 @@ export function NotAuthenticatedScreen() {
         id="not-authorized-dialog"
         header="Not authorized"
         width={1}
-        footer={
-          <Stack paddingX={3} paddingY={2}>
-            <Button text="Sign out" onClick={handleLogout} />
-          </Stack>
-        }
+        footer={{
+          confirmButton: {
+            text: 'Sign out',
+            onClick: handleLogout,
+            tone: 'default',
+          },
+        }}
       >
-        <Stack paddingX={4} paddingY={5} space={4}>
+        <Stack space={4}>
           <Text>
             You are not authorized to access this studio. Maybe you could ask someone to invite you
             to collaborate on this project?
diff --git a/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx b/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
index df0f16b884f..0b28f843075 100644
--- a/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/NotFoundScreen.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
-import {Button, Card, Flex, Heading, Inline, Stack} from '@sanity/ui'
+import {Card, Flex, Heading, Inline, Stack} from '@sanity/ui'
 import React from 'react'
+import {Button} from '../../../ui-components'
 
 export function NotFoundScreen(props: {onNavigateToDefaultWorkspace: () => void}) {
   return (
diff --git a/packages/sanity/src/core/studio/screens/ToolNotFoundScreen.tsx b/packages/sanity/src/core/studio/screens/ToolNotFoundScreen.tsx
index 030714489bc..de531a6d04d 100644
--- a/packages/sanity/src/core/studio/screens/ToolNotFoundScreen.tsx
+++ b/packages/sanity/src/core/studio/screens/ToolNotFoundScreen.tsx
@@ -18,7 +18,7 @@ export function ToolNotFoundScreen(props: {toolName: string}) {
                 </Text>
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="bold">
+                <Text as="h1" size={1} weight="medium">
                   Tool not found: <code>{toolName}</code>
                 </Text>
               </Stack>
diff --git a/packages/sanity/src/core/studio/screens/index.ts b/packages/sanity/src/core/studio/screens/index.ts
index 33c7a64b54a..0241b8cc7d5 100644
--- a/packages/sanity/src/core/studio/screens/index.ts
+++ b/packages/sanity/src/core/studio/screens/index.ts
@@ -1,4 +1,3 @@
-export * from './LoadingScreen'
 export * from './schemaErrors'
 export * from './NotFoundScreen'
 export * from './AuthenticateScreen'
diff --git a/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx b/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
index 3913ab255fe..62c8ed7992c 100644
--- a/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
+++ b/packages/sanity/src/core/studio/screens/schemaErrors/InitialValueTemplateError.tsx
@@ -1,20 +1,19 @@
 /* eslint-disable i18next/no-literal-string,@sanity/i18n/no-attribute-string-literals */
-import {Box, Dialog, Stack, Text} from '@sanity/ui'
+import {Box, Stack, Text} from '@sanity/ui'
 import React from 'react'
+import {Dialog} from '../../../../ui-components'
 
 export function InitialValueTemplateError({errors}: {errors: Error[]}) {
   return (
     <Dialog header="Initial value template error" id="initial-value-error-dialog" width={1}>
-      <Box padding={4}>
-        <Stack space={4}>
-          <Text>Failed to load initial value templates:</Text>
-          {errors.map((error: Error) => (
-            <Text key={error.message}>
-              <code>{error.message}</code>
-            </Text>
-          ))}
-        </Stack>
-      </Box>
+      <Stack space={4}>
+        <Text>Failed to load initial value templates:</Text>
+        {errors.map((error: Error) => (
+          <Text key={error.message}>
+            <code>{error.message}</code>
+          </Text>
+        ))}
+      </Stack>
     </Dialog>
   )
 }
diff --git a/packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx b/packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx
index c3fbcf10d89..4f4796dc568 100644
--- a/packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx
+++ b/packages/sanity/src/core/studio/screens/schemaErrors/SchemaProblemGroups.tsx
@@ -57,7 +57,7 @@ export function SchemaProblemGroups(props: {problemGroups: SchemaValidationProbl
               </Box>
 
               <Box flex={1}>
-                <Text size={1} weight="semibold">
+                <Text size={1} weight="medium">
                   {schemaType ? (
                     <>
                       {capitalize(schemaType.type)} type "{schemaType.name}"
diff --git a/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts b/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts
index b4e3236370f..2edb8d9de9f 100644
--- a/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts
+++ b/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts
@@ -32,6 +32,7 @@ export function useNavbarComponent(): ComponentType<Omit<NavbarProps, 'renderDef
 
 /**
  * @internal
+ * @deprecated Use `useLogoMarkComponent` instead.
  */
 export function useLogoComponent(): ComponentType<Omit<LogoProps, 'renderDefault'>> {
   return useMiddlewareComponents({
diff --git a/packages/sanity/src/core/studio/workspaceLoader/ErrorMessage.tsx b/packages/sanity/src/core/studio/workspaceLoader/ErrorMessage.tsx
index 4053f22a103..39574bd4772 100644
--- a/packages/sanity/src/core/studio/workspaceLoader/ErrorMessage.tsx
+++ b/packages/sanity/src/core/studio/workspaceLoader/ErrorMessage.tsx
@@ -25,7 +25,7 @@ export function ErrorMessage({error, message, path, stack}: ErrorMessageProps) {
   return (
     <ErrorMessageRoot forwardedAs={Flex} direction="column" gap={4}>
       <Flex direction="column" gap={2}>
-        <Text weight="semibold" size={3}>
+        <Text weight="medium" size={3}>
           {startCase(last.type)} Error
         </Text>
       </Flex>
diff --git a/packages/sanity/src/core/theme/_legacy/color.ts b/packages/sanity/src/core/theme/_legacy/color.ts
index bf8882e9929..34e7853873e 100644
--- a/packages/sanity/src/core/theme/_legacy/color.ts
+++ b/packages/sanity/src/core/theme/_legacy/color.ts
@@ -1,5 +1,5 @@
 import {hues} from '@sanity/color'
-import {createColorTheme, rgba, ThemeColorSchemes} from '@sanity/ui'
+import {createColorTheme, rgba, ThemeColorSchemes} from '@sanity/ui/theme'
 import {_multiply, _screen, _isDark} from './helpers'
 import {LegacyPalette} from './palette'
 import {LegacyTones} from './tones'
@@ -101,6 +101,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[200]),
           fg: blend(base.bg, buttonTones.bg),
+          icon: blend(base.bg, buttonTones.bg),
           muted: {
             fg: blend(base.bg, tints[50]),
           },
@@ -129,6 +130,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[600]),
           fg: blend(base.bg, buttonTones.bg),
+          icon: blend(base.bg, buttonTones.bg),
           muted: {
             fg: blend(base.bg, tints[200]),
           },
@@ -157,6 +159,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[800]),
           fg: blend(base.bg, buttonTones.bg),
+          icon: blend(base.bg, buttonTones.bg),
           muted: {
             fg: blend(base.bg, tints[200]),
           },
@@ -189,6 +192,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[800]),
           fg: blend(base.bg, buttonTones.bg),
+          icon: blend(base.bg, buttonTones.bg),
           muted: {
             fg: blend(base.bg, tints[200]),
           },
@@ -216,6 +220,7 @@ export function buildColor(
         bg,
         border: blend(base.bg, tints[500]),
         fg: blend(base.bg, buttonTones.bg),
+        icon: blend(base.bg, buttonTones.bg),
         muted: {
           fg: blend(base.bg, tints[100]),
         },
@@ -255,6 +260,7 @@ export function buildColor(
           bg,
           border: blend(base.bg, tints[50]),
           fg: blend(base.bg, tints[200]),
+          icon: blend(base.bg, tints[200]),
           muted: {
             fg: blend(bg, tints[100]),
           },
@@ -283,6 +289,7 @@ export function buildColor(
           bg,
           border: blend(bg, tints[100]),
           fg: blend(base.bg, tints[900]),
+          icon: blend(base.bg, tints[900]),
           muted: {
             fg: blend(base.bg, tints[600]),
           },
@@ -315,6 +322,7 @@ export function buildColor(
           bg,
           border: blend(bg, tints[100]),
           fg: blend(base.bg, tints[800]),
+          icon: blend(base.bg, tints[800]),
           muted: {
             fg: blend(base.bg, tints[600]),
           },
@@ -347,6 +355,7 @@ export function buildColor(
           bg,
           border: blend(bg, tints[100]),
           fg: blend(bg, tints[800]),
+          icon: blend(bg, tints[800]),
           muted: {
             fg: blend(bg, tints[600]),
           },
@@ -374,6 +383,7 @@ export function buildColor(
         bg,
         border: blend(bg, tints[100]),
         fg: blend(bg, tints[700]),
+        icon: blend(bg, tints[700]),
         muted: {
           fg: blend(bg, tints[600]),
         },
@@ -472,6 +482,7 @@ export function buildColor(
       return {
         bg,
         fg: base.fg,
+        icon: base.fg,
         border: base.border,
         muted: {
           fg: blend(base.bg, tints[dark ? 400 : 600]),
@@ -503,6 +514,7 @@ export function buildColor(
 
         return {
           bg: blend(base.bg, tints[50]),
+          bg2: blend(base.bg, tints[50]),
           fg: blend(base.bg, tints[700]),
           border: blend(base.bg, tints[200]),
           placeholder: blend(base.bg, tints[400]),
@@ -512,6 +524,7 @@ export function buildColor(
       if (state === 'hovered') {
         return {
           bg: base.bg,
+          bg2: base.bg,
           fg: base.fg,
           border: blend(base.bg, hues.gray[300].hex),
           placeholder: blend(base.bg, hues.gray[400].hex),
@@ -521,6 +534,7 @@ export function buildColor(
       if (state === 'disabled') {
         return {
           bg: blend(base.bg, hues.gray[50].hex),
+          bg2: blend(base.bg, hues.gray[50].hex),
           fg: blend(base.bg, hues.gray[200].hex),
           border: blend(base.bg, hues.gray[100].hex),
           placeholder: blend(base.bg, hues.gray[100].hex),
@@ -530,6 +544,7 @@ export function buildColor(
       if (state === 'readOnly') {
         return {
           bg: blend(base.bg, hues.gray[50].hex),
+          bg2: blend(base.bg, hues.gray[50].hex),
           fg: blend(base.bg, hues.gray[800].hex),
           border: blend(base.bg, hues.gray[200].hex),
           placeholder: blend(base.bg, hues.gray[400].hex),
@@ -538,6 +553,7 @@ export function buildColor(
 
       return {
         bg: base.bg,
+        bg2: base.bg,
         fg: base.fg,
         border: base.border,
         placeholder: blend(base.bg, hues.gray[700].hex),
diff --git a/packages/sanity/src/core/theme/_legacy/helpers.ts b/packages/sanity/src/core/theme/_legacy/helpers.ts
index 9998ddd2070..28ba6219207 100644
--- a/packages/sanity/src/core/theme/_legacy/helpers.ts
+++ b/packages/sanity/src/core/theme/_legacy/helpers.ts
@@ -1,4 +1,4 @@
-import {parseColor, rgbToHex, screen, multiply} from '@sanity/ui'
+import {parseColor, rgbToHex, screen, multiply} from '@sanity/ui/theme'
 import {getLuminance, mix, parseToRgb, rgb} from 'polished'
 import {LegacyThemeTints} from './types'
 
diff --git a/packages/sanity/src/core/theme/_legacy/theme.ts b/packages/sanity/src/core/theme/_legacy/theme.ts
index 18473eac0cd..a8c44618c42 100644
--- a/packages/sanity/src/core/theme/_legacy/theme.ts
+++ b/packages/sanity/src/core/theme/_legacy/theme.ts
@@ -28,8 +28,8 @@ import {LegacyThemeProps} from './types'
  * ```
  *
  * @param partialLegacyTheme - Properties to override the theme with. See {@link LegacyThemeProps}
- *
  * @public
+ * @deprecated Legacy theming will be deprecated in a future version of Sanity Studio
  */
 export function buildLegacyTheme(partialLegacyTheme: Partial<LegacyThemeProps>): StudioTheme {
   const legacyTheme = resolveLegacyTheme(partialLegacyTheme)
diff --git a/packages/sanity/src/core/theme/index.ts b/packages/sanity/src/core/theme/index.ts
index c363e171c00..930df348e45 100644
--- a/packages/sanity/src/core/theme/index.ts
+++ b/packages/sanity/src/core/theme/index.ts
@@ -1,11 +1,10 @@
-import {studioTheme} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
 import {StudioTheme} from './types'
 
 export * from './_legacy'
 export * from './types'
 
 /** @internal */
-export const defaultTheme: StudioTheme = {
-  ...studioTheme,
-  focusRing: {offset: -1, width: 2},
-}
+export const defaultTheme: StudioTheme = buildTheme({
+  container: [320, 640, 960, 1280, 1600, 1920],
+})
diff --git a/packages/sanity/src/core/theme/types.ts b/packages/sanity/src/core/theme/types.ts
index b9aa11442ed..993f167185b 100644
--- a/packages/sanity/src/core/theme/types.ts
+++ b/packages/sanity/src/core/theme/types.ts
@@ -1,4 +1,4 @@
-import type {RootTheme, ThemeColorSchemeKey} from '@sanity/ui'
+import type {RootTheme, ThemeColorSchemeKey} from '@sanity/ui/theme'
 
 /** @public */
 export interface StudioTheme extends RootTheme {
diff --git a/packages/sanity/src/core/util/resizeObserver.ts b/packages/sanity/src/core/util/resizeObserver.ts
index 801f6716c39..aeefef2bc9a 100644
--- a/packages/sanity/src/core/util/resizeObserver.ts
+++ b/packages/sanity/src/core/util/resizeObserver.ts
@@ -13,6 +13,7 @@ export interface SharedResizeObserver {
     observer: Subscriber<ResizeObserverEntry>,
     options?: ResizeObserverOptions,
   ) => () => void
+  unobserve: (element: Element) => void
 }
 
 /** @internal */
@@ -43,6 +44,7 @@ export const createSharedResizeObserver = (): SharedResizeObserver => {
         resizeObserver.unobserve(element)
       }
     },
+    unobserve: (element: Element) => resizeObserver.unobserve(element),
   }
 }
 
diff --git a/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx b/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
index 85d5edd61a7..72fe65db783 100644
--- a/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
+++ b/packages/sanity/src/desk/__workshop__/DocumentStateStory.tsx
@@ -1,8 +1,10 @@
-import {Box, Code, Stack, Button, Dialog} from '@sanity/ui'
+import {Box, Code, Stack} from '@sanity/ui'
 import React, {useMemo, useState, useCallback, useEffect} from 'react'
+import {Button, Dialog} from '../../ui-components'
 import {DeskToolProvider} from '../DeskToolProvider'
 import {DocumentPaneProvider} from '../panes'
 import {DocumentPaneNode} from '../types'
+
 import {
   DocumentActionComponent,
   DocumentActionDescription,
@@ -114,7 +116,7 @@ function Debug(props: {documentId: string; documentType: string}) {
                   // eslint-disable-next-line react/jsx-handler-names
                   onClose={actionItem.dialog.onClose}
                 >
-                  <Box padding={4}>{actionItem.dialog.content}</Box>
+                  {actionItem.dialog.content}
                 </Dialog>
               )
             }
diff --git a/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx b/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
index 8d3b3f0782f..e7d5a43af85 100644
--- a/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
+++ b/packages/sanity/src/desk/comments/plugin/field/CommentsFieldButton.tsx
@@ -1,14 +1,11 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react'
 import {
-  Box,
-  Button,
   Flex,
-  Popover,
   Stack,
   Text,
-  Tooltip,
-  TooltipProps,
   useClickOutside,
+  // eslint-disable-next-line no-restricted-imports
+  Button as SanityUIButton, // Button with specific styling for the children
 } from '@sanity/ui'
 import styled from 'styled-components'
 import {
@@ -20,14 +17,9 @@ import {
   CommentIcon,
   MentionOptionsHookValue,
 } from '../../src'
+import {Button, Popover, Tooltip} from '../../../../ui-components'
 import {CurrentUser, PortableTextBlock} from 'sanity'
 
-const TOOLTIP_DELAY: TooltipProps['delay'] = {open: 500}
-
-const TooltipText = styled(Text)`
-  width: max-content;
-`
-
 const ContentStack = styled(Stack)`
   width: 320px;
 `
@@ -174,54 +166,40 @@ export function CommentsFieldButton(props: CommentsFieldButtonProps) {
         onKeyDown={handlePopoverKeyDown}
       >
         <div>
-          <Tooltip
-            delay={TOOLTIP_DELAY}
-            disabled={open}
-            portal
-            placement="top"
-            content={
-              <Box padding={2}>
-                <Text size={1}>Add comment</Text>
-              </Box>
-            }
-          >
-            <Button
-              aria-label="Add comment"
-              disabled={isRunningSetup}
-              fontSize={1}
-              icon={AddCommentIcon}
-              mode="bleed"
-              onClick={onClick}
-              padding={2}
-              ref={setAddCommentButtonElement}
-              selected={open}
-            />
-          </Tooltip>
+          <Button
+            aria-label="Add comment"
+            disabled={isRunningSetup}
+            icon={AddCommentIcon}
+            mode="bleed"
+            onClick={onClick}
+            ref={setAddCommentButtonElement}
+            selected={open}
+            tooltipProps={{
+              content: 'Add comment',
+              placement: 'top',
+            }}
+          />
         </div>
       </Popover>
     )
   }
 
   return (
-    <Tooltip
-      portal
-      placement="top"
-      content={
-        <Box padding={2} sizing="border">
-          <TooltipText size={1}>View comment{count > 1 ? 's' : ''}</TooltipText>
-        </Box>
-      }
-      delay={TOOLTIP_DELAY}
-      fallbackPlacements={['bottom']}
-    >
-      <Button aria-label="Open comments" mode="bleed" onClick={onClick} padding={2}>
+    <Tooltip portal placement="top" content={`View comment${count > 1 ? 's' : ''}`}>
+      <SanityUIButton
+        aria-label="Open comments"
+        mode="bleed"
+        onClick={onClick}
+        padding={2}
+        space={2}
+      >
         <Flex align="center" gap={2}>
           <Text size={1}>
             <CommentIcon />
           </Text>
           <Text size={0}>{count > 9 ? '9+' : count}</Text>
         </Flex>
-      </Button>
+      </SanityUIButton>
     </Tooltip>
   )
 }
diff --git a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
index ff8f5235135..cc56c55fae2 100644
--- a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
+++ b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorFeedbackFooter.tsx
@@ -16,22 +16,11 @@ const Link = styled.a`
 const FooterCard = styled(Card)({
   position: 'relative',
   zIndex: 1,
-
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    left: 0,
-    top: -1,
-    right: 0,
-    borderBottom: '1px solid var(--card-border-color)',
-    opacity: 0.5,
-  },
 })
 
 export function CommentsInspectorFeedbackFooter() {
   return (
-    <FooterCard padding={3}>
+    <FooterCard padding={4}>
       <Text muted size={1}>
         Help improve comments.{' '}
         <Link href={FEEDBACK_FORM_LINK} target="_blank" rel="noreferrer">
diff --git a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
index 1fad1c1f61d..ad4f6e1eea3 100644
--- a/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
+++ b/packages/sanity/src/desk/comments/plugin/inspector/CommentsInspectorHeader.tsx
@@ -1,8 +1,9 @@
 import {CheckmarkIcon, ChevronDownIcon, DoubleChevronRightIcon} from '@sanity/icons'
-import {Button, Card, Flex, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
+import {Card, Flex, Menu, Text} from '@sanity/ui'
 import {startCase} from 'lodash'
 import React, {forwardRef, useCallback} from 'react'
 import styled from 'styled-components'
+import {Button, MenuButton, MenuItem} from '../../../../ui-components'
 import {CommentStatus} from '../../src'
 import {BetaBadge} from 'sanity'
 
@@ -10,17 +11,6 @@ const Root = styled(Card)({
   position: 'relative',
   zIndex: 1,
   lineHeight: 0,
-
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    left: 0,
-    bottom: -1,
-    right: 0,
-    borderBottom: '1px solid var(--card-border-color)',
-    opacity: 0.5,
-  },
 })
 
 interface CommentsInspectorHeaderProps {
@@ -42,7 +32,7 @@ export const CommentsInspectorHeader = forwardRef(function CommentsInspectorHead
     <Root ref={ref}>
       <Flex padding={2}>
         <Flex align="center" flex={1} gap={2} paddingY={2} padding={3}>
-          <Text as="h1" size={1} weight="semibold">
+          <Text as="h1" size={1} weight="medium">
             Comments
           </Text>
 
@@ -52,26 +42,15 @@ export const CommentsInspectorHeader = forwardRef(function CommentsInspectorHead
         <Flex flex="none" padding={1} gap={2}>
           <MenuButton
             id="comment-status-menu-button"
-            button={
-              <Button
-                text={startCase(view)}
-                fontSize={1}
-                padding={2}
-                mode="bleed"
-                iconRight={ChevronDownIcon}
-                space={2}
-              />
-            }
+            button={<Button text={startCase(view)} mode="bleed" iconRight={ChevronDownIcon} />}
             menu={
               <Menu style={{width: '180px'}}>
                 <MenuItem
-                  fontSize={1}
                   iconRight={view === 'open' ? CheckmarkIcon : undefined}
                   onClick={handleSetOpenView}
                   text="Open comments"
                 />
                 <MenuItem
-                  fontSize={1}
                   iconRight={view === 'resolved' ? CheckmarkIcon : undefined}
                   onClick={handleSetResolvedView}
                   text="Resolved comments"
@@ -83,11 +62,10 @@ export const CommentsInspectorHeader = forwardRef(function CommentsInspectorHead
 
           <Button
             aria-label="Close comments"
-            fontSize={1}
             icon={DoubleChevronRightIcon}
             mode="bleed"
             onClick={onClose}
-            padding={2}
+            tooltipProps={{content: 'Close comments'}}
           />
         </Flex>
       </Flex>
diff --git a/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx b/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
index aa02014770d..dd663d8a8de 100644
--- a/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
+++ b/packages/sanity/src/desk/comments/src/components/CommentBreadcrumbs.tsx
@@ -1,6 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {Box, Flex, Stack, Text, Tooltip, TooltipProps} from '@sanity/ui'
+import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React, {Fragment, useMemo} from 'react'
+import {Tooltip} from '../../../../ui-components'
 
 export interface CommentBreadcrumbsProps {
   titlePath: string[]
@@ -9,11 +10,6 @@ export interface CommentBreadcrumbsProps {
 
 type Item = string | string[]
 
-const TOOLTIP_DELAY: TooltipProps['delay'] = {
-  close: 0,
-  open: 500,
-}
-
 const separator = (
   <Text muted>
     <ChevronRightIcon />
@@ -23,7 +19,7 @@ const separator = (
 const renderItem = (item: string, index: number) => {
   return (
     <Box as="li" key={`${item}-${index}`}>
-      <Text textOverflow="ellipsis" size={1} weight="semibold">
+      <Text textOverflow="ellipsis" size={1} weight="medium">
         {item}
       </Text>
     </Box>
@@ -58,7 +54,6 @@ export function CommentBreadcrumbs(props: CommentBreadcrumbsProps) {
         return (
           <Fragment key={key}>
             <Tooltip
-              delay={TOOLTIP_DELAY}
               content={
                 <Stack space={2} padding={2}>
                   {item.map(renderItem)}
diff --git a/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx b/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
index 51ddd7db798..82d44053ae7 100644
--- a/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
+++ b/packages/sanity/src/desk/comments/src/components/CommentDeleteDialog.tsx
@@ -1,5 +1,6 @@
-import {Dialog, Grid, Button, Stack, Text} from '@sanity/ui'
+import {Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Dialog} from '../../../../ui-components'
 import {TextWithTone} from 'sanity'
 
 const DIALOG_COPY: Record<
@@ -45,24 +46,24 @@ export function CommentDeleteDialog(props: CommentDeleteDialogProps) {
 
   return (
     <Dialog
+      footer={{
+        cancelButton: {
+          onClick: onClose,
+        },
+        confirmButton: {
+          loading,
+          onClick: handleDelete,
+          text: confirmButtonText,
+          tone: 'critical',
+        },
+      }}
       header={title}
       id="delete-comment-dialog"
       onClose={onClose}
       width={0}
-      footer={
-        <Grid columns={2} padding={2} gap={2}>
-          <Button text="Cancel" mode="ghost" onClick={onClose} />
-          <Button
-            loading={loading}
-            onClick={handleDelete}
-            text={confirmButtonText}
-            tone="critical"
-          />
-        </Grid>
-      }
     >
-      <Stack padding={4} space={4}>
-        <Text>{body}</Text>
+      <Stack space={4}>
+        <Text size={1}>{body}</Text>
 
         {error && (
           <TextWithTone tone="critical">
diff --git a/packages/sanity/src/desk/comments/src/components/TextTooltip.tsx b/packages/sanity/src/desk/comments/src/components/TextTooltip.tsx
deleted file mode 100644
index d91ffbd3cf1..00000000000
--- a/packages/sanity/src/desk/comments/src/components/TextTooltip.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import {Flex, Text, Tooltip, TooltipProps} from '@sanity/ui'
-import styled from 'styled-components'
-
-const TOOLTIP_DELAY: TooltipProps['delay'] = {open: 500}
-
-const ContextText = styled(Text)`
-  min-width: max-content;
-`
-
-interface TextTooltipProps {
-  children: React.ReactNode
-  text?: string
-}
-
-export function TextTooltip(props: TextTooltipProps) {
-  const {children, text} = props
-
-  return (
-    <Tooltip
-      delay={TOOLTIP_DELAY}
-      portal
-      placement="top"
-      // @todo: there appears to be an issue with `fallbackPlacements` and tooltips in sanity UI `1.8.2`
-      // fallbackPlacements={['bottom']}
-      content={<ContextText size={1}>{text}</ContextText>}
-      padding={2}
-    >
-      <Flex>{children}</Flex>
-    </Tooltip>
-  )
-}
diff --git a/packages/sanity/src/desk/comments/src/components/index.ts b/packages/sanity/src/desk/comments/src/components/index.ts
index f85552492f5..e7053a2396a 100644
--- a/packages/sanity/src/desk/comments/src/components/index.ts
+++ b/packages/sanity/src/desk/comments/src/components/index.ts
@@ -1,7 +1,6 @@
 export * from './pte'
 export * from './list'
 export * from './CommentDeleteDialog'
-export * from './TextTooltip'
 export * from './CommentBreadcrumbs'
 export * from './icons'
 export * from './onboarding'
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx
index 00fac50c135..c7a78e84950 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentThreadLayout.tsx
@@ -1,5 +1,10 @@
 import {CurrentUser} from '@sanity/types'
-import {Button, Flex, Stack} from '@sanity/ui'
+import {
+  Flex,
+  Stack,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children behavior.
+} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
 import {uuid} from '@sanity/uuid'
 import styled, {css} from 'styled-components'
@@ -115,6 +120,7 @@ export function CommentThreadLayout(props: CommentThreadLayoutProps) {
               mode="bleed"
               onClick={handleBreadcrumbsClick}
               padding={2}
+              space={2}
             >
               <CommentBreadcrumbs maxLength={3} titlePath={crumbsTitlePath} />
             </BreadcrumbsButton>
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
index 656bfc35b7f..3e9ef7ffecb 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItem.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {Button, Flex, Stack} from '@sanity/ui'
+import {Flex, Stack} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 import {CurrentUser} from '@sanity/types'
 import {ChevronDownIcon} from '@sanity/icons'
@@ -15,6 +15,7 @@ import {
 import {SpacerAvatar} from '../avatars'
 import {hasCommentMessageValue} from '../../helpers'
 import {CommentsSelectedPath} from '../../context'
+import {Button} from '../../../../../ui-components'
 import {CommentsListItemLayout} from './CommentsListItemLayout'
 import {ThreadCard} from './styles'
 
@@ -64,7 +65,7 @@ const ExpandButton = styled(Button)(({theme}) => {
   `
 })
 
-const GhostButton = styled(Button)`
+const GhostButton = styled.button`
   opacity: 0;
   position: absolute;
   right: 0;
@@ -296,12 +297,9 @@ export const CommentsListItem = React.memo(function CommentsListItem(props: Comm
               <SpacerAvatar />
 
               <ExpandButton
-                fontSize={1}
                 iconRight={ChevronDownIcon}
                 mode="bleed"
                 onClick={handleExpand}
-                padding={2}
-                space={2}
                 text={expandButtonText}
               />
             </Flex>
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
index 9a1e9e413f7..6bcdd4cfb4b 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemContextMenu.tsx
@@ -1,46 +1,26 @@
 import React from 'react'
+import {CheckmarkCircleIcon, UndoIcon, EditIcon, TrashIcon, LinkIcon} from '@sanity/icons'
+import {Card, Flex, Menu, MenuDivider, TooltipDelayGroupProvider} from '@sanity/ui'
+import styled from 'styled-components'
 import {
-  CheckmarkCircleIcon,
-  UndoIcon,
-  EllipsisVerticalIcon,
-  EditIcon,
-  TrashIcon,
-  LinkIcon,
-} from '@sanity/icons'
-import {
-  TooltipDelayGroupProviderProps,
-  MenuButtonProps,
-  TooltipDelayGroupProvider,
   Button,
   MenuButton,
-  Menu,
+  MenuButtonProps,
   MenuItem,
-  MenuDivider,
-  Card,
-  Flex,
-} from '@sanity/ui'
-import styled, {css} from 'styled-components'
+  TOOLTIP_DELAY_PROPS,
+} from '../../../../../ui-components'
 import {CommentStatus} from '../../types'
-import {TextTooltip} from '../TextTooltip'
-
-const TOOLTIP_GROUP_DELAY: TooltipDelayGroupProviderProps['delay'] = {open: 500}
+import {ContextMenuButton} from 'sanity'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   placement: 'bottom-end',
 }
 
-const FloatingCard = styled(Card)(({theme}) => {
-  const {space} = theme.sanity
-
-  return css`
-    gap: ${space[1] / 2}px;
-    padding: ${space[1] / 2}px;
-
-    &:empty {
-      display: none;
-    }
-  `
-})
+const FloatingCard = styled(Card)`
+  &:empty {
+    display: none;
+  }
+`
 
 interface CommentsListItemContextMenuProps {
   canDelete: boolean | undefined
@@ -74,34 +54,27 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
   const showMenuButton = Boolean(onCopyLink || onDeleteStart || onEditStart)
 
   return (
-    <TooltipDelayGroupProvider delay={TOOLTIP_GROUP_DELAY}>
+    <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
       <Flex>
         <FloatingCard display="flex" shadow={2} padding={1} radius={2} sizing="border">
           {isParent && (
-            <TextTooltip text={status === 'open' ? 'Mark as resolved' : 'Re-open'}>
-              <Button
-                aria-label="Mark comment as resolved"
-                disabled={readOnly}
-                fontSize={1}
-                icon={status === 'open' ? CheckmarkCircleIcon : UndoIcon}
-                mode="bleed"
-                onClick={onStatusChange}
-                padding={2}
-              />
-            </TextTooltip>
+            <Button
+              aria-label={status === 'open' ? 'Mark comment as resolved' : 'Re-open'}
+              disabled={readOnly}
+              icon={status === 'open' ? CheckmarkCircleIcon : UndoIcon}
+              mode="bleed"
+              onClick={onStatusChange}
+              tooltipProps={{content: status === 'open' ? 'Mark as resolved' : 'Re-open'}}
+            />
           )}
 
           <MenuButton
             id="comment-actions-menu"
             button={
-              <Button
+              <ContextMenuButton
                 aria-label="Open comment actions menu"
                 disabled={readOnly}
-                fontSize={1}
                 hidden={!showMenuButton}
-                icon={EllipsisVerticalIcon}
-                mode="bleed"
-                padding={2}
               />
             }
             onOpen={onMenuOpen}
@@ -109,7 +82,6 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
             menu={
               <Menu>
                 <MenuItem
-                  fontSize={1}
                   hidden={!canEdit}
                   icon={EditIcon}
                   onClick={onEditStart}
@@ -117,7 +89,6 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
                 />
 
                 <MenuItem
-                  fontSize={1}
                   hidden={!canDelete}
                   icon={TrashIcon}
                   onClick={onDeleteStart}
@@ -128,7 +99,6 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
                 <MenuDivider hidden={!canDelete && !canEdit} />
 
                 <MenuItem
-                  fontSize={1}
                   hidden={!onCopyLink}
                   icon={LinkIcon}
                   onClick={onCopyLink}
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemLayout.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemLayout.tsx
index edb37bb91f2..77172f80092 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListItemLayout.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListItemLayout.tsx
@@ -252,7 +252,7 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
   useClickOutside(handleClickOutside, [rootElement])
 
   const name = user?.displayName ? (
-    <Text size={1} weight="semibold" textOverflow="ellipsis" title={user.displayName}>
+    <Text size={1} weight="medium" textOverflow="ellipsis" title={user.displayName}>
       {user.displayName}
     </Text>
   ) : (
diff --git a/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx b/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
index 6de29a1a092..ae60a8bccde 100644
--- a/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
+++ b/packages/sanity/src/desk/comments/src/components/list/CommentsListStatus.tsx
@@ -1,6 +1,7 @@
-import {Flex, Container, Stack, Spinner, Text} from '@sanity/ui'
+import {Flex, Container, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import {CommentStatus} from '../../types'
+import {LoadingBlock} from 'sanity'
 
 interface EmptyStateMessage {
   title: string
@@ -51,17 +52,8 @@ export function CommentsListStatus(props: CommentsListStatusProps) {
   }
 
   if (loading) {
-    return (
-      <Flex align="center" justify="center" flex={1} padding={4}>
-        <Flex align="center" gap={2}>
-          <Spinner muted size={1} />
-
-          <Text size={1} muted>
-            Loading comments...
-          </Text>
-        </Flex>
-      </Flex>
-    )
+    // @todo: localize
+    return <LoadingBlock showText title="Loading comments" />
   }
 
   if (hasNoComments) {
@@ -69,7 +61,7 @@ export function CommentsListStatus(props: CommentsListStatusProps) {
       <Flex align="center" justify="center" flex={1} sizing="border">
         <Container width={0} padding={4}>
           <Stack space={3}>
-            <Text align="center" size={1} muted weight="semibold">
+            <Text align="center" size={1} muted weight="medium">
               {EMPTY_STATE_MESSAGES[status].title}
             </Text>
 
diff --git a/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx b/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
index 74856526c7a..fa43a236c35 100644
--- a/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
+++ b/packages/sanity/src/desk/comments/src/components/mentions/MentionsMenu.tsx
@@ -1,10 +1,10 @@
-import {Box, Flex, Spinner, Stack, Text} from '@sanity/ui'
+import {Box, Flex, Stack, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import React, {useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import {deburr} from 'lodash'
 import {MentionOptionUser} from '../../types'
 import {MentionsMenuItem} from './MentionsMenuItem'
-import {CommandList, CommandListHandle} from 'sanity'
+import {CommandList, CommandListHandle, LoadingBlock} from 'sanity'
 
 const EMPTY_ARRAY: MentionOptionUser[] = []
 
@@ -97,9 +97,7 @@ export const MentionsMenu = React.forwardRef(function MentionsMenu(
   if (loading) {
     return (
       <Root>
-        <Flex align="center" justify="center" padding={4}>
-          <Spinner muted size={1} />
-        </Flex>
+        <LoadingBlock showText />
       </Root>
     )
   }
diff --git a/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx b/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
index bb127c24d32..c81a400278e 100644
--- a/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
+++ b/packages/sanity/src/desk/comments/src/components/onboarding/CommentsOnboardingPopover.tsx
@@ -1,6 +1,7 @@
-import {Box, Button, Flex, Popover, PopoverProps, Stack, Text} from '@sanity/ui'
+import {Box, Flex, Stack, Text} from '@sanity/ui'
 import React from 'react'
 import styled, {keyframes} from 'styled-components'
+import {Button, Popover, PopoverProps} from '../../../../../ui-components'
 
 const Root = styled(Box)`
   max-width: 280px;
@@ -34,7 +35,7 @@ export function CommentsOnboardingPopover(props: CommentsOnboardingPopoverProps)
       content={
         <Root padding={4}>
           <Stack space={3}>
-            <Text weight="semibold" size={1}>
+            <Text weight="medium" size={1}>
               Document fields now have comments
             </Text>
 
@@ -44,7 +45,7 @@ export function CommentsOnboardingPopover(props: CommentsOnboardingPopoverProps)
             </Text>
 
             <Flex justify="flex-end" marginTop={2}>
-              <Button fontSize={1} padding={2} text="Got it" tone="primary" onClick={onDismiss} />
+              <Button text="Got it" tone="primary" onClick={onDismiss} />
             </Flex>
           </Stack>
         </Root>
diff --git a/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx b/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
index 11a51e9c4aa..e48e54e18a4 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/blocks/MentionInlineBlock.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
-import {Tooltip, Flex, Text, TooltipProps} from '@sanity/ui'
+import {Flex, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
+import {Tooltip} from '../../../../../../ui-components'
 import {CommentsAvatar} from '../../avatars'
 import {useCurrentUser, useUser} from 'sanity'
 
-const TOOLTIP_DELAY: TooltipProps['delay'] = {open: 500, close: 0}
-
 const Span = styled.span(({theme}) => {
   const {regular} = theme.sanity.fonts?.text.weights
   const {hovered} = theme.sanity.color?.card
@@ -40,10 +39,8 @@ export function MentionInlineBlock(props: MentionInlineBlockProps) {
   return (
     <Tooltip
       portal
-      open={selected}
-      delay={TOOLTIP_DELAY}
       content={
-        <Flex align="center" padding={2} gap={2}>
+        <Flex align="center" gap={2}>
           <Flex>
             <CommentsAvatar user={user} />
           </Flex>
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
index d45b1e2ffaf..0de79b90e2b 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputDiscardDialog.tsx
@@ -1,16 +1,6 @@
-import {
-  Dialog,
-  Grid,
-  Button,
-  Stack,
-  Text,
-  ThemeColorProvider,
-  PortalProvider,
-  DialogProvider,
-  usePortal,
-  useLayer,
-} from '@sanity/ui'
+import {DialogProvider, Text, ThemeColorProvider} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Dialog} from '../../../../../../ui-components'
 
 const Z_OFFSET = 9999999 // Change to appropriate z-offset
 
@@ -59,16 +49,18 @@ export function CommentInputDiscardDialog(props: CommentInputDiscardDialogProps)
           onClose={onClose}
           width={0}
           onClickOutside={onClose}
-          footer={
-            <Grid columns={2} padding={2} gap={2}>
-              <Button text="Cancel" mode="ghost" onClick={handleCancelClick} />
-              <Button onClick={handleConfirmClick} text="Discard" tone="critical" />
-            </Grid>
-          }
+          footer={{
+            cancelButton: {
+              onClick: handleCancelClick,
+            },
+            confirmButton: {
+              onClick: handleConfirmClick,
+              text: 'Discard',
+              tone: 'critical',
+            },
+          }}
         >
-          <Stack padding={4}>
-            <Text>Do you want to discard the comment?</Text>
-          </Stack>
+          <Text size={1}>Do you want to discard the comment?</Text>
         </Dialog>
       </DialogProvider>
     </ThemeColorProvider>
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
index eca8aa6dcfe..51bd58ffc65 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/CommentInputInner.tsx
@@ -1,9 +1,10 @@
 import React, {useCallback} from 'react'
-import {Flex, Button, MenuDivider, Box, Card, Stack} from '@sanity/ui'
+import {Flex, MenuDivider, Box, Card, Stack, TooltipDelayGroupProvider} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 import {CurrentUser} from '@sanity/types'
 import {MentionIcon, SendIcon} from '../../icons'
 import {CommentsAvatar} from '../../avatars/CommentsAvatar'
+import {Button, TOOLTIP_DELAY_PROPS} from '../../../../../../ui-components'
 import {useCommentInput} from './useCommentInput'
 import {Editable} from './Editable'
 import {useUser} from 'sanity'
@@ -18,13 +19,6 @@ const ButtonDivider = styled(MenuDivider)({
   width: 1,
 })
 
-const ActionButton = styled(Button).attrs({
-  fontSize: 1,
-  padding: 2,
-})`
-  /* border-radius: 50%; */
-`
-
 const RootCard = styled(Card)(({theme}) => {
   const radii = theme.sanity.radius[2]
 
@@ -41,10 +35,7 @@ const RootCard = styled(Card)(({theme}) => {
         min-height: 1em;
       }
 
-      box-shadow:
-        inset 0 0 0 1px var(--card-border-color),
-        0 0 0 1px var(--card-bg-color),
-        0 0 0 3px var(--card-focus-ring-color);
+      box-shadow: inset 0 0 0 1px var(--card-focus-ring-color);
     }
 
     &:focus-within {
@@ -128,25 +119,29 @@ export function CommentInputInner(props: CommentInputInnerProps) {
           </EditableWrap>
 
           <Flex align="center" data-ui="CommentInputActions" gap={1} justify="flex-end" padding={1}>
-            <ActionButton
-              aria-label="Mention user"
-              data-testid="comment-mention-button"
-              disabled={readOnly}
-              icon={MentionIcon}
-              mode="bleed"
-              onClick={handleMentionButtonClicked}
-            />
-
-            <ButtonDivider />
-
-            <ActionButton
-              aria-label="Send comment"
-              disabled={!canSubmit || !hasChanges || readOnly}
-              icon={SendIcon}
-              mode={hasChanges && canSubmit ? 'default' : 'bleed'}
-              onClick={onSubmit}
-              tone={hasChanges && canSubmit ? 'primary' : 'default'}
-            />
+            <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+              <Button
+                aria-label="Mention user"
+                data-testid="comment-mention-button"
+                disabled={readOnly}
+                icon={MentionIcon}
+                mode="bleed"
+                onClick={handleMentionButtonClicked}
+                tooltipProps={{content: 'Mention user'}}
+              />
+
+              <ButtonDivider />
+
+              <Button
+                aria-label="Send comment"
+                disabled={!canSubmit || !hasChanges || readOnly}
+                icon={SendIcon}
+                mode={hasChanges && canSubmit ? 'default' : 'bleed'}
+                onClick={onSubmit}
+                tone={hasChanges && canSubmit ? 'primary' : 'default'}
+                tooltipProps={{content: 'Send comment'}}
+              />
+            </TooltipDelayGroupProvider>
           </Flex>
         </Stack>
       </RootCard>
diff --git a/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx b/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
index 0bc59720ea2..4046a1e91de 100644
--- a/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
+++ b/packages/sanity/src/desk/comments/src/components/pte/comment-input/Editable.tsx
@@ -1,5 +1,5 @@
 import React, {KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {Popover, PopoverProps, useClickOutside} from '@sanity/ui'
+import {useClickOutside} from '@sanity/ui'
 import {
   EditorSelection,
   PortableTextEditable,
@@ -8,6 +8,7 @@ import {
 import styled, {css} from 'styled-components'
 import {isEqual} from 'lodash'
 import {isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
+import {Popover, PopoverProps} from '../../../../../../ui-components'
 import {MentionsMenu, MentionsMenuHandle} from '../../mentions'
 import {renderBlock, renderChild} from '../render'
 import {useCommentInput} from './useCommentInput'
diff --git a/packages/sanity/src/desk/components/DraftStatus.tsx b/packages/sanity/src/desk/components/DraftStatus.tsx
deleted file mode 100644
index 4bd54b9ae97..00000000000
--- a/packages/sanity/src/desk/components/DraftStatus.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import {EditIcon} from '@sanity/icons'
-import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, Text, Tooltip} from '@sanity/ui'
-import {structureLocaleNamespace} from '../i18n'
-import {TextWithTone, Translate, useTranslation, RelativeTime} from 'sanity'
-
-export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
-  const {document} = props
-  const updatedAt = document && '_updatedAt' in document && document._updatedAt
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  return (
-    <Tooltip
-      portal
-      content={
-        <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <Translate
-                i18nKey="pane-item.draft-status.has-draft.tooltip"
-                t={t}
-                components={{
-                  RelativeTime: () => (
-                    <>{updatedAt && <RelativeTime time={updatedAt} useTemporalPhrase />}</>
-                  ),
-                }}
-              />
-            ) : (
-              t('pane-item.draft-status.no-draft.tooltip')
-            )}
-          </Text>
-        </Box>
-      }
-    >
-      <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
-        <EditIcon />
-      </TextWithTone>
-    </Tooltip>
-  )
-}
diff --git a/packages/sanity/src/desk/components/IntentButton.tsx b/packages/sanity/src/desk/components/IntentButton.tsx
index 160cdc6651e..a3c54ae80ab 100644
--- a/packages/sanity/src/desk/components/IntentButton.tsx
+++ b/packages/sanity/src/desk/components/IntentButton.tsx
@@ -1,12 +1,15 @@
-import {Button} from '@sanity/ui'
 import React, {forwardRef, useMemo} from 'react'
 import {PaneMenuItem} from '../types'
+import {Button, ButtonProps} from '../../ui-components'
 import {IntentLink} from 'sanity/router'
 
 type RouterIntent = NonNullable<PaneMenuItem['intent']>
 
 export const IntentButton = forwardRef(function IntentButton(
-  props: {intent: RouterIntent} & Omit<React.ComponentProps<typeof Button>, 'as' | 'href' | 'type'>,
+  props: {
+    intent: RouterIntent
+  } & ButtonProps &
+    Omit<React.ComponentProps<typeof Button>, 'as' | 'href' | 'type'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
 ) {
   const {intent, ...restProps} = props
diff --git a/packages/sanity/src/desk/components/PublishedStatus.tsx b/packages/sanity/src/desk/components/PublishedStatus.tsx
deleted file mode 100644
index 12e11606015..00000000000
--- a/packages/sanity/src/desk/components/PublishedStatus.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import {PublishIcon} from '@sanity/icons'
-import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, Text, Tooltip} from '@sanity/ui'
-import {structureLocaleNamespace} from '../i18n'
-import {RelativeTime, TextWithTone, Translate, useTranslation} from 'sanity'
-
-export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
-  const {document} = props
-  const updatedAt = document && '_updatedAt' in document && document._updatedAt
-  const statusLabel = document ? 'Published' : 'Not published'
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  return (
-    <Tooltip
-      portal
-      content={
-        <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <Translate
-                t={t}
-                i18nKey="pane-item.published-status.has-published.tooltip"
-                components={{
-                  RelativeTime: () => (
-                    <>{updatedAt && <RelativeTime time={updatedAt} useTemporalPhrase />}</>
-                  ),
-                }}
-              />
-            ) : (
-              t('pane-item.published-status.no-published.tooltip')
-            )}
-          </Text>
-        </Box>
-      }
-    >
-      <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
-        <PublishIcon aria-label={statusLabel} />
-      </TextWithTone>
-    </Tooltip>
-  )
-}
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
index fad7031ef03..2694fe6c54e 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialog.tsx
@@ -1,16 +1,15 @@
 import React, {useMemo, useId} from 'react'
 import styled from 'styled-components'
-import {Box, Dialog, Button, Text, Spinner, Grid, Flex} from '@sanity/ui'
+import {Box, Flex} from '@sanity/ui'
+import {Dialog} from '../../../ui-components'
 import {DocTitle} from '../DocTitle'
 import {structureLocaleNamespace} from '../../i18n'
 import {useReferringDocuments} from './useReferringDocuments'
 import {ConfirmDeleteDialogBody} from './ConfirmDeleteDialogBody'
-import {useTranslation} from 'sanity'
+import {useTranslation, LoadingBlock} from 'sanity'
 
 /** @internal */
-export const DialogBody = styled(Box).attrs({
-  padding: 4,
-})`
+export const DialogBody = styled(Box)`
   box-sizing: border-box;
 `
 
@@ -20,7 +19,7 @@ export const LoadingContainer = styled(Flex).attrs({
   direction: 'column',
   justify: 'center',
 })`
-  height: 300px;
+  height: 110px;
 `
 
 /** @internal */
@@ -77,28 +76,21 @@ export function ConfirmDeleteDialog({
       width={1}
       id={dialogId}
       header={t('confirm-delete-dialog.header.text', {context: action})}
-      footer={
-        <Grid columns={showConfirmButton ? 2 : 1} gap={2} paddingX={4} paddingY={3}>
-          <Button
-            mode="ghost"
-            onClick={onCancel}
-            text={t('confirm-delete-dialog.cancel-button.text')}
-          />
-
-          {showConfirmButton && (
-            <Button
-              data-testid="confirm-delete-button"
-              text={
+      footer={{
+        cancelButton: {
+          onClick: onCancel,
+          text: t('confirm-delete-dialog.cancel-button.text'),
+        },
+        confirmButton: showConfirmButton
+          ? {
+              text:
                 totalCount > 0
                   ? t('confirm-delete-dialog.confirm-anyway-button.text', {context: action})
-                  : t('confirm-delete-dialog.confirm-button.text', {context: action})
-              }
-              tone="critical"
-              onClick={onConfirm}
-            />
-          )}
-        </Grid>
-      }
+                  : t('confirm-delete-dialog.confirm-button.text', {context: action}),
+              onClick: onConfirm,
+            }
+          : undefined,
+      }}
       onClose={onCancel}
       onClickOutside={onCancel}
     >
@@ -118,12 +110,7 @@ export function ConfirmDeleteDialog({
           />
         ) : (
           <LoadingContainer data-testid="loading-container">
-            <Spinner muted />
-            <Box marginTop={3}>
-              <Text align="center" muted size={1}>
-                {t('confirm-delete-dialog.loading.text')}
-              </Text>
-            </Box>
+            <LoadingBlock showText title={t('confirm-delete-dialog.loading.text')} />
           </LoadingContainer>
         )}
       </DialogBody>
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
index c6429912018..348b7b797df 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
-import {rem, Flex, Text, Box, Tooltip, Container, Inline} from '@sanity/ui'
+import {rem, Flex, Text, Box, Inline} from '@sanity/ui'
 import {InfoOutlineIcon} from '@sanity/icons'
+import {Tooltip} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
 import {useTranslation} from 'sanity'
 
@@ -45,7 +46,7 @@ export const Table = styled.table`
 `
 
 export const DocumentIdFlex = styled(Flex)`
-  min-height: 35px;
+  min-height: 33px;
 `
 
 export const OtherReferenceCount = (props: {totalCount: number; references: unknown[]}) => {
@@ -55,26 +56,22 @@ export const OtherReferenceCount = (props: {totalCount: number; references: unkn
   if (!difference) return null
 
   return (
-    <Inline space={2}>
-      <Text size={1} muted>
-        {t('confirm-delete-dialog.other-reference-count.title', {count: difference})}
-      </Text>
-
-      <Tooltip
-        portal
-        placement="top"
-        content={
-          <Container width={0}>
-            <Box padding={2}>
-              <Text size={1}>{t('confirm-delete-dialog.other-reference-count.tooltip')}</Text>
-            </Box>
-          </Container>
-        }
-      >
+    <Box padding={2}>
+      <Inline space={2}>
         <Text size={1} muted>
-          <InfoOutlineIcon />
+          {t('confirm-delete-dialog.other-reference-count.title', {count: difference})}
         </Text>
-      </Tooltip>
-    </Inline>
+
+        <Tooltip
+          portal
+          placement="top"
+          content={t('confirm-delete-dialog.other-reference-count.tooltip')}
+        >
+          <Text size={1} muted>
+            <InfoOutlineIcon />
+          </Text>
+        </Tooltip>
+      </Inline>
+    </Box>
   )
 }
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
index 219d0f45351..aa3d5cf519a 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.tsx
@@ -1,13 +1,14 @@
 import React, {useCallback} from 'react'
 import {
-  WarningOutlineIcon,
   DocumentsIcon,
   CopyIcon,
   UnknownIcon,
   ChevronDownIcon,
+  WarningOutlineIcon,
 } from '@sanity/icons'
-import {useToast, Text, Box, Button, Flex, Label, Card, Stack} from '@sanity/ui'
+import {useToast, Text, Box, Flex, Card, Stack} from '@sanity/ui'
 import CopyToClipboard from 'react-copy-to-clipboard'
+import {Button} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
 import {ReferencePreviewLink} from './ReferencePreviewLink'
 import {ReferringDocuments} from './useReferringDocuments'
@@ -71,7 +72,7 @@ export function ConfirmDeleteDialogBody({
 
   if (internalReferences?.totalCount === 0 && crossDatasetReferences?.totalCount === 0) {
     return (
-      <Text as="p">
+      <Text as="p" size={1}>
         <Translate
           t={t}
           i18nKey="confirm-delete-dialog.confirmation.text"
@@ -98,8 +99,8 @@ export function ConfirmDeleteDialogBody({
   })
 
   return (
-    <Card>
-      <Card padding={3} radius={2} tone="caution" marginBottom={4} flex="none">
+    <Flex direction="column" gap={4}>
+      <Card padding={3} radius={2} tone="caution" flex="none">
         <Flex>
           <Text aria-hidden="true" size={1}>
             <WarningOutlineIcon />
@@ -116,9 +117,8 @@ export function ConfirmDeleteDialogBody({
           </Box>
         </Flex>
       </Card>
-
-      <Box flex="none" marginBottom={4}>
-        <Text>
+      <Box flex="none">
+        <Text size={1}>
           <Translate
             i18nKey="confirm-delete-dialog.referring-documents-descriptor.text"
             t={t}
@@ -127,11 +127,10 @@ export function ConfirmDeleteDialogBody({
           />
         </Text>
       </Box>
-
-      <Card radius={2} shadow={1} marginBottom={4} flex="auto">
+      <Card radius={2} shadow={1} flex="auto" padding={2}>
         <Flex direction="column">
           {internalReferences.totalCount > 0 && (
-            <Stack as="ul" padding={2} space={3} data-testid="internal-references">
+            <Stack as="ul" marginBottom={2} space={2} data-testid="internal-references">
               {internalReferences?.references.map((item) => (
                 <Box as="li" key={item._id}>
                   {renderPreviewItem(item)}
@@ -158,32 +157,32 @@ export function ConfirmDeleteDialogBody({
               }}
             >
               <CrossDatasetReferencesSummary>
-                <Card as="a" margin={2} radius={2} shadow={1} paddingY={1}>
-                  <Flex align="center" margin={2}>
-                    <Box marginLeft={3} marginRight={4}>
-                      <Text size={3}>
-                        <DocumentsIcon />
+                <Card
+                  as="a"
+                  marginTop={internalReferences.totalCount > 0 ? 2 : 0}
+                  radius={2}
+                  shadow={1}
+                  paddingY={1}
+                >
+                  <Flex align="center" gap={3} paddingX={3} paddingY={1}>
+                    <Text size={1}>
+                      <DocumentsIcon />
+                    </Text>
+                    <Stack space={2}>
+                      <Text textOverflow="ellipsis" size={1}>
+                        {t('confirm-delete-dialog.cdr-summary.title', {
+                          count: normalizedDatasetNames.length,
+                          documentCount: t('confirm-delete-dialog.cdr-summary.document-count', {
+                            count: crossDatasetReferences.totalCount,
+                          }),
+                        })}
                       </Text>
-                    </Box>
-                    <Flex marginRight={4} direction="column">
-                      <Box marginBottom={2}>
-                        <Text>
-                          {t('confirm-delete-dialog.cdr-summary.title', {
-                            count: normalizedDatasetNames.length,
-                            documentCount: t('confirm-delete-dialog.cdr-summary.document-count', {
-                              count: crossDatasetReferences.totalCount,
-                            }),
-                          })}
-                        </Text>
-                      </Box>
-                      <Box>
-                        <Text title={datasetSubtitle} textOverflow="ellipsis" size={1} muted>
-                          {datasetSubtitle}
-                        </Text>
-                      </Box>
-                    </Flex>
+                      <Text title={datasetSubtitle} textOverflow="ellipsis" size={1} muted>
+                        {datasetSubtitle}
+                      </Text>
+                    </Stack>
                     <ChevronWrapper>
-                      <Text muted>
+                      <Text muted size={1}>
                         <ChevronDownIcon />
                       </Text>
                     </ChevronWrapper>
@@ -191,24 +190,24 @@ export function ConfirmDeleteDialogBody({
                 </Card>
               </CrossDatasetReferencesSummary>
 
-              <Box overflow="auto" paddingBottom={2} paddingX={2}>
+              <Box overflow="auto" paddingTop={2}>
                 <Table>
                   <thead>
                     <tr>
                       <th>
-                        <Label muted size={0} style={{minWidth: '5rem'}}>
+                        <Text muted size={1} style={{minWidth: '5rem'}} weight="medium">
                           {t('confirm-delete-dialog.cdr-table.project-id.label')}
-                        </Label>
+                        </Text>
                       </th>
                       <th>
-                        <Label muted size={0}>
+                        <Text muted size={1} weight="medium">
                           {t('confirm-delete-dialog.cdr-table.dataset.label')}
-                        </Label>
+                        </Text>
                       </th>
                       <th>
-                        <Label muted size={0}>
+                        <Text muted size={1} weight="medium">
                           {t('confirm-delete-dialog.cdr-table.document-id.label')}
-                        </Label>
+                        </Text>
                       </th>
                     </tr>
                   </thead>
@@ -245,12 +244,13 @@ export function ConfirmDeleteDialogBody({
                                   }}
                                 >
                                   <Button
-                                    title={t(
-                                      'confirm-delete-dialog.cdr-table.copy-id-button.tooltip',
-                                    )}
                                     mode="bleed"
                                     icon={CopyIcon}
-                                    fontSize={0}
+                                    tooltipProps={{
+                                      content: t(
+                                        'confirm-delete-dialog.cdr-table.copy-id-button.tooltip',
+                                      ),
+                                    }}
                                   />
                                 </CopyToClipboard>
                               )}
@@ -261,17 +261,14 @@ export function ConfirmDeleteDialogBody({
                   </tbody>
                 </Table>
 
-                <Box padding={2}>
-                  <OtherReferenceCount {...crossDatasetReferences} />
-                </Box>
+                <OtherReferenceCount {...crossDatasetReferences} />
               </Box>
             </CrossDatasetReferencesDetails>
           )}
         </Flex>
       </Card>
-
       <Box flex="none">
-        <Text>
+        <Text size={1}>
           <Translate
             i18nKey="confirm-delete-dialog.referential-integrity-disclaimer.text"
             t={t}
@@ -280,6 +277,6 @@ export function ConfirmDeleteDialogBody({
           />
         </Text>
       </Box>
-    </Card>
+    </Flex>
   )
 }
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ReferencePreviewLink.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ReferencePreviewLink.tsx
index b7d3413f199..3bb5d4f5ba6 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ReferencePreviewLink.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ReferencePreviewLink.tsx
@@ -40,18 +40,11 @@ export function ReferencePreviewLink(props: ReferencePreviewLinkProps) {
   )
 
   return (
-    <PreviewCard
-      __unstable_focusRing
-      as={Link as FIXME}
-      data-as="a"
-      onClick={onClick}
-      padding={2}
-      radius={2}
-    >
+    <PreviewCard __unstable_focusRing as={Link as FIXME} data-as="a" onClick={onClick} radius={2}>
       <PaneItemPreview
         documentPreviewStore={documentPreviewStore}
         icon={type?.icon}
-        layout="default"
+        layout="compact"
         presence={documentPresence?.length > 0 ? documentPresence : EMPTY_ARRAY}
         schemaType={type}
         value={value}
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
index 3212479379a..7ac995360f3 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/index.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useState, useId} from 'react'
-import {Box, Flex, Button, Dialog, Text, ErrorBoundary} from '@sanity/ui'
+import {Box, ErrorBoundary, Text} from '@sanity/ui'
+import {Dialog} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
 import {ConfirmDeleteDialog, ConfirmDeleteDialogProps} from './ConfirmDeleteDialog'
 import {useTranslation} from 'sanity'
@@ -21,19 +22,17 @@ function ConfirmDeleteDialogContainer(props: ConfirmDeleteDialogProps) {
       id={`dialog-error-${id}`}
       data-testid="confirm-delete-error-dialog"
       header={t('confirm-delete-dialog.error.title.text')}
-      footer={
-        <Flex paddingX={4} paddingY={3} direction="column">
-          <Button
-            mode="ghost"
-            text={t('confirm-delete-dialog.error.retry-button.text')}
-            onClick={handleRetry}
-          />
-        </Flex>
-      }
+      footer={{
+        confirmButton: {
+          text: t('confirm-delete-dialog.error.retry-button.text'),
+          onClick: handleRetry,
+          tone: 'default',
+        },
+      }}
       onClose={props.onCancel}
     >
       <Box padding={4}>
-        <Text>{t('confirm-delete-dialog.error.message.text')}</Text>
+        <Text size={1}>{t('confirm-delete-dialog.error.message.text')}</Text>
       </Box>
     </Dialog>
   ) : (
diff --git a/packages/sanity/src/desk/components/deskTool/NoDocumentTypesScreen.tsx b/packages/sanity/src/desk/components/deskTool/NoDocumentTypesScreen.tsx
index aeb2fcfcfd0..4a5b8def7d6 100644
--- a/packages/sanity/src/desk/components/deskTool/NoDocumentTypesScreen.tsx
+++ b/packages/sanity/src/desk/components/deskTool/NoDocumentTypesScreen.tsx
@@ -19,7 +19,7 @@ export function NoDocumentTypesScreen() {
                 </Text>
               </Box>
               <Stack flex={1} marginLeft={3} space={3}>
-                <Text as="h1" size={1} weight="bold">
+                <Text as="h1" size={1} weight="medium">
                   {t('no-document-types-screen.title')}
                 </Text>
                 <Text as="p" muted size={1}>
diff --git a/packages/sanity/src/desk/components/deskTool/StructureError.tsx b/packages/sanity/src/desk/components/deskTool/StructureError.tsx
index f59e9eea206..e1016647e0c 100644
--- a/packages/sanity/src/desk/components/deskTool/StructureError.tsx
+++ b/packages/sanity/src/desk/components/deskTool/StructureError.tsx
@@ -1,8 +1,9 @@
 import {generateHelpUrl} from '@sanity/generate-help-url'
-import {Box, Button, Card, Code, Container, Heading, Label, Stack, Text} from '@sanity/ui'
+import {Box, Card, Code, Container, Heading, Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import styled from 'styled-components'
 import {SyncIcon} from '@sanity/icons'
+import {Button} from '../../../ui-components'
 import {SerializeError} from '../../structureBuilder'
 import {PaneResolutionError} from '../../structureResolvers'
 import {structureLocaleNamespace} from '../../i18n'
@@ -62,7 +63,9 @@ export function StructureError({error}: StructureErrorProps) {
         <Card marginTop={4} padding={4} radius={2} overflow="auto" shadow={1} tone="inherit">
           {path.length > 0 && (
             <Stack space={2}>
-              <Label>{t('structure-error.structure-path.label')}</Label>
+              <Text size={1} weight="medium">
+                {t('structure-error.structure-path.label')}
+              </Text>
               <Code>
                 {/* TODO: it seems like the path is off by one and includes */}
                 {/* `root` twice  */}
@@ -75,7 +78,9 @@ export function StructureError({error}: StructureErrorProps) {
           )}
 
           <Stack marginTop={4} space={2}>
-            <Label>{t('structure-error.error.label')}</Label>
+            <Text size={1} weight="medium">
+              {t('structure-error.error.label')}
+            </Text>
             <Code>{showStack ? formatStack(stack) : error.message}</Code>
           </Stack>
 
diff --git a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
index f2953dd4b72..5687c8b7824 100644
--- a/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx
@@ -1,10 +1,9 @@
-import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Menu, MenuButton, PopoverProps} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import React, {useId} from 'react'
-import {structureLocaleNamespace} from '../../i18n'
+import {MenuButton, PopoverProps} from '../../../ui-components'
 import {_PaneMenuItem, _PaneMenuNode} from './types'
 import {PaneMenuButtonItem} from './PaneMenuButtonItem'
-import {StatusButton, useTranslation} from 'sanity'
+import {ContextMenuButton} from 'sanity'
 
 interface PaneContextMenuButtonProps {
   nodes: _PaneMenuNode[]
@@ -33,7 +32,6 @@ function nodesHasTone(nodes: _PaneMenuNode[], tone: NonNullable<_PaneMenuItem['t
 export function PaneContextMenuButton(props: PaneContextMenuButtonProps) {
   const {nodes} = props
   const id = useId()
-  const {t} = useTranslation(structureLocaleNamespace)
 
   const hasCritical = nodesHasTone(nodes, 'critical')
   const hasCaution = nodesHasTone(nodes, 'caution')
@@ -41,10 +39,7 @@ export function PaneContextMenuButton(props: PaneContextMenuButtonProps) {
   return (
     <MenuButton
       button={
-        <StatusButton
-          icon={EllipsisVerticalIcon}
-          mode="bleed"
-          title={t('pane-header.context-menu-button.tooltip')}
+        <ContextMenuButton
           // eslint-disable-next-line no-nested-ternary
           tone={hasCritical ? 'critical' : hasCaution ? 'caution' : undefined}
         />
diff --git a/packages/sanity/src/desk/components/pane/PaneFooter.styles.tsx b/packages/sanity/src/desk/components/pane/PaneFooter.styles.tsx
index 31bf4a4f4ca..93a3fcf3923 100644
--- a/packages/sanity/src/desk/components/pane/PaneFooter.styles.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneFooter.styles.tsx
@@ -12,7 +12,7 @@ export const Root = styled(Layer)`
     left: 0;
     right: 0;
     top: -1px;
-    border-bottom: 1px solid var(--card-shadow-outline-color);
+    border-bottom: 1px solid var(--card-border-color);
   }
 `
 
diff --git a/packages/sanity/src/desk/components/pane/PaneHeader.styles.tsx b/packages/sanity/src/desk/components/pane/PaneHeader.styles.tsx
index 4e33a3810d8..241b6282bb9 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeader.styles.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeader.styles.tsx
@@ -1,21 +1,28 @@
 import {Box, Flex, Layer, rgba, TextSkeleton, Text, Theme, Card} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
-export const Root = styled(Layer)`
-  line-height: 0;
-  position: sticky;
-  top: 0;
+interface RootProps {
+  $border?: boolean
+}
 
-  &:not([data-collapsed]):after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -1px;
-    border-bottom: 1px solid var(--card-shadow-outline-color);
-  }
-`
+export const Root = styled(Layer)<RootProps>(({$border}) => {
+  return css`
+    line-height: 0;
+    position: sticky;
+    top: 0;
+
+    &:not([data-collapsed]):after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -1px;
+      border-bottom: 1px solid ${$border ? 'var(--card-border-color)' : 'transparent'};
+      opacity: 1;
+    }
+  `
+})
 
 export const Layout = styled(Flex)`
   transform-origin: calc(51px / 2);
diff --git a/packages/sanity/src/desk/components/pane/PaneHeader.tsx b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
index e6bd36e39be..c3ba79b04cc 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeader.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeader.tsx
@@ -10,6 +10,7 @@ import {LegacyLayerProvider} from 'sanity'
 export interface PaneHeaderProps {
   actions?: React.ReactNode
   backButton?: React.ReactNode
+  border?: boolean
   contentAfter?: React.ReactNode
   loading?: boolean
   subActions?: React.ReactNode
@@ -27,7 +28,8 @@ export const PaneHeader = forwardRef(function PaneHeader(
   props: PaneHeaderProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {actions, backButton, contentAfter, loading, subActions, tabs, tabIndex, title} = props
+  const {actions, backButton, border, contentAfter, loading, subActions, tabs, tabIndex, title} =
+    props
   const {collapse, collapsed, expand, rootElement: paneElement} = usePane()
   const paneRect = useElementRect(paneElement || null)
 
@@ -52,29 +54,36 @@ export const PaneHeader = forwardRef(function PaneHeader(
 
   return (
     <LayerProvider zOffset={100}>
-      <Root data-collapsed={collapsed ? '' : undefined} data-testid="pane-header" ref={ref}>
+      <Root
+        $border={border}
+        data-collapsed={collapsed ? '' : undefined}
+        data-testid="pane-header"
+        ref={ref}
+      >
         <LegacyLayerProvider zOffset="paneHeader">
           <Card data-collapsed={collapsed ? '' : undefined} tone="inherit">
-            <Layout onClick={handleLayoutClick} padding={2} sizing="border" style={layoutStyle}>
-              {backButton && (
-                <Box flex="none" padding={1}>
-                  {backButton}
-                </Box>
-              )}
+            <Layout
+              gap={1}
+              onClick={handleLayoutClick}
+              padding={3}
+              paddingBottom={collapsed ? 3 : 2}
+              sizing="border"
+              style={layoutStyle}
+            >
+              {backButton && <Box flex="none">{backButton}</Box>}
 
               <TitleCard
                 __unstable_focusRing
                 flex={1}
                 forwardedAs="button"
-                marginRight={actions ? 1 : 0}
                 onClick={handleTitleClick}
-                paddingLeft={backButton ? 1 : 3}
-                paddingY={3}
+                paddingLeft={backButton ? 1 : 2}
+                padding={2}
                 tabIndex={tabIndex}
               >
-                {loading && <TitleTextSkeleton animated radius={1} />}
+                {loading && <TitleTextSkeleton animated radius={1} size={1} />}
                 {!loading && (
-                  <TitleText textOverflow="ellipsis" weight="semibold">
+                  <TitleText size={1} textOverflow="ellipsis" weight="semibold">
                     {title}
                   </TitleText>
                 )}
@@ -94,7 +103,6 @@ export const PaneHeader = forwardRef(function PaneHeader(
                 overflow="auto"
                 paddingBottom={3}
                 paddingX={3}
-                paddingTop={1}
               >
                 <TabsBox flex={1} marginRight={subActions ? 3 : 0}>
                   {tabs}
diff --git a/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx b/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
index fb2a210430d..ca66f8e2bd3 100644
--- a/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneHeaderActionButton.tsx
@@ -1,26 +1,41 @@
 import React, {MouseEvent, useCallback, useId} from 'react'
-import {ButtonProps, Menu, MenuButton, Text} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {UnknownIcon} from '@sanity/icons'
 import {Intent} from '../../structureBuilder'
+import {Button, MenuButton} from '../../../ui-components'
 import {_PaneMenuGroup, _PaneMenuItem} from './types'
 import {PaneMenuButtonItem} from './PaneMenuButtonItem'
-import {TooltipOfDisabled, StatusButton, useI18nText} from 'sanity'
+import {StatusButton, useI18nText} from 'sanity'
 import {useIntentLink} from 'sanity/router'
 
+function getDisabledReason(node: _PaneMenuItem) {
+  /**
+   * This component supports receiving a `reason: string | react.ReactNode`.
+   * We are casting it as string, to avoid the ts error, as content will be rendered into the tooltip which only accepts string, but it won't crash if it's a ReactNode.
+   * For the aria label, we want to check if it's actually a string, to avoid generating an aria-label with the value `[object Object]`.
+   */
+  const disabledReason =
+    typeof node.disabled === 'object' ? (node.disabled.reason as string) : undefined
+  const ariaLabel =
+    typeof node.disabled === 'object' && typeof node.disabled?.reason === 'string'
+      ? node.disabled.reason
+      : 'This is disabled'
+
+  return {disabledReason, ariaLabel, isDisabled: Boolean(node.disabled)}
+}
 export interface PaneHeaderActionButtonProps {
   node: _PaneMenuItem | _PaneMenuGroup
-  padding?: ButtonProps['padding']
 }
 
 export function PaneHeaderActionButton(props: PaneHeaderActionButtonProps) {
-  const {node, padding} = props
+  const {node} = props
 
   if (node.type === 'item') {
-    return <PaneHeaderMenuItemActionButton node={node} padding={padding} />
+    return <PaneHeaderMenuItemActionButton node={node} />
   }
 
   if (node.type === 'group') {
-    return <PaneHeaderMenuGroupActionButton node={node} padding={padding} />
+    return <PaneHeaderMenuGroupActionButton node={node} />
   }
 
   console.warn('unknown menu node (expected `type: "item" | "group"`):', node)
@@ -30,47 +45,37 @@ export function PaneHeaderActionButton(props: PaneHeaderActionButtonProps) {
 
 export interface PaneHeaderMenuItemActionButtonProps {
   node: _PaneMenuItem
-  padding?: ButtonProps['padding']
 }
 
 export function PaneHeaderMenuItemActionButton(props: PaneHeaderMenuItemActionButtonProps) {
-  const {node, padding} = props
+  const {node} = props
   const {title} = useI18nText(node)
 
   if (node.intent) {
     return <PaneHeaderActionIntentButton {...props} intent={node.intent} />
   }
 
-  const disabledTooltipContent = typeof node.disabled === 'object' && (
-    <Text size={1}>{node.disabled.reason}</Text>
-  )
+  const {disabledReason, ariaLabel, isDisabled} = getDisabledReason(node)
 
   return (
-    <TooltipOfDisabled content={disabledTooltipContent} placement="bottom">
-      <StatusButton
-        disabled={Boolean(node.disabled)}
-        hotkey={node.hotkey?.split('+')}
-        icon={node.icon}
-        label={disabledTooltipContent ? undefined : title}
-        // eslint-disable-next-line react/jsx-handler-names
-        onClick={node.onAction}
-        padding={padding}
-        selected={node.selected}
-        tone={node.tone}
-      />
-    </TooltipOfDisabled>
+    <StatusButton
+      disabled={Boolean(node.disabled)}
+      icon={node.icon}
+      // eslint-disable-next-line react/jsx-handler-names
+      onClick={node.onAction}
+      selected={node.selected}
+      tone={node.tone}
+      aria-label={ariaLabel}
+      tooltipProps={{
+        hotkeys: !isDisabled && node.hotkey ? node.hotkey.split('+') : undefined,
+        content: isDisabled ? disabledReason : title,
+      }}
+    />
   )
 }
 
-function PaneHeaderActionIntentButton(props: {
-  intent: Intent
-  node: _PaneMenuItem
-  padding?: ButtonProps['padding']
-}) {
-  const {intent, node, padding} = props
-  const disabledTooltipContent = typeof node.disabled === 'object' && (
-    <Text size={1}>{node.disabled.reason}</Text>
-  )
+function PaneHeaderActionIntentButton(props: {intent: Intent; node: _PaneMenuItem}) {
+  const {intent, node} = props
   const intentLink = useIntentLink({intent: intent.type, params: intent.params})
 
   const handleClick = useCallback(
@@ -81,41 +86,44 @@ function PaneHeaderActionIntentButton(props: {
     [intentLink, node],
   )
 
+  const {disabledReason, ariaLabel, isDisabled} = getDisabledReason(node)
+
   return (
-    <TooltipOfDisabled content={disabledTooltipContent} placement="bottom">
-      <StatusButton
-        as="a"
-        disabled={Boolean(node.disabled)}
-        hotkey={node.hotkey?.split('+')}
-        href={intentLink.href}
-        icon={node.icon}
-        label={disabledTooltipContent ? undefined : node.title}
-        onClick={handleClick}
-        padding={padding}
-        selected={node.selected}
-        tone={node.tone}
-      />
-    </TooltipOfDisabled>
+    <StatusButton
+      as="a"
+      disabled={isDisabled}
+      href={intentLink.href}
+      icon={node.icon}
+      onClick={handleClick}
+      selected={node.selected}
+      tone={node.tone}
+      aria-label={ariaLabel}
+      tooltipProps={{
+        hotkeys: !isDisabled && node.hotkey ? node.hotkey.split('+') : undefined,
+        content: isDisabled ? disabledReason : node.title,
+        placement: 'bottom',
+        portal: true,
+      }}
+    />
   )
 }
 
 export interface PaneHeaderMenuGroupActionButtonProps {
   node: _PaneMenuGroup
-  padding?: ButtonProps['padding']
 }
 
 function PaneHeaderMenuGroupActionButton(props: PaneHeaderMenuGroupActionButtonProps) {
-  const {node, padding} = props
+  const {node} = props
   const {title} = useI18nText(node)
 
   return (
     <MenuButton
       button={
-        <StatusButton
-          disabled={node.disabled}
+        <Button
+          disabled={!!node.disabled}
           icon={node.icon ?? UnknownIcon}
           label={title}
-          padding={padding}
+          tooltipProps={{content: node.title, portal: true}}
         />
       }
       id={useId()}
diff --git a/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx b/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
index 92e9b16d4be..b584bd91776 100644
--- a/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
+++ b/packages/sanity/src/desk/components/pane/PaneMenuButtonItem.tsx
@@ -1,7 +1,8 @@
 import {CheckmarkIcon} from '@sanity/icons'
-import {Box, Label, MenuDivider, MenuGroup, MenuItem, PopoverProps, Text} from '@sanity/ui'
+import {MenuDivider, Text} from '@sanity/ui'
 import React, {useCallback, MouseEvent} from 'react'
 import {Intent} from '../../structureBuilder'
+import {MenuGroup, MenuItem, PopoverProps} from '../../../ui-components'
 import {_PaneMenuItem, _PaneMenuNode} from './types'
 import {TooltipOfDisabled, useGetI18nText, useI18nText} from 'sanity'
 import {useIntentLink} from 'sanity/router'
@@ -35,13 +36,6 @@ export function PaneMenuButtonItem(props: {
       return (
         <>
           {isAfterGroup && <MenuDivider />}
-          {title && (
-            <Box padding={2} paddingBottom={1}>
-              <Label muted size={0}>
-                {title}
-              </Label>
-            </Box>
-          )}
           {node.children.map((child, childIndex) => (
             <PaneMenuButtonItem
               disabled={disabled || Boolean(node.disabled)}
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
index 7cc4e7d9446..aca44366864 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/ChangeConnectorsStory.tsx
@@ -2,11 +2,8 @@ import {AddIcon, CloseIcon, RestoreIcon} from '@sanity/icons'
 import {Path} from '@sanity/types'
 import {
   BoundaryElementProvider,
-  Box,
-  Button,
   Card,
   Container,
-  Dialog,
   DialogProvider,
   Flex,
   LayerProvider,
@@ -19,6 +16,7 @@ import {
 import {useAction} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
+import {Button, Dialog} from '../../../../ui-components'
 import {Pane} from '../Pane'
 import {PaneContent} from '../PaneContent'
 import {PaneFooter} from '../PaneFooter'
@@ -157,6 +155,7 @@ export default function ChangeConnectorsStory() {
                       mode="bleed"
                       onClick={toggleReviewChanges}
                       selected={reviewChanges}
+                      tooltipProps={{content: 'Review changes'}}
                     />
                   </PaneFooter>
                 </Pane>
@@ -165,7 +164,12 @@ export default function ChangeConnectorsStory() {
                   <Pane id="review-changes-panel">
                     <PaneHeader
                       actions={
-                        <Button icon={CloseIcon} mode="bleed" onClick={closeReviewChanges} />
+                        <Button
+                          icon={CloseIcon}
+                          mode="bleed"
+                          onClick={closeReviewChanges}
+                          tooltipProps={{content: 'Close'}}
+                        />
                       }
                       title="Changes"
                     />
@@ -212,7 +216,7 @@ function StringField(props: {
 
   return (
     <Stack space={2}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         String
       </Text>
       <DebugFormField path={path} focusPath={focusPath} value={value} compareValue={compareValue}>
@@ -220,15 +224,18 @@ function StringField(props: {
       </DebugFormField>
 
       <div>
-        <Button icon={<AddIcon />} mode="ghost" onClick={handleOpen} />
+        <Button
+          icon={<AddIcon />}
+          mode="ghost"
+          onClick={handleOpen}
+          tooltipProps={{content: 'Add'}}
+        />
       </div>
 
       {open && (
         <DialogProvider position="absolute">
           <Dialog id={`${path.join('-')}-dialog`} onClickOutside={handleClose}>
-            <Box padding={4}>
-              <Text>Dialog</Text>
-            </Box>
+            <Text size={1}>Dialog</Text>
           </Dialog>
         </DialogProvider>
       )}
@@ -265,7 +272,7 @@ function DebugDiffField(props: {children?: React.ReactNode; path: Path}) {
 
   return (
     <Stack space={2}>
-      <Text size={1} weight="semibold">
+      <Text size={1} weight="medium">
         String
       </Text>
       <ChangeFieldWrapper hasHover={hovered} path={path}>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx b/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
index 9425be50d07..c1ba387c1e4 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/ExampleStory.tsx
@@ -1,12 +1,14 @@
-import {EllipsisVerticalIcon, SelectIcon} from '@sanity/icons'
-import {Button, Container, Stack, Tab, TabList, Text} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Container, Stack, TabList, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useMemo} from 'react'
+import {Button, Tab} from '../../../../ui-components'
 import {Pane} from '../Pane'
 import {PaneContent} from '../PaneContent'
 import {PaneFooter} from '../PaneFooter'
 import {PaneHeader} from '../PaneHeader'
 import {PaneLayout} from '../PaneLayout'
+import {ContextMenuButton} from 'sanity'
 
 const PANE_TONE_OPTIONS = {
   Default: 'default',
@@ -21,38 +23,26 @@ export default function ExampleStory() {
   const manyTabs = useBoolean('Many tabs', false, 'Props')
   const tone = useSelect('Tone', PANE_TONE_OPTIONS, 'default', 'Props')
 
-  const actions = useMemo(() => <Button icon={EllipsisVerticalIcon} mode="bleed" />, [])
+  const actions = useMemo(() => <ContextMenuButton />, [])
   const tabs = useMemo(
     () =>
       manyTabs ? (
         <TabList space={1}>
-          <Tab
-            aria-controls="content-panel"
-            fontSize={1}
-            id="content-tab"
-            label="Content"
-            selected
-          />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
+          <Tab aria-controls="content-panel" id="content-tab" label="Content" selected />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
         </TabList>
       ) : (
         <TabList space={1}>
-          <Tab
-            aria-controls="content-panel"
-            fontSize={1}
-            id="content-tab"
-            label="Content"
-            selected
-          />
-          <Tab aria-controls="preview-panel" fontSize={1} id="preview-tab" label="Preview" />
+          <Tab aria-controls="content-panel" id="content-tab" label="Content" selected />
+          <Tab aria-controls="preview-panel" id="preview-tab" label="Preview" />
         </TabList>
       ),
     [manyTabs],
@@ -63,9 +53,7 @@ export default function ExampleStory() {
       <Pane id="example-pane" minWidth={320} tone={tone}>
         <PaneHeader
           actions={actions}
-          subActions={
-            <Button fontSize={1} iconRight={SelectIcon} mode="bleed" padding={2} text="Latest" />
-          }
+          subActions={<Button iconRight={ChevronDownIcon} mode="bleed" text="Latest" />}
           tabs={tabs}
           title={<>Header</>}
         />
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
index a89ebc4bd73..3ba1cf81773 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
@@ -1,15 +1,8 @@
-import {ChevronDownIcon, PublishIcon} from '@sanity/icons'
-import {
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  Stack,
-  useToast,
-} from '@sanity/ui'
+import {PublishIcon} from '@sanity/icons'
+import {Flex, Menu, Stack, useToast} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Button, MenuButton, MenuButtonProps, MenuItem} from '../../../../../../ui-components'
+import {ContextMenuButton} from 'sanity'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
@@ -27,10 +20,10 @@ export function DocumentActions() {
   return (
     <Flex gap={1}>
       <Stack flex={1}>
-        <Button icon={PublishIcon} onClick={publish} text="Publish" tone="positive" />
+        <Button icon={PublishIcon} onClick={publish} text="Publish" tone="default" />
       </Stack>
       <MenuButton
-        button={<Button icon={ChevronDownIcon} mode="ghost" />}
+        button={<ContextMenuButton />}
         id="actions"
         menu={
           <Menu>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
index d986f7bf34a..518df46ad67 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentViewPanel.tsx
@@ -1,6 +1,7 @@
 import {ArrowLeftIcon, RestoreIcon} from '@sanity/icons'
-import {Box, Button, Flex, Text, Stack, Container} from '@sanity/ui'
+import {Box, Flex, Text, Stack, Container} from '@sanity/ui'
 import React from 'react'
+import {Button} from '../../../../../../ui-components'
 import {PaneContent} from '../../../PaneContent'
 import {PaneFooter} from '../../../PaneFooter'
 import {PaneHeader} from '../../../PaneHeader'
@@ -25,7 +26,14 @@ export function DocumentViewPanel(props: {
     >
       <PaneHeader
         backButton={
-          layoutCollapsed && <Button icon={ArrowLeftIcon} mode="bleed" onClick={onBackClick} />
+          layoutCollapsed && (
+            <Button
+              icon={ArrowLeftIcon}
+              mode="bleed"
+              onClick={onBackClick}
+              tooltipProps={{content: 'Back'}}
+            />
+          )
         }
         title={title}
       />
@@ -96,6 +104,7 @@ export function DocumentViewPanel(props: {
               mode="bleed"
               onClick={toggleReviewChanges}
               selected={reviewChanges}
+              tooltipProps={{content: "Review document's history"}}
             />
           </Box>
           <Box flex={1} style={{maxWidth: '260px'}}>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
index e3854eecef8..6188768dc40 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/ReviewChangesPanel.tsx
@@ -1,6 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
-import {Button, Flex} from '@sanity/ui'
+import {Flex} from '@sanity/ui'
 import React from 'react'
+import {Button} from '../../../../../../ui-components'
 import {PaneHeader} from '../../../PaneHeader'
 import {usePane} from '../../../usePane'
 
@@ -19,7 +20,14 @@ export function ReviewChangesPanel(props: {onClose: () => void}) {
       }}
     >
       <PaneHeader
-        actions={<Button icon={CloseIcon} mode="bleed" onClick={props.onClose} />}
+        actions={
+          <Button
+            icon={CloseIcon}
+            mode="bleed"
+            onClick={props.onClose}
+            tooltipProps={{content: 'Close'}}
+          />
+        }
         title="Review changes"
       />
     </Flex>
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
index be32ac3651c..e3093620149 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/ListPane/ListPane.tsx
@@ -1,11 +1,13 @@
-import {ArrowLeftIcon, ChevronRightIcon, EllipsisVerticalIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
+import {ArrowLeftIcon, ChevronRightIcon} from '@sanity/icons'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {Button} from '../../../../../../ui-components'
 import {usePaneLayout} from '../../../usePaneLayout'
 import {Pane} from '../../../Pane'
 import {PaneContent} from '../../../PaneContent'
 import {PaneHeader} from '../../../PaneHeader'
 import {ListPaneNode} from '../types'
+import {ContextMenuButton} from 'sanity'
 
 export function ListPane(props: {
   active: boolean
@@ -24,10 +26,17 @@ export function ListPane(props: {
   return (
     <Pane currentMaxWidth={350} flex={1} id={String(index)} minWidth={320} maxWidth={640}>
       <PaneHeader
-        actions={<Button icon={EllipsisVerticalIcon} mode="bleed" />}
+        actions={<ContextMenuButton />}
         backButton={
           index > 0 &&
-          layoutCollapsed && <Button icon={ArrowLeftIcon} mode="bleed" onClick={handleBackClick} />
+          layoutCollapsed && (
+            <Button
+              icon={ArrowLeftIcon}
+              mode="bleed"
+              onClick={handleBackClick}
+              tooltipProps={{content: 'Back'}}
+            />
+          )
         }
         title={node.title}
       />
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
index 2d1001b0f80..8447df45884 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
@@ -1,5 +1,5 @@
-import {Tooltip, Text, Box} from '@sanity/ui'
 import React from 'react'
+import {Tooltip} from '../../../ui-components'
 import {structureLocaleNamespace} from '../../i18n'
 import {useCurrentUser, InsufficientPermissionsMessage, useTranslation} from 'sanity'
 
@@ -31,9 +31,7 @@ export function InsufficientPermissionsMessageTooltip({
     <Tooltip
       content={
         loading ? (
-          <Box padding={2}>
-            <Text>{t('insufficient-permissions-message-tooltip.loading-text')}</Text>
-          </Box>
+          t('insufficient-permissions-message-tooltip.loading-text')
         ) : (
           <InsufficientPermissionsMessage context={context} currentUser={currentUser} />
         )
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
index df83b5806ad..ac6e54c1ad1 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
@@ -1,7 +1,8 @@
 import {AddIcon} from '@sanity/icons'
 import React, {useMemo, forwardRef} from 'react'
-import {Box, Button, Label, Menu, MenuButton, MenuItem, PopoverProps} from '@sanity/ui'
+import {Menu} from '@sanity/ui'
 import {Schema} from '@sanity/types'
+import {Button, MenuButton, PopoverProps, MenuItem} from '../../../ui-components'
 import {IntentButton} from '../IntentButton'
 import {structureLocaleNamespace} from '../../i18n'
 import {InsufficientPermissionsMessageTooltip} from './InsufficientPermissionsMessageTooltip'
@@ -87,10 +88,12 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
       >
         <Button
           aria-label={t('pane-header.disabled-created-button.aria-label')}
+          icon={AddIcon}
           data-testid="action-intent-button"
           disabled
-          icon={AddIcon}
           mode="bleed"
+          // This button handles the tooltip in a special way, won't reuse the forced tooltip.
+          tooltipProps={null}
         />
       </InsufficientPermissionsMessageTooltip>
     )
@@ -110,12 +113,13 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
         context="create-document-type"
       >
         <IntentButton
-          title={getI18nText(firstItem).title}
+          aria-label={getI18nText(firstItem).title}
           icon={firstItem.icon || AddIcon}
           intent={intent}
           mode="bleed"
           disabled={disabled}
           data-testid="action-intent-button"
+          tooltipProps={disabled ? null : {content: t('pane-header.create-new-button.tooltip')}}
         />
       </InsufficientPermissionsMessageTooltip>
     )
@@ -123,14 +127,17 @@ export function PaneHeaderCreateButton({templateItems}: PaneHeaderCreateButtonPr
 
   return (
     <MenuButton
-      button={<Button icon={AddIcon} mode="bleed" data-testid="multi-action-intent-button" />}
+      button={
+        <Button
+          icon={AddIcon}
+          mode="bleed"
+          data-testid="multi-action-intent-button"
+          tooltipProps={{content: t('pane-header.create-new-button.tooltip')}}
+        />
+      }
       id="create-menu"
       menu={
         <Menu>
-          <Box paddingX={3} paddingTop={3} paddingBottom={2}>
-            <Label muted>{t('pane-header.create-menu.label')}</Label>
-          </Box>
-
           {templateItems.map((item, itemIndex) => {
             const permissions = permissionsById[item.id]
             const disabled = !permissions?.granted
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItem.tsx b/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
index 802b8118e4a..2b0ba490199 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
@@ -1,6 +1,6 @@
 import {FolderIcon, ChevronRightIcon, DocumentIcon} from '@sanity/icons'
 import {isSanityDocument, PreviewValue, SanityDocument, SchemaType} from '@sanity/types'
-import {CardProps, Text} from '@sanity/ui'
+import {Box, CardProps, Text} from '@sanity/ui'
 import React, {ReactNode, useCallback, useEffect, useMemo, useState} from 'react'
 import {MissingSchemaType} from '../MissingSchemaType'
 import {usePaneRouter} from '../paneRouter'
@@ -84,15 +84,18 @@ export function PaneItem(props: PaneItemProps) {
       )
     }
 
+    // Always render non-document values as compact previews
     return (
       <SanityDefaultPreview
         status={
-          <Text muted>
-            <ChevronRightIcon />
-          </Text>
+          <Box style={{opacity: 0.5}}>
+            <Text muted size={1}>
+              <ChevronRightIcon />
+            </Text>
+          </Box>
         }
         icon={getIconWithFallback(icon, schemaType, FolderIcon)}
-        layout={layout}
+        layout="compact"
         title={title}
       />
     )
@@ -132,12 +135,10 @@ export function PaneItem(props: PaneItemProps) {
       __unstable_focusRing
       as={Link as FIXME}
       data-as="a"
-      data-ui="PaneItem"
       margin={margin}
       marginBottom={marginBottom}
       marginTop={marginTop}
       onClick={handleClick}
-      padding={2}
       pressed={pressed}
       radius={2}
       selected={selected || clicked}
diff --git a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
index 721759be9da..824187721e4 100644
--- a/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
+++ b/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
@@ -1,10 +1,9 @@
 import type {SanityDocument, SchemaType} from '@sanity/types'
 import React, {isValidElement} from 'react'
 import {isNumber, isString} from 'lodash'
-import {Inline} from '@sanity/ui'
+import {Flex, TooltipDelayGroupProvider} from '@sanity/ui'
 import {useMemoObservable} from 'react-rx'
-import {PublishedStatus} from '../PublishedStatus'
-import {DraftStatus} from '../DraftStatus'
+import {TOOLTIP_DELAY_PROPS} from '../../../ui-components'
 import type {PaneItemPreviewState} from './types'
 import {
   DocumentPresence,
@@ -15,6 +14,8 @@ import {
   getPreviewValueWithFallback,
   SanityDefaultPreview,
   isRecord,
+  DocumentStatusIndicator,
+  DocumentStatus,
 } from 'sanity'
 
 export interface PaneItemPreviewProps {
@@ -26,6 +27,13 @@ export interface PaneItemPreviewProps {
   value: SanityDocument
 }
 
+/**
+ * Preview component for _documents_ rendered in desk/structure panes.
+ *
+ * Note that non-document previews are not handled by this component,
+ * despite being pane items! Non-document previews bypass this entirely
+ * and are rendered by `<SanityDefaultPreview>`.
+ */
 export function PaneItemPreview(props: PaneItemPreviewProps) {
   const {icon, layout, presence, schemaType, value} = props
   const title =
@@ -43,13 +51,16 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
   )!
 
   const status = isLoading ? null : (
-    <Inline space={4}>
-      {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
-      <PublishedStatus document={published} />
-      <DraftStatus document={draft} />
-    </Inline>
+    <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+      <Flex align="center" gap={3}>
+        {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
+        <DocumentStatusIndicator draft={draft} published={published} />
+      </Flex>
+    </TooltipDelayGroupProvider>
   )
 
+  const tooltip = <DocumentStatus draft={draft} published={published} />
+
   return (
     <SanityDefaultPreview
       {...getPreviewValueWithFallback({value, draft, published})}
@@ -57,6 +68,7 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
       icon={icon}
       layout={layout}
       status={status}
+      tooltip={tooltip}
     />
   )
 }
diff --git a/packages/sanity/src/desk/components/spacerButton/SpacerButton.tsx b/packages/sanity/src/desk/components/spacerButton/SpacerButton.tsx
new file mode 100644
index 00000000000..629e66c07f4
--- /dev/null
+++ b/packages/sanity/src/desk/components/spacerButton/SpacerButton.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import {Button, ButtonProps} from '../../../ui-components'
+
+interface SpacerButtonProps {
+  size?: ButtonProps['size']
+}
+
+/**
+ * This renders a visually hidden <Button> component that is still contributes
+ * to document layout.
+ *
+ * It's used to simplify padding in Sanity UI components that contain buttons which
+ * may not always be rendered.
+ *
+ * TODO: let's find a more elegant solve to this layout shift problem
+ *
+ * @internal
+ */
+export function SpacerButton({size}: SpacerButtonProps) {
+  return (
+    <Button
+      aria-hidden
+      disabled
+      size={size}
+      style={{
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        width: 0,
+      }}
+      text="-"
+    />
+  )
+}
diff --git a/packages/sanity/src/desk/components/spacerButton/index.ts b/packages/sanity/src/desk/components/spacerButton/index.ts
new file mode 100644
index 00000000000..7e2b29a6fe2
--- /dev/null
+++ b/packages/sanity/src/desk/components/spacerButton/index.ts
@@ -0,0 +1 @@
+export * from './SpacerButton'
diff --git a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
index 0e4e43d891c..f001d803d55 100644
--- a/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
+++ b/packages/sanity/src/desk/deskRename/DeskRenameToolMenuButtonPopover.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable @sanity/i18n/no-attribute-string-literals */
 /* eslint-disable i18next/no-literal-string */
 import React, {useCallback, useState} from 'react'
-import {CheckmarkIcon, LaunchIcon} from '@sanity/icons'
-import {Button, Flex, Grid, Popover, Stack, Text} from '@sanity/ui'
+import {Flex, Heading, Stack, Text} from '@sanity/ui'
 import {generateHelpUrl} from '@sanity/generate-help-url'
+import {Button, Popover} from '../../ui-components'
 import {useDeskRenameOnboarding} from './onboardingStore'
 
 const RENAME_ANNOUNCEMENT_URL = generateHelpUrl('desk-is-now-structure')
@@ -60,9 +60,7 @@ function DeskRenamedCard(props: {onDismiss: () => void}) {
     <Stack as="section" padding={3} space={3} onClick={handleClick}>
       <Stack padding={2} space={4}>
         <Flex gap={2} align="center">
-          <Text as="h1" size={1} weight="semibold">
-            <strong>Desk</strong> is now <strong>Structure</strong>
-          </Text>
+          <Heading size={1}>Desk is now structure</Heading>
         </Flex>
 
         <Stack space={3}>
@@ -73,28 +71,18 @@ function DeskRenamedCard(props: {onDismiss: () => void}) {
         </Stack>
       </Stack>
 
-      <Grid columns={2} gap={3}>
+      <Flex width="full" gap={3} justify="flex-end">
         <Button
           as="a"
           data-as="a"
           href={RENAME_ANNOUNCEMENT_URL}
-          icon={LaunchIcon}
           target="_blank"
           rel="noreferrer"
-          fontSize={1}
-          padding={3}
           text="Learn more"
-          mode="ghost"
-        />
-        <Button
-          fontSize={1}
-          icon={CheckmarkIcon}
-          onClick={props.onDismiss}
-          padding={3}
-          text="Got it"
-          tone="primary"
+          mode="bleed"
         />
-      </Grid>
+        <Button onClick={props.onDismiss} text="Got it" tone="primary" />
+      </Flex>
     </Stack>
   )
 }
diff --git a/packages/sanity/src/desk/documentActions/PublishAction.tsx b/packages/sanity/src/desk/documentActions/PublishAction.tsx
index 45bc08acd47..cd2111aefe9 100644
--- a/packages/sanity/src/desk/documentActions/PublishAction.tsx
+++ b/packages/sanity/src/desk/documentActions/PublishAction.tsx
@@ -142,7 +142,8 @@ export const PublishAction: DocumentActionComponent = (props) => {
 
   if (liveEdit) {
     return {
-      tone: 'positive',
+      tone: 'default',
+      icon: PublishIcon,
       label: t('action.publish.live-edit.label'),
       title: t('action.publish.live-edit.tooltip'),
       disabled: true,
@@ -151,7 +152,8 @@ export const PublishAction: DocumentActionComponent = (props) => {
 
   if (!isPermissionsLoading && !permissions?.granted) {
     return {
-      tone: 'positive',
+      tone: 'default',
+      icon: PublishIcon,
       label: 'Publish',
       title: (
         <InsufficientPermissionsMessage context="publish-document" currentUser={currentUser} />
@@ -171,7 +173,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
 
   return {
     disabled: disabled || isPermissionsLoading,
-    tone: 'positive',
+    tone: 'default',
     label:
       // eslint-disable-next-line no-nested-ternary
       publishState === 'published'
@@ -181,7 +183,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
           : t('action.publish.draft.label'),
     // @todo: Implement loading state, to show a `<Button loading />` state
     // loading: publishScheduled || publishState === 'publishing',
-    icon: publishState === 'published' ? CheckmarkIcon : PublishIcon,
+    icon: PublishIcon,
     // eslint-disable-next-line no-nested-ternary
     title: publishScheduled
       ? t('action.publish.waiting')
diff --git a/packages/sanity/src/desk/i18n/resources.ts b/packages/sanity/src/desk/i18n/resources.ts
index 458fd52773a..9961c64a611 100644
--- a/packages/sanity/src/desk/i18n/resources.ts
+++ b/packages/sanity/src/desk/i18n/resources.ts
@@ -117,6 +117,8 @@ const structureLocaleStrings = defineLocalesResources('structure', {
 
   /** The action menu button aria-label */
   'buttons.action-menu-button.aria-label': 'Open document actions',
+  /** The action menu button tooltip */
+  'buttons.action-menu-button.tooltip': 'Document actions',
 
   /** The aria-label for the split pane button on the document panel header */
   'buttons.split-pane-button.aria-label': 'Split pane right',
@@ -278,13 +280,16 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   /** The title of the no document type screen */
   'no-document-types-screen.title': 'No document types',
 
+  /** Text shown on back button visible on smaller breakpoints */
+  'pane-header.back-button.text': 'Back',
   /** tooltip text (via `title` attribute) for the menu button */
   'pane-header.context-menu-button.tooltip': 'Show menu',
   /** Appears in a document list pane header if there are more than one option for create. This is the label for that menu */
   'pane-header.create-menu.label': 'Create',
+  /** Tooltip displayed on the create new button in document lists */
+  'pane-header.create-new-button.tooltip': 'Create new document',
   /** The `aria-label` for the disabled button in the pane header if create permissions are granted */
   'pane-header.disabled-created-button.aria-label': 'Insufficient permissions',
-
   /** The text shown in the tooltip of pane item previews of documents if there are unpublished edits */
   'pane-item.draft-status.has-draft.tooltip': 'Edited <RelativeTime/>',
   /** The text shown in the tooltip of pane item previews of documents if there are no unpublished edits */
@@ -297,7 +302,6 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   'pane-item.published-status.has-published.tooltip': 'Published <RelativeTime/>',
   /** The text shown in the tooltip of pane item previews of documents if there are no unpublished edits */
   'pane-item.published-status.no-published.tooltip': 'No unpublished edits',
-
   /** The text used in the document header title if there is an error */
   'panes.document-header-title.error.text': 'Error: {{error}}',
   /** The text used in the document header title if creating a new item */
diff --git a/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx b/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
index 5a47189f9a1..3200cc827db 100644
--- a/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
+++ b/packages/sanity/src/desk/panes/document/document-layout/DocumentLayout.tsx
@@ -1,4 +1,11 @@
-import {useElementRect, DialogProvider, Flex, PortalProvider, DialogProviderProps} from '@sanity/ui'
+import {
+  useElementRect,
+  DialogProvider,
+  Flex,
+  PortalProvider,
+  DialogProviderProps,
+  TooltipDelayGroupProvider,
+} from '@sanity/ui'
 import {useState, useCallback, useMemo} from 'react'
 import {useTranslation} from 'react-i18next'
 import {Path} from 'sanity-diff-patch'
@@ -21,10 +28,10 @@ import {useDocumentPane} from '../useDocumentPane'
 import {DocumentPanelHeader} from '../documentPanel/header'
 import {DocumentInspectorMenuItemsResolver} from '../DocumentInspectorMenuItemsResolver'
 import {usePreviewUrl} from '../usePreviewUrl'
+import {TOOLTIP_DELAY_PROPS} from '../../../../ui-components'
 import {getMenuItems} from '../menuItems'
 import {DocumentLayoutError} from './DocumentLayoutError'
 import {
-  DocumentLayoutProps,
   useZIndex,
   ChangeConnectorRoot,
   DocumentInspectorMenuItem,
@@ -214,7 +221,9 @@ export function DocumentLayout() {
           >
             <DialogProvider position={DIALOG_PROVIDER_POSITION} zOffset={zOffsets.portal}>
               <PaneFooter ref={setFooterElement}>
-                <DocumentStatusBar actionsBoxRef={setActionsBoxElement} />
+                <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+                  <DocumentStatusBar actionsBoxRef={setActionsBoxElement} />
+                </TooltipDelayGroupProvider>
               </PaneFooter>
             </DialogProvider>
           </PortalProvider>
diff --git a/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx b/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
index 09ecf69b43e..fca61129d72 100644
--- a/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentInspector/DocumentInspectorHeader.tsx
@@ -1,7 +1,8 @@
 import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Card, CardProps, Flex, Text} from '@sanity/ui'
+import {Box, Card, CardProps, Flex, Text} from '@sanity/ui'
 import React, {HTMLProps, ReactNode} from 'react'
 import styled from 'styled-components'
+import {Button} from '../../../../ui-components'
 
 export interface DocumentInspectorHeaderProps {
   as?: CardProps['as']
@@ -15,17 +16,6 @@ const Root = styled(Card)({
   position: 'relative',
   zIndex: 1,
   lineHeight: 0,
-
-  '&:after': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    left: 0,
-    bottom: -1,
-    right: 0,
-    borderBottom: '1px solid var(--card-border-color)',
-    opacity: 0.5,
-  },
 })
 
 /** @internal */
@@ -38,18 +28,17 @@ export function DocumentInspectorHeader(
     <Root {...restProps} as={forwardedAs}>
       <Flex padding={2}>
         <Box flex={1} padding={3}>
-          <Text as="h1" size={1} weight="semibold">
+          <Text as="h1" size={1} weight="medium">
             {title}
           </Text>
         </Box>
         <Box flex="none" padding={1}>
           <Button
             aria-label={closeButtonLabel}
-            fontSize={1}
             icon={CloseIcon}
             mode="bleed"
             onClick={onClose}
-            padding={2}
+            tooltipProps={{content: 'Close'}}
           />
         </Box>
       </Flex>
diff --git a/packages/sanity/src/desk/panes/document/documentInspector/Resizer.tsx b/packages/sanity/src/desk/panes/document/documentInspector/Resizer.tsx
index cd7412f6af2..45ee67ca6cd 100644
--- a/packages/sanity/src/desk/panes/document/documentInspector/Resizer.tsx
+++ b/packages/sanity/src/desk/panes/document/documentInspector/Resizer.tsx
@@ -19,7 +19,6 @@ const Root = styled.div`
     left: 4px;
     bottom: 0;
     transition: opacity 200ms;
-    opacity: 0.5;
   }
 
   /* Hover effect */
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
deleted file mode 100644
index 54031ec0481..00000000000
--- a/packages/sanity/src/desk/panes/document/documentPanel/DeletedDocumentBanner.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, {useCallback} from 'react'
-import {Button, Card, Container, Flex, Text} from '@sanity/ui'
-import {ReadOnlyIcon} from '@sanity/icons'
-import styled from 'styled-components'
-import {useDocumentPane} from '../useDocumentPane'
-import {useDocumentOperation, useTranslation} from 'sanity'
-import {useRouter} from 'sanity/router'
-import {structureLocaleNamespace} from '../../../i18n'
-
-const Root = styled(Card)`
-  position: relative;
-  z-index: 50;
-`
-
-interface DeletedDocumentBannerProps {
-  revisionId?: string | null
-}
-
-export function DeletedDocumentBanner({revisionId}: DeletedDocumentBannerProps) {
-  const {documentId, documentType} = useDocumentPane()
-  const {restore} = useDocumentOperation(documentId, documentType)
-  const {navigateIntent} = useRouter()
-  const handleRestore = useCallback(() => {
-    if (revisionId) {
-      restore.execute(revisionId)
-      navigateIntent('edit', {id: documentId, type: documentType})
-    }
-  }, [documentId, documentType, navigateIntent, restore, revisionId])
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  return (
-    <Root data-testid="deleted-document-banner" shadow={1} tone="transparent">
-      <Container paddingX={4} paddingY={revisionId ? 2 : 3} sizing="border" width={1}>
-        <Flex align="center">
-          <Text size={1}>
-            <ReadOnlyIcon />
-          </Text>
-
-          <Flex align="center" gap={2} flex={1} marginLeft={3}>
-            <Text size={1}>{t('banners.deleted-document-banner.text')}</Text>
-            {revisionId && (
-              <Button
-                fontSize={1}
-                padding={2}
-                mode="bleed"
-                tone="primary"
-                onClick={handleRestore}
-                text={t('banners.deleted-document-banner.restore-button.text')}
-              />
-            )}
-          </Flex>
-        </Flex>
-      </Container>
-    </Root>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx b/packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx
index f77cf107bd4..89eeee05c5f 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/DocumentPanel.tsx
@@ -6,9 +6,7 @@ import {useDocumentPane} from '../useDocumentPane'
 import {useDeskTool} from '../../../useDeskTool'
 import {DocumentInspectorPanel} from '../documentInspector'
 import {InspectDialog} from '../inspectDialog'
-import {DeletedDocumentBanner} from './DeletedDocumentBanner'
-import {ReferenceChangedBanner} from './ReferenceChangedBanner'
-import {PermissionCheckBanner} from './PermissionCheckBanner'
+import {DeletedDocumentBanner, PermissionCheckBanner, ReferenceChangedBanner} from './banners'
 import {FormView} from './documentViews'
 import {ScrollContainer, useTimelineSelector, VirtualizerScrollInstanceProvider} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx
deleted file mode 100644
index e46c8bd2d0e..00000000000
--- a/packages/sanity/src/desk/panes/document/documentPanel/PermissionCheckBanner.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import {Box, Card, Container, Flex, Text} from '@sanity/ui'
-import {ReadOnlyIcon} from '@sanity/icons'
-import styled from 'styled-components'
-import {structureLocaleNamespace} from '../../../i18n'
-import {Translate, useCurrentUser, useListFormat, useTranslation} from 'sanity'
-
-const Root = styled(Card)`
-  position: relative;
-  z-index: 50;
-`
-
-interface PermissionCheckBannerProps {
-  granted: boolean
-  requiredPermission: 'update' | 'create'
-}
-
-export function PermissionCheckBanner({granted, requiredPermission}: PermissionCheckBannerProps) {
-  const currentUser = useCurrentUser()
-  const listFormat = useListFormat({style: 'short'})
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  if (granted) return null
-
-  const roleTitles = (currentUser?.roles || []).map((role) => role.title)
-  const roles = listFormat
-    .formatToParts(roleTitles)
-    .map((part) =>
-      part.type === 'element' ? <code key={part.value}>{part.value}</code> : part.value,
-    )
-
-  return (
-    <Root data-testid="permission-check-banner" shadow={1} tone="transparent">
-      <Container paddingX={4} paddingY={3} sizing="border" width={1}>
-        <Flex align="flex-start">
-          <Text size={1}>
-            <ReadOnlyIcon />
-          </Text>
-
-          <Box flex={1} marginLeft={3}>
-            <Text size={1}>
-              <Translate
-                t={t}
-                i18nKey="banners.permission-check-banner.missing-permission"
-                components={{Roles: () => <>{roles}</>}}
-                values={{count: roles.length, roles: roleTitles}}
-                context={requiredPermission}
-              />
-            </Text>
-          </Box>
-        </Flex>
-      </Container>
-    </Root>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx
new file mode 100644
index 00000000000..8962b9bdad6
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/Banner.tsx
@@ -0,0 +1,49 @@
+import {ButtonTone, Card, CardTone, Flex, Text} from '@sanity/ui'
+import React from 'react'
+import {Button} from '../../../../../ui-components'
+import {SpacerButton} from '../../../../components/spacerButton'
+
+interface BannerProps {
+  action?: {
+    as?: React.ElementType | keyof JSX.IntrinsicElements
+    icon?: React.ComponentType
+    onClick?: () => void
+    text: string
+    tone?: ButtonTone
+  }
+  content: React.ReactNode
+  icon?: React.ComponentType
+  tone?: CardTone
+}
+
+export function Banner(props: BannerProps) {
+  const {action, content, icon: Icon, tone = 'transparent', ...rest} = props
+
+  return (
+    <Card borderBottom paddingX={4} paddingY={2} tone={tone} {...rest}>
+      <Flex align="center" gap={3}>
+        {Icon && (
+          <Text size={0}>
+            <Icon />
+          </Text>
+        )}
+
+        <Flex align="center" flex={1} gap={2} paddingY={3}>
+          {content}
+        </Flex>
+
+        <SpacerButton />
+
+        {action && (
+          <Button
+            as={action?.as}
+            mode="ghost"
+            onClick={action?.onClick}
+            text={action.text}
+            tone={action.tone || 'default'}
+          />
+        )}
+      </Flex>
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/DeletedDocumentBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/DeletedDocumentBanner.tsx
new file mode 100644
index 00000000000..a9c3972ba34
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/DeletedDocumentBanner.tsx
@@ -0,0 +1,45 @@
+import {ReadOnlyIcon} from '@sanity/icons'
+import {Text} from '@sanity/ui'
+import {useCallback} from 'react'
+import {structureLocaleNamespace} from '../../../../i18n'
+import {useDocumentPane} from '../../useDocumentPane'
+import {Banner} from './Banner'
+import {useDocumentOperation, useTranslation} from 'sanity'
+import {useRouter} from 'sanity/router'
+
+interface DeletedDocumentBannerProps {
+  revisionId?: string | null
+}
+
+export function DeletedDocumentBanner({revisionId}: DeletedDocumentBannerProps) {
+  const {documentId, documentType} = useDocumentPane()
+  const {restore} = useDocumentOperation(documentId, documentType)
+  const {navigateIntent} = useRouter()
+  const handleRestore = useCallback(() => {
+    if (revisionId) {
+      restore.execute(revisionId)
+      navigateIntent('edit', {id: documentId, type: documentType})
+    }
+  }, [documentId, documentType, navigateIntent, restore, revisionId])
+  const {t} = useTranslation(structureLocaleNamespace)
+
+  return (
+    <Banner
+      action={
+        revisionId
+          ? {
+              onClick: handleRestore,
+              text: t('banners.deleted-document-banner.restore-button.text'),
+            }
+          : undefined
+      }
+      content={
+        <Text size={1} weight="medium">
+          {t('banners.deleted-document-banner.text')}
+        </Text>
+      }
+      data-testid="deleted-document-banner"
+      icon={ReadOnlyIcon}
+    />
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
new file mode 100644
index 00000000000..529b759ba70
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import {Text} from '@sanity/ui'
+import {ReadOnlyIcon} from '@sanity/icons'
+import {structureLocaleNamespace} from '../../../../i18n'
+import {Banner} from './Banner'
+import {Translate, useCurrentUser, useListFormat, useTranslation} from 'sanity'
+
+interface PermissionCheckBannerProps {
+  granted: boolean
+  requiredPermission: 'update' | 'create'
+}
+
+export function PermissionCheckBanner({granted, requiredPermission}: PermissionCheckBannerProps) {
+  const currentUser = useCurrentUser()
+  const listFormat = useListFormat({style: 'short'})
+  const {t} = useTranslation(structureLocaleNamespace)
+
+  if (granted) return null
+
+  const roleTitles = (currentUser?.roles || []).map((role) => role.title)
+  const roles = listFormat
+    .formatToParts(roleTitles)
+    .map((part) =>
+      part.type === 'element' ? <code key={part.value}>{part.value}</code> : part.value,
+    )
+
+  return (
+    <Banner
+      content={
+        <Text size={1} weight="medium">
+          <Translate
+            t={t}
+            i18nKey="banners.permission-check-banner.missing-permission"
+            components={{Roles: () => <>{roles}</>}}
+            values={{count: roles.length, roles: roleTitles}}
+            context={requiredPermission}
+          />
+        </Text>
+      }
+      data-testid="permission-check-banner"
+      icon={ReadOnlyIcon}
+    />
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx b/packages/sanity/src/desk/panes/document/documentPanel/banners/ReferenceChangedBanner.tsx
similarity index 68%
rename from packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
rename to packages/sanity/src/desk/panes/document/documentPanel/banners/ReferenceChangedBanner.tsx
index ea98e33243b..9dc55bcd156 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/ReferenceChangedBanner.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/ReferenceChangedBanner.tsx
@@ -1,31 +1,17 @@
-import {Box, Button, Card, Container, Flex, Text} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import {WarningOutlineIcon, SyncIcon, CloseIcon} from '@sanity/icons'
 import React, {memo, useCallback, useMemo} from 'react'
-import styled from 'styled-components'
 import {fromString as pathFromString, get as pathGet} from '@sanity/util/paths'
 import {KeyedSegment, Reference} from '@sanity/types'
 import {debounceTime, map} from 'rxjs/operators'
 import {concat, Observable, of} from 'rxjs'
 import {useMemoObservable} from 'react-rx'
-import {RouterPaneGroup} from '../../../types'
-import {usePaneRouter} from '../../../components'
-import {structureLocaleNamespace} from '../../../i18n'
+import {RouterPaneGroup} from '../../../../types'
+import {usePaneRouter} from '../../../../components'
+import {structureLocaleNamespace} from '../../../../i18n'
+import {Banner} from './Banner'
 import {DocumentAvailability, useDocumentPreviewStore, getPublishedId, useTranslation} from 'sanity'
 
-const Root = styled(Card)`
-  position: relative;
-  z-index: 50;
-`
-
-const TextOneLine = styled(Text)`
-  & > * {
-    overflow: hidden;
-    overflow: clip;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-`
-
 interface ParentReferenceInfo {
   loading: boolean
   result?: {
@@ -140,61 +126,31 @@ export const ReferenceChangedBanner = memo(() => {
   if (shouldHide) return null
 
   return (
-    <Root shadow={1} tone="caution" data-testid="reference-changed-banner">
-      <Container paddingX={4} paddingY={2} sizing="border" width={1}>
-        <Flex align="center">
-          <Text size={1}>
-            <WarningOutlineIcon />
-          </Text>
-
-          {referenceInfo.result?.refValue ? (
-            <>
-              <Box flex={1} marginLeft={3}>
-                <TextOneLine
-                  title={t('banners.reference-changed-banner.reason-changed.text')}
-                  size={1}
-                >
-                  {t('banners.reference-changed-banner.reason-changed.text')}
-                </TextOneLine>
-              </Box>
-              <Box marginLeft={3}>
-                <Button
-                  onClick={handleReloadReference}
-                  icon={SyncIcon}
-                  fontSize={1}
-                  mode="ghost"
-                  padding={2}
-                  space={2}
-                  text={t('banners.reference-changed-banner.reason-changed.reload-button.text')}
-                />
-              </Box>
-            </>
-          ) : (
-            <>
-              <Box flex={1} marginLeft={3}>
-                <TextOneLine
-                  title={t('banners.reference-changed-banner.reason-removed.text')}
-                  size={1}
-                >
-                  {t('banners.reference-changed-banner.reason-removed.text')}
-                </TextOneLine>
-              </Box>
-              <Box marginLeft={3}>
-                <Button
-                  as={BackLink}
-                  icon={CloseIcon}
-                  fontSize={1}
-                  mode="ghost"
-                  padding={2}
-                  space={2}
-                  text={t('banners.reference-changed-banner.reason-removed.close-button.text')}
-                />
-              </Box>
-            </>
-          )}
-        </Flex>
-      </Container>
-    </Root>
+    <Banner
+      action={
+        referenceInfo.result?.refValue
+          ? {
+              onClick: handleReloadReference,
+              icon: SyncIcon,
+              text: t('banners.reference-changed-banner.reason-changed.reload-button.text'),
+            }
+          : {
+              as: BackLink,
+              icon: CloseIcon,
+              text: t('banners.reference-changed-banner.reason-removed.close-button.text'),
+            }
+      }
+      data-testid="reference-changed-banner"
+      content={
+        <Text size={1} weight="medium">
+          {referenceInfo.result?.refValue
+            ? t('banners.reference-changed-banner.reason-changed.text')
+            : t('banners.reference-changed-banner.reason-removed.text')}
+        </Text>
+      }
+      icon={WarningOutlineIcon}
+      tone="caution"
+    />
   )
 })
 
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/banners/index.ts b/packages/sanity/src/desk/panes/document/documentPanel/banners/index.ts
new file mode 100644
index 00000000000..209d96f6784
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/banners/index.ts
@@ -0,0 +1,3 @@
+export * from './DeletedDocumentBanner'
+export * from './PermissionCheckBanner'
+export * from './ReferenceChangedBanner'
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx
new file mode 100644
index 00000000000..0475871a4aa
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormHeader.tsx
@@ -0,0 +1,74 @@
+import {SchemaType} from '@sanity/types'
+import {Heading, Stack, Text} from '@sanity/ui'
+import styled, {css} from 'styled-components'
+
+interface DocumentHeaderProps {
+  documentId: string
+  schemaType: SchemaType
+  title?: string
+}
+
+/**
+ * Use CSS container queries to conditionally render headings at different sizes.
+ * We hide this entire container (including the document type) if container queries
+ * not supported in the current browser.
+ *
+ * Note that usage of container queries in `styled-components` is only supported in `6.x`.
+ * As such, studios that include `"styled-components": "<6"` as a dependency will only see
+ * the largest heading size here, even if their browser supports it!
+ */
+
+export const TitleContainer = styled(Stack)`
+  ${({theme}) => {
+    return css`
+      @supports not (container-type: inline-size) {
+        display: none !important;
+      }
+
+      container-type: inline-size;
+
+      [data-heading] {
+        font-size: ${theme.sanity.fonts.heading.sizes[4].fontSize}px;
+        line-height: ${theme.sanity.fonts.heading.sizes[4].lineHeight}px;
+        overflow-wrap: break-word;
+      }
+
+      @container (max-width: 560px) {
+        [data-heading] {
+          font-size: ${theme.sanity.fonts.heading.sizes[3].fontSize}px;
+          line-height: ${theme.sanity.fonts.heading.sizes[3].lineHeight}px;
+        }
+      }
+
+      @container (max-width: 420px) {
+        [data-heading] {
+          font-size: ${theme.sanity.fonts.heading.sizes[2].fontSize}px;
+          line-height: ${theme.sanity.fonts.heading.sizes[2].lineHeight}px;
+        }
+      }
+    `
+  }}
+`
+
+/**
+ * Header containing current document title and type.
+ * Document type is hidden if the document `_id` matches the current document `_type`.
+ * The entire header is hidden if container queries are not supported.
+ */
+export const FormHeader = ({documentId, schemaType, title}: DocumentHeaderProps) => {
+  const isSingleton = documentId === schemaType.name
+
+  return (
+    <TitleContainer marginBottom={6} space={4}>
+      {!isSingleton && (
+        <Text muted size={1}>
+          {schemaType.title ?? schemaType.name}
+        </Text>
+      )}
+
+      <Heading as="h2" data-heading muted={!title}>
+        {title ?? 'Untitled'}
+      </Heading>
+    </TitleContainer>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
index fe32026522f..093274d4a19 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/FormView.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable no-nested-ternary */
-
 import {Box, Container, Flex, Spinner, Text, focusFirstDescendant} from '@sanity/ui'
-import React, {forwardRef, useEffect, useMemo, useRef, type Ref, useCallback, useState} from 'react'
+import React, {forwardRef, useEffect, useMemo, useCallback, useState} from 'react'
 import {tap} from 'rxjs/operators'
+import {structureLocaleNamespace} from '../../../../i18n'
+import {useDocumentTitle} from '../../useDocumentTitle'
 import {useDocumentPane} from '../../useDocumentPane'
-import {Delay} from '../../../../components/Delay'
+import {Delay} from '../../../../components'
 import {useConditionalToast} from './useConditionalToast'
-import {structureLocaleNamespace} from '../../../../i18n'
+import {FormHeader} from './FormHeader'
 import {
   FormDocumentValue,
   DocumentMutationEvent,
@@ -19,6 +20,7 @@ import {
   useDocumentPresence,
   useDocumentStore,
   useTranslation,
+  LoadingBlock,
 } from 'sanity'
 
 interface FormViewProps {
@@ -52,6 +54,7 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
   } = useDocumentPane()
   const documentStore = useDocumentStore()
   const presence = useDocumentPresence(documentId)
+  const {title} = useDocumentTitle()
 
   // The `patchChannel` is an INTERNAL publish/subscribe channel that we use to notify form-builder
   // nodes about both remote and local patches.
@@ -142,6 +145,11 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
   //     ),
   //   [documentId]
   // )
+
+  if (!ready) {
+    return <LoadingBlock showText />
+  }
+
   return (
     <Container
       hidden={hidden}
@@ -159,37 +167,45 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
                 <Text>{t('document-view.form-view.form-hidden')}</Text>
               </Box>
             ) : (
-              <FormBuilder
-                __internal_fieldActions={fieldActions}
-                __internal_patchChannel={patchChannel}
-                collapsedFieldSets={collapsedFieldSets}
-                collapsedPaths={collapsedPaths}
-                focusPath={formState.focusPath}
-                changed={formState.changed}
-                focused={formState.focused}
-                groups={formState.groups}
-                id="root"
-                members={formState.members}
-                onChange={onChange}
-                onFieldGroupSelect={onSetActiveFieldGroup}
-                onPathBlur={onBlur}
-                onPathFocus={onFocus}
-                onPathOpen={onPathOpen}
-                onSetFieldSetCollapsed={onSetCollapsedFieldSet}
-                onSetPathCollapsed={onSetCollapsedPath}
-                presence={presence}
-                readOnly={formState.readOnly}
-                schemaType={formState.schemaType}
-                validation={validation}
-                value={
-                  // note: the form state doesn't have a typed concept of a "document" value
-                  // but these should be compatible
-                  formState.value as FormDocumentValue
-                }
-              />
+              <>
+                <FormHeader
+                  documentId={documentId}
+                  schemaType={formState.schemaType}
+                  title={title}
+                />
+                <FormBuilder
+                  __internal_fieldActions={fieldActions}
+                  __internal_patchChannel={patchChannel}
+                  collapsedFieldSets={collapsedFieldSets}
+                  collapsedPaths={collapsedPaths}
+                  focusPath={formState.focusPath}
+                  changed={formState.changed}
+                  focused={formState.focused}
+                  groups={formState.groups}
+                  id="root"
+                  members={formState.members}
+                  onChange={onChange}
+                  onFieldGroupSelect={onSetActiveFieldGroup}
+                  onPathBlur={onBlur}
+                  onPathFocus={onFocus}
+                  onPathOpen={onPathOpen}
+                  onSetFieldSetCollapsed={onSetCollapsedFieldSet}
+                  onSetPathCollapsed={onSetCollapsedPath}
+                  presence={presence}
+                  readOnly={formState.readOnly}
+                  schemaType={formState.schemaType}
+                  validation={validation}
+                  value={
+                    // note: the form state doesn't have a typed concept of a "document" value
+                    // but these should be compatible
+                    formState.value as FormDocumentValue
+                  }
+                />
+              </>
             )
           ) : (
             <Delay ms={300}>
+              {/* TODO: replace with loading block */}
               <Flex align="center" direction="column" height="fill" justify="center">
                 <Spinner muted />
                 <Box marginTop={3}>
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/documentViews/styles.ts b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/styles.ts
new file mode 100644
index 00000000000..6020d4c1f16
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/documentPanel/documentViews/styles.ts
@@ -0,0 +1,6 @@
+import {Box} from '@sanity/ui'
+import styled from 'styled-components'
+
+export const Root = styled(Box)`
+  position: relative;
+`
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
index 4d8ecdd0598..0bc86113334 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback} from 'react'
-import {Tab, TabList} from '@sanity/ui'
+import {TabList} from '@sanity/ui'
 import {useDocumentPane} from '../../useDocumentPane'
 import {usePaneRouter} from '../../../../components'
+import {Tab} from '../../../../../ui-components'
 
 export function DocumentHeaderTabs() {
   const {activeViewId, paneKey, views} = useDocumentPane()
@@ -15,7 +16,7 @@ export function DocumentHeaderTabs() {
           id={`${paneKey}tab-${view.id}`}
           isActive={activeViewId === view.id}
           key={view.id}
-          label={<>{view.title}</>}
+          label={view.title}
           tabPanelId={tabPanelId}
           viewId={index === 0 ? null : view.id ?? null}
         />
@@ -28,11 +29,11 @@ function DocumentHeaderTab(props: {
   icon?: React.ComponentType | React.ReactNode
   id: string
   isActive: boolean
-  label: React.ReactNode
+  label: string
   tabPanelId: string
   viewId: string | null
 }) {
-  const {isActive, tabPanelId, viewId, ...rest} = props
+  const {icon, id, isActive, label, tabPanelId, viewId, ...rest} = props
   const {ready} = useDocumentPane()
   const {setView} = usePaneRouter()
   const handleClick = useCallback(() => setView(viewId), [setView, viewId])
@@ -42,9 +43,11 @@ function DocumentHeaderTab(props: {
       {...rest} // required to enable <TabList> keyboard navigation
       aria-controls={tabPanelId}
       disabled={!ready}
-      fontSize={1}
-      selected={isActive}
+      icon={icon}
+      id={id}
+      label={label}
       onClick={handleClick}
+      selected={isActive}
     />
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
index f3f959a3ae9..215b1104dd6 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -1,5 +1,5 @@
 import {ArrowLeftIcon, CloseIcon, SplitVerticalIcon} from '@sanity/icons'
-import {Button, Flex, Text, Tooltip} from '@sanity/ui'
+import {Flex, TooltipDelayGroupProvider} from '@sanity/ui'
 import React, {createElement, memo, forwardRef, useMemo} from 'react'
 import {
   PaneContextMenuButton,
@@ -12,8 +12,9 @@ import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {isMenuNodeButton, isNotMenuNodeButton, resolveMenuNodes} from '../../../../menuNodes'
 import {useDeskTool} from '../../../../useDeskTool'
-import {structureLocaleNamespace} from '../../../../i18n'
 import {PaneMenuItem} from '../../../../types'
+import {Button, TOOLTIP_DELAY_PROPS} from '../../../../../ui-components'
+import {structureLocaleNamespace} from '../../../../i18n'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
 import {useFieldActions, useTimelineSelector, useTranslation} from 'sanity'
@@ -83,82 +84,81 @@ export const DocumentPanelHeader = memo(
     const {t} = useTranslation(structureLocaleNamespace)
 
     return (
-      <PaneHeader
-        ref={ref}
-        loading={!ready}
-        title={<DocumentHeaderTitle />}
-        tabs={showTabs && <DocumentHeaderTabs />}
-        tabIndex={tabIndex}
-        backButton={
-          features.backButton &&
-          index > 0 && (
-            <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" padding={2} />
-          )
-        }
-        subActions={<TimelineMenu chunk={rev} mode="rev" placement="bottom-end" />}
-        actions={
-          <Flex align="center" gap={1}>
-            {unstable_languageFilter.length > 0 && (
-              <>
-                {unstable_languageFilter.map((languageFilterComponent, idx) => {
-                  return createElement(languageFilterComponent, {
-                    // eslint-disable-next-line react/no-array-index-key
-                    key: `language-filter-${idx}`,
-                    schemaType,
-                  })
-                })}
-              </>
-            )}
-
-            {menuButtonNodes.map((item) => (
-              <PaneHeaderActionButton key={item.key} node={item} />
-            ))}
-
-            <PaneContextMenuButton nodes={contextMenuNodes} key="context-menu" />
-
-            {showSplitPaneButton && (
-              <Tooltip
-                content={
-                  <Text size={1} style={{whiteSpace: 'nowrap'}}>
-                    {t('buttons.split-pane-button.tooltip')}
-                  </Text>
-                }
-                padding={2}
-                placement="bottom"
-                portal
-              >
+      <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+        <PaneHeader
+          border
+          ref={ref}
+          loading={!ready}
+          title={<DocumentHeaderTitle />}
+          tabs={showTabs && <DocumentHeaderTabs />}
+          tabIndex={tabIndex}
+          backButton={
+            features.backButton &&
+            index > 0 && (
+              <Button
+                as={BackLink}
+                data-as="a"
+                icon={ArrowLeftIcon}
+                mode="bleed"
+                tooltipProps={{content: t('pane-header.back-button.text')}}
+              />
+            )
+          }
+          subActions={<TimelineMenu chunk={rev} mode="rev" placement="bottom-end" />}
+          actions={
+            <Flex align="center" gap={1}>
+              {unstable_languageFilter.length > 0 && (
+                <>
+                  {unstable_languageFilter.map((languageFilterComponent, idx) => {
+                    return createElement(languageFilterComponent, {
+                      // eslint-disable-next-line react/no-array-index-key
+                      key: `language-filter-${idx}`,
+                      schemaType,
+                    })
+                  })}
+                </>
+              )}
+
+              {menuButtonNodes.map((item) => (
+                <PaneHeaderActionButton key={item.key} node={item} />
+              ))}
+
+              <PaneContextMenuButton nodes={contextMenuNodes} key="context-menu" />
+
+              {showSplitPaneButton && (
                 <Button
                   aria-label={t('buttons.split-pane-button.aria-label')}
                   icon={SplitVerticalIcon}
                   key="split-pane-button"
                   mode="bleed"
                   onClick={onPaneSplit}
+                  tooltipProps={{content: t('buttons.split-pane-button.tooltip')}}
                 />
-              </Tooltip>
-            )}
+              )}
 
-            {showSplitPaneCloseButton && (
-              <Button
-                icon={CloseIcon}
-                key="close-view-button"
-                mode="bleed"
-                onClick={onPaneClose}
-                title={t('buttons.split-pane-close-button.title')}
-              />
-            )}
+              {showSplitPaneCloseButton && (
+                <Button
+                  icon={CloseIcon}
+                  key="close-view-button"
+                  mode="bleed"
+                  onClick={onPaneClose}
+                  tooltipProps={{content: t('buttons.split-pane-close-button.title')}}
+                />
+              )}
 
-            {showPaneGroupCloseButton && (
-              <Button
-                icon={CloseIcon}
-                key="close-view-button"
-                mode="bleed"
-                title={t('buttons.split-pane-close-group-button.title')}
-                as={BackLink}
-              />
-            )}
-          </Flex>
-        }
-      />
+              {showPaneGroupCloseButton && (
+                <Button
+                  icon={CloseIcon}
+                  key="close-view-button"
+                  mode="bleed"
+                  tooltipProps={{content: t('buttons.split-pane-close-group-button.title')}}
+                  as={BackLink}
+                />
+              )}
+            </Flex>
+          }
+        />
+      </TooltipDelayGroupProvider>
     )
   }),
 )
diff --git a/packages/sanity/src/desk/panes/document/index.ts b/packages/sanity/src/desk/panes/document/index.ts
index 640b88fa9f3..18799e65716 100644
--- a/packages/sanity/src/desk/panes/document/index.ts
+++ b/packages/sanity/src/desk/panes/document/index.ts
@@ -1,2 +1,3 @@
 export * from './DocumentPane'
 export * from './DocumentPaneProvider'
+export * from './useDocumentTitle'
diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.styles.tsx b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.styles.tsx
index 93e7a428f9a..db8a6a9838f 100644
--- a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.styles.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.styles.tsx
@@ -8,8 +8,8 @@ export const JSONInspectorWrapper = styled.div(({theme}: {theme: Theme}) => {
     & .json-inspector,
     & .json-inspector .json-inspector__selection {
       font-family: ${fonts.code.family};
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
+      font-size: ${fonts.code.sizes[1].fontSize}px;
+      line-height: ${fonts.code.sizes[1].lineHeight}px;
       color: var(--card-code-fg-color);
     }
 
@@ -54,8 +54,8 @@ export const JSONInspectorWrapper = styled.div(({theme}: {theme: Theme}) => {
     & .json-inspector .json-inspector__leaf_composite > .json-inspector__line::before {
       content: '▸ ';
       margin-left: calc(0 - ${rem(space[4])} + 3px);
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
+      font-size: ${fonts.code.sizes[1].fontSize}px;
+      line-height: ${fonts.code.sizes[1].lineHeight}px;
     }
 
     &
@@ -63,8 +63,8 @@ export const JSONInspectorWrapper = styled.div(({theme}: {theme: Theme}) => {
       .json-inspector__leaf_expanded.json-inspector__leaf_composite
       > .json-inspector__line::before {
       content: '▾ ';
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
+      font-size: ${fonts.code.sizes[1].fontSize}px;
+      line-height: ${fonts.code.sizes[1].lineHeight}px;
     }
 
     & .json-inspector .json-inspector__radio,
diff --git a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
index 341c6a0a84a..bf6f2f29eb0 100644
--- a/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectDialog/InspectDialog.tsx
@@ -1,7 +1,8 @@
 import {SanityDocument} from '@sanity/types'
-import {Card, Code, Dialog, Flex, Tab, TabList, TabPanel} from '@sanity/ui'
+import {Card, Code, Flex, TabList, TabPanel} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import JSONInspector from '@rexxars/react-json-inspector'
+import {Dialog, Tab} from '../../../../ui-components'
 import {DocTitle} from '../../../components'
 import {useDeskToolSetting} from '../../../useDeskToolSetting'
 import {structureLocaleNamespace} from '../../../i18n'
@@ -45,6 +46,7 @@ export function InspectDialog(props: InspectDialogProps) {
 
   return (
     <Dialog
+      bodyHeight="fill"
       id={`${dialogIdPrefix}dialog`}
       header={
         isDocumentLike(value) ? (
@@ -65,14 +67,19 @@ export function InspectDialog(props: InspectDialogProps) {
       }
       onClose={onInspectClose}
       onClickOutside={onInspectClose}
-      width={3}
+      padding={false}
+      width={2}
     >
       <Flex direction="column" height="fill">
-        <Card padding={3} shadow={1} style={{position: 'sticky', bottom: 0, zIndex: 3}}>
+        <Card
+          padding={3}
+          paddingTop={0}
+          shadow={1}
+          style={{position: 'sticky', bottom: 0, zIndex: 3}}
+        >
           <TabList space={1}>
             <Tab
               aria-controls={`${dialogIdPrefix}tabpanel`}
-              fontSize={1}
               id={`${dialogIdPrefix}tab-${VIEW_MODE_PARSED.id}`}
               label={t(VIEW_MODE_PARSED.title)}
               onClick={setParsedViewMode}
@@ -80,7 +87,6 @@ export function InspectDialog(props: InspectDialogProps) {
             />
             <Tab
               aria-controls={`${dialogIdPrefix}tabpanel`}
-              fontSize={1}
               id={`${dialogIdPrefix}tab-${VIEW_MODE_RAW.id}`}
               label={t(VIEW_MODE_RAW.title)}
               onClick={setRawViewMode}
@@ -115,6 +121,7 @@ export function InspectDialog(props: InspectDialogProps) {
               onKeyDown={maybeSelectAll}
               onDoubleClick={select}
               onFocus={select}
+              size={1}
             >
               {JSON.stringify(value, null, 2)}
             </Code>
diff --git a/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx b/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
index 0015066293e..7851257d88d 100644
--- a/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
+++ b/packages/sanity/src/desk/panes/document/inspectors/changes/ChangesInspector.tsx
@@ -5,7 +5,6 @@ import styled from 'styled-components'
 import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentInspectorHeader} from '../../documentInspector'
-import {LoadingContent} from './LoadingContent'
 import {collectLatestAuthorAnnotations} from './helpers'
 import {
   ChangeFieldWrapper,
@@ -20,6 +19,7 @@ import {
   UserAvatar,
   useTimelineSelector,
   useTranslation,
+  LoadingBlock,
 } from 'sanity'
 
 const Scroller = styled(ScrollContainer)`
@@ -130,7 +130,7 @@ function Content({
   }
 
   if (loading) {
-    return <LoadingContent />
+    return <LoadingBlock showText />
   }
 
   if (!diff) {
diff --git a/packages/sanity/src/desk/panes/document/inspectors/changes/LoadingContent.tsx b/packages/sanity/src/desk/panes/document/inspectors/changes/LoadingContent.tsx
deleted file mode 100644
index a90e0d79d5a..00000000000
--- a/packages/sanity/src/desk/panes/document/inspectors/changes/LoadingContent.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import {Box, Flex, Spinner, Text} from '@sanity/ui'
-import {Delay} from '../../../../components'
-import {useTranslation} from 'sanity'
-
-export function LoadingContent() {
-  const {t} = useTranslation('studio')
-
-  return (
-    <Delay ms={300}>
-      <Flex align="center" direction="column" height="fill" justify="center" paddingTop={3}>
-        <Spinner muted />
-        <Box marginTop={3}>
-          <Text align="center" muted size={1}>
-            {t('changes.loading-changes')}
-          </Text>
-        </Box>
-      </Flex>
-    </Delay>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/menuItems.ts b/packages/sanity/src/desk/panes/document/menuItems.ts
index cdedd7ac364..74f250afce5 100644
--- a/packages/sanity/src/desk/panes/document/menuItems.ts
+++ b/packages/sanity/src/desk/panes/document/menuItems.ts
@@ -1,4 +1,4 @@
-import {BinaryDocumentIcon, EarthAmericasIcon} from '@sanity/icons'
+import {JsonIcon, EarthAmericasIcon} from '@sanity/icons'
 import type {DeskToolFeatures, PaneMenuItem} from '../../types'
 import {INSPECT_ACTION_PREFIX} from './constants'
 import type {DocumentInspector, DocumentInspectorMenuItem, TFunction} from 'sanity'
@@ -45,7 +45,7 @@ function getInspectItem({hasValue, t}: GetMenuItemsParams): PaneMenuItem {
     action: 'inspect',
     group: 'inspectors',
     title: t('document-inspector.menu-item.title'),
-    icon: BinaryDocumentIcon,
+    icon: JsonIcon,
     isDisabled: !hasValue,
     shortcut: 'Ctrl+Alt+I',
   }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index e26f1721ada..8761aef6eda 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,28 +1,14 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  PopoverProps,
-  Text,
-  Tooltip,
-} from '@sanity/ui'
-import React, {
-  createElement,
-  isValidElement,
-  useCallback,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-import {ActionStateDialog} from './ActionStateDialog'
-import {DocumentActionDescription, Hotkeys, LegacyLayerProvider, useTranslation} from 'sanity'
+import {Menu} from '@sanity/ui'
+import React, {useCallback, useState, useMemo, useId} from 'react'
+import {MenuButton, MenuItem, PopoverProps} from '../../../../ui-components'
 import {structureLocaleNamespace} from '../../../i18n'
+import {ActionStateDialog} from './ActionStateDialog'
+import {
+  DocumentActionDescription,
+  LegacyLayerProvider,
+  useTranslation,
+  ContextMenuButton,
+} from 'sanity'
 
 export interface ActionMenuButtonProps {
   actionStates: DocumentActionDescription[]
@@ -32,7 +18,6 @@ export interface ActionMenuButtonProps {
 export function ActionMenuButton(props: ActionMenuButtonProps) {
   const {actionStates, disabled} = props
   const idPrefix = useId()
-  const buttonRef = useRef<HTMLButtonElement | null>(null)
   const [actionIndex, setActionIndex] = useState(-1)
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null)
 
@@ -57,13 +42,12 @@ export function ActionMenuButton(props: ActionMenuButtonProps) {
       <MenuButton
         id={`${idPrefix}-action-menu`}
         button={
-          <Button
-            data-testid="action-menu-button"
+          <ContextMenuButton
             aria-label={t('buttons.action-menu-button.aria-label')}
             disabled={disabled}
-            icon={ChevronDownIcon}
-            mode="ghost"
-            ref={buttonRef}
+            data-testid="action-menu-button"
+            size="large"
+            tooltipProps={{content: t('buttons.action-menu-button.tooltip')}}
           />
         }
         menu={
@@ -109,52 +93,24 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
     if (onHandle) onHandle()
   }, [index, onAction, onHandle])
 
-  const tooltipContent = actionState.title && (
-    <Box padding={2}>
-      <Text size={1}>{actionState.title}</Text>
-    </Box>
-  )
+  const hotkeys = useMemo(() => {
+    return actionState.shortcut
+      ? String(actionState.shortcut)
+          .split('+')
+          .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))
+      : undefined
+  }, [actionState.shortcut])
 
   return (
     <MenuItem
       data-testid={`action-${actionState.label.replace(' ', '')}`}
       disabled={disabled || Boolean(actionState.disabled)}
+      hotkeys={hotkeys}
+      icon={actionState.icon}
       onClick={handleClick}
-      padding={0}
+      text={actionState.label}
       tone={actionState.tone}
-    >
-      <Tooltip
-        content={tooltipContent}
-        disabled={!tooltipContent}
-        fallbackPlacements={['left', 'bottom']}
-        placement="top"
-        portal
-      >
-        <Flex align="center" paddingX={3}>
-          <Flex flex={1} paddingY={3}>
-            {actionState.icon && (
-              <Box marginRight={3}>
-                <Text>
-                  {isValidElement(actionState.icon) && actionState.icon}
-                  {isValidElementType(actionState.icon) && createElement(actionState.icon)}
-                </Text>
-              </Box>
-            )}
-
-            <Text>{actionState.label}</Text>
-          </Flex>
-
-          {actionState.shortcut && (
-            <Box marginLeft={3}>
-              <Hotkeys
-                keys={String(actionState.shortcut)
-                  .split('+')
-                  .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))}
-              />
-            </Box>
-          )}
-        </Flex>
-      </Tooltip>
-    </MenuItem>
+      {...(actionState.disabled && {tooltipProps: {content: actionState.title}})}
+    />
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
index eb8f0c0b748..83a12be98a0 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionStateDialog.tsx
@@ -1,5 +1,6 @@
-import {Box, Dialog, usePortal, PortalProvider} from '@sanity/ui'
+import {usePortal, PortalProvider, Text} from '@sanity/ui'
 import React, {useId} from 'react'
+import {Dialog} from '../../../../ui-components'
 import {DOCUMENT_PANEL_PORTAL_ELEMENT} from '../../../constants'
 import {ConfirmDialog} from './dialogs/ConfirmDialog'
 import {ModalDialog} from './dialogs/ModalDialog'
@@ -58,16 +59,14 @@ export function ActionStateDialog(props: ActionStateDialogProps) {
       onClose={unknownModal.onClose}
       // eslint-disable-next-line react/jsx-handler-names
       onClickOutside={unknownModal.onClose}
-      width={2}
+      width={1}
     >
-      <Box padding={4}>
-        {unknownModal.content || (
-          // eslint-disable-next-line i18next/no-literal-string
-          <>
-            Unexpected modal type (<code>{unknownModal.type}</code>)
-          </>
-        )}
-      </Box>
+      {unknownModal.content || (
+        // eslint-disable-next-line i18next/no-literal-string
+        <Text size={1}>
+          Unexpected modal type (<code>{unknownModal.type}</code>)
+        </Text>
+      )}
     </Dialog>
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
similarity index 77%
rename from packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
rename to packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
index afa55d9262f..0ff94c72b10 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentBadges.tsx
@@ -1,7 +1,8 @@
-import {Badge, BadgeTone, Box, Inline, Text, Tooltip} from '@sanity/ui'
+import {Badge, BadgeTone, Inline} from '@sanity/ui'
 import React from 'react'
-import {RenderBadgeCollectionState} from '../../../../components'
-import {useDocumentPane} from '../../useDocumentPane'
+import {Tooltip} from '../../../../ui-components'
+import {RenderBadgeCollectionState} from '../../../components'
+import {useDocumentPane} from '../useDocumentPane'
 import {DocumentBadgeDescription} from 'sanity'
 
 interface DocumentBadgesInnerProps {
@@ -16,17 +17,14 @@ const BADGE_TONES: Record<string, BadgeTone | undefined> = {
 }
 
 function DocumentBadgesInner({states}: DocumentBadgesInnerProps) {
+  if (states.length === 0) {
+    return null
+  }
   return (
     <Inline space={1}>
       {states.map((badge, index) => (
         <Tooltip
-          content={
-            badge.title && (
-              <Box padding={2}>
-                <Text size={1}>{badge.title}</Text>
-              </Box>
-            )
-          }
+          content={badge.title}
           disabled={!badge.title}
           key={String(index)}
           placement="top"
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
index 1c0ce351dbf..3c76bc763e2 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBar.tsx
@@ -1,39 +1,69 @@
-import React, {useMemo} from 'react'
-import styled from 'styled-components'
-import {Box, Flex} from '@sanity/ui'
+import React, {useCallback, useState} from 'react'
+import {Flex} from '@sanity/ui'
+import {SpacerButton} from '../../../components/spacerButton'
 import {useDocumentPane} from '../useDocumentPane'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
-import {DocumentSparkline} from './sparkline/DocumentSparkline'
+import {useResizeObserver} from './useResizeObserver'
+import {DocumentBadges} from './DocumentBadges'
+import {DocumentStatusLine} from './DocumentStatusLine'
 import {useTimelineSelector} from 'sanity'
 
 export interface DocumentStatusBarProps {
   actionsBoxRef?: React.Ref<HTMLDivElement>
 }
 
-const DocumentActionsBox = styled(Box)`
-  min-width: 10em;
-  max-width: 16em;
-`
+const CONTAINER_BREAKPOINT = 480 // px
 
 export function DocumentStatusBar(props: DocumentStatusBarProps) {
   const {actionsBoxRef} = props
-  const {badges, timelineStore} = useDocumentPane()
+  const {editState, timelineStore} = useDocumentPane()
 
   // Subscribe to external timeline state changes
   const showingRevision = useTimelineSelector(timelineStore, (state) => state.onOlderRevision)
 
-  return useMemo(
-    () => (
-      <Box paddingLeft={2} paddingRight={[2, 3]} paddingY={2}>
-        <Flex align="center">
-          <Box flex={[1, 2]}>{badges && <DocumentSparkline />}</Box>
+  const [collapsed, setCollapsed] = useState<boolean | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
 
-          <DocumentActionsBox flex={1} marginLeft={[1, 3]} ref={actionsBoxRef}>
+  const handleResize = useCallback((event: ResizeObserverEntry) => {
+    setCollapsed(event.contentRect.width < CONTAINER_BREAKPOINT)
+  }, [])
+
+  useResizeObserver({element: rootElement, onResize: handleResize})
+
+  const shouldRender = editState?.ready && typeof collapsed === 'boolean'
+
+  return (
+    <Flex direction="column" ref={setRootElement} sizing="border">
+      {shouldRender && (
+        <Flex align="stretch" gap={1} justify="space-between">
+          <Flex
+            align="center"
+            flex={1}
+            gap={collapsed ? 2 : 3}
+            paddingLeft={4}
+            paddingRight={3}
+            paddingY={2}
+            wrap="wrap"
+          >
+            <Flex align="center">
+              <DocumentStatusLine singleLine={!collapsed} />
+              <SpacerButton size="large" />
+            </Flex>
+            <DocumentBadges />
+          </Flex>
+
+          <Flex
+            align="flex-start"
+            justify="flex-end"
+            paddingY={2}
+            ref={actionsBoxRef}
+            style={{flexShrink: 0, marginLeft: 'auto'}}
+          >
+            <SpacerButton size="large" />
             {showingRevision ? <HistoryStatusBarActions /> : <DocumentStatusBarActions />}
-          </DocumentActionsBox>
+          </Flex>
         </Flex>
-      </Box>
-    ),
-    [actionsBoxRef, badges, showingRevision],
+      )}
+    </Flex>
   )
 }
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
index ac9afbcbe85..bdc707ef4c0 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -1,11 +1,12 @@
-import {Box, Flex, Tooltip, Stack, Button, LayerProvider, Text} from '@sanity/ui'
+import {Flex, Hotkeys, LayerProvider, Stack, Text} from '@sanity/ui'
 import React, {memo, useMemo, useState} from 'react'
 import {RenderActionCollectionState} from '../../../components'
 import {HistoryRestoreAction} from '../../../documentActions'
+import {Button, Tooltip} from '../../../../ui-components'
 import {useDocumentPane} from '../useDocumentPane'
 import {ActionMenuButton} from './ActionMenuButton'
 import {ActionStateDialog} from './ActionStateDialog'
-import {DocumentActionDescription, Hotkeys, useTimelineSelector} from 'sanity'
+import {DocumentActionDescription, useTimelineSelector} from 'sanity'
 
 interface DocumentStatusBarActionsInnerProps {
   disabled: boolean
@@ -18,31 +19,32 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
   const [firstActionState, ...menuActionStates] = states
   const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
 
+  // TODO: This could be refactored to use the tooltip from the button if the firstAction.title was updated to a string.
   const tooltipContent = useMemo(() => {
     if (!firstActionState || (!firstActionState.title && !firstActionState.shortcut)) return null
 
     return (
-      <Flex padding={2} style={{maxWidth: 300}} align="center">
-        <Text size={1}>{firstActionState.title}</Text>
+      <Flex style={{maxWidth: 300}} align="center" gap={3}>
+        {firstActionState.title && <Text size={1}>{firstActionState.title}</Text>}
         {firstActionState.shortcut && (
-          <Box marginLeft={firstActionState.title ? 2 : 0}>
-            <Hotkeys
-              keys={String(firstActionState.shortcut)
-                .split('+')
-                .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())}
-            />
-          </Box>
+          <Hotkeys
+            fontSize={1}
+            style={{marginTop: -4, marginBottom: -4}}
+            keys={String(firstActionState.shortcut)
+              .split('+')
+              .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())}
+          />
         )}
       </Flex>
     )
   }, [firstActionState])
 
   return (
-    <Flex>
+    <Flex align="center" gap={1}>
       {firstActionState && (
         <LayerProvider zOffset={200}>
-          <Tooltip disabled={!tooltipContent} content={tooltipContent} portal placement="top">
-            <Stack flex={1}>
+          <Tooltip disabled={!tooltipContent} content={tooltipContent} placement="top">
+            <Stack>
               <Button
                 data-testid={`action-${firstActionState.label}`}
                 disabled={disabled || Boolean(firstActionState.disabled)}
@@ -50,6 +52,7 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
                 // eslint-disable-next-line react/jsx-handler-names
                 onClick={firstActionState.onHandle}
                 ref={setButtonElement}
+                size="large"
                 text={firstActionState.label}
                 tone={firstActionState.tone || 'primary'}
               />
@@ -57,13 +60,9 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
           </Tooltip>
         </LayerProvider>
       )}
-
       {showMenu && menuActionStates.length > 0 && (
-        <Box marginLeft={1}>
-          <ActionMenuButton actionStates={menuActionStates} disabled={disabled} />
-        </Box>
+        <ActionMenuButton actionStates={menuActionStates} disabled={disabled} />
       )}
-
       {firstActionState && firstActionState.dialog && (
         <ActionStateDialog dialog={firstActionState.dialog} referenceElement={buttonElement} />
       )}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
new file mode 100644
index 00000000000..64f3f56db30
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusLine.tsx
@@ -0,0 +1,72 @@
+import {Flex} from '@sanity/ui'
+import React, {useEffect, useLayoutEffect, useState} from 'react'
+import {Tooltip} from '../../../../ui-components'
+import {useDocumentPane} from '../useDocumentPane'
+import {DocumentStatusPulse} from './DocumentStatusPulse'
+import {useSyncState, DocumentStatusIndicator, DocumentStatus} from 'sanity'
+
+const SYNCING_TIMEOUT = 1000
+const SAVED_TIMEOUT = 3000
+
+interface DocumentStatusLineProps {
+  singleLine?: boolean
+}
+
+export function DocumentStatusLine({singleLine}: DocumentStatusLineProps) {
+  const {documentId, documentType, editState, value} = useDocumentPane()
+
+  const [status, setStatus] = useState<'saved' | 'syncing' | null>(null)
+
+  const syncState = useSyncState(documentId, documentType)
+
+  const lastUpdated = value?._updatedAt
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    // Schedule an update to set the status to 'saved' when status changed to 'syncing.
+    // We use `syncState.isSyncing` here to avoid the status being set to 'saved' when the document is syncing.
+    if (status === 'syncing' && !syncState.isSyncing) {
+      const timerId = setTimeout(() => setStatus('saved'), SYNCING_TIMEOUT)
+      return () => clearTimeout(timerId)
+    }
+    // Schedule an update to clear the status when status changed to 'saved'
+    if (status === 'saved') {
+      const timerId = setTimeout(() => setStatus(null), SAVED_TIMEOUT)
+      return () => clearTimeout(timerId)
+    }
+  }, [status, lastUpdated, syncState.isSyncing])
+
+  // Clear the status when documentId changes to make sure we don't show the wrong status when opening a new document
+  useLayoutEffect(() => {
+    setStatus(null)
+  }, [documentId])
+
+  // Set status to 'syncing' when lastUpdated changes and we go from not syncing to syncing
+  useLayoutEffect(() => {
+    if (syncState.isSyncing) {
+      setStatus('syncing')
+    }
+  }, [syncState.isSyncing, lastUpdated])
+
+  if (status) {
+    return <DocumentStatusPulse status={status || undefined} />
+  }
+
+  return (
+    <Tooltip
+      content={
+        <DocumentStatus absoluteDate draft={editState?.draft} published={editState?.published} />
+      }
+      placement="top"
+    >
+      <Flex align="center" gap={3}>
+        <DocumentStatusIndicator draft={editState?.draft} published={editState?.published} />
+        <DocumentStatus
+          draft={editState?.draft}
+          published={editState?.published}
+          singleLine={singleLine}
+        />
+      </Flex>
+    </Tooltip>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/AnimatedStatusIcon.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/AnimatedStatusIcon.tsx
similarity index 86%
rename from packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/AnimatedStatusIcon.tsx
rename to packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/AnimatedStatusIcon.tsx
index c92b4e3ed96..cd4d575292c 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/AnimatedStatusIcon.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/AnimatedStatusIcon.tsx
@@ -22,9 +22,6 @@ const Arrows = (props: MotionPathProps) => (
 const Checkmark = (props: MotionPathProps) => (
   <motion.path d="M9.5 12.1316L11.7414 14.5L16 10" {...props} />
 )
-const Edit = (props: MotionPathProps) => (
-  <motion.path d="M15 7L18 10M6 19L7 15L17 5L20 8L10 18L6 19Z" {...props} />
-)
 
 const rotateAnimation = keyframes`
   0% {
@@ -124,24 +121,6 @@ const checkmark = {
   },
 }
 
-const edit = {
-  syncing: {
-    pathLength: 0,
-    transition: {duration: 0},
-  },
-  saved: {
-    pathLength: 0,
-    transition: {duration: 0},
-  },
-  changes: {
-    pathLength: 1,
-    transition: {
-      duration: 0.4,
-      delay: 0.5,
-    },
-  },
-}
-
 interface AnimatedStatusIconProps {
   status?: 'changes' | 'saved' | 'syncing'
 }
@@ -161,7 +140,7 @@ export function AnimatedStatusIcon(props: AnimatedStatusIconProps) {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.2"
-      data-sanity-icon=""
+      data-sanity-icon="animated-status-icon"
     >
       <motion.g variants={root} initial={status} animate={status}>
         <RotateGroup data-rotate={status === 'changes' ? undefined : ''}>
@@ -169,7 +148,6 @@ export function AnimatedStatusIcon(props: AnimatedStatusIconProps) {
           <Circle variants={circle} initial={status} animate={status} />
         </RotateGroup>
         <Checkmark variants={checkmark} initial={status} animate={status} />
-        <Edit variants={edit} initial={status} animate={status} />
       </motion.g>
     </svg>
   )
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/DocumentStatusPulse.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/DocumentStatusPulse.tsx
new file mode 100644
index 00000000000..c8b6e7c8a4c
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/DocumentStatusPulse.tsx
@@ -0,0 +1,42 @@
+import {ButtonTone, Flex, Text} from '@sanity/ui'
+import React from 'react'
+import {AnimatedStatusIcon} from './AnimatedStatusIcon'
+import {TextWithTone} from 'sanity'
+
+type StatusType = 'saved' | 'syncing'
+interface ReviewChangesButtonProps {
+  status?: StatusType
+}
+
+const STATUS_DICTIONARY: Record<StatusType, {text: string; tone: ButtonTone}> = {
+  saved: {
+    text: 'Saved',
+    tone: 'positive',
+  },
+  syncing: {
+    text: 'Saving...',
+    tone: 'default',
+  },
+}
+
+export const DocumentStatusPulse = (props: ReviewChangesButtonProps) => {
+  const {status} = props
+
+  if (status !== 'saved' && status !== 'syncing') {
+    return null
+  }
+
+  const currentStatus = STATUS_DICTIONARY[status]
+
+  return (
+    <Flex align="center" gap={2}>
+      <TextWithTone size={1} tone={currentStatus.tone}>
+        <AnimatedStatusIcon status={status} />
+      </TextWithTone>
+
+      <Text muted size={1}>
+        {currentStatus.text}
+      </Text>
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/index.ts b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/index.ts
new file mode 100644
index 00000000000..c68bf80b01e
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusPulse/index.ts
@@ -0,0 +1 @@
+export * from './DocumentStatusPulse'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentBadgesStory.tsx b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentBadgesStory.tsx
index 8d5b8d690b1..6611ed8b9aa 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentBadgesStory.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentBadgesStory.tsx
@@ -3,7 +3,7 @@ import React, {useMemo} from 'react'
 import {DeskToolProvider} from '../../../../DeskToolProvider'
 import {DocumentPaneNode} from '../../../../types'
 import {DocumentPaneProvider} from '../../DocumentPaneProvider'
-import {DocumentBadges} from '../sparkline/DocumentBadges'
+import {DocumentBadges} from '../DocumentBadges'
 
 export default function DocumentBadgesStory() {
   const pane: DocumentPaneNode = useMemo(
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
new file mode 100644
index 00000000000..c7cdd884d42
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/DocumentStatusPulseStory.tsx
@@ -0,0 +1,22 @@
+import {Card, Flex} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import React from 'react'
+
+import {DocumentStatusPulse} from '../DocumentStatusPulse'
+
+const STATUS_OPTIONS: Record<string, 'saved' | 'syncing'> = {
+  saved: 'saved',
+  syncing: 'syncing',
+}
+
+export default function DocumentStatusPulseStory() {
+  const status = useSelect('Status', STATUS_OPTIONS) || 'saved'
+
+  return (
+    <Card height="fill">
+      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+        <DocumentStatusPulse status={status} />
+      </Flex>
+    </Card>
+  )
+}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/ReviewChangesButtonStory.tsx b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/ReviewChangesButtonStory.tsx
deleted file mode 100644
index f8f7a4d8272..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/ReviewChangesButtonStory.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Card, Flex} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-
-import {ReviewChangesButton} from '../sparkline/ReviewChangesButton'
-
-const STATUS_OPTIONS: Record<string, 'changes' | 'saved' | 'syncing'> = {
-  changes: 'changes',
-  saved: 'saved',
-  syncing: 'syncing',
-}
-
-export default function ReviewChangesButtonStory() {
-  const collapsed = useBoolean('Collapsed', false)
-  const status = useSelect('Status', STATUS_OPTIONS) || 'changes'
-
-  return (
-    <Card height="fill">
-      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-        <ReviewChangesButton status={status} lastUpdated="just now" collapsed={collapsed} />
-      </Flex>
-    </Card>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/index.ts b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/index.ts
index c1133056388..d033a4e21ee 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/__workshop__/index.ts
+++ b/packages/sanity/src/desk/panes/document/statusBar/__workshop__/index.ts
@@ -16,9 +16,9 @@ export default defineScope({
       component: lazy(() => import('./DocumentBadgesStory')),
     },
     {
-      name: 'review-changes-button',
-      title: 'ReviewChangesButton',
-      component: lazy(() => import('./ReviewChangesButtonStory')),
+      name: 'document-status-pulse',
+      title: 'DocumentStatusPulse',
+      component: lazy(() => import('./DocumentStatusPulseStory')),
     },
   ],
 })
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
index 9c8de145539..3d88f338e61 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ConfirmDialog.tsx
@@ -1,16 +1,7 @@
-import {
-  Box,
-  Button,
-  Flex,
-  Grid,
-  Popover,
-  Text,
-  useClickOutside,
-  useGlobalKeyDown,
-  useLayer,
-} from '@sanity/ui'
+import {Box, Flex, Grid, Text, useClickOutside, useGlobalKeyDown, useLayer} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import {structureLocaleNamespace} from '../../../../i18n'
+import {Button, Popover} from '../../../../../ui-components'
 import {POPOVER_FALLBACK_PLACEMENTS} from './constants'
 import {DocumentActionConfirmDialogProps, useTranslation} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
index 4c2c46ecaa5..1b332d9fa03 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/ModalDialog.tsx
@@ -1,5 +1,5 @@
-import {Box, Dialog} from '@sanity/ui'
 import React, {useId} from 'react'
+import {Dialog} from '../../../../../ui-components'
 import {DIALOG_WIDTH_TO_UI_WIDTH} from './constants'
 import {DocumentActionModalDialogProps, LegacyLayerProvider} from 'sanity'
 
@@ -7,17 +7,11 @@ export function ModalDialog(props: {dialog: DocumentActionModalDialogProps}) {
   const {dialog} = props
   const dialogId = useId()
 
-  const footer = dialog.footer && (
-    <Box paddingX={4} paddingY={3}>
-      {dialog.footer}
-    </Box>
-  )
-
   return (
     <LegacyLayerProvider zOffset="fullscreen">
       <Dialog
         __unstable_hideCloseButton={dialog.showCloseButton === false}
-        footer={footer}
+        footer={dialog.footer}
         header={dialog.header}
         id={dialogId}
         // eslint-disable-next-line react/jsx-handler-names
@@ -26,7 +20,7 @@ export function ModalDialog(props: {dialog: DocumentActionModalDialogProps}) {
         onClickOutside={dialog.onClose}
         width={dialog.width === undefined ? 1 : DIALOG_WIDTH_TO_UI_WIDTH[dialog.width]}
       >
-        <Box padding={4}>{dialog.content}</Box>
+        {dialog.content}
       </Dialog>
     </LegacyLayerProvider>
   )
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx b/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
index bae3a9faf4a..c1561eb1f82 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/PopoverDialog.tsx
@@ -1,5 +1,6 @@
-import {Popover, useClickOutside, useGlobalKeyDown, useLayer} from '@sanity/ui'
+import {useClickOutside, useGlobalKeyDown, useLayer} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
+import {Popover} from '../../../../../ui-components'
 import {POPOVER_FALLBACK_PLACEMENTS} from './constants'
 import {DocumentActionPopoverDialogProps} from 'sanity'
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts b/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
index 712800d0a7d..a7cb387e433 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
+++ b/packages/sanity/src/desk/panes/document/statusBar/dialogs/constants.ts
@@ -1,4 +1,5 @@
-import {DialogProps, Placement} from '@sanity/ui'
+import {Placement} from '@sanity/ui'
+import {DialogProps} from '../../../../../ui-components'
 
 export const POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['left', 'bottom']
 
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
deleted file mode 100644
index d1aed702d99..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentSparkline.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import {Box, Flex, useElementRect} from '@sanity/ui'
-import React, {useEffect, useMemo, useState, memo, useLayoutEffect} from 'react'
-import {useDocumentPane} from '../../useDocumentPane'
-import {DocumentBadges} from './DocumentBadges'
-import {PublishStatus} from './PublishStatus'
-import {ReviewChangesButton} from './ReviewChangesButton'
-import {useSyncState, useTimelineSelector} from 'sanity'
-
-const SYNCING_TIMEOUT = 1000
-const SAVED_TIMEOUT = 3000
-
-export const DocumentSparkline = memo(function DocumentSparkline() {
-  const {
-    changesOpen,
-    documentId,
-    documentType,
-    editState,
-    onHistoryClose,
-    onHistoryOpen,
-    timelineStore,
-    value,
-  } = useDocumentPane()
-  const syncState = useSyncState(documentId, documentType)
-
-  const lastUpdated = value?._updatedAt
-  const lastPublished = editState?.published?._updatedAt
-  const liveEdit = Boolean(editState?.liveEdit)
-  const published = Boolean(editState?.published)
-  const changed = Boolean(editState?.draft)
-
-  const [rootFlexElement, setRootFlexElement] = useState<HTMLDivElement | null>(null)
-  const rootFlexRect = useElementRect(rootFlexElement)
-  const collapsed = !rootFlexRect || rootFlexRect?.width < 300
-
-  const [status, setStatus] = useState<'saved' | 'syncing' | null>(null)
-
-  // Subscribe to TimelineController changes and store internal state.
-  const showingRevision = useTimelineSelector(timelineStore, (state) => state.onOlderRevision)
-
-  // eslint-disable-next-line consistent-return
-  useEffect(() => {
-    // Schedule an update to set the status to 'saved' when status changed to 'syncing.
-    // We use `syncState.isSyncing` here to avoid the status being set to 'saved' when the document is syncing.
-    if (status === 'syncing' && !syncState.isSyncing) {
-      const timerId = setTimeout(() => setStatus('saved'), SYNCING_TIMEOUT)
-      return () => clearTimeout(timerId)
-    }
-    // Schedule an update to clear the status when status changed to 'saved'
-    if (status === 'saved') {
-      const timerId = setTimeout(() => setStatus(null), SAVED_TIMEOUT)
-      return () => clearTimeout(timerId)
-    }
-  }, [status, lastUpdated, syncState.isSyncing])
-
-  // Clear the status when documentId changes to make sure we don't show the wrong status when opening a new document
-  useLayoutEffect(() => {
-    setStatus(null)
-  }, [documentId])
-
-  // Set status to 'syncing' when lastUpdated changes and we go from not syncing to syncing
-  useLayoutEffect(() => {
-    if (syncState.isSyncing) {
-      setStatus('syncing')
-    }
-  }, [syncState.isSyncing, lastUpdated])
-
-  const reviewButton = useMemo(
-    () => (
-      <ReviewChangesButton
-        lastUpdated={lastUpdated}
-        status={status || (changed ? 'changes' : undefined)}
-        onClick={changesOpen ? onHistoryClose : onHistoryOpen}
-        disabled={showingRevision}
-        selected={changesOpen}
-        collapsed={collapsed}
-      />
-    ),
-    [
-      changed,
-      changesOpen,
-      onHistoryClose,
-      onHistoryOpen,
-      lastUpdated,
-      showingRevision,
-      status,
-      collapsed,
-    ],
-  )
-
-  const publishStatus = useMemo(
-    () =>
-      (liveEdit || published) && (
-        <Box marginRight={1}>
-          <PublishStatus
-            disabled={showingRevision}
-            lastPublished={lastPublished}
-            lastUpdated={lastUpdated}
-            liveEdit={liveEdit}
-            collapsed={collapsed}
-          />
-        </Box>
-      ),
-    [collapsed, lastPublished, lastUpdated, liveEdit, published, showingRevision],
-  )
-
-  return (
-    <Flex align="center" data-ui="DocumentSparkline" ref={setRootFlexElement}>
-      {publishStatus}
-
-      <Flex align="center" flex={1}>
-        {reviewButton}
-        {!collapsed && (
-          <Box marginLeft={3}>
-            <DocumentBadges />
-          </Box>
-        )}
-      </Flex>
-    </Flex>
-  )
-})
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/IconBadge.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/IconBadge.tsx
deleted file mode 100644
index 7f16545a079..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/IconBadge.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import {IconComponent} from '@sanity/icons'
-import styled, {css} from 'styled-components'
-import React, {createElement, memo} from 'react'
-import {Text, Theme} from '@sanity/ui'
-
-export type IconBadgeTone = 'positive' | 'caution' | 'critical'
-
-interface IconBadgeRootStyleProps {
-  $disabled: boolean
-  $muted: boolean
-  $tone: IconBadgeTone
-}
-
-const Root = styled.div<IconBadgeRootStyleProps>(
-  ({$disabled, $muted, $tone, theme}: IconBadgeRootStyleProps & {theme: Theme}) => {
-    const {color} = theme.sanity
-    const tone = $muted ? color.muted[$tone] : color.solid[$tone]
-    const state = $disabled ? tone.disabled : tone.enabled
-
-    return css`
-      --icon-badge-size: 27px;
-      --card-bg-color: ${state.bg};
-      --card-fg-color: ${state.fg};
-      --card-border-color: ${state.border};
-
-      width: var(--icon-badge-size);
-      height: var(--icon-badge-size);
-      border-radius: calc(var(--icon-badge-size) / 2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--card-bg-color);
-      color: var(--card-fg-color);
-      box-shadow: inset 0 0 0 1px var(--card-border-color);
-      margin: -3px;
-
-      & > span {
-        color: inherit;
-      }
-    `
-  },
-)
-
-export const IconBadge = memo(function IconBadge(props: {
-  disabled?: boolean
-  icon: IconComponent
-  muted?: boolean
-  tone: IconBadgeTone
-}) {
-  const {disabled = false, icon, muted = false, tone} = props
-
-  return (
-    <Root $disabled={disabled} $muted={muted} $tone={tone} aria-hidden>
-      <Text as="span">{createElement(icon)}</Text>
-    </Root>
-  )
-})
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
deleted file mode 100644
index f0ee38f38ea..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {Box, Button, Flex, Stack, Text, Tooltip} from '@sanity/ui'
-import {PlayIcon, PublishIcon} from '@sanity/icons'
-import React from 'react'
-import styled from 'styled-components'
-import {structureLocaleNamespace} from '../../../../i18n'
-import {Translate, useRelativeTime, useTranslation} from 'sanity'
-
-interface PublishStatusProps {
-  collapsed?: boolean
-  disabled: boolean
-  lastPublished?: string
-  lastUpdated?: string
-  liveEdit: boolean
-}
-
-const Root = styled(Flex)`
-  cursor: default;
-`
-
-export function PublishStatus(props: PublishStatusProps) {
-  const {collapsed, disabled, lastPublished, lastUpdated, liveEdit} = props
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  // Label with abbreviations and suffix
-  const lastPublishedTimeAgo = useRelativeTime(lastPublished || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-  // Label with abbreviation and no suffix
-  const lastPublishedTime = useRelativeTime(lastPublished || '', {minimal: true})
-
-  // Label with abbreviations and suffix
-  const lastUpdatedTimeAgo = useRelativeTime(lastUpdated || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-  // Label with abbreviation and no suffix
-  const lastUpdatedTime = useRelativeTime(lastUpdated || '', {minimal: true})
-
-  // Accessible labels without abbreviations or suffixes
-  const a11yUpdatedAgo = useRelativeTime(lastUpdated || '', {
-    minimal: false,
-    useTemporalPhrase: true,
-  })
-  const a11yPublishedAgo = useRelativeTime(lastPublished || '', {
-    minimal: false,
-    useTemporalPhrase: true,
-  })
-  const a11yLabel = liveEdit
-    ? t('status-bar.publish-status-button.last-updated-time.aria-label', {
-        relativeTime: a11yUpdatedAgo,
-      })
-    : t('status-bar.publish-status-button.last-published-time.aria-label', {
-        relativeTime: a11yPublishedAgo,
-      })
-
-  return (
-    <Root align="center" data-ui="PublishStatus" sizing="border">
-      <Tooltip
-        placement="top"
-        portal
-        content={
-          <Stack padding={3} space={3}>
-            <Text size={1}>
-              {liveEdit ? (
-                <Translate
-                  t={t}
-                  i18nKey="status-bar.publish-status-button.last-updated-time.tooltip"
-                  components={{
-                    RelativeTime: () => (
-                      <time
-                        dateTime={lastUpdated}
-                        aria-label={lastUpdated ? a11yUpdatedAgo : a11yPublishedAgo}
-                      >
-                        {lastUpdated ? lastUpdatedTimeAgo : lastPublishedTimeAgo}
-                      </time>
-                    ),
-                  }}
-                />
-              ) : (
-                <Translate
-                  t={t}
-                  i18nKey="status-bar.publish-status-button.last-published-time.tooltip"
-                  components={{
-                    RelativeTime: () => (
-                      <time dateTime={lastPublished} aria-label={a11yPublishedAgo}>
-                        {lastPublishedTimeAgo}
-                      </time>
-                    ),
-                  }}
-                />
-              )}
-            </Text>
-          </Stack>
-        }
-      >
-        <Button
-          mode="bleed"
-          tone={liveEdit ? 'critical' : 'positive'}
-          tabIndex={-1}
-          disabled={disabled}
-          aria-label={a11yLabel}
-        >
-          <Flex align="center">
-            <Box marginRight={collapsed ? 0 : 3}>
-              <Text size={2} aria-hidden="true">
-                {liveEdit ? <PlayIcon /> : <PublishIcon />}
-              </Text>
-            </Box>
-            {!collapsed && (
-              <Text size={1} weight="medium">
-                {liveEdit ? (
-                  <time dateTime={lastUpdated || lastPublished} aria-label={a11yLabel}>
-                    {lastUpdated ? lastUpdatedTime : lastPublishedTime}
-                  </time>
-                ) : (
-                  <time dateTime={lastPublished} aria-label={a11yLabel}>
-                    {lastPublishedTime}
-                  </time>
-                )}
-              </Text>
-            )}
-          </Flex>
-        </Button>
-      </Tooltip>
-    </Root>
-  )
-}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
deleted file mode 100644
index 002b4f7a681..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, {useMemo} from 'react'
-import {Box, Button, ButtonProps, Flex, Stack, Text, Tooltip} from '@sanity/ui'
-import {structureLocaleNamespace} from '../../../../../i18n'
-import {AnimatedStatusIcon} from './AnimatedStatusIcon'
-import {useRelativeTime, useTranslation} from 'sanity'
-
-interface ReviewChangesButtonProps extends React.HTMLProps<HTMLButtonElement> {
-  status?: 'changes' | 'saved' | 'syncing'
-  lastUpdated?: string
-  collapsed?: boolean
-}
-
-const ReviewButton = React.forwardRef(function ReviewButton(
-  props: ReviewChangesButtonProps & ButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  const {collapsed, status, lastUpdated, ...rest} = props
-  const lastUpdatedTime = useRelativeTime(lastUpdated || '', {minimal: true})
-  const lastUpdatedTimeAgo = useRelativeTime(lastUpdated || '', {
-    minimal: true,
-    useTemporalPhrase: true,
-  })
-  const a11yUpdatedAgo = useRelativeTime(lastUpdated || '', {
-    minimal: false,
-    useTemporalPhrase: true,
-  })
-
-  const {t} = useTranslation(structureLocaleNamespace)
-
-  const buttonProps: ButtonProps = useMemo(() => {
-    if (status === 'syncing') {
-      return {
-        text: t('status-bar.review-changes-button.status.syncing.text'),
-        tone: undefined,
-      }
-    }
-    if (status === 'changes') {
-      return {
-        text: lastUpdatedTime,
-        tone: 'caution',
-      }
-    }
-    if (status === 'saved') {
-      return {
-        text: t('status-bar.review-changes-button.status.saved.text'),
-        tone: 'positive',
-      }
-    }
-
-    return {}
-  }, [status, lastUpdatedTime, t])
-
-  if (!status) {
-    return null
-  }
-
-  return (
-    <Tooltip
-      placement="top"
-      portal
-      disabled={status !== 'changes'}
-      content={
-        <Stack padding={3} space={3}>
-          <Text size={1} weight="semibold">
-            {t('status-bar.review-changes-button.tooltip.text')}
-          </Text>
-          <Text size={1} muted>
-            {t('status-bar.review-changes-button.tooltip.changes-saved')}{' '}
-            <abbr aria-label={a11yUpdatedAgo}>{lastUpdatedTimeAgo}</abbr>
-          </Text>
-        </Stack>
-      }
-    >
-      <Button
-        mode="bleed"
-        justify="flex-start"
-        tone={buttonProps?.tone}
-        {...rest}
-        data-testid="review-changes-button"
-        ref={ref}
-        aria-label={t('status-bar.review-changes-button.aria-label')}
-      >
-        <Flex align="center">
-          <Box marginRight={collapsed ? 0 : 3} aria-hidden="true">
-            <Text>
-              <AnimatedStatusIcon status={status} />
-            </Text>
-          </Box>
-          {!collapsed && (
-            <Text size={1} weight="medium">
-              {buttonProps?.text}
-            </Text>
-          )}
-        </Flex>
-      </Button>
-    </Tooltip>
-  )
-})
-
-export const ReviewChangesButton = React.memo(ReviewButton)
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/index.ts b/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/index.ts
deleted file mode 100644
index 9beeee9b18a..00000000000
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ReviewChangesButton'
diff --git a/packages/sanity/src/desk/panes/document/statusBar/useResizeObserver.ts b/packages/sanity/src/desk/panes/document/statusBar/useResizeObserver.ts
new file mode 100644
index 00000000000..118c4a57de1
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/statusBar/useResizeObserver.ts
@@ -0,0 +1,22 @@
+import {useLayoutEffect} from 'react'
+import {resizeObserver} from 'sanity'
+
+export function useResizeObserver({
+  element,
+  onResize,
+}: {
+  element?: HTMLDivElement | null
+  onResize: (event: ResizeObserverEntry) => void
+}): void {
+  useLayoutEffect(() => {
+    if (element) {
+      resizeObserver.observe(element, onResize)
+    }
+
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element)
+      }
+    }
+  }, [element, onResize])
+}
diff --git a/packages/sanity/src/desk/panes/document/timeline/TimelineError.tsx b/packages/sanity/src/desk/panes/document/timeline/TimelineError.tsx
index 3c931d07ae4..bdba80fe448 100644
--- a/packages/sanity/src/desk/panes/document/timeline/TimelineError.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/TimelineError.tsx
@@ -12,7 +12,7 @@ export function TimelineError() {
         <ErrorOutlineIcon />
       </TextWithTone>
       <Stack space={4}>
-        <TextWithTone size={1} tone="critical" weight="semibold">
+        <TextWithTone size={1} tone="critical" weight="medium">
           {t('timeline.error.load-document-changes-title')}
         </TextWithTone>
         <TextWithTone size={1} tone="critical">
diff --git a/packages/sanity/src/desk/panes/document/timeline/timeline.tsx b/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
index 78f05fb9dd4..ad6f8820513 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timeline.tsx
@@ -1,8 +1,15 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import {Box, Flex, Spinner, Text} from '@sanity/ui'
+import {Box, Text} from '@sanity/ui'
+
 import {TimelineItem} from './timelineItem'
 import {ListWrapper, Root, StackWrapper} from './timeline.styled'
-import {Chunk, CommandList, CommandListRenderItemCallback, useTranslation} from 'sanity'
+import {
+  Chunk,
+  CommandList,
+  CommandListRenderItemCallback,
+  useTranslation,
+  LoadingBlock,
+} from 'sanity'
 
 interface TimelineProps {
   chunks: Chunk[]
@@ -56,11 +63,7 @@ export const Timeline = ({
             timestamp={chunk.endTimestamp}
             type={chunk.type}
           />
-          {activeIndex === filteredChunks.length - 1 && hasMoreChunks && (
-            <Flex align="center" justify="center" padding={4}>
-              <Spinner muted />
-            </Flex>
-          )}
+          {activeIndex === filteredChunks.length - 1 && hasMoreChunks && <LoadingBlock />}
         </Box>
       )
     },
@@ -84,7 +87,7 @@ export const Timeline = ({
     >
       {filteredChunks.length === 0 && (
         <StackWrapper padding={3} space={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             {t('timeline.error.no-document-history-title')}
           </Text>
           <Text muted size={1}>
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
index d29ccb82d42..4ee8fa7c316 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineItem.styled.tsx
@@ -1,4 +1,10 @@
-import {Box, Button, Flex, rem} from '@sanity/ui'
+import {
+  Box,
+  Flex,
+  rem,
+  // eslint-disable-next-line no-restricted-imports
+  Button, // Button with specific styling and children behavior.
+} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
 export const IconWrapper = styled(Flex)(({theme}) => {
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
index 415e3b83e2a..f0e183bbf80 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineItem.tsx
@@ -1,12 +1,13 @@
 import React, {useCallback, createElement, useMemo} from 'react'
-import {Box, ButtonTone, Card, Flex, Label, Stack, Text} from '@sanity/ui'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {ButtonProps} from '../../../../ui-components'
 import {getTimelineEventIconComponent} from './helpers'
 import {UserAvatarStack} from './userAvatarStack'
 import {IconBox, IconWrapper, Root, TimestampBox} from './timelineItem.styled'
 import {TIMELINE_ITEM_I18N_KEY_MAPPING} from './timelineI18n'
 import {type ChunkType, type Chunk, useTranslation, useDateTimeFormat} from 'sanity'
 
-const TIMELINE_ITEM_EVENT_TONE: Record<ChunkType | 'withinSelection', ButtonTone> = {
+const TIMELINE_ITEM_EVENT_TONE: Record<ChunkType | 'withinSelection', ButtonProps['tone']> = {
   initial: 'primary',
   create: 'primary',
   publish: 'positive',
@@ -95,9 +96,9 @@ export function TimelineItem({
                   shadow={1}
                   tone={isSelected ? 'primary' : TIMELINE_ITEM_EVENT_TONE[chunk.type]}
                 >
-                  <Label muted size={0}>
+                  <Text muted size={0} weight="medium">
                     {t('timeline.latest')}
-                  </Label>
+                  </Text>
                 </Card>
               </Flex>
             )}
diff --git a/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx b/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
index 84f0c0e6db7..7e4ba7e9f8e 100644
--- a/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
+++ b/packages/sanity/src/desk/panes/document/timeline/timelineMenu.tsx
@@ -1,8 +1,9 @@
-import {SelectIcon} from '@sanity/icons'
-import {Button, Placement, Popover, useClickOutside, useGlobalKeyDown, useToast} from '@sanity/ui'
+import {ChevronDownIcon} from '@sanity/icons'
+import {Placement, useClickOutside, useGlobalKeyDown, useToast} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {useDocumentPane} from '../useDocumentPane'
+import {Button, Popover} from '../../../../ui-components'
 import {TimelineError} from './TimelineError'
 import {Timeline} from './timeline'
 import {TIMELINE_ITEM_I18N_KEY_MAPPING} from './timelineI18n'
@@ -167,9 +168,7 @@ export function TimelineMenu({chunk, mode, placement}: TimelineMenuProps) {
       <Button
         disabled={!ready}
         mode="bleed"
-        fontSize={1}
-        padding={2}
-        iconRight={SelectIcon}
+        iconRight={ChevronDownIcon}
         onClick={open ? handleClose : handleOpen}
         ref={setButton}
         selected={open}
diff --git a/packages/sanity/src/desk/panes/document/useDocumentTitle.ts b/packages/sanity/src/desk/panes/document/useDocumentTitle.ts
new file mode 100644
index 00000000000..123b3638859
--- /dev/null
+++ b/packages/sanity/src/desk/panes/document/useDocumentTitle.ts
@@ -0,0 +1,50 @@
+import {useDocumentPane} from './useDocumentPane'
+import {unstable_useValuePreview as useValuePreview} from 'sanity'
+
+/**
+ * useDocumentTitle hook return type.
+ *
+ * @beta
+ * @hidden
+ */
+interface UseDocumentTitle {
+  error?: string
+  title?: string
+}
+
+/**
+ * React hook that returns the document title for the current document in the document pane.
+ *
+ * @beta
+ * @hidden
+ *
+ * @returns The document title or error. See {@link UseDocumentTitle}
+ */
+export function useDocumentTitle(): UseDocumentTitle {
+  const {connectionState, schemaType, title, value: documentValue} = useDocumentPane()
+  const subscribed = Boolean(documentValue) && connectionState === 'connected'
+
+  const {error, value} = useValuePreview({
+    enabled: subscribed,
+    schemaType,
+    value: documentValue,
+  })
+
+  if (connectionState !== 'connected') {
+    return {error: undefined, title: undefined}
+  }
+
+  if (title) {
+    return {error: undefined, title}
+  }
+
+  if (!documentValue) {
+    return {error: undefined, title: `New ${schemaType?.title || schemaType?.name}`}
+  }
+
+  if (error) {
+    return {error: `Error: ${error.message}`, title: undefined}
+  }
+
+  return {error: undefined, title: value?.title}
+}
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPane.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPane.tsx
index a15b8e94454..93a4d759aa8 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPane.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPane.tsx
@@ -52,12 +52,6 @@ const AnimatedSpinnerIcon = styled(SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `
 
-const SearchCard = styled(Card)`
-  [data-ui='TextInput'] {
-    border-radius: inherit;
-  }
-`
-
 function useShallowUnique<ValueType>(value: ValueType): ValueType {
   const valueRef = useRef<ValueType>(value)
   if (!shallowEquals(valueRef.current, value)) {
@@ -229,26 +223,25 @@ export const DocumentListPane = memo(function DocumentListPane(props: DocumentLi
   }, [isLoading, items.length])
 
   const searchInput = (
-    <Box paddingX={2} paddingBottom={2}>
-      <SearchCard radius={4} tone="transparent">
-        <TextInput
-          aria-label={t('panes.document-list-pane.search-input.aria-label')}
-          autoComplete="off"
-          border={false}
-          clearButton={Boolean(searchQuery)}
-          disabled={!isSearchReady}
-          fontSize={[2, 2, 1]}
-          icon={loadingVariant === 'spinner' ? AnimatedSpinnerIcon : SearchIcon}
-          onChange={handleQueryChange}
-          onClear={handleClearSearch}
-          onKeyDown={handleSearchKeyDown}
-          placeholder={t('panes.document-list-pane.search-input.placeholder')}
-          radius={2}
-          ref={setSearchInputElement}
-          spellCheck={false}
-          value={searchInputValue}
-        />
-      </SearchCard>
+    <Box paddingX={3} paddingBottom={3}>
+      <TextInput
+        aria-label={t('panes.document-list-pane.search-input.aria-label')}
+        autoComplete="off"
+        border={false}
+        clearButton={Boolean(searchQuery)}
+        disabled={!isSearchReady}
+        fontSize={[2, 2, 1]}
+        icon={loadingVariant === 'spinner' ? AnimatedSpinnerIcon : SearchIcon}
+        onChange={handleQueryChange}
+        onClear={handleClearSearch}
+        onKeyDown={handleSearchKeyDown}
+        padding={2}
+        placeholder={t('panes.document-list-pane.search-input.placeholder')}
+        radius={2}
+        ref={setSearchInputElement}
+        spellCheck={false}
+        value={searchInputValue}
+      />
     </Box>
   )
 
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
index 912b1fcfe47..72ebefcdc6f 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPaneContent.tsx
@@ -1,8 +1,9 @@
 import {SyncIcon} from '@sanity/icons'
-import {Box, Button, Card, Container, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import {Box, Container, Flex, Heading, Stack, Text} from '@sanity/ui'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {SanityDocument} from '@sanity/types'
 import styled from 'styled-components'
+import {Button} from '../../../ui-components'
 import {Delay, PaneContent, usePane, usePaneLayout, PaneItem} from '../../components'
 import {DocumentListPaneItem, LoadingVariant} from './types'
 import {FULL_LIST_LIMIT} from './constants'
@@ -16,6 +17,7 @@ import {
   useSchema,
   useTranslation,
   Translate,
+  LoadingBlock,
 } from 'sanity'
 
 const RootBox = styled(Box)`
@@ -55,11 +57,9 @@ function LoadingView(props: {layout?: GeneralPreviewLayoutKey}) {
   const {layout} = props
 
   return (
-    <Stack padding={2} space={1}>
+    <Stack paddingX={3} paddingY={2} paddingTop={0} space={1}>
       {SKELETON_ITEMS.map((num) => (
-        <Card padding={2} key={num}>
-          <SanityDefaultPreview isPlaceholder layout={layout} />
-        </Card>
+        <SanityDefaultPreview isPlaceholder layout={layout} key={num} />
       ))}
     </Stack>
   )
@@ -133,11 +133,7 @@ export function DocumentListPaneContent(props: DocumentListPaneContentProps) {
             value={item}
           />
 
-          {showSpinner && (
-            <Flex align="center" justify="center" padding={4}>
-              <Spinner muted />
-            </Flex>
-          )}
+          {showSpinner && <LoadingBlock />}
 
           {showMaxItemsMessage && (
             <Box marginY={1} paddingX={3} paddingY={4}>
@@ -243,7 +239,6 @@ export function DocumentListPaneContent(props: DocumentListPaneContentProps) {
             activeItemDataAttr="data-hovered"
             ariaLabel={paneTitle}
             canReceiveFocus
-            focusRingOffset={-3}
             inputElement={searchInputElement}
             itemHeight={51}
             items={items}
@@ -251,8 +246,8 @@ export function DocumentListPaneContent(props: DocumentListPaneContentProps) {
             onEndReached={handleEndReached}
             onlyShowSelectionWhenActive
             overscan={10}
-            padding={2}
             paddingBottom={1}
+            paddingX={3}
             renderItem={renderItem}
             wrapAround={false}
           />
diff --git a/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx b/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
index 6ad34b9b8ee..2fc44f71b8c 100644
--- a/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/documentList/DocumentListPaneHeader.tsx
@@ -1,8 +1,9 @@
 import {ArrowLeftIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
 import React, {memo, useMemo} from 'react'
+import {TooltipDelayGroupProvider} from '@sanity/ui'
 import {PaneMenuItem, PaneMenuItemGroup, DeskToolPaneActionHandler} from '../../types'
 import {BackLink, PaneHeader, PaneHeaderActions, usePane} from '../../components'
+import {Button, TOOLTIP_DELAY_PROPS} from '../../../ui-components'
 import {useDeskTool} from '../../useDeskTool'
 import {SortOrder} from './types'
 import {GeneralPreviewLayoutKey, InitialValueTemplateItem} from 'sanity'
@@ -46,23 +47,33 @@ export const DocumentListPaneHeader = memo(
     }, [setLayout, setSortOrder])
 
     return (
-      <PaneHeader
-        actions={
-          <PaneHeaderActions
-            initialValueTemplateItems={initialValueTemplates}
-            actionHandlers={actionHandlers}
-            menuItemGroups={menuItemGroups}
-            menuItems={menuItems}
-          />
-        }
-        backButton={
-          features.backButton &&
-          index > 0 && <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" />
-        }
-        contentAfter={contentAfter}
-        tabIndex={tabIndex}
-        title={title}
-      />
+      <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>
+        <PaneHeader
+          actions={
+            <PaneHeaderActions
+              initialValueTemplateItems={initialValueTemplates}
+              actionHandlers={actionHandlers}
+              menuItemGroups={menuItemGroups}
+              menuItems={menuItems}
+            />
+          }
+          backButton={
+            features.backButton &&
+            index > 0 && (
+              <Button
+                as={BackLink}
+                data-as="a"
+                icon={ArrowLeftIcon}
+                mode="bleed"
+                tooltipProps={{content: 'Back'}}
+              />
+            )
+          }
+          contentAfter={contentAfter}
+          tabIndex={tabIndex}
+          title={title}
+        />
+      </TooltipDelayGroupProvider>
     )
   },
 )
diff --git a/packages/sanity/src/desk/panes/list/ListPaneContent.tsx b/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
index fc2e3cb28a3..6b6383e4468 100644
--- a/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
+++ b/packages/sanity/src/desk/panes/list/ListPaneContent.tsx
@@ -62,7 +62,7 @@ export function ListPaneContent(props: ListPaneContentProps) {
       if (item.type === 'divider') {
         return (
           // eslint-disable-next-line react/no-array-index-key
-          <Box key={`divider-${itemIndex}`} marginTop={1} marginBottom={2}>
+          <Box key={`divider-${itemIndex}`} marginBottom={1}>
             <Divider />
           </Box>
         )
@@ -102,13 +102,12 @@ export function ListPaneContent(props: ListPaneContentProps) {
           activeItemDataAttr="data-hovered"
           ariaLabel={title}
           canReceiveFocus
-          focusRingOffset={-3}
           getItemDisabled={getItemDisabled}
           itemHeight={51}
           items={items}
           onlyShowSelectionWhenActive
-          padding={2}
           paddingBottom={1}
+          paddingX={3}
           renderItem={renderItem}
           wrapAround={false}
         />
diff --git a/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx b/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
index eb3d9fc2f31..210b7a6de2c 100644
--- a/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/list/ListPaneHeader.tsx
@@ -1,7 +1,7 @@
 import {ArrowLeftIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
 import React from 'react'
 import {BackLink, PaneHeader, PaneHeaderActions, usePane} from '../../components'
+import {Button} from '../../../ui-components'
 import {PaneMenuItem, PaneMenuItemGroup} from '../../types'
 import {useDeskTool} from '../../useDeskTool'
 
@@ -23,7 +23,15 @@ export const ListPaneHeader = ({index, menuItems, menuItemGroups, title}: ListPa
       actions={<PaneHeaderActions menuItems={menuItems} menuItemGroups={menuItemGroups} />}
       backButton={
         features.backButton &&
-        index > 0 && <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" />
+        index > 0 && (
+          <Button
+            as={BackLink}
+            data-as="a"
+            icon={ArrowLeftIcon}
+            mode="bleed"
+            tooltipProps={{content: 'Back'}}
+          />
+        )
       }
       tabIndex={tabIndex}
       title={title}
diff --git a/packages/sanity/src/desk/panes/loading/LoadingPane.tsx b/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
index f88c24922e9..511e3589ff6 100644
--- a/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
+++ b/packages/sanity/src/desk/panes/loading/LoadingPane.tsx
@@ -1,4 +1,4 @@
-import {Box, type CardTone, Flex, Spinner, Text, _raf2} from '@sanity/ui'
+import {type CardTone, Flex, _raf2} from '@sanity/ui'
 import React, {memo, useMemo, useState, useEffect} from 'react'
 import {Observable} from 'rxjs'
 import styled from 'styled-components'
@@ -6,7 +6,7 @@ import {structureLocaleNamespace} from '../../i18n'
 import {Delay} from '../../components/Delay'
 import {Pane, PaneContent} from '../../components/pane'
 import {WaitMessage, getWaitMessages} from './getWaitMessages'
-import {useTranslation} from 'sanity'
+import {LoadingBlock, useTranslation} from 'sanity'
 
 interface LoadingPaneProps {
   delay?: number
@@ -91,15 +91,7 @@ export const LoadingPane = memo((props: LoadingPaneProps) => {
       justify="center"
       ref={setContentElement}
     >
-      <Spinner muted />
-
-      {(title || currentMessage) && (
-        <Box marginTop={3}>
-          <Text align="center" muted size={1}>
-            {title || currentMessage}
-          </Text>
-        </Box>
-      )}
+      <LoadingBlock showText title={title || currentMessage} />
     </Content>
   )
 
diff --git a/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx b/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
index 44bc4ed2ae7..a336c127ca5 100644
--- a/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
+++ b/packages/sanity/src/desk/panes/userComponent/UserComponentPaneHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {ArrowLeftIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
+import {Button} from '../../../ui-components'
 import {PaneMenuItem, PaneMenuItemGroup, DeskToolPaneActionHandler} from '../../types'
 import {BackLink, PaneHeader, PaneHeaderActions} from '../../components'
 import {useDeskTool} from '../../useDeskTool'
@@ -32,7 +32,15 @@ export function UserComponentPaneHeader(props: UserComponentPaneHeaderProps) {
       }
       backButton={
         features.backButton &&
-        index > 0 && <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" />
+        index > 0 && (
+          <Button
+            as={BackLink}
+            data-as="a"
+            icon={ArrowLeftIcon}
+            mode="bleed"
+            tooltipProps={{content: 'Back'}}
+          />
+        )
       }
       title={title}
     />
diff --git a/packages/sanity/src/desk/structureBuilder/InitialValueTemplateItem.ts b/packages/sanity/src/desk/structureBuilder/InitialValueTemplateItem.ts
index 332ab67e04f..ddb2a30cea1 100644
--- a/packages/sanity/src/desk/structureBuilder/InitialValueTemplateItem.ts
+++ b/packages/sanity/src/desk/structureBuilder/InitialValueTemplateItem.ts
@@ -202,7 +202,7 @@ export function menuItemsFromInitialValueTemplateItems(
   const {schema, templates} = context
   return templateItems.map((item) => {
     const template = templates.find((t) => t.id === item.templateId)
-    const title = item.title || template?.title || 'Create new'
+    const title = item.title || template?.title || 'Create'
 
     const params: BaseIntentParams = {}
     if (template && template.schemaType) {
diff --git a/packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx b/packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx
new file mode 100644
index 00000000000..df4f134c2cf
--- /dev/null
+++ b/packages/sanity/src/ui-components/__workshop__/MenuItemStory.tsx
@@ -0,0 +1,106 @@
+import {hues} from '@sanity/color'
+import {CheckmarkIcon, CircleIcon} from '@sanity/icons'
+import {Avatar, Box, Card, Container, Menu, Stack, Text} from '@sanity/ui'
+import {useString} from '@sanity/ui-workshop'
+import React from 'react'
+import {MenuItem} from '../menuItem'
+
+const HOTKEYS = ['Ctrl', 'Alt', 'P']
+const AVATAR_INITIALS = 'AW'
+
+export default function MenuItemStory() {
+  const text = useString('Text', 'Text', 'Props') || ''
+
+  return (
+    <Container width={0} padding={4}>
+      <Stack space={2}>
+        <Card border radius={2}>
+          <Box marginBottom={3} padding={3}>
+            <Text size={2} weight="medium">
+              Recommended usage
+            </Text>
+          </Box>
+          <Menu>
+            <MenuItem text={text} />
+            <MenuItem icon={CircleIcon} text={text} />
+            <MenuItem iconRight={CheckmarkIcon} text={text} />
+            <MenuItem hotkeys={HOTKEYS} text={text} />
+            <MenuItem preview={<Avatar initials={AVATAR_INITIALS} size={1} />} text={text} />
+            <MenuItem
+              preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+              text={text}
+              iconRight={CheckmarkIcon}
+            />
+            <MenuItem
+              preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+              text={text}
+              badgeText="badge"
+            />
+          </Menu>
+        </Card>
+        <Card border radius={2} tone="critical">
+          <Box marginBottom={3} padding={3}>
+            <Text size={2} weight="medium">
+              Invalid usage
+            </Text>
+          </Box>
+          <Menu>
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don&apos;t use icons and previews in the same item
+              </Text>
+            </Box>
+            <MenuItem
+              icon={CircleIcon}
+              preview={
+                <Card
+                  radius={2}
+                  style={{width: '41px', height: '41px', background: hues.cyan[500].hex}}
+                />
+              }
+              text={text}
+            />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use icon right and hotkeys in the same item
+              </Text>
+            </Box>
+            <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} hotkeys={HOTKEYS} />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use icon right and badge in the same item
+              </Text>
+            </Box>
+            <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} badgeText={'badge'} />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use hotkeys and badge in the same item
+              </Text>
+            </Box>
+            <MenuItem icon={CircleIcon} text={text} hotkeys={HOTKEYS} badgeText={'badge'} />
+            <Box paddingX={2} paddingTop={2}>
+              <Text muted size={1}>
+                Don't use everything at once
+              </Text>
+            </Box>
+            <MenuItem
+              icon={CircleIcon}
+              text={text}
+              hotkeys={HOTKEYS}
+              badgeText={'badge'}
+              iconRight={CheckmarkIcon}
+            />
+            <MenuItem
+              preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+              icon={CircleIcon}
+              text={text}
+              hotkeys={HOTKEYS}
+              badgeText={'badge'}
+              iconRight={CheckmarkIcon}
+            />
+          </Menu>
+        </Card>
+      </Stack>
+    </Container>
+  )
+}
diff --git a/packages/sanity/src/ui-components/__workshop__/index.ts b/packages/sanity/src/ui-components/__workshop__/index.ts
new file mode 100644
index 00000000000..37dc3793fec
--- /dev/null
+++ b/packages/sanity/src/ui-components/__workshop__/index.ts
@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'studio-ui',
+  title: 'Studio UI',
+  stories: [
+    {
+      name: 'menu-item',
+      title: 'MenuItem',
+      component: lazy(() => import('./MenuItemStory')),
+    },
+  ],
+})
diff --git a/packages/sanity/src/ui-components/button/Button.tsx b/packages/sanity/src/ui-components/button/Button.tsx
new file mode 100644
index 00000000000..bffa05a73a5
--- /dev/null
+++ b/packages/sanity/src/ui-components/button/Button.tsx
@@ -0,0 +1,91 @@
+/* eslint-disable no-restricted-imports */
+
+import {Button as UIButton, ButtonProps as UIButtonProps} from '@sanity/ui'
+import React, {forwardRef, useCallback} from 'react'
+import styled from 'styled-components'
+import {Tooltip, TooltipProps} from '..'
+import {ConditionalWrapper, ConditionalWrapperRenderWrapperCallback} from '../conditionalWrapper'
+
+type BaseButtonProps = Pick<
+  UIButtonProps,
+  | 'as'
+  | 'icon'
+  | 'iconRight'
+  | 'justify'
+  | 'loading'
+  | 'mode'
+  | 'paddingY'
+  | 'selected'
+  | 'tone'
+  | 'type'
+  | 'width'
+> & {
+  size?: 'default' | 'large'
+}
+
+type ButtonWithText = {
+  text: string
+  tooltipProps?: TooltipProps | null
+  icon?: UIButtonProps['icon']
+}
+
+type IconButton = {
+  text?: undefined
+  icon?: UIButtonProps['icon']
+  /**
+   * When using a button with an icon, tooltipProps are required to enforce consistency in UI.
+   */
+  tooltipProps: TooltipProps | null
+}
+
+/** @internal */
+export type ButtonProps = BaseButtonProps & (ButtonWithText | IconButton)
+
+const LARGE_BUTTON_PROPS = {
+  space: 3,
+  padding: 3,
+}
+const DEFAULT_BUTTON_PROPS = {
+  space: 2,
+  padding: 2,
+}
+
+const TooltipButtonWrapper = styled.span`
+  display: inline-flex;
+`
+/**
+ * Customized Sanity UI <Button> with pre-defined layout options.
+ *
+ * @internal
+ */
+export const Button = forwardRef(function Button(
+  {
+    size = 'default',
+    mode = 'default',
+    paddingY,
+    tone = 'default',
+    tooltipProps,
+    ...rest
+  }: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size' | 'title'>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(
+    (children) => {
+      return (
+        <Tooltip content={tooltipProps?.content} portal {...tooltipProps}>
+          {/* This span is needed to make the tooltip work in disabled buttons */}
+          <TooltipButtonWrapper>{children}</TooltipButtonWrapper>
+        </Tooltip>
+      )
+    },
+    [tooltipProps],
+  )
+
+  const sizeProps = size === 'default' ? DEFAULT_BUTTON_PROPS : LARGE_BUTTON_PROPS
+
+  return (
+    <ConditionalWrapper condition={!!tooltipProps} wrapper={renderWrapper}>
+      <UIButton {...rest} {...sizeProps} paddingY={paddingY} ref={ref} mode={mode} tone={tone} />
+    </ConditionalWrapper>
+  )
+})
diff --git a/packages/sanity/src/ui-components/button/index.ts b/packages/sanity/src/ui-components/button/index.ts
new file mode 100644
index 00000000000..8486fd6d62d
--- /dev/null
+++ b/packages/sanity/src/ui-components/button/index.ts
@@ -0,0 +1 @@
+export * from './Button'
diff --git a/packages/sanity/src/ui-components/conditionalWrapper/ConditionalWrapper.tsx b/packages/sanity/src/ui-components/conditionalWrapper/ConditionalWrapper.tsx
new file mode 100644
index 00000000000..23d04fda7de
--- /dev/null
+++ b/packages/sanity/src/ui-components/conditionalWrapper/ConditionalWrapper.tsx
@@ -0,0 +1,22 @@
+export type ConditionalWrapperRenderWrapperCallback = (children: React.ReactNode) => React.ReactNode
+
+/**
+ * A helper component that conditionally wraps its children in a wrapper component.
+ *
+ * @internal
+ */
+export function ConditionalWrapper({
+  children,
+  condition,
+  wrapper,
+}: {
+  children: React.ReactNode
+  condition: boolean
+  wrapper: ConditionalWrapperRenderWrapperCallback
+}): React.ReactNode {
+  if (!condition) {
+    return children
+  }
+
+  return wrapper(children)
+}
diff --git a/packages/sanity/src/ui-components/conditionalWrapper/index.ts b/packages/sanity/src/ui-components/conditionalWrapper/index.ts
new file mode 100644
index 00000000000..adb6113e237
--- /dev/null
+++ b/packages/sanity/src/ui-components/conditionalWrapper/index.ts
@@ -0,0 +1 @@
+export * from './ConditionalWrapper'
diff --git a/packages/sanity/src/ui-components/dialog/Dialog.tsx b/packages/sanity/src/ui-components/dialog/Dialog.tsx
new file mode 100644
index 00000000000..91386a9a5d1
--- /dev/null
+++ b/packages/sanity/src/ui-components/dialog/Dialog.tsx
@@ -0,0 +1,99 @@
+/* eslint-disable no-restricted-imports */
+import {
+  Button as UIButton,
+  Flex,
+  Dialog as UIDialog,
+  DialogProps as UIDialogProps,
+  Box,
+  BoxHeight,
+} from '@sanity/ui'
+import React, {ComponentProps, forwardRef} from 'react'
+import {useTranslation} from 'react-i18next'
+
+/** @internal */
+export type DialogProps = Pick<
+  UIDialogProps,
+  | '__unstable_autoFocus'
+  | '__unstable_hideCloseButton'
+  | 'contentRef'
+  | 'header'
+  | 'id'
+  | 'onActivate'
+  | 'onClickOutside'
+  | 'onClose'
+  | 'portal'
+  | 'position'
+  | 'scheme'
+  | 'width'
+> & {
+  /**
+   * Dialog body height.
+   * Set this to 'fill' (i.e. 100%) if you want overflow body content to be contained
+   * and not trigger dynamic border visibility.
+   */
+  bodyHeight?: BoxHeight
+  children?: React.ReactNode
+  footer?: {
+    cancelButton?: Omit<ComponentProps<typeof UIButton>, 'fontSize' | 'padding'>
+    confirmButton?: Omit<ComponentProps<typeof UIButton>, 'fontSize' | 'padding'>
+  }
+  /**
+   * If enabled, removes all default padding from dialog content.
+   */
+  padding?: boolean
+}
+
+/**
+ * Customized Sanity UI <Dialog> that enforces an opinionated footer layout with a max of two buttons (confirm and cancel).
+ *
+ * @internal
+ */
+export const Dialog = forwardRef(function Dialog(
+  {
+    bodyHeight,
+    children,
+    footer,
+    padding = true,
+    ...props
+  }: DialogProps & Pick<React.HTMLProps<HTMLDivElement>, 'onDragEnter'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {t} = useTranslation()
+
+  return (
+    <UIDialog
+      {...props}
+      animate
+      ref={ref}
+      footer={
+        (footer?.confirmButton || footer?.cancelButton) && (
+          <Flex width="full" gap={3} justify="flex-end" padding={3}>
+            {props.onClose && (
+              <UIButton
+                mode="bleed"
+                padding={2}
+                text={t('common.dialog.cancel-button.text')}
+                tone="default"
+                onClick={props.onClose}
+                {...footer.cancelButton}
+              />
+            )}
+            {footer.confirmButton && (
+              <UIButton
+                mode="default"
+                padding={2}
+                text={t('common.dialog.confirm-button.text')}
+                tone="critical"
+                {...footer.confirmButton}
+              />
+            )}
+          </Flex>
+        )
+      }
+    >
+      <Box height={bodyHeight} padding={padding ? 4 : 0}>
+        {children}
+      </Box>
+    </UIDialog>
+  )
+})
diff --git a/packages/sanity/src/ui-components/dialog/index.ts b/packages/sanity/src/ui-components/dialog/index.ts
new file mode 100644
index 00000000000..8390808a2a1
--- /dev/null
+++ b/packages/sanity/src/ui-components/dialog/index.ts
@@ -0,0 +1 @@
+export * from './Dialog'
diff --git a/packages/sanity/src/ui-components/index.ts b/packages/sanity/src/ui-components/index.ts
new file mode 100644
index 00000000000..e4688eff1dc
--- /dev/null
+++ b/packages/sanity/src/ui-components/index.ts
@@ -0,0 +1,10 @@
+export * from './button'
+export * from './dialog'
+export * from './menuButton'
+export * from './menuGroup'
+export * from './menuItem'
+export * from './popover'
+export * from './tab'
+export * from './tooltip'
+
+// @todo: consider an alternative pattern for non studio ui components, avoiding circular dependencies
diff --git a/packages/sanity/src/ui-components/menuButton/MenuButton.tsx b/packages/sanity/src/ui-components/menuButton/MenuButton.tsx
new file mode 100644
index 00000000000..90f87f68e66
--- /dev/null
+++ b/packages/sanity/src/ui-components/menuButton/MenuButton.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable no-restricted-imports */
+import {
+  PopoverProps,
+  MenuButton as UIMenuButton,
+  MenuButtonProps as UIMenuButtonProps,
+} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+
+/** @internal */
+export type MenuButtonProps = Omit<UIMenuButtonProps, 'popover'> & {
+  popover?: Omit<PopoverProps, 'animate' | 'content' | 'open'>
+}
+
+/**
+ * Customized Sanity UI <MenuButton> that enforces popover animation.
+ *
+ * @internal
+ */
+export const MenuButton = forwardRef(function MenuButton(
+  props: MenuButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    <UIMenuButton
+      {...props}
+      ref={ref}
+      popover={{
+        ...props.popover,
+        animate: true,
+      }}
+    />
+  )
+})
diff --git a/packages/sanity/src/ui-components/menuButton/index.ts b/packages/sanity/src/ui-components/menuButton/index.ts
new file mode 100644
index 00000000000..6ddeec49b29
--- /dev/null
+++ b/packages/sanity/src/ui-components/menuButton/index.ts
@@ -0,0 +1 @@
+export * from './MenuButton'
diff --git a/packages/sanity/src/ui-components/menuGroup/MenuGroup.tsx b/packages/sanity/src/ui-components/menuGroup/MenuGroup.tsx
new file mode 100644
index 00000000000..6bb5a975407
--- /dev/null
+++ b/packages/sanity/src/ui-components/menuGroup/MenuGroup.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable no-restricted-imports */
+import {MenuGroup as UIMenuGroup, MenuGroupProps as UIMenuGroupProps} from '@sanity/ui'
+import React from 'react'
+
+/** @internal */
+export type MenuGroupProps = Pick<UIMenuGroupProps, 'icon' | 'popover' | 'text' | 'tone'>
+
+/**
+ * Customized Sanity UI <MenuGroup> component with pre-defined layout options.
+ *
+ * @internal
+ */
+export const MenuGroup = (
+  props: MenuGroupProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>,
+) => {
+  return <UIMenuGroup {...props} fontSize={1} padding={3} />
+}
diff --git a/packages/sanity/src/ui-components/menuGroup/index.ts b/packages/sanity/src/ui-components/menuGroup/index.ts
new file mode 100644
index 00000000000..94f4595e8ff
--- /dev/null
+++ b/packages/sanity/src/ui-components/menuGroup/index.ts
@@ -0,0 +1 @@
+export * from './MenuGroup'
diff --git a/packages/sanity/src/ui-components/menuItem/MenuItem.tsx b/packages/sanity/src/ui-components/menuItem/MenuItem.tsx
new file mode 100644
index 00000000000..fa52274f390
--- /dev/null
+++ b/packages/sanity/src/ui-components/menuItem/MenuItem.tsx
@@ -0,0 +1,150 @@
+/* eslint-disable no-restricted-imports */
+import {
+  Box,
+  Flex,
+  MenuItem as UIMenuItem,
+  MenuItemProps as UIMenuItemProps,
+  Text,
+  Badge,
+  Stack,
+  Hotkeys,
+} from '@sanity/ui'
+import React, {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
+import {isValidElementType} from 'react-is'
+import styled from 'styled-components'
+import {ConditionalWrapper, ConditionalWrapperRenderWrapperCallback} from '../conditionalWrapper'
+import {Tooltip, TooltipProps} from '..'
+
+const FONT_SIZE = 1
+
+/** @internal */
+export type MenuItemProps = Pick<
+  UIMenuItemProps,
+  'as' | 'icon' | 'iconRight' | 'pressed' | 'selected' | 'text' | 'tone' | 'hotkeys'
+> & {
+  badgeText?: string
+  /**
+   * Usage of `children` is not supported, import `MenuItem` from `@sanity/ui` instead.
+   */
+  children?: undefined
+  /**
+   * Previews should be 25x25.
+   */
+  preview?: React.ReactNode
+  /**
+   * Optional render callback which receives menu item content.
+   */
+  renderMenuItem?: (menuItemContent: React.JSX.Element) => React.ReactNode
+  tooltipProps?: TooltipProps | null
+}
+
+const PreviewWrapper = styled(Box)`
+  height: 25px;
+  width: 25px;
+  overflow: hidden;
+`
+
+/**
+ * Customized Sanity UI <MenuItem> that restricts usage of `children` to encourage simple,
+ * single line menu items.
+ *
+ * It also accepts a prop to attach tooltips as well as custom badges too.
+ *
+ * @internal
+ */
+export const MenuItem = forwardRef(function MenuItem(
+  {
+    badgeText,
+    children: childrenProp,
+    disabled,
+    hotkeys,
+    icon,
+    iconRight,
+    preview = null,
+    renderMenuItem,
+    text,
+    tooltipProps,
+    ...rest
+  }: MenuItemProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'selected' | 'tabIndex' | 'size'
+    >,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const menuItemContent = useMemo(() => {
+    return (
+      <Flex align="center" gap={2}>
+        {preview && (
+          <PreviewWrapper style={{opacity: disabled ? 0.25 : undefined}}>
+            <Flex align="center" height="fill" justify="center">
+              {preview}
+            </Flex>
+          </PreviewWrapper>
+        )}
+        {icon && (
+          <Box paddingRight={1}>
+            <Text size={FONT_SIZE}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </Text>
+          </Box>
+        )}
+        {text && (
+          <Stack flex={1} space={2}>
+            <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
+              {text}
+            </Text>
+          </Stack>
+        )}
+        {(badgeText || hotkeys || iconRight) && (
+          <Flex align="center" gap={3} marginLeft={3}>
+            {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
+
+            {badgeText && (
+              <Badge fontSize={0} style={{marginTop: -4, marginBottom: -4}}>
+                {badgeText}
+              </Badge>
+            )}
+
+            {iconRight && (
+              <Text size={FONT_SIZE}>
+                {isValidElement(iconRight) && iconRight}
+                {isValidElementType(iconRight) && createElement(iconRight)}
+              </Text>
+            )}
+          </Flex>
+        )}
+      </Flex>
+    )
+  }, [badgeText, disabled, hotkeys, icon, iconRight, preview, text])
+
+  const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(
+    (children) => {
+      return (
+        <Tooltip content={tooltipProps?.content} portal {...tooltipProps}>
+          {/* This div is needed to make the tooltip work in disabled menu items */}
+          <div>{children}</div>
+        </Tooltip>
+      )
+    },
+    [tooltipProps],
+  )
+
+  return (
+    <ConditionalWrapper condition={!!tooltipProps} wrapper={renderWrapper}>
+      <UIMenuItem
+        disabled={disabled}
+        paddingLeft={preview ? 1 : 3}
+        paddingRight={3}
+        paddingY={preview ? 1 : 3}
+        ref={ref}
+        {...rest}
+      >
+        {typeof childrenProp === 'undefined' && typeof renderMenuItem === 'function'
+          ? renderMenuItem(menuItemContent)
+          : menuItemContent}
+      </UIMenuItem>
+    </ConditionalWrapper>
+  )
+})
diff --git a/packages/sanity/src/ui-components/menuItem/index.ts b/packages/sanity/src/ui-components/menuItem/index.ts
new file mode 100644
index 00000000000..7f0d25e4824
--- /dev/null
+++ b/packages/sanity/src/ui-components/menuItem/index.ts
@@ -0,0 +1 @@
+export * from './MenuItem'
diff --git a/packages/sanity/src/ui-components/popover/Popover.tsx b/packages/sanity/src/ui-components/popover/Popover.tsx
new file mode 100644
index 00000000000..496dc634bb9
--- /dev/null
+++ b/packages/sanity/src/ui-components/popover/Popover.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable no-restricted-imports */
+import {Popover as UIPopover, PopoverProps as UIPopoverProps} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+
+/** @internal */
+export type PopoverProps = Omit<UIPopoverProps, 'animate'>
+
+/**
+ * Customized Sanity UI <Popover> that forces `animate=true`
+ *
+ * All Popovers in the studio should be animated.
+ *
+ * @internal
+ */
+export const Popover = forwardRef(function Popover(
+  props: PopoverProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return <UIPopover {...props} animate ref={ref} />
+})
diff --git a/packages/sanity/src/ui-components/popover/index.ts b/packages/sanity/src/ui-components/popover/index.ts
new file mode 100644
index 00000000000..b2f899f9197
--- /dev/null
+++ b/packages/sanity/src/ui-components/popover/index.ts
@@ -0,0 +1 @@
+export * from './Popover'
diff --git a/packages/sanity/src/ui-components/tab/Tab.tsx b/packages/sanity/src/ui-components/tab/Tab.tsx
new file mode 100644
index 00000000000..36dc4f39db0
--- /dev/null
+++ b/packages/sanity/src/ui-components/tab/Tab.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable no-restricted-imports */
+import {Tab as UITab, TabProps as UITabProps} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+
+/**
+ * @internal
+ *
+ * Padding and font sizes are fixed in Studio UI <Tab> components.
+ */
+export type TabProps = Pick<
+  UITabProps,
+  'aria-controls' | 'focused' | 'icon' | 'id' | 'label' | 'selected' | 'tone'
+> & {
+  size?: 'default' | 'small'
+}
+
+const SMALL_TAB_PROPS = {
+  padding: 2,
+}
+
+const DEFAULT_TAB_PROPS = {
+  padding: 3,
+}
+
+/**
+ * Customized Sanity UI <Tab> with limited layout options.
+ *
+ * @internal
+ */
+export const Tab = forwardRef(function Tab(
+  {
+    size = 'small',
+    tone = 'default',
+    ...props
+  }: TabProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    <UITab
+      {...props}
+      {...(size === 'default' ? DEFAULT_TAB_PROPS : SMALL_TAB_PROPS)}
+      muted
+      ref={ref}
+      tone={tone}
+    />
+  )
+})
diff --git a/packages/sanity/src/ui-components/tab/index.ts b/packages/sanity/src/ui-components/tab/index.ts
new file mode 100644
index 00000000000..b113ad44db7
--- /dev/null
+++ b/packages/sanity/src/ui-components/tab/index.ts
@@ -0,0 +1 @@
+export * from './Tab'
diff --git a/packages/sanity/src/ui-components/tooltip/Tooltip.tsx b/packages/sanity/src/ui-components/tooltip/Tooltip.tsx
new file mode 100644
index 00000000000..90667470d15
--- /dev/null
+++ b/packages/sanity/src/ui-components/tooltip/Tooltip.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable no-restricted-imports */
+import {
+  Box,
+  Flex,
+  Hotkeys,
+  HotkeysProps,
+  Text,
+  Tooltip as UITooltip,
+  TooltipProps as UITooltipProps,
+} from '@sanity/ui'
+import React, {forwardRef} from 'react'
+import {TOOLTIP_DELAY_PROPS} from './constants'
+
+/** @internal */
+export type TooltipProps = Omit<UITooltipProps, 'arrow' | 'padding' | 'shadow'> & {
+  hotkeys?: HotkeysProps['keys']
+}
+
+const TOOLTIP_SHARED_PROPS: UITooltipProps = {
+  animate: true,
+  arrow: false,
+  boundaryElement: null,
+  delay: TOOLTIP_DELAY_PROPS,
+  fallbackPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+  placement: 'bottom',
+  portal: true,
+}
+
+/**
+ * Customized Sanity UI <Tooltip> with limited layout options and support for showing hotkeys.
+ *
+ * In just about all cases, its strongly recommended that you pass a string to the `content` prop.
+ * This helps simplify i18n and encourages short and concise.
+ *
+ * Passing ReactNode values to `content` is supported, but discouraged.
+ *
+ * @internal
+ */
+export const Tooltip = forwardRef(function Tooltip(
+  props: TooltipProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {content, hotkeys, ...rest} = props
+
+  if (typeof content === 'string') {
+    return (
+      <UITooltip
+        {...TOOLTIP_SHARED_PROPS}
+        content={
+          <Flex align="center">
+            {content && (
+              <Box flex={1} padding={1}>
+                <Text size={1}>{content}</Text>
+              </Box>
+            )}
+            {hotkeys && (
+              <Box flex="none">
+                <Hotkeys keys={hotkeys} />
+              </Box>
+            )}
+          </Flex>
+        }
+        padding={1}
+        ref={ref}
+        {...rest}
+      />
+    )
+  }
+
+  return <UITooltip {...TOOLTIP_SHARED_PROPS} content={content} ref={ref} {...rest} />
+})
diff --git a/packages/sanity/src/ui-components/tooltip/constants.ts b/packages/sanity/src/ui-components/tooltip/constants.ts
new file mode 100644
index 00000000000..a65bb9c3548
--- /dev/null
+++ b/packages/sanity/src/ui-components/tooltip/constants.ts
@@ -0,0 +1,3 @@
+export const TOOLTIP_DELAY_PROPS = {
+  open: 400,
+}
diff --git a/packages/sanity/src/ui-components/tooltip/index.ts b/packages/sanity/src/ui-components/tooltip/index.ts
new file mode 100644
index 00000000000..a9d0c8cef5e
--- /dev/null
+++ b/packages/sanity/src/ui-components/tooltip/index.ts
@@ -0,0 +1,2 @@
+export * from './Tooltip'
+export * from './constants'
diff --git a/test/e2e/tests/components-api/studio.spec.ts b/test/e2e/tests/components-api/studio.spec.ts
index f5052e5386b..b1cba4410ba 100644
--- a/test/e2e/tests/components-api/studio.spec.ts
+++ b/test/e2e/tests/components-api/studio.spec.ts
@@ -21,16 +21,6 @@ test.describe('Studio Components API:', () => {
     ).toBeVisible()
   })
 
-  test('studio.components.logo', async ({page}) => {
-    page.goto('/test/content')
-    await expect(
-      page
-        .getByTestId('child-parent-config-studio-logo')
-        .getByTestId('parent-config-studio-logo')
-        .getByTestId('studio-logo'),
-    ).toBeVisible()
-  })
-
   test('studio.components.toolMenu', async ({page}) => {
     page.goto('/test/content')
     await expect(
diff --git a/test/e2e/tests/navbar/createNewDocumentNav.spec.ts b/test/e2e/tests/navbar/createNewDocumentNav.spec.ts
index 99765819889..b109e5b8c42 100644
--- a/test/e2e/tests/navbar/createNewDocumentNav.spec.ts
+++ b/test/e2e/tests/navbar/createNewDocumentNav.spec.ts
@@ -3,15 +3,15 @@ import {test} from '@sanity/test'
 
 test('create new document from menu button', async ({page, baseURL}) => {
   await page.goto(baseURL ?? '/test/content')
-  await page.getByTestId('new-document-button').click()
+  await page.getByLabel('Create new document').click()
   await page.getByTestId('new-document-button-search-input').fill('Author')
-  const authorLink = await page.getByRole('link', {name: 'Author', exact: true})
+  const authorLink = await page.getByTestId('create-new-author')
 
   expect(authorLink).toBeVisible()
 
   // Forcing due to aria-hidden=true
   // https://github.com/sanity-io/sanity/blob/6d5b4e88c4cb0fbd41fcebbaebabd88e9fac16b5/packages/sanity/src/core/components/commandList/CommandList.tsx#L596
-  await page.getByRole('link', {name: 'Author', exact: true}).click({force: true})
+  await page.getByTestId('create-new-author').click({force: true})
 
   await page.waitForSelector('data-testid=document-pane')
 
diff --git a/yarn.lock b/yarn.lock
index 3e5163c3350..e3032774aab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1502,17 +1502,20 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.53.0.tgz#bea56f2ed2b5baea164348ff4d5a879f6f81f20d"
   integrity sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==
 
-"@floating-ui/core@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
-  integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
 
-"@floating-ui/dom@^1.2.7":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.1.tgz#3dff8b1b429e60d36ce03281a1cc3cd923a8e7fa"
-  integrity sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==
+"@floating-ui/dom@^1.2.7", "@floating-ui/dom@^1.5.1":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
   dependencies:
-    "@floating-ui/core" "^1.3.1"
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
 
 "@floating-ui/react-dom@2.0.0":
   version "2.0.0"
@@ -1521,6 +1524,18 @@
   dependencies:
     "@floating-ui/dom" "^1.2.7"
 
+"@floating-ui/react-dom@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec"
+  integrity sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
+"@floating-ui/utils@^0.1.3":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -3564,7 +3579,12 @@
     get-it "^8.4.4"
     rxjs "^7.0.0"
 
-"@sanity/color@^2.1.20", "@sanity/color@^2.2.5":
+"@sanity/color@3.0.0-beta.9":
+  version "3.0.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@sanity/color/-/color-3.0.0-beta.9.tgz#e33a2138f71ca8cec2c264fb9ac44c680be50a9c"
+  integrity sha512-Mk7FRDtxz/U2SRlRM0BvUI62jU26W62aYsipaKFt/dk0rOyYa9yzfaojSM/QmW0E4W/nOw74RBA/HrapXUw+2Q==
+
+"@sanity/color@^2.2.5":
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/@sanity/color/-/color-2.2.5.tgz#6b28578573859495ed1ffd5491322cb8e90b3e07"
   integrity sha512-tTi22KoKuER3sldXYl4c1Dq2zU7tMLDkljFiaUKVkBbu4PBvRGCFw75kXZnD2b4Bsp6vin+7sI+AKdCKRhfRuw==
@@ -3631,10 +3651,10 @@
     "@sanity/ui" "^1.0.0"
     lodash "^4.17.21"
 
-"@sanity/groq-store@5.3.5":
-  version "5.3.5"
-  resolved "https://registry.yarnpkg.com/@sanity/groq-store/-/groq-store-5.3.5.tgz#e322898fd84289859eaee79bcaec6e3f5024daf5"
-  integrity sha512-djrCQvrWwK2By+/zoqPR+oR2vRT94OUptCR8zHTVjpKkSrBd3/fJAyFfB0CBj90tdz4PSGcYFnRFIslsEJLTPA==
+"@sanity/groq-store@5.3.6":
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/@sanity/groq-store/-/groq-store-5.3.6.tgz#6c22ae0ca93c28690d2ecd45b793bb735cb3128a"
+  integrity sha512-UFg+BjdCexdgwP+yM5qpGfeeR9fHqySPcZhaOwGQczMwE2jIebtuagpgW8eZ6DcdSRDomDTS/vWSoLjuxWWGSg==
   dependencies:
     mnemonist "0.39.6"
 
@@ -3643,7 +3663,7 @@
   resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-1.3.10.tgz#df934a94ae6669fe6b15515d800afb221cba0498"
   integrity sha512-5wVG/vIiGuGrSmq+Bl3PY7XDgQrGv0fyHdJI64FSulnr2wH3NMqZ6C59UFxnrZ93sr7kOt0zQFoNv2lkPBi0Cg==
 
-"@sanity/icons@^2", "@sanity/icons@^2.0.0", "@sanity/icons@^2.3.1", "@sanity/icons@^2.4.0", "@sanity/icons@^2.4.1", "@sanity/icons@^2.6.0", "@sanity/icons@^2.8.0":
+"@sanity/icons@^2", "@sanity/icons@^2.0.0", "@sanity/icons@^2.3.1", "@sanity/icons@^2.4.0", "@sanity/icons@^2.4.1", "@sanity/icons@^2.7.0", "@sanity/icons@^2.8.0":
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/@sanity/icons/-/icons-2.8.0.tgz#030d48c10347bf0c5b131d981574550059f11f29"
   integrity sha512-Q8aKg+KPJPDLDR+beYZhtB3gYdq7zIyZQZ6HjaB/63KuidHzkIFuhVv8JS/rJNwWOn5lTuzmd+L/+U/Pv3klWw==
@@ -3735,14 +3755,14 @@
     uuid "^9.0.1"
     zod "^3.22.4"
 
-"@sanity/presentation@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@sanity/presentation/-/presentation-1.2.1.tgz#965877831abd26024646af6efe0a36e588516df6"
-  integrity sha512-Bfb9rLcJu9DLBn1JDWZwkPfS8ItlJZoWPSdXnzQKPE4/RpNUX26xPhCkjxSH3Thg/ALMLNv3qZVHTPbFqqv1Tg==
+"@sanity/presentation@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@sanity/presentation/-/presentation-1.3.0.tgz#38b2c6c3ddcc91bdc55b8c4ed577cc64ab90bab4"
+  integrity sha512-G/fQzr113bbbsAmcsSYP/cQxL0ioJkYuDmAGNNesnD885rT1xhapI2GOhHccioCSojjUpiLGSvZYrxjniXQD4Q==
   dependencies:
-    "@sanity/groq-store" "5.3.5"
+    "@sanity/groq-store" "5.3.6"
     "@sanity/icons" "^2.8.0"
-    "@sanity/preview-url-secret" "^1.3.5"
+    "@sanity/preview-url-secret" "^1.3.6"
     "@sanity/ui" "^1.9.3"
     "@types/lodash.isequal" "^4.5.8"
     framer-motion "^10.16.16"
@@ -3751,10 +3771,10 @@
     rxjs "^7.8.1"
     suspend-react "0.1.3"
 
-"@sanity/preview-url-secret@^1.3.5":
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/@sanity/preview-url-secret/-/preview-url-secret-1.3.5.tgz#0831c2d9e9e430b37e8c08777bb29cabf2dd584d"
-  integrity sha512-3eXS/FxqYydl7cgJcGNlIzocT8L4UNCWGSp4q+vrhiixXqMZYNdG6aWiaOubT3bYn2ZlgtcbN60wiVdtwKlc1A==
+"@sanity/preview-url-secret@^1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@sanity/preview-url-secret/-/preview-url-secret-1.3.6.tgz#195122d018cf4f556c69d57e881ae4d8455413be"
+  integrity sha512-+9StAa0cyJFBpb4MiaQrcKrETNOz5NXUl8CoHX2A4cjbEDKaJW005gp8f3cS69RAUkaAyaHmuj82opVKgkA5KA==
   dependencies:
     "@sanity/uuid" "3.0.2"
 
@@ -3834,7 +3854,19 @@
     segmented-property "^3.0.3"
     vite "^4.4.9"
 
-"@sanity/ui@1.9.3", "@sanity/ui@^1", "@sanity/ui@^1.0.0", "@sanity/ui@^1.6.0", "@sanity/ui@^1.7.2", "@sanity/ui@^1.9.3":
+"@sanity/ui@2.0.0-beta.13":
+  version "2.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-2.0.0-beta.13.tgz#e3276374d28fcad30b41c3f867ac5a6ac1577482"
+  integrity sha512-neMMdrcUtcfLnzmRRrqLgdVOHpBqmFeN8wM2tu9fVOEDexXyL/CHFrOYlGG+A7JL6BJbOQxaryeFvmFKskZ2cA==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.4"
+    "@sanity/color" "3.0.0-beta.9"
+    "@sanity/icons" "^2.7.0"
+    csstype "^3.1.2"
+    framer-motion "^10.16.5"
+    react-refractor "^2.1.7"
+
+"@sanity/ui@^1", "@sanity/ui@^1.0.0", "@sanity/ui@^1.6.0", "@sanity/ui@^1.7.2", "@sanity/ui@^1.9.3":
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/@sanity/ui/-/ui-1.9.3.tgz#4af45902ac95801aa5ea57f377beaf3e3cb36339"
   integrity sha512-AdWEVFaK0Snk6xxP0lGPVP3QQYKwzkfGFpFZnL9d6UtWt8yeuS8BMLVAzmXzg14hrqH50ex9nvNl3eq6a0MWiw==
@@ -8390,7 +8422,7 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-framer-motion@^10.0.0, framer-motion@^10.16.16, framer-motion@^10.16.2:
+framer-motion@^10.0.0, framer-motion@^10.16.16, framer-motion@^10.16.2, framer-motion@^10.16.5:
   version "10.16.16"
   resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.16.tgz#a10a03e1190a717109163cfff212a84c8ad11b0c"
   integrity sha512-je6j91rd7NmUX7L1XHouwJ4v3R+SO4umso2LUcgOct3rHZ0PajZ80ETYZTajzEXEl9DlKyzjyt4AvGQ+lrebOw==