diff --git a/packages/compass-components/src/components/document-list/document-edit-actions-footer.tsx b/packages/compass-components/src/components/document-list/document-edit-actions-footer.tsx
index 6468e605f5b..4dffbae7253 100644
--- a/packages/compass-components/src/components/document-list/document-edit-actions-footer.tsx
+++ b/packages/compass-components/src/components/document-list/document-edit-actions-footer.tsx
@@ -6,6 +6,7 @@ import { css } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
 import { useDarkMode } from '../../hooks/use-theme';
+import { showErrorDetails } from '../../hooks/use-error-details';
 
 type Status =
   | 'Initial'
@@ -81,13 +82,30 @@ function useHadronDocumentStatus(
       ? 'Deleting'
       : 'Initial';
   });
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [error, setError] = useState<{
+    message: string;
+    details?: Record<string, unknown>;
+  } | null>(null);
   const invalidElementsRef = useRef(new Set());
 
-  const updateStatus = useCallback((newStatus: Status, errorMessage = null) => {
-    setStatus(newStatus);
-    setErrorMessage(errorMessage);
-  }, []);
+  const updateStatus = useCallback(
+    (
+      newStatus: Status,
+      error: Error | null = null,
+      errorDetails?: Record<string, unknown>
+    ) => {
+      setStatus(newStatus);
+      setError(
+        error
+          ? {
+              message: error?.message,
+              details: errorDetails,
+            }
+          : null
+      );
+    },
+    []
+  );
 
   useEffect(() => {
     if (status !== 'Initial') {
@@ -128,8 +146,11 @@ function useHadronDocumentStatus(
     const onUpdateSuccess = () => {
       updateStatus('UpdateSuccess');
     };
-    const onUpdateError = (err: string) => {
-      updateStatus('UpdateError', err);
+    const onUpdateError = (
+      err: Error,
+      errorDetails?: Record<string, unknown>
+    ) => {
+      updateStatus('UpdateError', err, errorDetails);
     };
     const onRemoveStart = () => {
       updateStatus('DeleteStart');
@@ -137,8 +158,11 @@ function useHadronDocumentStatus(
     const onRemoveSuccess = () => {
       updateStatus('DeleteSuccess');
     };
-    const onRemoveError = (err: string) => {
-      updateStatus('DeleteError', err);
+    const onRemoveError = (
+      err: Error,
+      errorDetails?: Record<string, unknown>
+    ) => {
+      updateStatus('DeleteError', err, errorDetails);
     };
 
     doc.on(Element.Events.Added, onUpdate);
@@ -183,30 +207,30 @@ function useHadronDocumentStatus(
     }
   }, [status, updateStatus]);
 
-  return { status, updateStatus, errorMessage };
+  return { status, updateStatus, error };
 }
 
 const container = css({
   display: 'flex',
-  paddingTop: spacing[2],
-  paddingRight: spacing[2],
-  paddingBottom: spacing[2],
-  paddingLeft: spacing[3],
+  paddingTop: spacing[200],
+  paddingRight: spacing[200],
+  paddingBottom: spacing[200],
+  paddingLeft: spacing[400],
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
   borderBottomLeftRadius: 'inherit',
   borderBottomRightRadius: 'inherit',
 });
 
 const message = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
+  overflow: 'scroll',
 });
 
 const buttonGroup = css({
   display: 'flex',
   marginLeft: 'auto',
-  gap: spacing[2],
+  gap: spacing[200],
+  flexShrink: 0,
 });
 
 const button = css({
@@ -275,7 +299,7 @@ const EditActionsFooter: React.FunctionComponent<{
   const {
     status: _status,
     updateStatus,
-    errorMessage,
+    error,
   } = useHadronDocumentStatus(doc, editing, deleting);
 
   const darkMode = useDarkMode();
@@ -303,10 +327,25 @@ const EditActionsFooter: React.FunctionComponent<{
       data-status={status}
     >
       <div className={message} data-testid="document-footer-message">
-        {errorMessage ?? statusMessage}
+        {error?.message ?? statusMessage}
       </div>
       {!isSuccess(status) && (
         <div className={buttonGroup}>
+          {error?.details && (
+            <Button
+              className={button}
+              size="xsmall"
+              onClick={() =>
+                showErrorDetails({
+                  details: error.details!,
+                  closeAction: 'close',
+                })
+              }
+              data-testid="edit-actions-footer-error-details-button"
+            >
+              VIEW ERROR DETAILS
+            </Button>
+          )}
           <Button
             type="button"
             size="xsmall"
diff --git a/packages/compass-components/src/components/modals/error-details-modal.tsx b/packages/compass-components/src/components/modals/error-details-modal.tsx
deleted file mode 100644
index c21e5fe05e5..00000000000
--- a/packages/compass-components/src/components/modals/error-details-modal.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { css, cx } from '@leafygreen-ui/emotion';
-
-import { Modal } from './modal';
-import { Button, Code, ModalFooter } from '../leafygreen';
-import { ModalBody } from './modal-body';
-import { ModalHeader } from './modal-header';
-
-const leftDirectionFooter = css({
-  justifyContent: 'left',
-});
-
-type ModalProps = React.ComponentProps<typeof Modal>;
-type ErrorDetailsModalProps = Omit<ModalProps, 'children'> & {
-  title?: string;
-  subtitle?: string;
-  details?: Record<string, unknown>;
-  closeAction: 'close' | 'back';
-  onClose: () => void;
-};
-
-function ErrorDetailsModal({
-  title = 'Error details',
-  subtitle,
-  details,
-  closeAction,
-  onClose,
-  open,
-  ...modalProps
-}: ErrorDetailsModalProps) {
-  const prettyDetails = useMemo(
-    () => JSON.stringify(details, undefined, 2),
-    [details]
-  );
-
-  return (
-    <Modal
-      setOpen={onClose}
-      initialFocus="#error-details-json"
-      open={open}
-      {...modalProps}
-    >
-      <ModalHeader title={title} subtitle={subtitle} />
-      <ModalBody>
-        <Code
-          language="json"
-          data-testid="error-details-json"
-          id="error-details-json"
-        >
-          {prettyDetails}
-        </Code>
-      </ModalBody>
-      <ModalFooter
-        className={cx(closeAction === 'back' && leftDirectionFooter)}
-      >
-        <Button
-          data-testid={`error-details-${closeAction}-button`}
-          onClick={onClose}
-          variant="default"
-        >
-          {closeAction === 'back' ? 'Back' : 'Close'}
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
-
-export { ErrorDetailsModal };
diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx
index cc94cff7027..1fd30fd1bfa 100644
--- a/packages/compass-components/src/hooks/use-confirmation.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.tsx
@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Variant as ConfirmationModalVariant } from '@leafygreen-ui/confirmation-modal';
 import ConfirmationModal from '../components/modals/confirmation-modal';
 import { css } from '@leafygreen-ui/emotion';
+import type { ButtonProps } from '@leafygreen-ui/button';
 
 export { ConfirmationModalVariant };
 
@@ -11,6 +12,7 @@ type ConfirmationProperties = Partial<
   Pick<ConfirmationModalProps, 'title' | 'variant' | 'requiredInputText'>
 > & {
   buttonText?: React.ReactNode;
+  confirmButtonProps?: Omit<ButtonProps, 'onClick'>;
   hideConfirmButton?: boolean;
   hideCancelButton?: boolean;
   description?: React.ReactNode;
@@ -100,8 +102,28 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
     });
   const callbackRef = useRef<ConfirmationCallback>();
 
+  const listenerRef =
+    useRef<(event: CustomEvent<ShowConfirmationEventDetail>) => void>();
+
   const contextValue = React.useMemo(
-    () => ({ showConfirmation, isMounted: true }),
+    () => ({
+      showConfirmation: (props: ConfirmationProperties) => {
+        return new Promise<boolean>((resolve, reject) => {
+          const event = new CustomEvent<ShowConfirmationEventDetail>(
+            'show-confirmation',
+            {
+              detail: {
+                props: { ...props, confirmationId: ++confirmationId },
+                resolve,
+                reject,
+              },
+            }
+          );
+          listenerRef.current?.(event);
+        });
+      },
+      isMounted: true,
+    }),
     []
   );
 
@@ -127,6 +149,7 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
       };
       props.signal?.addEventListener('abort', onAbort);
     };
+    listenerRef.current = listener;
     globalConfirmation.addEventListener('show-confirmation', listener);
     return () => {
       globalConfirmation.removeEventListener('show-confirmation', listener);
@@ -170,6 +193,7 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
             : undefined,
           children: confirmationProps.buttonText ?? 'Confirm',
           onClick: handleConfirm,
+          ...confirmationProps.confirmButtonProps,
         }}
         cancelButtonProps={{
           className: confirmationProps.hideCancelButton
diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx
new file mode 100644
index 00000000000..99302afa1c2
--- /dev/null
+++ b/packages/compass-components/src/hooks/use-error-details.tsx
@@ -0,0 +1,38 @@
+import {
+  type showConfirmation as originalShowConfirmation,
+  showConfirmation,
+} from './use-confirmation';
+import { Code } from '../components/leafygreen';
+import React from 'react';
+import { ButtonVariant } from '..';
+
+const getShowErrorDetails = (
+  showConfirmation: typeof originalShowConfirmation
+) => {
+  return ({
+    details,
+    closeAction,
+  }: {
+    details: Record<string, unknown>;
+    closeAction: 'back' | 'close';
+  }) =>
+    void showConfirmation({
+      title: 'Error details',
+      description: (
+        <Code
+          language="json"
+          data-testid="error-details-json"
+          id="error-details-json"
+        >
+          {JSON.stringify(details, undefined, 2)}
+        </Code>
+      ),
+      hideCancelButton: true,
+      buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
+      confirmButtonProps: {
+        variant: ButtonVariant.Default,
+      },
+    });
+};
+
+export const showErrorDetails = getShowErrorDetails(showConfirmation);
diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
index d8c05eb97be..2b47da41542 100644
--- a/packages/compass-components/src/index.ts
+++ b/packages/compass-components/src/index.ts
@@ -92,7 +92,6 @@ export { ModalBody } from './components/modals/modal-body';
 export { ModalHeader } from './components/modals/modal-header';
 export { FormModal } from './components/modals/form-modal';
 export { InfoModal } from './components/modals/info-modal';
-export { ErrorDetailsModal } from './components/modals/error-details-modal';
 
 export type {
   FileInputBackend,
@@ -183,6 +182,7 @@ export {
   ConfirmationModalArea,
   showConfirmation,
 } from './hooks/use-confirmation';
+export { showErrorDetails } from './hooks/use-error-details';
 export {
   useHotkeys,
   formatHotkey,
diff --git a/packages/compass-crud/src/actions/index.ts b/packages/compass-crud/src/actions/index.ts
index 4eb718b3053..5600c4c103c 100644
--- a/packages/compass-crud/src/actions/index.ts
+++ b/packages/compass-crud/src/actions/index.ts
@@ -19,8 +19,6 @@ const configureActions = () => {
     'toggleInsertDocumentView',
     'toggleInsertDocument',
     'openInsertDocumentDialog',
-    'openErrorDetailsDialog',
-    'closeErrorDetailsDialog',
     'openBulkUpdateModal',
     'updateBulkUpdatePreview',
     'runBulkUpdate',
diff --git a/packages/compass-crud/src/components/document-json-view.tsx b/packages/compass-crud/src/components/document-json-view.tsx
index 0cabaaf236d..700857879de 100644
--- a/packages/compass-crud/src/components/document-json-view.tsx
+++ b/packages/compass-crud/src/components/document-json-view.tsx
@@ -33,7 +33,6 @@ export type DocumentJsonViewProps = {
   | 'removeDocument'
   | 'replaceDocument'
   | 'updateDocument'
-  | 'openErrorDetailsDialog'
   | 'openInsertDocumentDialog'
 >;
 
diff --git a/packages/compass-crud/src/components/document-list-view.spec.tsx b/packages/compass-crud/src/components/document-list-view.spec.tsx
index bfb28904fb0..536f48e66c2 100644
--- a/packages/compass-crud/src/components/document-list-view.spec.tsx
+++ b/packages/compass-crud/src/components/document-list-view.spec.tsx
@@ -21,7 +21,6 @@ describe('<DocumentListView />', function () {
           replaceDocument={sinon.spy()}
           updateDocument={sinon.spy()}
           openInsertDocumentDialog={sinon.spy()}
-          openErrorDetailsDialog={sinon.spy()}
         />
       );
 
diff --git a/packages/compass-crud/src/components/document-list-view.tsx b/packages/compass-crud/src/components/document-list-view.tsx
index 825fe7538aa..938ecc6fd1b 100644
--- a/packages/compass-crud/src/components/document-list-view.tsx
+++ b/packages/compass-crud/src/components/document-list-view.tsx
@@ -97,7 +97,6 @@ class DocumentListView extends React.Component<DocumentListViewProps> {
     replaceDocument: PropTypes.func,
     updateDocument: PropTypes.func,
     openInsertDocumentDialog: PropTypes.func,
-    openErrorDetailsDialog: PropTypes.func,
     copyToClipboard: PropTypes.func,
     className: PropTypes.string,
   };
diff --git a/packages/compass-crud/src/components/document-list.tsx b/packages/compass-crud/src/components/document-list.tsx
index 6ab97bcb1d6..f9021c0cd1d 100644
--- a/packages/compass-crud/src/components/document-list.tsx
+++ b/packages/compass-crud/src/components/document-list.tsx
@@ -9,7 +9,6 @@ import {
   WorkspaceContainer,
   spacing,
   withDarkMode,
-  ErrorDetailsModal,
 } from '@mongodb-js/compass-components';
 import type { InsertDocumentDialogProps } from './insert-document-dialog';
 import InsertDocumentDialog from './insert-document-dialog';
@@ -30,13 +29,7 @@ import {
   DOCUMENTS_STATUS_FETCHING,
   DOCUMENTS_STATUS_FETCHED_INITIAL,
 } from '../constants/documents-statuses';
-import type {
-  CrudStore,
-  BSONObject,
-  DocumentView,
-  ErrorDetailsDialogOptions,
-  ErrorDetailsDialogState,
-} from '../stores/crud-store';
+import type { CrudStore, BSONObject, DocumentView } from '../stores/crud-store';
 import { getToolbarSignal } from '../utils/toolbar-signal';
 import BulkDeleteModal from './bulk-delete-modal';
 import { useTabState } from '@mongodb-js/compass-workspaces/provider';
@@ -73,8 +66,6 @@ const loaderContainerStyles = css({
 export type DocumentListProps = {
   store: CrudStore;
   openInsertDocumentDialog?: (doc: BSONObject, cloned: boolean) => void;
-  openErrorDetailsDialog: (options: ErrorDetailsDialogOptions) => void;
-  closeErrorDetailsDialog: () => void;
   openBulkUpdateModal: () => void;
   updateBulkUpdatePreview: (updateText: string) => void;
   runBulkUpdate: () => void;
@@ -82,7 +73,6 @@ export type DocumentListProps = {
   openImportFileDialog?: (origin: 'empty-state' | 'crud-toolbar') => void;
   docs: Document[];
   view: DocumentView;
-  errorDetails: ErrorDetailsDialogState;
   insert: Partial<InsertDocumentDialogProps> &
     Required<
       Pick<
@@ -301,10 +291,7 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
     resultId,
     isCollectionScan,
     isSearchIndexesSupported,
-    errorDetails,
     openInsertDocumentDialog,
-    openErrorDetailsDialog,
-    closeErrorDetailsDialog,
     openImportFileDialog,
     openBulkUpdateModal,
     docs,
@@ -590,20 +577,8 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
             version={version}
             ns={ns}
             updateComment={updateComment}
-            showErrorDetails={() =>
-              openErrorDetailsDialog({
-                details: insert.error.info || {},
-                closeAction: 'back',
-              })
-            }
             {...insert}
           />
-          <ErrorDetailsModal
-            open={errorDetails.isOpen}
-            onClose={closeErrorDetailsDialog}
-            details={errorDetails.details}
-            closeAction={errorDetails.closeAction || 'close'}
-          />
           <BulkUpdateModal
             ns={ns}
             filter={query.filter ?? {}}
diff --git a/packages/compass-crud/src/components/insert-document-dialog.tsx b/packages/compass-crud/src/components/insert-document-dialog.tsx
index bfdbf839cf9..bcf5cbf8304 100644
--- a/packages/compass-crud/src/components/insert-document-dialog.tsx
+++ b/packages/compass-crud/src/components/insert-document-dialog.tsx
@@ -11,6 +11,7 @@ import {
   SegmentedControl,
   SegmentedControlOption,
   spacing,
+  showErrorDetails,
 } from '@mongodb-js/compass-components';
 
 import type { InsertCSFLEWarningBannerProps } from './insert-csfle-warning-banner';
@@ -67,7 +68,6 @@ export type InsertDocumentDialogProps = InsertCSFLEWarningBannerProps & {
   updateComment: (isCommentNeeded: boolean) => void;
   logger?: Logger;
   track?: TrackFunction;
-  showErrorDetails: () => void;
 };
 
 const DocumentOrJsonView: React.FC<{
@@ -135,7 +135,6 @@ const InsertDocumentDialog: React.FC<InsertDocumentDialogProps> = ({
   updateJsonDoc,
   updateComment,
   closeInsertDocumentDialog,
-  showErrorDetails,
 }) => {
   const [invalidElements, setInvalidElements] = useState<Document['uuid'][]>(
     []
@@ -346,7 +345,12 @@ const InsertDocumentDialog: React.FC<InsertDocumentDialogProps> = ({
             <Button
               size="xsmall"
               className={errorDetailsBtnStyles}
-              onClick={showErrorDetails}
+              onClick={() =>
+                showErrorDetails({
+                  details: error.info!,
+                  closeAction: 'back',
+                })
+              }
               data-testid="insert-document-error-details-button"
             >
               VIEW ERROR DETAILS
diff --git a/packages/compass-crud/src/components/json-editor.tsx b/packages/compass-crud/src/components/json-editor.tsx
index b47c4fd6863..3c86cff5c68 100644
--- a/packages/compass-crud/src/components/json-editor.tsx
+++ b/packages/compass-crud/src/components/json-editor.tsx
@@ -58,7 +58,6 @@ export type JSONEditorProps = {
   updateDocument?: CrudActions['updateDocument'];
   copyToClipboard?: CrudActions['copyToClipboard'];
   openInsertDocumentDialog?: CrudActions['openInsertDocumentDialog'];
-  openErrorDetailsDialog?: CrudActions['openErrorDetailsDialog'];
 };
 
 const JSONEditor: React.FunctionComponent<JSONEditorProps> = ({
diff --git a/packages/compass-crud/src/stores/crud-store.spec.ts b/packages/compass-crud/src/stores/crud-store.spec.ts
index 045b3cf9141..5b78d8d63ba 100644
--- a/packages/compass-crud/src/stores/crud-store.spec.ts
+++ b/packages/compass-crud/src/stores/crud-store.spec.ts
@@ -12,7 +12,6 @@ import type {
   CrudStore,
   CrudStoreOptions,
   DocumentsPluginServices,
-  ErrorDetailsDialogOptions,
 } from './crud-store';
 import {
   findAndModifyWithFLEFallback,
@@ -1455,41 +1454,6 @@ describe('store', function () {
     });
   });
 
-  describe('#openErrorDetailsDialog #closeErrorDetailsDialog', function () {
-    const options: ErrorDetailsDialogOptions = {
-      details: { abc: 'abc' },
-      closeAction: 'close',
-    };
-    let store: CrudStore;
-
-    beforeEach(function () {
-      const plugin = activatePlugin();
-      store = plugin.store;
-      deactivate = () => plugin.deactivate();
-    });
-
-    it('manages the errorDetails state', async function () {
-      const openListener = waitForState(store, (state) => {
-        expect(state.errorDetails).to.deep.equal({
-          isOpen: true,
-          ...options,
-        });
-      });
-
-      void store.openErrorDetailsDialog(options);
-
-      await openListener;
-
-      const closeListener = waitForState(store, (state) => {
-        expect(state.errorDetails.isOpen).to.be.false;
-      });
-
-      void store.closeErrorDetailsDialog();
-
-      await closeListener;
-    });
-  });
-
   describe('#openInsertDocumentDialog', function () {
     const doc = { _id: 1, name: 'test' };
     let store: CrudStore;
diff --git a/packages/compass-crud/src/stores/crud-store.ts b/packages/compass-crud/src/stores/crud-store.ts
index 56db6a43287..4ec244ec0f1 100644
--- a/packages/compass-crud/src/stores/crud-store.ts
+++ b/packages/compass-crud/src/stores/crud-store.ts
@@ -81,23 +81,6 @@ export type EmittedAppRegistryEvents =
   | 'document-deleted'
   | 'document-inserted';
 
-export type ErrorDetailsDialogState =
-  | {
-      isOpen: false;
-      details?: Record<string, unknown>;
-      closeAction?: 'back' | 'close';
-    }
-  | {
-      isOpen: true;
-      details: Record<string, unknown>;
-      closeAction?: 'back' | 'close';
-    };
-
-export type ErrorDetailsDialogOptions = Omit<
-  Extract<ErrorDetailsDialogState, { isOpen: true }>,
-  'isOpen'
->;
-
 export type CrudActions = {
   drillDown(
     doc: Document,
@@ -111,8 +94,6 @@ export type CrudActions = {
   removeDocument(doc: Document): void;
   replaceDocument(doc: Document): void;
   openInsertDocumentDialog(doc: BSONObject, cloned: boolean): void;
-  openErrorDetailsDialog(options: ErrorDetailsDialogOptions): void;
-  closeErrorDetailsDialog(): void;
   copyToClipboard(doc: Document): void; //XXX
   openBulkDeleteDialog(): void;
   runBulkUpdate(): void;
@@ -360,7 +341,6 @@ type CrudState = {
   bulkDelete: BulkDeleteState;
   docsPerPage: number;
   collectionStats: CollectionStats | null;
-  errorDetails: ErrorDetailsDialogState;
 };
 
 type CrudStoreActionsOptions = {
@@ -467,7 +447,6 @@ class CrudStoreImpl
         this.instance.topologyDescription.type !== 'Single',
       docsPerPage: this.getInitialDocsPerPage(),
       collectionStats: extractCollectionStats(this.collection),
-      errorDetails: { isOpen: false },
     };
   }
 
@@ -975,24 +954,6 @@ class CrudStoreImpl
     });
   }
 
-  openErrorDetailsDialog(options: ErrorDetailsDialogOptions) {
-    this.setState({
-      errorDetails: {
-        isOpen: true,
-        ...options,
-      },
-    });
-  }
-
-  closeErrorDetailsDialog() {
-    this.setState({
-      errorDetails: {
-        ...this.state.errorDetails,
-        isOpen: false,
-      },
-    });
-  }
-
   /**
    * Open the insert document dialog.
    *
diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts
index 4db1898db71..c8cc0345385 100644
--- a/packages/compass-e2e-tests/helpers/selectors.ts
+++ b/packages/compass-e2e-tests/helpers/selectors.ts
@@ -593,6 +593,7 @@ export const DocumentListFetchingStopButton =
   '[data-testid="documents-content"] [data-testid="fetching-documents"] button';
 export const DocumentListError = '[data-testid="document-list-error-summary"]';
 export const AddDataButton = '[data-testid="crud-add-data-show-actions"]';
+export const EditDocumentButton = '[data-testid="edit-document-button"]';
 export const InsertDocumentOption =
   '[data-testid="crud-add-data-insert-document-action"]';
 export const ImportFileOption =
@@ -608,6 +609,8 @@ export const CloneDocumentButton = '[data-testid="clone-document-button"]';
 export const DeleteDocumentButton = '[data-testid="remove-document-button"]';
 export const DocumentFooter = '[data-testid="document-footer"]';
 export const DocumentFooterMessage = '[data-testid="document-footer-message"]';
+export const DocumentFooterErrorDetailsButton =
+  '[data-testid="edit-actions-footer-error-details-button"]';
 export const UpdateDocumentButton = `${DocumentFooter} [data-testid="update-button"]`;
 export const ConfirmDeleteDocumentButton = `${DocumentFooter} [data-testid="delete-button"]`;
 export const JSONDocumentCard = '[data-testid="editable-json"]';
@@ -616,10 +619,6 @@ export const ShowMoreFieldsButton = '[data-testid="show-more-fields-button"]';
 export const OpenBulkUpdateButton = '[data-testid="crud-update"]';
 export const OpenBulkDeleteButton = '[data-testid="crud-bulk-delete"]';
 export const ErrorDetailsJson = '[data-testid="error-details-json"]';
-export const ErrorDetailsBackButton =
-  '[data-testid="error-details-back-button"]';
-export const ErrorDetailsCloseButton =
-  '[data-testid="error-details-close-button"]';
 
 // Insert Document modal
 
@@ -1322,11 +1321,11 @@ export const ConfirmationModalInput = `${ConfirmationModal} input`;
 
 export const confirmationModalConfirmButton = (
   modalSelector = ConfirmationModal
-) => `${modalSelector} [role=dialog] button:nth-of-type(1)`;
+) => `${modalSelector} [role=dialog] [data-testid*="confirm_button"]`;
 
 export const confirmationModalCancelButton = (
   modalSelector = ConfirmationModal
-) => `${modalSelector} [role=dialog] button:nth-of-type(2)`;
+) => `${modalSelector} [role=dialog] [data-testid*="cancel_button"]`;
 
 // New pipeline from text modal
 export const NewPipelineFromTextModal = '[data-testid="import-pipeline-modal"]';
diff --git a/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts b/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
index 1819c645d6d..ad8a568c70d 100644
--- a/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-documents-tab.test.ts
@@ -722,8 +722,147 @@ FindIterable<Document> result = collection.find(filter);`);
       await errorDetailsJson.waitForDisplayed();
 
       // exit details
-      await browser.clickVisible(Selectors.ErrorDetailsBackButton);
+      await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       await errorElement.waitForDisplayed();
     });
+
+    describe('Editing', function () {
+      beforeEach(async function () {
+        await browser.navigateWithinCurrentCollectionTabs('Documents');
+        await tryToInsertDocument(browser, `{ "phone": 12345 }`);
+        await browser.runFindOperation('Documents', '{ "phone": 12345 }');
+      });
+
+      it('shows error info when editing via list view', async function () {
+        const document = browser.$(Selectors.DocumentListEntry);
+        await document.waitForDisplayed();
+
+        // enter edit mode
+        await browser.hover(Selectors.DocumentListEntry);
+        await browser.clickVisible(Selectors.EditDocumentButton);
+
+        // rename the required field
+        const input = document.$(
+          `${Selectors.HadronDocumentElement}:last-child ${Selectors.HadronDocumentKeyEditor}`
+        );
+        await browser.setValueVisible(input, 'somethingElse');
+
+        // confirm update
+        const footer = document.$(Selectors.DocumentFooterMessage);
+        expect(await footer.getText()).to.equal('Document modified.');
+
+        const button = document.$(Selectors.UpdateDocumentButton);
+        await button.click();
+
+        const errorMessage = browser.$(Selectors.DocumentFooterMessage);
+        await errorMessage.waitForDisplayed();
+        expect(await errorMessage.getText()).to.include(
+          'Document failed validation'
+        );
+
+        // enter details
+        const errorDetailsBtn = browser.$(
+          Selectors.DocumentFooterErrorDetailsButton
+        );
+        await errorDetailsBtn.waitForDisplayed();
+        await errorDetailsBtn.click();
+
+        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
+        await errorDetailsJson.waitForDisplayed();
+
+        // exit details
+        await browser.clickVisible(Selectors.confirmationModalConfirmButton());
+        await errorDetailsJson.waitForDisplayed({ reverse: true });
+      });
+
+      it('shows error info when editing via json view', async function () {
+        await browser.clickVisible(Selectors.SelectJSONView);
+
+        const document = browser.$(Selectors.DocumentJSONEntry);
+        await document.waitForDisplayed();
+
+        await waitForJSON(browser, document);
+
+        // enter edit mode
+        await browser.hover(Selectors.JSONDocumentCard);
+        await browser.clickVisible(Selectors.JSONEditDocumentButton);
+
+        // remove the required field
+        await browser.setCodemirrorEditorValue(
+          Selectors.DocumentJSONEntry,
+          `{}`
+        );
+
+        // confirm update
+        const footer = document.$(Selectors.DocumentFooterMessage);
+        expect(await footer.getText()).to.equal('Document modified.');
+
+        const button = document.$(Selectors.UpdateDocumentButton);
+        await button.click();
+
+        const errorMessage = browser.$(Selectors.DocumentFooterMessage);
+        await errorMessage.waitForDisplayed();
+        expect(await errorMessage.getText()).to.include(
+          'Document failed validation'
+        );
+
+        // enter details
+        const errorDetailsBtn = browser.$(
+          Selectors.DocumentFooterErrorDetailsButton
+        );
+        await errorDetailsBtn.waitForDisplayed();
+        await errorDetailsBtn.click();
+
+        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
+        await errorDetailsJson.waitForDisplayed();
+
+        // exit details
+        await browser.clickVisible(Selectors.confirmationModalConfirmButton());
+        await errorDetailsJson.waitForDisplayed({ reverse: true });
+      });
+
+      it('shows error info when editing via table view', async function () {
+        await browser.clickVisible(Selectors.SelectTableView);
+
+        const document = browser.$('.ag-center-cols-clipper .ag-row-first');
+        await document.waitForDisplayed();
+
+        // enter edit mode
+        const value = document.$('[col-id="phone"] .element-value');
+        await value.doubleClick();
+
+        // remove the required field
+        await browser.clickVisible(
+          '[data-testid="table-view-cell-editor-remove-field-button"]'
+        );
+
+        // confirm update
+        const footer = browser.$(Selectors.DocumentFooterMessage);
+        expect(await footer.getText()).to.equal('Document modified.');
+
+        const button = browser.$(Selectors.UpdateDocumentButton);
+        await button.click();
+
+        const errorMessage = browser.$(Selectors.DocumentFooterMessage);
+        await errorMessage.waitForDisplayed();
+        expect(await errorMessage.getText()).to.include(
+          'Document failed validation'
+        );
+
+        // enter details
+        const errorDetailsBtn = browser.$(
+          Selectors.DocumentFooterErrorDetailsButton
+        );
+        await errorDetailsBtn.waitForDisplayed();
+        await errorDetailsBtn.click();
+
+        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
+        await errorDetailsJson.waitForDisplayed();
+
+        // exit details
+        await browser.clickVisible(Selectors.confirmationModalConfirmButton());
+        await errorDetailsJson.waitForDisplayed({ reverse: true });
+      });
+    });
   });
 });
diff --git a/packages/compass-e2e-tests/tests/collection-import.test.ts b/packages/compass-e2e-tests/tests/collection-import.test.ts
index 28a3c57e623..cecf27e9a30 100644
--- a/packages/compass-e2e-tests/tests/collection-import.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-import.test.ts
@@ -574,16 +574,7 @@ describe('Collection import', function () {
       expect(await errorDetailsModal.getText()).to.include(
         'schemaRulesNotSatisfied'
       );
-      await browser.clickVisible(Selectors.ErrorDetailsCloseButton);
-
-      // Close the toast
-      await browser
-        .$(Selectors.closeToastButton(Selectors.ImportToast))
-        .waitForDisplayed();
-      await browser.clickVisible(
-        Selectors.closeToastButton(Selectors.ImportToast)
-      );
-      await toastElement.waitForDisplayed({ reverse: true });
+      await browser.clickVisible(Selectors.confirmationModalConfirmButton());
     });
 
     it('with CSV + abort on error unchecked, it includes the details in a file', async function () {
diff --git a/packages/compass-e2e-tests/tests/collection-validation-tab.test.ts b/packages/compass-e2e-tests/tests/collection-validation-tab.test.ts
index ae8fd286eeb..4c56ae5c8a5 100644
--- a/packages/compass-e2e-tests/tests/collection-validation-tab.test.ts
+++ b/packages/compass-e2e-tests/tests/collection-validation-tab.test.ts
@@ -89,7 +89,7 @@ describe('Collection validation tab', function () {
       });
 
       // generated rules can be edited and saved
-      await browser.setValidation(PASSING_VALIDATOR);
+      await browser.setValidationWithinValidationTab(PASSING_VALIDATOR);
     });
   });
 
diff --git a/packages/compass-import-export/src/components/import-error-details-modal.spec.tsx b/packages/compass-import-export/src/components/import-error-details-modal.spec.tsx
deleted file mode 100644
index c8c890bf1be..00000000000
--- a/packages/compass-import-export/src/components/import-error-details-modal.spec.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import {
-  render,
-  screen,
-  userEvent,
-  waitFor,
-} from '@mongodb-js/testing-library-compass';
-import { expect } from 'chai';
-import { configureStore } from '../stores/import-store';
-import { Provider } from 'react-redux';
-
-import { createNoopLogger } from '@mongodb-js/compass-logging/provider';
-import { createNoopTrack } from '@mongodb-js/compass-telemetry/provider';
-import ImportErrorDetailsModal from './import-error-details-modal';
-
-function renderModal(importState: any = {}) {
-  // TODO: mutating state directly doesn't guarantee that we are testing the
-  // component in a state that can actually be achieved when actions are emitted
-  // on the store. Refactor this to either test unconnected component, or to
-  // not mutate state directly for tests
-  const store = configureStore({
-    dataService: {},
-    globalAppRegistry: {},
-    logger: createNoopLogger(),
-    track: createNoopTrack(),
-    connections: {
-      getConnectionById: () => ({ info: { id: 'TEST' } }),
-    },
-  } as any);
-  const state = store.getState();
-  state.import = {
-    ...state.import,
-    ...importState,
-  };
-  const renderResult = render(
-    <Provider store={store}>
-      <ImportErrorDetailsModal />
-    </Provider>
-  );
-  return { renderResult, store };
-}
-
-describe('ImportErrorDetailsModal Component', function () {
-  context('When import error details are open', function () {
-    const errorDetails = { details: 'abc' };
-
-    beforeEach(function () {
-      renderModal({
-        errorDetails: {
-          isOpen: true,
-          details: errorDetails,
-        },
-      });
-    });
-
-    it('Should render error details and be closable', async function () {
-      const codeDetails = await screen.findByTestId('error-details-json');
-      expect(codeDetails).to.be.visible;
-      expect(JSON.parse(codeDetails.textContent || '')).to.deep.equal(
-        errorDetails
-      );
-
-      const closeBtn = await screen.findByRole('button', { name: 'Close' });
-      expect(closeBtn).to.be.visible;
-
-      userEvent.click(closeBtn);
-      await waitFor(() => {
-        expect(screen.queryByTestId('import-error-details-modal')).not.to.exist;
-      });
-    });
-  });
-});
diff --git a/packages/compass-import-export/src/components/import-error-details-modal.tsx b/packages/compass-import-export/src/components/import-error-details-modal.tsx
deleted file mode 100644
index c425ac44867..00000000000
--- a/packages/compass-import-export/src/components/import-error-details-modal.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { ErrorDetailsModal } from '@mongodb-js/compass-components';
-import { connect } from 'react-redux';
-import type { RootImportState } from '../stores/import-store';
-import { onErrorDetailsClose } from '../modules/import';
-
-const ImportErrorDetailsModal: React.FunctionComponent<{
-  isOpen: boolean;
-  errorDetails?: Record<string, unknown>;
-  onClose: () => void;
-}> = ({ isOpen, errorDetails, onClose }) => {
-  return (
-    <ErrorDetailsModal
-      closeAction="close"
-      open={isOpen}
-      details={errorDetails}
-      onClose={onClose}
-      data-testid="import-error-details-modal"
-    />
-  );
-};
-
-const ConnectedImportErrorDetailsModal = connect(
-  (state: RootImportState) => ({
-    isOpen: state.import.errorDetails.isOpen,
-    errorDetails: state.import.errorDetails.details,
-  }),
-  {
-    onClose: onErrorDetailsClose,
-  }
-)(ImportErrorDetailsModal);
-
-export default ConnectedImportErrorDetailsModal;
diff --git a/packages/compass-import-export/src/import-plugin.tsx b/packages/compass-import-export/src/import-plugin.tsx
index 3fd4fa31c66..e260279aa4b 100644
--- a/packages/compass-import-export/src/import-plugin.tsx
+++ b/packages/compass-import-export/src/import-plugin.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import ImportModal from './components/import-modal';
 import ImportInProgressModal from './components/import-in-progress-modal';
-import ImportErrorDetailsModal from './components/import-error-details-modal';
 
 function ImportPlugin() {
   return (
     <>
       <ImportModal />
       <ImportInProgressModal />
-      <ImportErrorDetailsModal />
     </>
   );
 }
diff --git a/packages/compass-import-export/src/modules/import.ts b/packages/compass-import-export/src/modules/import.ts
index 3ebb0f3ab97..0357dfd2feb 100644
--- a/packages/compass-import-export/src/modules/import.ts
+++ b/packages/compass-import-export/src/modules/import.ts
@@ -35,6 +35,7 @@ import {
 import type { ImportThunkAction } from '../stores/import-store';
 import { openFile } from '../utils/open-file';
 import type { DataService } from 'mongodb-data-service';
+import { showErrorDetails } from '@mongodb-js/compass-components';
 
 const checkFileExists = promisify(fs.exists);
 const getFileStats = promisify(fs.stat);
@@ -82,16 +83,6 @@ type FieldFromJSON = {
 };
 type FieldType = FieldFromJSON | FieldFromCSV;
 
-export type ErrorDetailsDialogState =
-  | {
-      isOpen: false;
-      details?: Record<string, unknown>;
-    }
-  | {
-      isOpen: true;
-      details: Record<string, unknown>;
-    };
-
 type ImportState = {
   isOpen: boolean;
   isInProgressMessageOpen: boolean;
@@ -99,7 +90,6 @@ type ImportState = {
   fileType: AcceptedFileType | '';
   fileName: string;
   errorLogFilePath: string;
-  errorDetails: ErrorDetailsDialogState;
   fileIsMultilineJSON: boolean;
   useHeaderLines: boolean;
   status: ProcessStatus;
@@ -135,7 +125,6 @@ export const INITIAL_STATE: ImportState = {
   firstErrors: [],
   fileName: '',
   errorLogFilePath: '',
-  errorDetails: { isOpen: false },
   fileIsMultilineJSON: false,
   useHeaderLines: true,
   status: PROCESS_STATUS.UNSPECIFIED,
@@ -183,8 +172,6 @@ const onFinished = ({
 
 const onFailed = (error: Error) => ({ type: FAILED, error });
 
-export const onErrorDetailsClose = () => ({ type: ERROR_DETAILS_CLOSED });
-
 const onFileSelectError = (error: Error) => ({
   type: FILE_SELECT_ERROR,
   error,
@@ -391,10 +378,15 @@ export const startImport = (): ImportThunkAction<Promise<void>> => {
       progressCallback.flush();
       const errInfo =
         err?.writeErrors?.length && err?.writeErrors[0]?.err?.errInfo;
-      const showErrorDetails: () => void | undefined =
+      showFailedToast(
+        err as Error,
         errInfo &&
-        (() => dispatch({ type: ERROR_DETAILS_OPENED, errorDetails: errInfo }));
-      showFailedToast(err as Error, showErrorDetails);
+          (() =>
+            showErrorDetails({
+              details: errInfo,
+              closeAction: 'close',
+            }))
+      );
 
       dispatch(onFailed(err as Error));
       return;
@@ -1090,26 +1082,6 @@ export const importReducer: Reducer<ImportState> = (
     };
   }
 
-  if (action.type === ERROR_DETAILS_OPENED) {
-    return {
-      ...state,
-      errorDetails: {
-        isOpen: true,
-        details: action.errorDetails,
-      },
-    };
-  }
-
-  if (action.type === ERROR_DETAILS_CLOSED) {
-    return {
-      ...state,
-      errorDetails: {
-        ...state.errorDetails,
-        isOpen: false,
-      },
-    };
-  }
-
   if (action.type === STARTED) {
     return {
       ...state,
diff --git a/packages/hadron-document/src/document.ts b/packages/hadron-document/src/document.ts
index 1670ca3ccbd..76068b3d6de 100644
--- a/packages/hadron-document/src/document.ts
+++ b/packages/hadron-document/src/document.ts
@@ -12,6 +12,7 @@ import type { BSONArray, BSONObject, BSONValue } from './utils';
 import { objectToIdiomaticEJSON } from './utils';
 import type { HadronEJSONOptions } from './utils';
 import { DocumentEvents } from '.';
+import type { MongoServerError } from 'mongodb';
 
 /**
  * The event constant.
@@ -478,7 +479,7 @@ export class Document extends EventEmitter {
   }
 
   onUpdateError(error: Error) {
-    this.emit('update-error', error.message);
+    this.emit('update-error', error, (error as MongoServerError).errInfo);
   }
 
   markForDeletion() {
@@ -505,7 +506,7 @@ export class Document extends EventEmitter {
   }
 
   onRemoveError(error: Error) {
-    this.emit('remove-error', error.message);
+    this.emit('remove-error', error, (error as MongoServerError).errInfo);
   }
 
   setModifiedEJSONString(ejson: string | null) {