diff --git a/package-lock.json b/package-lock.json
index 3bafa1def9b..3a61adcbdc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44094,7 +44094,7 @@
         "mongodb-instance-model": "^12.33.0",
         "nyc": "^15.1.0",
         "react-dom": "^17.0.2",
-        "sinon": "^8.1.1",
+        "sinon": "^17.0.1",
         "typescript": "^5.0.4"
       }
     },
@@ -44110,6 +44110,55 @@
         "bson": "^4.6.3 || ^5 || ^6"
       }
     },
+    "packages/compass-crud/node_modules/@sinonjs/commons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "packages/compass-crud/node_modules/@sinonjs/fake-timers": {
+      "version": "11.3.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-11.3.1.tgz",
+      "integrity": "sha512-EVJO7nW5M/F5Tur0Rf2z/QoMo+1Ia963RiMtapiQrEWvY0iBUvADo8Beegwjpnle5BHkyHuoxSTW3jF43H1XRA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.1"
+      }
+    },
+    "packages/compass-crud/node_modules/@sinonjs/samsam": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-8.0.2.tgz",
+      "integrity": "sha512-v46t/fwnhejRSFTGqbpn9u+LQ9xJDse10gNnPgAcxgdoCDMXj/G2asWAC/8Qs+BAZDicX+MNZouXT1A7c83kVw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.1",
+        "lodash.get": "^4.4.2",
+        "type-detect": "^4.1.0"
+      }
+    },
+    "packages/compass-crud/node_modules/@sinonjs/samsam/node_modules/type-detect": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.1.0.tgz",
+      "integrity": "sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "packages/compass-crud/node_modules/just-extend": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-6.2.0.tgz",
+      "integrity": "sha512-cYofQu2Xpom82S6qD778jBDpwvvy39s1l/hrYij2u9AMdQcGRpaBu6kY4mVhuno5kJVi1DAz4aiphA2WI1/OAw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "packages/compass-crud/node_modules/mongodb-query-parser": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/mongodb-query-parser/-/mongodb-query-parser-4.3.0.tgz",
@@ -44125,6 +44174,20 @@
         "bson": "^4.6.3 || ^5 || ^6"
       }
     },
+    "packages/compass-crud/node_modules/nise": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-5.1.9.tgz",
+      "integrity": "sha512-qOnoujW4SV6e40dYxJOb3uvuoPHtmLzIk4TFo+j0jPJoC+5Z9xja5qH5JZobEPsa8+YYphMrOSwnrshEhG2qww==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0",
+        "@sinonjs/fake-timers": "^11.2.2",
+        "@sinonjs/text-encoding": "^0.7.2",
+        "just-extend": "^6.2.0",
+        "path-to-regexp": "^6.2.1"
+      }
+    },
     "packages/compass-crud/node_modules/numeral": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz",
@@ -44133,6 +44196,32 @@
         "node": "*"
       }
     },
+    "packages/compass-crud/node_modules/path-to-regexp": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "packages/compass-crud/node_modules/sinon": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-17.0.1.tgz",
+      "integrity": "sha512-wmwE19Lie0MLT+ZYNpDymasPHUKTaZHUH/pKEubRXIzySv9Atnlw+BUMGCzWgV7b7wO+Hw6f1TEOr0IUnmU8/g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0",
+        "@sinonjs/fake-timers": "^11.2.2",
+        "@sinonjs/samsam": "^8.0.0",
+        "diff": "^5.1.0",
+        "nise": "^5.1.5",
+        "supports-color": "^7.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/sinon"
+      }
+    },
     "packages/compass-data-modeling": {
       "name": "@mongodb-js/compass-data-modeling",
       "version": "1.12.0",
@@ -57219,7 +57308,7 @@
         "react-dom": "^17.0.2",
         "reflux": "^0.4.1",
         "semver": "^7.6.2",
-        "sinon": "^8.1.1",
+        "sinon": "^17.0.1",
         "typescript": "^5.0.4"
       },
       "dependencies": {
@@ -57231,6 +57320,49 @@
             "acorn": "^8.1.0"
           }
         },
+        "@sinonjs/commons": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+          "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+          "dev": true,
+          "requires": {
+            "type-detect": "4.0.8"
+          }
+        },
+        "@sinonjs/fake-timers": {
+          "version": "11.3.1",
+          "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-11.3.1.tgz",
+          "integrity": "sha512-EVJO7nW5M/F5Tur0Rf2z/QoMo+1Ia963RiMtapiQrEWvY0iBUvADo8Beegwjpnle5BHkyHuoxSTW3jF43H1XRA==",
+          "dev": true,
+          "requires": {
+            "@sinonjs/commons": "^3.0.1"
+          }
+        },
+        "@sinonjs/samsam": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-8.0.2.tgz",
+          "integrity": "sha512-v46t/fwnhejRSFTGqbpn9u+LQ9xJDse10gNnPgAcxgdoCDMXj/G2asWAC/8Qs+BAZDicX+MNZouXT1A7c83kVw==",
+          "dev": true,
+          "requires": {
+            "@sinonjs/commons": "^3.0.1",
+            "lodash.get": "^4.4.2",
+            "type-detect": "^4.1.0"
+          },
+          "dependencies": {
+            "type-detect": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.1.0.tgz",
+              "integrity": "sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==",
+              "dev": true
+            }
+          }
+        },
+        "just-extend": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-6.2.0.tgz",
+          "integrity": "sha512-cYofQu2Xpom82S6qD778jBDpwvvy39s1l/hrYij2u9AMdQcGRpaBu6kY4mVhuno5kJVi1DAz4aiphA2WI1/OAw==",
+          "dev": true
+        },
         "mongodb-query-parser": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/mongodb-query-parser/-/mongodb-query-parser-4.3.0.tgz",
