diff --git a/src/renderer/src/components/error-dialog.tsx b/src/renderer/src/components/error-dialog.tsx
index d4872f1e..64678757 100644
--- a/src/renderer/src/components/error-dialog.tsx
+++ b/src/renderer/src/components/error-dialog.tsx
@@ -1,9 +1,8 @@
-import { useState, type MouseEventHandler } from 'react'
+import { useState } from 'react'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import ButtonBase from '@mui/material/ButtonBase'
 import Collapse from '@mui/material/Collapse'
-import Dialog from '@mui/material/Dialog'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { alpha } from '@mui/material/styles'
@@ -12,119 +11,6 @@ import { defineMessages, useIntl } from 'react-intl'
 import { BLUE_GREY, DARK_GREY, LIGHT_GREY } from '../colors.ts'
 import { Icon } from './icon.tsx'
 
-export type Props = {
-	errorMessage?: string
-	onClose: MouseEventHandler<HTMLButtonElement>
-	open: boolean
-}
-
-/**
- * @deprecated Use `DecentDialog` with `ErrorDialogContent`
- */
-export function ErrorDialog({ errorMessage, onClose, open }: Props) {
-	const { formatMessage: t } = useIntl()
-
-	const [advancedExpanded, setAdvancedExpanded] = useState(false)
-
-	return (
-		<Dialog open={open} maxWidth="sm">
-			<Stack direction="column">
-				<Stack direction="column" gap={10} flex={1} padding={20}>
-					<Stack direction="column" alignItems="center" gap={4}>
-						<Icon name="material-error" color="error" size={72} />
-
-						<Typography variant="h1" fontWeight={500} textAlign="center">
-							{t(m.somethingWentWrong)}
-						</Typography>
-					</Stack>
-
-					{errorMessage ? (
-						<Stack direction="column" flex={1} gap={2}>
-							<ButtonBase
-								disableRipple
-								onClick={() => {
-									setAdvancedExpanded((prev) => !prev)
-								}}
-								sx={{
-									':hover, :focus': {
-										backgroundColor: alpha(BLUE_GREY, 0.2),
-										transition: (theme) =>
-											theme.transitions.create('background-color'),
-									},
-									padding: 2,
-									borderRadius: 2,
-								}}
-							>
-								<Stack
-									direction="row"
-									flex={1}
-									justifyContent={'space-between'}
-									sx={{
-										'&::marker': {
-											content: 'none',
-										},
-									}}
-								>
-									<Typography color="textSecondary">{t(m.advanced)}</Typography>
-									<Icon
-										name={
-											advancedExpanded
-												? 'material-expand-less'
-												: 'material-expand-more'
-										}
-										htmlColor={DARK_GREY}
-									/>
-								</Stack>
-							</ButtonBase>
-
-							<Collapse in={advancedExpanded}>
-								<Box
-									bgcolor={LIGHT_GREY}
-									padding={4}
-									border={`1px solid ${BLUE_GREY}`}
-									maxHeight={300}
-									overflow="auto"
-									borderRadius={2}
-								>
-									<Typography
-										component="pre"
-										variant="body2"
-										fontFamily="monospace"
-										whiteSpace="pre-wrap"
-										sx={{ overflowWrap: 'break-word' }}
-									>
-										{errorMessage}
-									</Typography>
-								</Box>
-							</Collapse>
-						</Stack>
-					) : null}
-				</Stack>
-
-				<Box
-					position="sticky"
-					bottom={0}
-					display="flex"
-					justifyContent="center"
-					padding={6}
-				>
-					<Button
-						fullWidth
-						variant="outlined"
-						onClick={(event) => {
-							setAdvancedExpanded(false)
-							onClose(event)
-						}}
-						sx={{ maxWidth: 400, alignSelf: 'center' }}
-					>
-						{t(m.close)}
-					</Button>
-				</Box>
-			</Stack>
-		</Dialog>
-	)
-}
-
 export function ErrorDialogContent({
 	errorMessage,
 	onClose,
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/download.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/download.tsx
index c5936f54..9f257394 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/download.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/download.tsx
@@ -17,7 +17,8 @@ import { defineMessages, useIntl } from 'react-intl'
 import * as v from 'valibot'
 
 import { BLUE_GREY, DARK_GREY, GREEN } from '../../../../../colors.ts'
-import { ErrorDialog } from '../../../../../components/error-dialog.tsx'
+import { DecentDialog } from '../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../components/error-dialog.tsx'
 import { Icon } from '../../../../../components/icon.tsx'
 import { useAppForm } from '../../../../../hooks/forms.ts'
 import { getLocaleStateQueryOptions } from '../../../../../lib/queries/app-settings.ts'
@@ -384,13 +385,20 @@ function DownloadForm({
 				</Stack>
 			</Stack>
 
-			<ErrorDialog
-				open={downloadData.status === 'error'}
-				errorMessage={downloadData.error?.toString()}
-				onClose={() => {
-					downloadData.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={downloadData.status === 'error' ? downloadData.error : null}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							downloadData.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/exchange/index.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/exchange/index.tsx
index 431e260a..7d23e1b0 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/exchange/index.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/exchange/index.tsx
@@ -27,7 +27,8 @@ import {
 	DARKER_ORANGE,
 	GREEN,
 } from '../../../../../../colors.ts'
-import { ErrorDialog } from '../../../../../../components/error-dialog.tsx'
+import { DecentDialog } from '../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../components/error-dialog.tsx'
 import { Icon } from '../../../../../../components/icon.tsx'
 import { ButtonLink } from '../../../../../../components/link.tsx'
 import { useIconSizeBasedOnTypography } from '../../../../../../hooks/icon.ts'
@@ -97,25 +98,6 @@ function RouteComponent() {
 	const startSync = useStartSync({ projectId })
 	const stopSync = useStopSync({ projectId })
 
-	const errorDialogProps =
-		startSync.status === 'error'
-			? {
-					open: true,
-					errorMessage: startSync.error.message,
-					onClose: () => {
-						startSync.reset()
-					},
-				}
-			: stopSync.status === 'error'
-				? {
-						open: true,
-						errorMessage: stopSync.error.message,
-						onClose: () => {
-							stopSync.reset()
-						},
-					}
-				: { open: false, onClose: () => {} }
-
 	const connectedPeersCount = syncState
 		? getConnectedPeersCount(syncState.remoteDeviceSyncState)
 		: 0
@@ -282,7 +264,32 @@ function RouteComponent() {
 				}
 			</Stack>
 
-			<ErrorDialog {...errorDialogProps} />
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					startSync.status === 'error'
+						? {
+								errorMessage: startSync.error.toString(),
+								onClose: () => {
+									startSync.reset()
+								},
+							}
+						: stopSync.status === 'error'
+							? {
+									open: true,
+									errorMessage: stopSync.error.toString(),
+									onClose: () => {
+										stopSync.reset()
+									},
+								}
+							: null
+				}
+			>
+				{({ errorMessage, onClose }) => (
+					<ErrorDialogContent errorMessage={errorMessage} onClose={onClose} />
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-edit-category-panel.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-edit-category-panel.tsx
index 758c6066..89ed91f5 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-edit-category-panel.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-edit-category-panel.tsx
@@ -20,15 +20,16 @@ import {
 } from '@tanstack/react-query'
 import { defineMessages, useIntl } from 'react-intl'
 
-import { BLUE_GREY } from '../../../../../../../colors'
+import { BLUE_GREY } from '../../../../../../../colors.ts'
 import {
 	CategoryIconContainer,
 	CategoryIconImage,
-} from '../../../../../../../components/category-icon'
-import { ErrorDialog } from '../../../../../../../components/error-dialog'
-import { Icon } from '../../../../../../../components/icon'
-import { getLocaleStateQueryOptions } from '../../../../../../../lib/queries/app-settings'
-import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations'
+} from '../../../../../../../components/category-icon.tsx'
+import { DecentDialog } from '../../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../../components/error-dialog.tsx'
+import { Icon } from '../../../../../../../components/icon.tsx'
+import { getLocaleStateQueryOptions } from '../../../../../../../lib/queries/app-settings.ts'
+import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations.ts'
 
 const UPDATE_OBSERVATION_CATEGORY_MUTATION_KEY = createGlobalMutationsKey([
 	'observations',
@@ -266,13 +267,24 @@ function CategoriesList({
 				})}
 			</Box>
 
-			<ErrorDialog
-				open={updateObservationCategory.status === 'error'}
-				errorMessage={updateObservationCategory.error?.toString()}
-				onClose={() => {
-					updateObservationCategory.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					updateObservationCategory.status === 'error'
+						? updateObservationCategory.error
+						: null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							updateObservationCategory.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-field-sections.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-field-sections.tsx
index afbcdacf..3f902c7b 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-field-sections.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-field-sections.tsx
@@ -6,21 +6,22 @@ import { captureException } from '@sentry/react'
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import { defineMessages, useIntl } from 'react-intl'
 
-import { ErrorDialog } from '../../../../../../../components/error-dialog'
-import {
-	type ObservationTagValue,
-	type TagValue,
-} from '../../../../../../../lib/comapeo'
-import { getLocaleStateQueryOptions } from '../../../../../../../lib/queries/app-settings'
-import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations'
-import { EditableSection } from './-components/editable-section'
+import { DecentDialog } from '../../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../../components/error-dialog.tsx'
+import type {
+	ObservationTagValue,
+	TagValue,
+} from '../../../../../../../lib/comapeo.ts'
+import { getLocaleStateQueryOptions } from '../../../../../../../lib/queries/app-settings.ts'
+import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations.ts'
+import { EditableSection } from './-components/editable-section.tsx'
 import {
 	MultiSelectFieldEditor,
 	NumberFieldEditor,
 	SingleSelectFieldEditor,
 	TextFieldEditor,
-} from './-field-editors'
-import { getDisplayedTagValue, type EditableField } from './-shared'
+} from './-field-editors.tsx'
+import { getDisplayedTagValue, type EditableField } from './-shared.ts'
 
 export function ReadOnlyFieldSection({
 	label,
@@ -155,9 +156,9 @@ export function EditableFieldSection({
 											updateEditState('success')
 										} catch (err) {
 											captureException(err)
-										} finally {
-											onStopEditMode()
 										}
+
+										onStopEditMode()
 									}}
 								/>
 							)
@@ -187,9 +188,9 @@ export function EditableFieldSection({
 											updateEditState('success')
 										} catch (err) {
 											captureException(err)
-										} finally {
-											onStopEditMode()
 										}
+
+										onStopEditMode()
 									}}
 								/>
 							)
@@ -219,9 +220,9 @@ export function EditableFieldSection({
 											updateEditState('success')
 										} catch (err) {
 											captureException(err)
-										} finally {
-											onStopEditMode()
 										}
+
+										onStopEditMode()
 									}}
 								/>
 							)
@@ -251,9 +252,9 @@ export function EditableFieldSection({
 											updateEditState('success')
 										} catch (err) {
 											captureException(err)
-										} finally {
-											onStopEditMode()
 										}
+
+										onStopEditMode()
 									}}
 								/>
 							)
@@ -300,13 +301,24 @@ export function EditableFieldSection({
 				}}
 			/>
 
-			<ErrorDialog
-				open={updateObservationField.status === 'error'}
-				errorMessage={updateObservationField.error?.toString()}
-				onClose={() => {
-					updateObservationField.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					updateObservationField.status === 'error'
+						? updateObservationField.error
+						: null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							updateObservationField.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-notes-section.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-notes-section.tsx
index 289b3c38..f166a63f 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-notes-section.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/-notes-section.tsx
@@ -9,12 +9,13 @@ import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import { defineMessages, useIntl } from 'react-intl'
 import * as v from 'valibot'
 
-import { ErrorDialog } from '../../../../../../../components/error-dialog'
-import { Icon } from '../../../../../../../components/icon'
-import { useAppForm } from '../../../../../../../hooks/forms'
-import { getLocaleStateQueryOptions } from '../../../../../../../lib/queries/app-settings'
-import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations'
-import { EditableSection } from './-components/editable-section'
+import { DecentDialog } from '../../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../../components/error-dialog.tsx'
+import { Icon } from '../../../../../../../components/icon.tsx'
+import { useAppForm } from '../../../../../../../hooks/forms.ts'
+import { getLocaleStateQueryOptions } from '../../../../../../../lib/queries/app-settings.ts'
+import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations.ts'
+import { EditableSection } from './-components/editable-section.tsx'
 
 export function ReadOnlyNotesSection({ notes }: { notes?: string }) {
 	const { formatMessage: t } = useIntl()
@@ -120,9 +121,9 @@ export function EditableNotesSection({
 									updateEditState('success')
 								} catch (err) {
 									captureException(err)
-								} finally {
-									onStopEditMode()
 								}
+
+								onStopEditMode()
 							}}
 						/>
 					)}
@@ -150,13 +151,24 @@ export function EditableNotesSection({
 				/>
 			</Box>
 
-			<ErrorDialog
-				open={updateObservationNotes.status === 'error'}
-				errorMessage={updateObservationNotes.error?.toString()}
-				onClose={() => {
-					updateObservationNotes.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					updateObservationNotes.status === 'error'
+						? updateObservationNotes.error
+						: null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							updateObservationNotes.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/attachments/$driveId.$type.$variant.$name.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/attachments/$driveId.$type.$variant.$name.tsx
index aad772de..a752de5f 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/attachments/$driveId.$type.$variant.$name.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/attachments/$driveId.$type.$variant.$name.tsx
@@ -22,19 +22,20 @@ import { createFileRoute, useRouter } from '@tanstack/react-router'
 import { defineMessages, useIntl } from 'react-intl'
 import * as v from 'valibot'
 
-import { PhotoAttachmentImage } from '../-components/photo-attachment-image'
-import { BLUE_GREY, GREEN, LIGHT_GREY } from '../../../../../../../../colors'
-import { ErrorBoundary } from '../../../../../../../../components/error-boundary'
-import { ErrorDialog } from '../../../../../../../../components/error-dialog'
-import { Icon } from '../../../../../../../../components/icon'
+import { PhotoAttachmentImage } from '../-components/photo-attachment-image.tsx'
+import { BLUE_GREY, GREEN, LIGHT_GREY } from '../../../../../../../../colors.ts'
+import { DecentDialog } from '../../../../../../../../components/decent-dialog.tsx'
+import { ErrorBoundary } from '../../../../../../../../components/error-boundary.tsx'
+import { ErrorDialogContent } from '../../../../../../../../components/error-dialog.tsx'
+import { Icon } from '../../../../../../../../components/icon.tsx'
 import {
 	COMAPEO_CORE_REACT_ROOT_QUERY_KEY,
 	COORDINATOR_ROLE_ID,
 	CREATOR_ROLE_ID,
-} from '../../../../../../../../lib/comapeo'
-import { getLocaleStateQueryOptions } from '../../../../../../../../lib/queries/app-settings'
-import { createGlobalMutationsKey } from '../../../../../../../../lib/queries/global-mutations'
-import { downloadURLMutationOptions } from '../../../../../../../../lib/queries/system'
+} from '../../../../../../../../lib/comapeo.ts'
+import { getLocaleStateQueryOptions } from '../../../../../../../../lib/queries/app-settings.ts'
+import { createGlobalMutationsKey } from '../../../../../../../../lib/queries/global-mutations.ts'
+import { downloadURLMutationOptions } from '../../../../../../../../lib/queries/system.ts'
 
 // TODO: Support video type
 const BlobIdSchema = v.variant('type', [
@@ -530,13 +531,22 @@ function DeleteButton({
 				type={blobId.type}
 			/>
 
-			<ErrorDialog
-				open={deleteAttachment.status === 'error'}
-				errorMessage={deleteAttachment?.error?.toString()}
-				onClose={() => {
-					deleteAttachment.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					deleteAttachment.status === 'error' ? deleteAttachment.error : null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							deleteAttachment.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
@@ -650,13 +660,20 @@ function DownloadButton({
 				<Typography id="download-button-label">{t(m.download)}</Typography>
 			</Stack>
 
-			<ErrorDialog
-				open={downloadUrl.status === 'error'}
-				errorMessage={downloadUrl?.error?.toString()}
-				onClose={() => {
-					downloadUrl.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={downloadUrl.status === 'error' ? downloadUrl.error : null}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							downloadUrl.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/index.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/index.tsx
index b35ed1ac..6dbd7dee 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/index.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/observations/$observationDocId/index.tsx
@@ -26,19 +26,20 @@ import {
 	DARKER_ORANGE,
 	GREEN,
 	WHITE,
-} from '../../../../../../../colors'
+} from '../../../../../../../colors.ts'
 import {
 	CategoryIconContainer,
 	CategoryIconImage,
-} from '../../../../../../../components/category-icon'
-import { ErrorBoundary } from '../../../../../../../components/error-boundary'
-import { ErrorDialog } from '../../../../../../../components/error-dialog'
-import { GenericRouteNotFoundComponent } from '../../../../../../../components/generic-route-not-found-component'
-import { Icon } from '../../../../../../../components/icon'
+} from '../../../../../../../components/category-icon.tsx'
+import { DecentDialog } from '../../../../../../../components/decent-dialog.tsx'
+import { ErrorBoundary } from '../../../../../../../components/error-boundary.tsx'
+import { ErrorDialogContent } from '../../../../../../../components/error-dialog.tsx'
+import { GenericRouteNotFoundComponent } from '../../../../../../../components/generic-route-not-found-component.tsx'
+import { Icon } from '../../../../../../../components/icon.tsx'
 import {
 	useGlobalEditingState,
 	useGlobalEditingStateActions,
-} from '../../../../../../../contexts/global-editing-state-store-context'
+} from '../../../../../../../contexts/global-editing-state-store-context.ts'
 import {
 	COMAPEO_CORE_REACT_ROOT_QUERY_KEY,
 	COORDINATOR_ROLE_ID,
@@ -47,25 +48,31 @@ import {
 	isAudioAttachment,
 	isPhotoAttachment,
 	type ObservationTagValue,
-} from '../../../../../../../lib/comapeo'
-import { formatCoords } from '../../../../../../../lib/coordinate-format'
-import { customNotFound } from '../../../../../../../lib/navigation'
+} from '../../../../../../../lib/comapeo.ts'
+import { formatCoords } from '../../../../../../../lib/coordinate-format.ts'
+import { customNotFound } from '../../../../../../../lib/navigation.ts'
 import {
 	getCoordinateFormatQueryOptions,
 	getLocaleStateQueryOptions,
-} from '../../../../../../../lib/queries/app-settings'
-import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations'
-import { EditCategoryPanel } from './-edit-category-panel'
-import { EditableFieldSection, ReadOnlyFieldSection } from './-field-sections'
-import { EditableNotesSection, ReadOnlyNotesSection } from './-notes-section'
+} from '../../../../../../../lib/queries/app-settings.ts'
+import { createGlobalMutationsKey } from '../../../../../../../lib/queries/global-mutations.ts'
+import { EditCategoryPanel } from './-edit-category-panel.tsx'
+import {
+	EditableFieldSection,
+	ReadOnlyFieldSection,
+} from './-field-sections.tsx'
+import {
+	EditableNotesSection,
+	ReadOnlyNotesSection,
+} from './-notes-section.tsx'
 import {
 	ObservationAttachmentError,
 	ObservationAttachmentPending,
 	ObservationAudioAttachmentPreview,
 	ObservationPhotoAttachmentPreview,
 	ObservationUnsupportedAttachmentPreview,
-} from './-observation-attachment'
-import { getDisplayedTagValue, type EditableField } from './-shared'
+} from './-observation-attachment.tsx'
+import { getDisplayedTagValue, type EditableField } from './-shared.ts'
 
 const SearchParamsSchema = v.object({
 	fromTrackDocId: v.optional(v.string()),
@@ -990,13 +997,22 @@ function ObservationDetailsPanel({
 				) : null}
 			</Stack>
 
-			<ErrorDialog
-				open={deleteObservation.status === 'error'}
-				errorMessage={deleteObservation.error?.toString()}
-				onClose={() => {
-					deleteObservation.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					deleteObservation.status === 'error' ? deleteObservation.error : null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							deleteObservation.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/settings/categories.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/settings/categories.tsx
index 50be0123..4a6ed879 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/settings/categories.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/settings/categories.tsx
@@ -15,12 +15,13 @@ import { useMutation } from '@tanstack/react-query'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 import { defineMessages, useIntl } from 'react-intl'
 
-import { BLUE_GREY, DARK_GREY, DARK_ORANGE } from '../../../../../../colors'
-import { ErrorDialog } from '../../../../../../components/error-dialog'
-import { Icon } from '../../../../../../components/icon'
-import { COMAPEO_CORE_REACT_ROOT_QUERY_KEY } from '../../../../../../lib/comapeo'
-import { selectFileMutationOptions } from '../../../../../../lib/queries/file-system'
-import { createGlobalMutationsKey } from '../../../../../../lib/queries/global-mutations'
+import { BLUE_GREY, DARK_GREY, DARK_ORANGE } from '../../../../../../colors.ts'
+import { DecentDialog } from '../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../components/error-dialog.tsx'
+import { Icon } from '../../../../../../components/icon.tsx'
+import { COMAPEO_CORE_REACT_ROOT_QUERY_KEY } from '../../../../../../lib/comapeo.ts'
+import { selectFileMutationOptions } from '../../../../../../lib/queries/file-system.ts'
+import { createGlobalMutationsKey } from '../../../../../../lib/queries/global-mutations.ts'
 
 export const Route = createFileRoute(
 	'/app/projects/$projectId/_main-tabs/settings/categories',
@@ -259,13 +260,24 @@ function RouteComponent() {
 				</Stack>
 			</Stack>
 
-			<ErrorDialog
-				open={selectAndImportMutation.status === 'error'}
-				errorMessage={selectAndImportMutation.error?.toString()}
-				onClose={() => {
-					selectAndImportMutation.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					selectAndImportMutation.status === 'error'
+						? selectAndImportMutation.error
+						: null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							selectAndImportMutation.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/settings/info.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/settings/info.tsx
index 46f29070..e1d950f3 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/settings/info.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/settings/info.tsx
@@ -26,20 +26,21 @@ import {
 	PROJECT_GREY,
 	PROJECT_ORANGE,
 	PROJECT_RED,
-} from '../../../../../../colors'
-import { ErrorDialog } from '../../../../../../components/error-dialog'
-import { Icon } from '../../../../../../components/icon'
-import { useAppForm } from '../../../../../../hooks/forms'
-import { COMAPEO_CORE_REACT_ROOT_QUERY_KEY } from '../../../../../../lib/comapeo'
+} from '../../../../../../colors.ts'
+import { DecentDialog } from '../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../components/error-dialog.tsx'
+import { Icon } from '../../../../../../components/icon.tsx'
+import { useAppForm } from '../../../../../../hooks/forms.ts'
+import { COMAPEO_CORE_REACT_ROOT_QUERY_KEY } from '../../../../../../lib/comapeo.ts'
 import {
 	PROJECT_DESCRIPTION_MAX_LENGTH_GRAPHEMES,
 	PROJECT_NAME_MAX_LENGTH_GRAPHEMES,
-} from '../../../../../../lib/constants'
+} from '../../../../../../lib/constants.ts'
 import {
 	createProjectColorSchema,
 	createProjectDescriptionSchema,
 	createProjectNameSchema,
-} from '../../../../../../lib/validators/project'
+} from '../../../../../../lib/validators/project.ts'
 
 export const Route = createFileRoute(
 	'/app/projects/$projectId/_main-tabs/settings/info',
@@ -476,13 +477,24 @@ function RouteComponent() {
 				</Stack>
 			</Stack>
 
-			<ErrorDialog
-				open={setProjectSettings.status === 'error'}
-				errorMessage={setProjectSettings.error?.toString()}
-				onClose={() => {
-					setProjectSettings.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					setProjectSettings.status === 'error'
+						? setProjectSettings.error
+						: null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							setProjectSettings.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/team/invite/devices/$deviceId/send.tsx b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/team/invite/devices/$deviceId/send.tsx
index b1c6b671..952ff4ed 100644
--- a/src/renderer/src/routes/app/projects/$projectId/_main-tabs/team/invite/devices/$deviceId/send.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/_main-tabs/team/invite/devices/$deviceId/send.tsx
@@ -26,7 +26,8 @@ import {
 	GREEN,
 	WHITE,
 } from '../../../../../../../../../colors.ts'
-import { ErrorDialog } from '../../../../../../../../../components/error-dialog.tsx'
+import { DecentDialog } from '../../../../../../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../../../../../../components/error-dialog.tsx'
 import { GenericRoutePendingComponent } from '../../../../../../../../../components/generic-route-pending-component.tsx'
 import { Icon } from '../../../../../../../../../components/icon.tsx'
 import { ButtonLink } from '../../../../../../../../../components/link.tsx'
@@ -75,14 +76,13 @@ function RouteComponent() {
 
 	const { role } = Route.useSearch()
 
-	const sendInvite = useSendInvite({ projectId })
-
-	const invite = useMutation({
+	const _sendInvite = useSendInvite({ projectId })
+	const sendInvite = useMutation({
 		mutationKey: SEND_INVITE_GLOBAL_MUTATIONS_KEY,
 		mutationFn: async (
-			variables: Parameters<(typeof sendInvite)['mutateAsync']>[0],
+			variables: Parameters<(typeof _sendInvite)['mutateAsync']>[0],
 		) => {
-			return sendInvite.mutateAsync(variables)
+			return _sendInvite.mutateAsync(variables)
 		},
 	})
 
@@ -112,36 +112,49 @@ function RouteComponent() {
 		[deviceId, cancelInvite],
 	)
 
-	const deferredInviteStatus = useDeferredValue(invite.status)
+	const deferredInviteStatus = useDeferredValue(sendInvite.status)
 
 	if (deferredInviteStatus === 'idle' || deferredInviteStatus === 'error') {
 		return (
-			<ReviewInvitation
-				error={invite.error}
-				onDismissError={() => {
-					invite.reset()
-				}}
-				onSendInvite={() => {
-					invite.mutate({
-						deviceId,
-						roleId:
-							role === 'coordinator' ? COORDINATOR_ROLE_ID : MEMBER_ROLE_ID,
-					})
-				}}
-			/>
+			<>
+				<ReviewInvitation
+					onSendInvite={() => {
+						sendInvite.mutate({
+							deviceId,
+							roleId:
+								role === 'coordinator' ? COORDINATOR_ROLE_ID : MEMBER_ROLE_ID,
+						})
+					}}
+				/>
+
+				<DecentDialog
+					fullWidth
+					maxWidth="sm"
+					value={sendInvite.status === 'error' ? sendInvite.error : null}
+				>
+					{(error) => (
+						<ErrorDialogContent
+							errorMessage={error.toString()}
+							onClose={() => {
+								sendInvite.reset()
+							}}
+						/>
+					)}
+				</DecentDialog>
+			</>
 		)
 	}
 
 	if (deferredInviteStatus === 'pending') {
 		return (
 			<InvitePending
-				sentAt={invite.submittedAt}
+				sentAt={sendInvite.submittedAt}
 				onCancelInvite={() => {
 					cancelInvite.mutate(
 						{ deviceId },
 						{
 							onSettled: () => {
-								invite.reset()
+								sendInvite.reset()
 							},
 						},
 					)
@@ -150,11 +163,11 @@ function RouteComponent() {
 		)
 	}
 
-	switch (invite.data) {
+	switch (sendInvite.data) {
 		case 'REJECT': {
 			return (
 				<InviteRejected
-					deviceId={invite.variables.deviceId}
+					deviceId={sendInvite.variables.deviceId}
 					projectId={projectId}
 				/>
 			)
@@ -164,7 +177,7 @@ function RouteComponent() {
 			return (
 				<Suspense fallback={<GenericRoutePendingComponent />}>
 					<InviteAccepted
-						deviceId={invite.variables.deviceId}
+						deviceId={sendInvite.variables.deviceId}
 						projectId={projectId}
 					/>
 				</Suspense>
@@ -183,15 +196,7 @@ function RouteComponent() {
 	}
 }
 
-function ReviewInvitation({
-	error,
-	onDismissError,
-	onSendInvite,
-}: {
-	error: Error | null
-	onDismissError: () => void
-	onSendInvite: () => void
-}) {
+function ReviewInvitation({ onSendInvite }: { onSendInvite: () => void }) {
 	const { formatMessage: t } = useIntl()
 
 	const router = useRouter()
@@ -209,115 +214,105 @@ function ReviewInvitation({
 	const peer = updatedPeer || peerOnLoad
 
 	return (
-		<>
-			<Stack direction="column" flex={1} overflow="auto">
-				<Stack
-					direction="row"
-					alignItems="center"
-					component="nav"
-					gap={4}
-					padding={4}
-					borderBottom={`1px solid ${BLUE_GREY}`}
+		<Stack direction="column" flex={1} overflow="auto">
+			<Stack
+				direction="row"
+				alignItems="center"
+				component="nav"
+				gap={4}
+				padding={4}
+				borderBottom={`1px solid ${BLUE_GREY}`}
+			>
+				<IconButton
+					onClick={() => {
+						router.navigate({
+							to: '/app/projects/$projectId/team/invite/devices/$deviceId/role',
+							params: { projectId, deviceId },
+							replace: true,
+						})
+					}}
 				>
-					<IconButton
-						onClick={() => {
-							router.navigate({
-								to: '/app/projects/$projectId/team/invite/devices/$deviceId/role',
-								params: { projectId, deviceId },
-								replace: true,
-							})
-						}}
+					<Icon name="material-arrow-back" size={30} />
+				</IconButton>
+
+				<Typography variant="h1" fontWeight={500}>
+					{t(m.navTitle)}
+				</Typography>
+			</Stack>
+
+			<Stack
+				direction="column"
+				flex={1}
+				overflow="auto"
+				justifyContent="space-between"
+			>
+				<Box padding={6}>
+					<Stack
+						direction="column"
+						padding={6}
+						border={`1px solid ${BLUE_GREY}`}
+						borderRadius={2}
+						justifyContent="center"
+						alignItems="center"
+						gap={4}
 					>
-						<Icon name="material-arrow-back" size={30} />
-					</IconButton>
+						<DeviceIcon deviceType={peer.deviceType} size="48px" />
 
-					<Typography variant="h1" fontWeight={500}>
-						{t(m.navTitle)}
-					</Typography>
-				</Stack>
+						{peer.status === 'disconnected' ? <DisconnectedIndicator /> : null}
 
-				<Stack
-					direction="column"
-					flex={1}
-					overflow="auto"
-					justifyContent="space-between"
-				>
-					<Box padding={6}>
-						<Stack
-							direction="column"
-							padding={6}
-							border={`1px solid ${BLUE_GREY}`}
-							borderRadius={2}
-							justifyContent="center"
-							alignItems="center"
-							gap={4}
-						>
-							<DeviceIcon deviceType={peer.deviceType} size="48px" />
-
-							{peer.status === 'disconnected' ? (
-								<DisconnectedIndicator />
-							) : null}
-
-							<Typography textAlign="center">
-								{t(m.deviceBeingInvited, {
-									name: (
-										<Typography
-											variant="inherit"
-											component="span"
-											fontSize={(theme) => theme.typography.h1.fontSize}
-											fontWeight={500}
-										>
-											{peer.name}
-										</Typography>
-									),
-									role: (
-										<Typography
-											variant="inherit"
-											component="span"
-											fontSize={(theme) => theme.typography.h2.fontSize}
-											fontWeight={500}
-										>
-											{role === 'coordinator'
-												? t(m.coordinator)
-												: t(m.participant)}
-										</Typography>
-									),
-								})}
-							</Typography>
-						</Stack>
-					</Box>
+						<Typography textAlign="center">
+							{t(m.deviceBeingInvited, {
+								name: (
+									<Typography
+										variant="inherit"
+										component="span"
+										fontSize={(theme) => theme.typography.h1.fontSize}
+										fontWeight={500}
+									>
+										{peer.name}
+									</Typography>
+								),
+								role: (
+									<Typography
+										variant="inherit"
+										component="span"
+										fontSize={(theme) => theme.typography.h2.fontSize}
+										fontWeight={500}
+									>
+										{role === 'coordinator'
+											? t(m.coordinator)
+											: t(m.participant)}
+									</Typography>
+								),
+							})}
+						</Typography>
+					</Stack>
+				</Box>
 
-					<Box
-						display="flex"
-						flexDirection="row"
-						justifyContent="center"
-						paddingInline={6}
-						paddingBlockEnd={6}
-						position="sticky"
-						bottom={0}
-						zIndex={1}
+				<Box
+					display="flex"
+					flexDirection="row"
+					justifyContent="center"
+					paddingInline={6}
+					paddingBlockEnd={6}
+					position="sticky"
+					bottom={0}
+					zIndex={1}
+				>
+					<Button
+						fullWidth
+						variant="contained"
+						startIcon={<Icon name="material-send-filled" />}
+						sx={{ maxWidth: 400 }}
+						onClick={() => {
+							onSendInvite()
+						}}
 					>
-						<Button
-							fullWidth
-							variant="contained"
-							startIcon={<Icon name="material-send-filled" />}
-							sx={{ maxWidth: 400 }}
-							onClick={() => {
-								onSendInvite()
-							}}
-						>
-							{t(m.sendInvite)}
-						</Button>
-					</Box>
-				</Stack>
+						{t(m.sendInvite)}
+					</Button>
+				</Box>
 			</Stack>
-
-			<ErrorDialog
-				open={!!error}
-				errorMessage={error?.toString()}
-				onClose={onDismissError}
-			/>
-		</>
+		</Stack>
 	)
 }
 
diff --git a/src/renderer/src/routes/app/projects/$projectId/test-data.tsx b/src/renderer/src/routes/app/projects/$projectId/test-data.tsx
index 23c4d04e..d369d1b4 100644
--- a/src/renderer/src/routes/app/projects/$projectId/test-data.tsx
+++ b/src/renderer/src/routes/app/projects/$projectId/test-data.tsx
@@ -29,10 +29,8 @@ import * as v from 'valibot'
 
 import { TwoPanelLayout } from '../../-components/two-panel-layout.tsx'
 import { BLACK, BLUE_GREY } from '../../../../colors.ts'
-import {
-	ErrorDialog,
-	type Props as ErrorDialogProps,
-} from '../../../../components/error-dialog.tsx'
+import { DecentDialog } from '../../../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../../../components/error-dialog.tsx'
 import { GenericRoutePendingComponent } from '../../../../components/generic-route-pending-component.tsx'
 import { Map } from '../../../../components/map.tsx'
 import { useAppForm } from '../../../../hooks/forms.ts'
@@ -214,25 +212,6 @@ function RouteComponent() {
 		})
 	}, [boundedDistance, coordinates])
 
-	const errorDialogProps: ErrorDialogProps =
-		createTestObservations.status === 'error'
-			? {
-					errorMessage: createTestObservations.error.toString(),
-					onClose: () => {
-						createTestObservations.reset()
-					},
-					open: true,
-				}
-			: createTestTrack.status === 'error'
-				? {
-						open: true,
-						errorMessage: createTestTrack.error.toString(),
-						onClose: () => {
-							createTestTrack.reset()
-						},
-					}
-				: { open: false, onClose: () => {} }
-
 	return (
 		<>
 			<TwoPanelLayout
@@ -515,7 +494,31 @@ function RouteComponent() {
 				anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
 			/>
 
-			<ErrorDialog {...errorDialogProps} />
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					createTestObservations.status === 'error'
+						? {
+								errorMessage: createTestObservations.error.toString(),
+								onClose: () => {
+									createTestObservations.reset()
+								},
+							}
+						: createTestTrack.status === 'error'
+							? {
+									errorMessage: createTestTrack.error.toString(),
+									onClose: () => {
+										createTestTrack.reset()
+									},
+								}
+							: null
+				}
+			>
+				{({ errorMessage, onClose }) => (
+					<ErrorDialogContent errorMessage={errorMessage} onClose={onClose} />
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/onboarding/device-name.tsx b/src/renderer/src/routes/onboarding/device-name.tsx
index f243d372..5ecaa4d9 100644
--- a/src/renderer/src/routes/onboarding/device-name.tsx
+++ b/src/renderer/src/routes/onboarding/device-name.tsx
@@ -12,7 +12,8 @@ import { defineMessages, useIntl } from 'react-intl'
 import * as v from 'valibot'
 
 import { DARKER_ORANGE, LIGHT_GREY, WHITE } from '../../colors.ts'
-import { ErrorDialog } from '../../components/error-dialog.tsx'
+import { DecentDialog } from '../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../components/error-dialog.tsx'
 import { Icon } from '../../components/icon.tsx'
 import { useAppForm } from '../../hooks/forms.ts'
 import { COMAPEO_CORE_REACT_ROOT_QUERY_KEY } from '../../lib/comapeo.ts'
@@ -205,13 +206,22 @@ function RouteComponent() {
 				</Box>
 			</Stack>
 
-			<ErrorDialog
-				open={setOwnDeviceInfo.status === 'error'}
-				errorMessage={setOwnDeviceInfo.error?.toString()}
-				onClose={() => {
-					setOwnDeviceInfo.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					setOwnDeviceInfo.status === 'error' ? setOwnDeviceInfo.error : null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							setOwnDeviceInfo.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }
diff --git a/src/renderer/src/routes/onboarding/privacy-policy.tsx b/src/renderer/src/routes/onboarding/privacy-policy.tsx
index 9dd760c2..e73c7112 100644
--- a/src/renderer/src/routes/onboarding/privacy-policy.tsx
+++ b/src/renderer/src/routes/onboarding/privacy-policy.tsx
@@ -16,13 +16,14 @@ import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
 import { defineMessages, useIntl } from 'react-intl'
 
-import { BLUE_GREY, DARK_GREY, LIGHT_GREY } from '../../colors'
-import { ErrorDialog } from '../../components/error-dialog'
-import { Icon } from '../../components/icon'
+import { BLUE_GREY, DARK_GREY, LIGHT_GREY } from '../../colors.ts'
+import { DecentDialog } from '../../components/decent-dialog.tsx'
+import { ErrorDialogContent } from '../../components/error-dialog.tsx'
+import { Icon } from '../../components/icon.tsx'
 import {
 	getDiagnosticsEnabledQueryOptions,
 	setDiagnosticsEnabledMutationOptions,
-} from '../../lib/queries/app-settings'
+} from '../../lib/queries/app-settings.ts'
 
 export const Route = createFileRoute('/onboarding/privacy-policy')({
 	loader: async ({ context }) => {
@@ -238,13 +239,24 @@ function RouteComponent() {
 				</Container>
 			</Stack>
 
-			<ErrorDialog
-				open={setDiagnosticsEnabledMutation.status === 'error'}
-				errorMessage={setDiagnosticsEnabledMutation.error?.toString()}
-				onClose={() => {
-					setDiagnosticsEnabledMutation.reset()
-				}}
-			/>
+			<DecentDialog
+				fullWidth
+				maxWidth="sm"
+				value={
+					setDiagnosticsEnabledMutation.status === 'error'
+						? setDiagnosticsEnabledMutation.error
+						: null
+				}
+			>
+				{(error) => (
+					<ErrorDialogContent
+						errorMessage={error.toString()}
+						onClose={() => {
+							setDiagnosticsEnabledMutation.reset()
+						}}
+					/>
+				)}
+			</DecentDialog>
 		</>
 	)
 }