@@ -57242,10 +57374,43 @@
             "lodash": "^4.17.21"
           }
         },
+        "nise": {
+          "version": "5.1.9",
+          "resolved": "https://registry.npmjs.org/nise/-/nise-5.1.9.tgz",
+          "integrity": "sha512-qOnoujW4SV6e40dYxJOb3uvuoPHtmLzIk4TFo+j0jPJoC+5Z9xja5qH5JZobEPsa8+YYphMrOSwnrshEhG2qww==",
+          "dev": true,
+          "requires": {
+            "@sinonjs/commons": "^3.0.0",
+            "@sinonjs/fake-timers": "^11.2.2",
+            "@sinonjs/text-encoding": "^0.7.2",
+            "just-extend": "^6.2.0",
+            "path-to-regexp": "^6.2.1"
+          }
+        },
         "numeral": {
           "version": "2.0.6",
           "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz",
           "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="
+        },
+        "path-to-regexp": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+          "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+          "dev": true
+        },
+        "sinon": {
+          "version": "17.0.1",
+          "resolved": "https://registry.npmjs.org/sinon/-/sinon-17.0.1.tgz",
+          "integrity": "sha512-wmwE19Lie0MLT+ZYNpDymasPHUKTaZHUH/pKEubRXIzySv9Atnlw+BUMGCzWgV7b7wO+Hw6f1TEOr0IUnmU8/g==",
+          "dev": true,
+          "requires": {
+            "@sinonjs/commons": "^3.0.0",
+            "@sinonjs/fake-timers": "^11.2.2",
+            "@sinonjs/samsam": "^8.0.0",
+            "diff": "^5.1.0",
+            "nise": "^5.1.5",
+            "supports-color": "^7.2.0"
+          }
         }
       }
     },
diff --git a/packages/compass-components/src/components/document-list/element.spec.tsx b/packages/compass-components/src/components/document-list/element.spec.tsx
new file mode 100644
index 00000000000..88fa527f257
--- /dev/null
+++ b/packages/compass-components/src/components/document-list/element.spec.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import HadronDocument from 'hadron-document';
+import { HadronElement } from './element';
+import type { Element } from 'hadron-document';
+
+describe('HadronElement', function () {
+  describe('context menu', function () {
+    let doc: HadronDocument;
+    let element: Element;
+    let windowOpenStub: sinon.SinonStub;
+    let clipboardWriteTextStub: sinon.SinonStub;
+
+    beforeEach(function () {
+      doc = new HadronDocument({ field: 'value' });
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      element = doc.elements.at(0)!;
+      windowOpenStub = sinon.stub(window, 'open');
+      clipboardWriteTextStub = sinon.stub(navigator.clipboard, 'writeText');
+    });
+
+    afterEach(function () {
+      windowOpenStub.restore();
+      clipboardWriteTextStub.restore();
+    });
+
+    it('copies field and value when "Copy field & value" is clicked', function () {
+      render(
+        <HadronElement
+          value={element}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+        />
+      );
+
+      // Open context menu and click the copy option
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+      userEvent.click(screen.getByText('Copy field & value'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(clipboardWriteTextStub).to.have.been.calledWith('field: "value"');
+    });
+
+    it('shows "Open URL in browser" for URL string values', function () {
+      const urlDoc = new HadronDocument({ link: 'https://mongodb.com' });
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const urlElement = urlDoc.elements.at(0)!;
+
+      render(
+        <HadronElement
+          value={urlElement}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+        />
+      );
+
+      // Open context menu
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+
+      // Check if the menu item exists
+      expect(screen.getByText('Open URL in browser')).to.exist;
+    });
+
+    it('opens URL in new tab when "Open URL in browser" is clicked', function () {
+      const urlDoc = new HadronDocument({ link: 'https://mongodb.com' });
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const urlElement = urlDoc.elements.at(0)!;
+
+      render(
+        <HadronElement
+          value={urlElement}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+        />
+      );
+
+      // Open context menu and click the open URL option
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+      userEvent.click(screen.getByText('Open URL in browser'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(windowOpenStub).to.have.been.calledWith(
+        'https://mongodb.com',
+        '_blank',
+        'noopener'
+      );
+    });
+
+    it('does not show "Open URL in browser" for non-URL string values', function () {
+      render(
+        <HadronElement
+          value={element}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+        />
+      );
+
+      // Open context menu
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+
+      // Check that the menu item doesn't exist
+      expect(screen.queryByText('Open URL in browser')).to.not.exist;
+    });
+  });
+});
diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
index b79c96f4015..e1bfc32c0ef 100644
--- a/packages/compass-components/src/components/document-list/element.tsx
+++ b/packages/compass-components/src/components/document-list/element.tsx
@@ -15,6 +15,7 @@ import {
   ElementEvents,
   ElementEditor,
   DEFAULT_VISIBLE_ELEMENTS,
+  objectToIdiomaticEJSON,
 } from 'hadron-document';
 import BSONValue from '../bson-value';
 import { spacing } from '@leafygreen-ui/tokens';
@@ -28,6 +29,7 @@ import { palette } from '@leafygreen-ui/palette';
 import { Icon } from '../leafygreen';
 import { useDarkMode } from '../../hooks/use-theme';
 import VisibleFieldsToggle from './visible-field-toggle';
+import { useContextMenuItems } from '../context-menu';
 
 function getEditorByType(type: HadronElementType['type']) {
   switch (type) {
@@ -409,6 +411,16 @@ export const calculateShowMoreToggleOffset = ({
   return spacerWidth + editableOffset + expandIconSize;
 };
 
+// Helper function to check if a string is a URL
+const isValidUrl = (str: string): boolean => {
+  try {
+    const url = new URL(str);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+};
+
 export const HadronElement: React.FunctionComponent<{
   value: HadronElementType;
   editable: boolean;
@@ -447,6 +459,32 @@ export const HadronElement: React.FunctionComponent<{
     collapse,
   } = useHadronElement(element);
 
+  // Add context menu hook for the field
+  const fieldContextMenuRef = useContextMenuItems(
+    () => [
+      {
+        label: 'Copy field & value',
+        onAction: () => {
+          const fieldStr = `${key.value}: ${objectToIdiomaticEJSON(
+            value.originalValue
+          )}`;
+          void navigator.clipboard.writeText(fieldStr);
+        },
+      },
+      ...(type.value === 'String' && isValidUrl(value.value)
+        ? [
+            {
+              label: 'Open URL in browser',
+              onAction: () => {
+                window.open(value.value, '_blank', 'noopener');
+              },
+            },
+          ]
+        : []),
+    ],
+    [key.value, value.originalValue, value.value, type.value]
+  );
+
   const toggleExpanded = () => {
     if (expanded) {
       collapse();
@@ -493,6 +531,7 @@ export const HadronElement: React.FunctionComponent<{
     : elementInvalidLightMode;
 
   const elementProps = {
+    ref: fieldContextMenuRef,
     className: cx(
       hadronElement,
       darkMode ? hadronElementDarkMode : hadronElementLightMode,
@@ -531,6 +570,7 @@ export const HadronElement: React.FunctionComponent<{
         data-field={key.value}
         data-id={element.uuid}
         {...elementProps}
+        ref={fieldContextMenuRef}
       >
         {editable && (
           <div className={elementActions}>
diff --git a/packages/compass-crud/package.json b/packages/compass-crud/package.json
index e29d0f97e14..d9f0e14c983 100644
--- a/packages/compass-crud/package.json
+++ b/packages/compass-crud/package.json
@@ -66,7 +66,7 @@
     "mongodb-instance-model": "^12.33.0",
     "nyc": "^15.1.0",
     "react-dom": "^17.0.2",
-    "sinon": "^8.1.1",
+    "sinon": "^17.0.1",
     "typescript": "^5.0.4"
   },
   "dependencies": {
diff --git a/packages/compass-crud/src/components/document-json-view-item.spec.tsx b/packages/compass-crud/src/components/document-json-view-item.spec.tsx
new file mode 100644
index 00000000000..767ab08350b
--- /dev/null
+++ b/packages/compass-crud/src/components/document-json-view-item.spec.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import HadronDocument from 'hadron-document';
+import { DocumentJsonViewItem } from './document-json-view-item';
+
+describe('DocumentJsonViewItem', function () {
+  let doc: HadronDocument;
+  let copyToClipboardStub: sinon.SinonStub;
+  let openInsertDocumentDialogStub: sinon.SinonStub;
+
+  beforeEach(function () {
+    doc = new HadronDocument({
+      _id: 1,
+      name: 'test',
+      url: 'https://mongodb.com',
+      nested: { field: 'value' },
+    });
+
+    copyToClipboardStub = sinon.stub();
+    openInsertDocumentDialogStub = sinon.stub();
+  });
+
+  afterEach(function () {
+    sinon.restore();
+  });
+
+  it('renders the JSON editor component', function () {
+    render(
+      <DocumentJsonViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        namespace="test.test"
+        isEditable={true}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    // Should render without error
+    expect(document.querySelector('[data-testid="editable-json"]')).to.exist;
+  });
+
+  it('renders context menu when right-clicked', function () {
+    const { container } = render(
+      <DocumentJsonViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        namespace="test.test"
+        isEditable={true}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    const element = container.firstChild as HTMLElement;
+
+    // Right-click to open context menu
+    userEvent.click(element, { button: 2 });
+
+    // Should show context menu with expected items
+    expect(screen.getByText('Copy document')).to.exist;
+    expect(screen.getByText('Clone document...')).to.exist;
+    expect(screen.getByText('Delete document')).to.exist;
+  });
+
+  it('renders scroll trigger when docIndex is 0', function () {
+    const scrollTriggerRef = React.createRef<HTMLDivElement>();
+
+    render(
+      <DocumentJsonViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        namespace="test.test"
+        isEditable={true}
+        scrollTriggerRef={scrollTriggerRef}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    expect(scrollTriggerRef.current).to.exist;
+  });
+
+  it('does not render scroll trigger when docIndex is not 0', function () {
+    const scrollTriggerRef = React.createRef<HTMLDivElement>();
+
+    render(
+      <DocumentJsonViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={1}
+        namespace="test.test"
+        isEditable={true}
+        scrollTriggerRef={scrollTriggerRef}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    expect(scrollTriggerRef.current).to.be.null;
+  });
+});
diff --git a/packages/compass-crud/src/components/document-json-view-item.tsx b/packages/compass-crud/src/components/document-json-view-item.tsx
new file mode 100644
index 00000000000..003f82ab73a
--- /dev/null
+++ b/packages/compass-crud/src/components/document-json-view-item.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import type HadronDocument from 'hadron-document';
+import { css, KeylineCard } from '@mongodb-js/compass-components';
+
+import JSONEditor, { type JSONEditorProps } from './json-editor';
+import { useDocumentItemContextMenu } from './use-document-item-context-menu';
+
+const keylineCardStyles = css({
+  overflow: 'hidden',
+  position: 'relative',
+});
+
+export type DocumentJsonViewItemProps = {
+  doc: HadronDocument;
+  docRef: React.Ref<HTMLDivElement>;
+  docIndex: number;
+  namespace: string;
+  isEditable: boolean;
+  isTimeSeries?: boolean;
+  scrollTriggerRef?: React.Ref<HTMLDivElement>;
+} & Pick<
+  JSONEditorProps,
+  | 'copyToClipboard'
+  | 'removeDocument'
+  | 'replaceDocument'
+  | 'updateDocument'
+  | 'openInsertDocumentDialog'
+>;
+
+const DocumentJsonViewItem: React.FC<DocumentJsonViewItemProps> = ({
+  doc,
+  docRef,
+  docIndex,
+  namespace,
+  isEditable,
+  isTimeSeries,
+  scrollTriggerRef,
+  copyToClipboard,
+  removeDocument,
+  replaceDocument,
+  updateDocument,
+  openInsertDocumentDialog,
+}) => {
+  const ref = useDocumentItemContextMenu({
+    doc,
+    isEditable,
+    copyToClipboard,
+    openInsertDocumentDialog,
+  });
+
+  return (
+    <div ref={ref}>
+      <KeylineCard className={keylineCardStyles} ref={docRef}>
+        {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
+        <JSONEditor
+          doc={doc}
+          key={doc.uuid}
+          namespace={namespace}
+          editable={isEditable}
+          isTimeSeries={isTimeSeries}
+          copyToClipboard={copyToClipboard}
+          removeDocument={removeDocument}
+          replaceDocument={replaceDocument}
+          updateDocument={updateDocument}
+          openInsertDocumentDialog={openInsertDocumentDialog}
+        />
+      </KeylineCard>
+    </div>
+  );
+};
+
+export { DocumentJsonViewItem };
diff --git a/packages/compass-crud/src/components/document-list-view-item.spec.tsx b/packages/compass-crud/src/components/document-list-view-item.spec.tsx
new file mode 100644
index 00000000000..5ad9ffa8798
--- /dev/null
+++ b/packages/compass-crud/src/components/document-list-view-item.spec.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import HadronDocument from 'hadron-document';
+import { DocumentListViewItem } from './document-list-view-item';
+
+describe('DocumentListViewItem', function () {
+  let doc: HadronDocument;
+  let copyToClipboardStub: sinon.SinonStub;
+  let openInsertDocumentDialogStub: sinon.SinonStub;
+
+  beforeEach(function () {
+    doc = new HadronDocument({
+      _id: 1,
+      name: 'test',
+      url: 'https://mongodb.com',
+      nested: { field: 'value' },
+    });
+
+    copyToClipboardStub = sinon.stub();
+    openInsertDocumentDialogStub = sinon.stub();
+  });
+
+  afterEach(function () {
+    sinon.restore();
+  });
+
+  it('renders the document component', function () {
+    render(
+      <DocumentListViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        isEditable={true}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    // Should render without error
+    expect(document.querySelector('[data-testid="editable-document"]')).to
+      .exist;
+  });
+
+  it('renders context menu when right-clicked', function () {
+    const { container } = render(
+      <DocumentListViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        isEditable={true}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    const element = container.firstChild as HTMLElement;
+
+    // Right-click to open context menu
+    userEvent.click(element, { button: 2 });
+
+    // Should show context menu with expected items
+    expect(screen.getByText('Copy document')).to.exist;
+    expect(screen.getByText('Clone document...')).to.exist;
+    expect(screen.getByText('Delete document')).to.exist;
+  });
+
+  it('renders scroll trigger when docIndex is 0', function () {
+    const scrollTriggerRef = React.createRef<HTMLDivElement>();
+
+    render(
+      <DocumentListViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={0}
+        isEditable={true}
+        scrollTriggerRef={scrollTriggerRef}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    expect(scrollTriggerRef.current).to.exist;
+  });
+
+  it('does not render scroll trigger when docIndex is not 0', function () {
+    const scrollTriggerRef = React.createRef<HTMLDivElement>();
+
+    render(
+      <DocumentListViewItem
+        doc={doc}
+        docRef={null}
+        docIndex={1}
+        isEditable={true}
+        scrollTriggerRef={scrollTriggerRef}
+        copyToClipboard={copyToClipboardStub}
+        openInsertDocumentDialog={openInsertDocumentDialogStub}
+      />
+    );
+
+    expect(scrollTriggerRef.current).to.be.null;
+  });
+});
diff --git a/packages/compass-crud/src/components/document-list-view-item.tsx b/packages/compass-crud/src/components/document-list-view-item.tsx
new file mode 100644
index 00000000000..288ce2b8621
--- /dev/null
+++ b/packages/compass-crud/src/components/document-list-view-item.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import type HadronDocument from 'hadron-document';
+import { KeylineCard } from '@mongodb-js/compass-components';
+import Document, { type DocumentProps } from './document';
+import { useDocumentItemContextMenu } from './use-document-item-context-menu';
+
+export type DocumentListViewItemProps = {
+  doc: HadronDocument;
+  docRef: React.Ref<HTMLDivElement>;
+  docIndex: number;
+  isEditable: boolean;
+  isTimeSeries?: boolean;
+  scrollTriggerRef?: React.Ref<HTMLDivElement>;
+} & Pick<
+  DocumentProps,
+  | 'copyToClipboard'
+  | 'removeDocument'
+  | 'replaceDocument'
+  | 'updateDocument'
+  | 'openInsertDocumentDialog'
+>;
+
+const DocumentListViewItem: React.FC<DocumentListViewItemProps> = ({
+  doc,
+  docRef,
+  docIndex,
+  isEditable,
+  isTimeSeries,
+  scrollTriggerRef,
+  copyToClipboard,
+  removeDocument,
+  replaceDocument,
+  updateDocument,
+  openInsertDocumentDialog,
+}) => {
+  const ref = useDocumentItemContextMenu({
+    doc,
+    isEditable,
+    copyToClipboard,
+    openInsertDocumentDialog,
+  });
+
+  return (
+    <div ref={ref}>
+      <KeylineCard ref={docRef}>
+        {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
+        <Document
+          doc={doc}
+          key={doc.uuid}
+          editable={isEditable}
+          isTimeSeries={isTimeSeries}
+          copyToClipboard={copyToClipboard}
+          removeDocument={removeDocument}
+          replaceDocument={replaceDocument}
+          updateDocument={updateDocument}
+          openInsertDocumentDialog={openInsertDocumentDialog}
+        />
+      </KeylineCard>
+    </div>
+  );
+};
+
+export { DocumentListViewItem };
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 ed257306567..5938ac2ab06 100644
--- a/packages/compass-crud/src/components/document-list-view.spec.tsx
+++ b/packages/compass-crud/src/components/document-list-view.spec.tsx
@@ -5,7 +5,7 @@ import HadronDocument from 'hadron-document';
 import { expect } from 'chai';
 
 import DocumentListView from './document-list-view';
-import { ContextMenuProvider } from '@mongodb-js/compass-components';
+import { CompassComponentsProvider } from '@mongodb-js/compass-components';
 
 describe('<DocumentListView />', function () {
   describe('#render', function () {
@@ -20,7 +20,7 @@ describe('<DocumentListView />', function () {
             isEditable={false}
             isTimeSeries={false}
           />,
-          { wrappingComponent: ContextMenuProvider }
+          { wrappingComponent: CompassComponentsProvider }
         );
       });
 
diff --git a/packages/compass-crud/src/components/editable-document.spec.tsx b/packages/compass-crud/src/components/editable-document.spec.tsx
index 19667f66d2e..25643935ce4 100644
--- a/packages/compass-crud/src/components/editable-document.spec.tsx
+++ b/packages/compass-crud/src/components/editable-document.spec.tsx
@@ -6,6 +6,7 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 
 import EditableDocument from './editable-document';
+import { ContextMenuProvider } from '@mongodb-js/compass-context-menu';
 
 describe('<EditableDocument />', function () {
   describe('#render', function () {
@@ -22,7 +23,8 @@ describe('<EditableDocument />', function () {
           updateDocument={sinon.spy(action)}
           copyToClipboard={sinon.spy(action)}
           openInsertDocumentDialog={sinon.spy(action)}
-        />
+        />,
+        { wrappingComponent: ContextMenuProvider }
       );
     });
 
diff --git a/packages/compass-crud/src/components/use-document-item-context-menu.spec.tsx b/packages/compass-crud/src/components/use-document-item-context-menu.spec.tsx
new file mode 100644
index 00000000000..0edf522414e
--- /dev/null
+++ b/packages/compass-crud/src/components/use-document-item-context-menu.spec.tsx
@@ -0,0 +1,255 @@
+import React from 'react';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import HadronDocument from 'hadron-document';
+import { useDocumentItemContextMenu } from './use-document-item-context-menu';
+
+// Test component that uses the hook
+const TestComponent: React.FC<{
+  doc: HadronDocument;
+  isEditable: boolean;
+  copyToClipboard?: (doc: HadronDocument) => void;
+  openInsertDocumentDialog?: (
+    doc: Record<string, unknown>,
+    cloned: boolean
+  ) => void;
+}> = ({ doc, isEditable, copyToClipboard, openInsertDocumentDialog }) => {
+  const ref = useDocumentItemContextMenu({
+    doc,
+    isEditable,
+    copyToClipboard,
+    openInsertDocumentDialog,
+  });
+
+  return (
+    <div data-testid="test-container" ref={ref}>
+      Test Content
+    </div>
+  );
+};
+
+describe('useDocumentItemContextMenu', function () {
+  let doc: HadronDocument;
+  let copyToClipboardStub: sinon.SinonStub;
+  let openInsertDocumentDialogStub: sinon.SinonStub;
+  let collapseStub: sinon.SinonStub;
+  let expandStub: sinon.SinonStub;
+  let startEditingStub: sinon.SinonStub;
+  let markForDeletionStub: sinon.SinonStub;
+  let generateObjectStub: sinon.SinonStub;
+
+  beforeEach(function () {
+    doc = new HadronDocument({
+      _id: 1,
+      name: 'test',
+      nested: { field: 'value' },
+    });
+
+    copyToClipboardStub = sinon.stub();
+    openInsertDocumentDialogStub = sinon.stub();
+
+    // Set up document methods as stubs
+    collapseStub = sinon.stub(doc, 'collapse');
+    expandStub = sinon.stub(doc, 'expand');
+    startEditingStub = sinon.stub(doc, 'startEditing');
+    markForDeletionStub = sinon.stub(doc, 'markForDeletion');
+    generateObjectStub = sinon.stub(doc, 'generateObject').returns({
+      _id: 1,
+      name: 'test',
+      nested: { field: 'value' },
+    });
+  });
+
+  afterEach(function () {
+    sinon.restore();
+  });
+
+  describe('when editable', function () {
+    it('shows all menu items when document is editable and not editing', function () {
+      doc.expanded = false;
+      doc.editing = false;
+
+      render(
+        <TestComponent
+          doc={doc}
+          isEditable={true}
+          copyToClipboard={copyToClipboardStub}
+          openInsertDocumentDialog={openInsertDocumentDialogStub}
+        />
+      );
+
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Should show all operations
+      expect(screen.getByText('Expand all fields')).to.exist;
+      expect(screen.getByText('Edit document')).to.exist;
+      expect(screen.getByText('Copy document')).to.exist;
+      expect(screen.getByText('Clone document...')).to.exist;
+      expect(screen.getByText('Delete document')).to.exist;
+    });
+
+    it('hides edit document when document is editing', function () {
+      doc.expanded = false;
+      doc.editing = true;
+
+      render(
+        <TestComponent
+          doc={doc}
+          isEditable={true}
+          copyToClipboard={copyToClipboardStub}
+          openInsertDocumentDialog={openInsertDocumentDialogStub}
+        />
+      );
+
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Should hide edit document when editing
+      expect(screen.queryByText('Edit document')).to.not.exist;
+      // But show other operations
+      expect(screen.getByText('Expand all fields')).to.exist;
+      expect(screen.getByText('Copy document')).to.exist;
+      expect(screen.getByText('Clone document...')).to.exist;
+      expect(screen.getByText('Delete document')).to.exist;
+    });
+  });
+
+  describe('when read-only', function () {
+    it('shows only non-mutating operations when not editable', function () {
+      doc.expanded = false;
+      doc.editing = false;
+
+      render(
+        <TestComponent
+          doc={doc}
+          isEditable={false}
+          copyToClipboard={copyToClipboardStub}
+          openInsertDocumentDialog={openInsertDocumentDialogStub}
+        />
+      );
+
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Should show non-mutating operations
+      expect(screen.getByText('Expand all fields')).to.exist;
+      expect(screen.getByText('Copy document')).to.exist;
+
+      // Should hide mutating operations
+      expect(screen.queryByText('Edit document')).to.not.exist;
+      expect(screen.queryByText('Clone document...')).to.not.exist;
+      expect(screen.queryByText('Delete document')).to.not.exist;
+    });
+
+    it('collapses document when collapse is clicked', function () {
+      doc.expanded = true;
+
+      // Render with expanded document
+      render(
+        <TestComponent
+          doc={doc}
+          isEditable={true}
+          copyToClipboard={copyToClipboardStub}
+          openInsertDocumentDialog={openInsertDocumentDialogStub}
+        />
+      );
+
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Click collapse
+      userEvent.click(screen.getByText('Collapse all fields'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(collapseStub).to.have.been.calledOnce;
+    });
+  });
+
+  describe('functionality', function () {
+    beforeEach(function () {
+      render(
+        <TestComponent
+          doc={doc}
+          isEditable={true}
+          copyToClipboard={copyToClipboardStub}
+          openInsertDocumentDialog={openInsertDocumentDialogStub}
+        />
+      );
+    });
+
+    it('toggles expand/collapse correctly', function () {
+      doc.expanded = false;
+
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Click expand
+      userEvent.click(screen.getByText('Expand all fields'));
+
+      expect(expandStub).to.have.been.calledOnce;
+    });
+
+    it('starts editing when edit is clicked', function () {
+      doc.editing = false;
+
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Click edit
+      userEvent.click(screen.getByText('Edit document'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(startEditingStub).to.have.been.calledOnce;
+    });
+
+    it('calls copyToClipboard when copy is clicked', function () {
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Click copy
+      userEvent.click(screen.getByText('Copy document'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(copyToClipboardStub).to.have.been.calledWith(doc);
+    });
+
+    it('calls openInsertDocumentDialog with cloned document when clone is clicked', function () {
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Click clone
+      userEvent.click(screen.getByText('Clone document...'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(generateObjectStub).to.have.been.calledWith({
+        excludeInternalFields: true,
+      });
+      expect(openInsertDocumentDialogStub).to.have.been.calledWith(
+        {
+          _id: 1,
+          name: 'test',
+          nested: { field: 'value' },
+        },
+        true
+      );
+    });
+
+    it('marks document for deletion when delete is clicked', function () {
+      // Right-click to open context menu
+      userEvent.click(screen.getByTestId('test-container'), { button: 2 });
+
+      // Click delete
+      userEvent.click(screen.getByText('Delete document'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      expect(markForDeletionStub).to.have.been.calledOnce;
+    });
+  });
+});
diff --git a/packages/compass-crud/src/components/use-document-item-context-menu.tsx b/packages/compass-crud/src/components/use-document-item-context-menu.tsx
new file mode 100644
index 00000000000..f457afd7dd7
--- /dev/null
+++ b/packages/compass-crud/src/components/use-document-item-context-menu.tsx
@@ -0,0 +1,67 @@
+import type HadronDocument from 'hadron-document';
+import { useContextMenuItems } from '@mongodb-js/compass-components';
+
+export interface UseDocumentItemContextMenuProps {
+  doc: HadronDocument;
+  isEditable: boolean;
+  copyToClipboard?: (doc: HadronDocument) => void;
+  openInsertDocumentDialog?: (
+    doc: Record<string, unknown>,
+    cloned: boolean
+  ) => void;
+}
+
+export function useDocumentItemContextMenu({
+  doc,
+  isEditable,
+  copyToClipboard,
+  openInsertDocumentDialog,
+}: UseDocumentItemContextMenuProps) {
+  return useContextMenuItems([
+    {
+      label: doc.expanded ? 'Collapse all fields' : 'Expand all fields',
+      onAction: () => {
+        if (doc.expanded) {
+          doc.collapse();
+        } else {
+          doc.expand();
+        }
+      },
+    },
+    ...(isEditable && !doc.editing
+      ? [
+          {
+            label: 'Edit document',
+            onAction: () => {
+              doc.startEditing();
+            },
+          },
+        ]
+      : []),
+    {
+      label: 'Copy document',
+      onAction: () => {
+        copyToClipboard?.(doc);
+      },
+    },
+    ...(isEditable
+      ? [
+          {
+            label: 'Clone document...',
+            onAction: () => {
+              const clonedDoc = doc.generateObject({
+                excludeInternalFields: true,
+              });
+              openInsertDocumentDialog?.(clonedDoc, true);
+            },
+          },
+          {
+            label: 'Delete document',
+            onAction: () => {
+              doc.markForDeletion();
+            },
+          },
+        ]
+      : []),
+  ]);
+}
diff --git a/packages/compass-crud/src/components/virtualized-document-json-view.tsx b/packages/compass-crud/src/components/virtualized-document-json-view.tsx
index 8cffcf8f26f..609bb657836 100644
--- a/packages/compass-crud/src/components/virtualized-document-json-view.tsx
+++ b/packages/compass-crud/src/components/virtualized-document-json-view.tsx
@@ -2,19 +2,14 @@ import React, { useCallback } from 'react';
 import type HadronDocument from 'hadron-document';
 import {
   css,
-  KeylineCard,
   spacing,
   VirtualList,
   type VirtualListRef,
   type VirtualListItemRenderer,
 } from '@mongodb-js/compass-components';
 
-import JSONEditor, { type JSONEditorProps } from './json-editor';
-
-const keylineCardStyles = css({
-  overflow: 'hidden',
-  position: 'relative',
-});
+import type { JSONEditorProps } from './json-editor';
+import { DocumentJsonViewItem } from './document-json-view-item';
 
 const spacingStyles = css({
   padding: spacing[400],
@@ -75,23 +70,26 @@ const VirtualizedDocumentJsonView: React.FC<
   listRef,
 }) => {
   const renderItem: VirtualListItemRenderer<HadronDocument> = useCallback(
-    (doc, docRef, docIndex) => {
+    (
+      doc: HadronDocument,
+      docRef: React.Ref<HTMLDivElement>,
+      docIndex: number
+    ) => {
       return (
-        <KeylineCard className={keylineCardStyles} ref={docRef}>
-          {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
-          <JSONEditor
-            doc={doc}
-            key={doc.uuid}
-            namespace={namespace}
-            editable={isEditable}
-            isTimeSeries={isTimeSeries}
-            copyToClipboard={copyToClipboard}
-            removeDocument={removeDocument}
-            replaceDocument={replaceDocument}
-            updateDocument={updateDocument}
-            openInsertDocumentDialog={openInsertDocumentDialog}
-          />
-        </KeylineCard>
+        <DocumentJsonViewItem
+          doc={doc}
+          docRef={docRef}
+          docIndex={docIndex}
+          namespace={namespace}
+          isEditable={isEditable}
+          isTimeSeries={isTimeSeries}
+          scrollTriggerRef={scrollTriggerRef}
+          copyToClipboard={copyToClipboard}
+          removeDocument={removeDocument}
+          replaceDocument={replaceDocument}
+          updateDocument={updateDocument}
+          openInsertDocumentDialog={openInsertDocumentDialog}
+        />
       );
     },
     [
diff --git a/packages/compass-crud/src/components/virtualized-document-list-view.tsx b/packages/compass-crud/src/components/virtualized-document-list-view.tsx
index 5ddfa237fb4..6cd5567a948 100644
--- a/packages/compass-crud/src/components/virtualized-document-list-view.tsx
+++ b/packages/compass-crud/src/components/virtualized-document-list-view.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useMemo } from 'react';
 import HadronDocument from 'hadron-document';
 import {
   css,
-  KeylineCard,
   spacing,
   VirtualList,
   type VirtualListItemRenderer,
@@ -10,7 +9,8 @@ import {
 } from '@mongodb-js/compass-components';
 
 import { type BSONObject } from '../stores/crud-store';
-import Document, { type DocumentProps } from './document';
+import type { DocumentProps } from './document';
+import { DocumentListViewItem } from './document-list-view-item';
 
 const spacingStyles = css({
   padding: spacing[400],
@@ -90,22 +90,25 @@ const VirtualizedDocumentListView: React.FC<
   }, [_docs]);
 
   const renderItem: VirtualListItemRenderer<HadronDocument> = useCallback(
-    (doc, docRef, docIndex) => {
+    (
+      doc: HadronDocument,
+      docRef: React.Ref<HTMLDivElement>,
+      docIndex: number
+    ) => {
       return (
-        <KeylineCard ref={docRef}>
-          {scrollTriggerRef && docIndex === 0 && <div ref={scrollTriggerRef} />}
-          <Document
-            doc={doc}
-            key={doc.uuid}
-            editable={isEditable}
-            isTimeSeries={isTimeSeries}
-            copyToClipboard={copyToClipboard}
-            removeDocument={removeDocument}
-            replaceDocument={replaceDocument}
-            updateDocument={updateDocument}
-            openInsertDocumentDialog={openInsertDocumentDialog}
-          />
-        </KeylineCard>
+        <DocumentListViewItem
+          doc={doc}
+          docRef={docRef}
+          docIndex={docIndex}
+          isEditable={isEditable}
+          isTimeSeries={isTimeSeries}
+          scrollTriggerRef={scrollTriggerRef}
+          copyToClipboard={copyToClipboard}
+          removeDocument={removeDocument}
+          replaceDocument={replaceDocument}
+          updateDocument={updateDocument}
+          openInsertDocumentDialog={openInsertDocumentDialog}
+        />
       );
     },
     [