diff --git a/apps/docs/content/docs/developers/api/developer-mode.mdx b/apps/docs/content/docs/developers/api/developer-mode.mdx
index f5bd2e871..92e3dbd48 100644
--- a/apps/docs/content/docs/developers/api/developer-mode.mdx
+++ b/apps/docs/content/docs/developers/api/developer-mode.mdx
@@ -1,17 +1,22 @@
 ---
 title: Developer Mode
-description: Advanced development tools for debugging field coordinates and integrating with the Documenso API.
+description: Advanced development tools for debugging field IDs, recipient IDs, coordinates and integrating with the Documenso API.
 ---
 
 ## Overview
 
 Developer mode provides additional tools and features to help you integrate and debug Documenso.
 
-## Field Coordinates
+## Field Information
 
-Field coordinates represent the position of a field in a document. They are returned in the `pageX`, `pageY`, `width` and `height` properties of the field.
+When enabled, developer mode displays the following information for each field:
 
-To enable field coordinates, add the `devmode=true` query parameter to the editor URL.
+- **Field ID** - The unique identifier of the field
+- **Recipient ID** - The ID of the recipient assigned to the field
+- **Pos X / Pos Y** - The position of the field on the page
+- **Width / Height** - The dimensions of the field
+
+To enable developer mode, add the `devmode=true` query parameter to the editor URL.
 
 ```bash
 # Legacy editor
diff --git a/apps/docs/public/developer-mode/field-coordinates-legacy-editor.webp b/apps/docs/public/developer-mode/field-coordinates-legacy-editor.webp
index 7cf99a3b9..7d03c1112 100644
Binary files a/apps/docs/public/developer-mode/field-coordinates-legacy-editor.webp and b/apps/docs/public/developer-mode/field-coordinates-legacy-editor.webp differ
diff --git a/apps/docs/public/developer-mode/field-coordinates-new-editor.webp b/apps/docs/public/developer-mode/field-coordinates-new-editor.webp
index ea6980da2..f37756b1e 100644
Binary files a/apps/docs/public/developer-mode/field-coordinates-new-editor.webp and b/apps/docs/public/developer-mode/field-coordinates-new-editor.webp differ
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
index 366a34854..f0668d9e2 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
@@ -337,32 +337,42 @@ export const EnvelopeEditorFieldsPage = () => {
                       </h3>
 
                       <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-sm text-foreground">
+                        {selectedField.id && (
+                          <p>
+                            <span className="min-w-12 text-muted-foreground">
+                              <Trans>Field ID:</Trans>
+                            </span>{' '}
+                            {selectedField.id}
+                          </p>
+                        )}
+                        <p>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Recipient ID:</Trans>
+                          </span>{' '}
+                          {selectedField.recipientId}
+                        </p>
                         <p>
                           <span className="min-w-12 text-muted-foreground">
                             <Trans>Pos X:</Trans>
-                          </span>
-                          &nbsp;
+                          </span>{' '}
                           {selectedField.positionX.toFixed(2)}
                         </p>
                         <p>
                           <span className="min-w-12 text-muted-foreground">
                             <Trans>Pos Y:</Trans>
-                          </span>
-                          &nbsp;
+                          </span>{' '}
                           {selectedField.positionY.toFixed(2)}
                         </p>
                         <p>
                           <span className="min-w-12 text-muted-foreground">
                             <Trans>Width:</Trans>
-                          </span>
-                          &nbsp;
+                          </span>{' '}
                           {selectedField.width.toFixed(2)}
                         </p>
                         <p>
                           <span className="min-w-12 text-muted-foreground">
                             <Trans>Height:</Trans>
-                          </span>
-                          &nbsp;
+                          </span>{' '}
                           {selectedField.height.toFixed(2)}
                         </p>
                       </div>
diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx
index 774dce1b6..dda14f2d0 100644
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@@ -333,34 +333,44 @@ const FieldItemInner = ({
         </div>
 
         {isDevMode && (
-          <div className="absolute -top-20 left-1/2 z-50 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-sm backdrop-blur-sm">
+          <div className="absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-sm backdrop-blur-sm">
             <div className="flex flex-col gap-0.5 text-[9px]">
+              {field.nativeId && (
+                <span>
+                  <span className="text-muted-foreground">
+                    <Trans>Field ID:</Trans>
+                  </span>{' '}
+                  <span className="font-mono text-foreground">{field.nativeId}</span>
+                </span>
+              )}
+              <span>
+                <span className="text-muted-foreground">
+                  <Trans>Recipient ID:</Trans>
+                </span>{' '}
+                <span className="font-mono text-foreground">{field.recipientId}</span>
+              </span>
               <span>
                 <span className="text-muted-foreground">
                   <Trans>Pos X:</Trans>
-                </span>
-                &nbsp;
+                </span>{' '}
                 <span className="font-mono text-foreground">{field.pageX.toFixed(2)}</span>
               </span>
               <span>
                 <span className="text-muted-foreground">
                   <Trans>Pos Y:</Trans>
-                </span>
-                &nbsp;
+                </span>{' '}
                 <span className="font-mono text-foreground">{field.pageY.toFixed(2)}</span>
               </span>
               <span>
                 <span className="text-muted-foreground">
                   <Trans>Width:</Trans>
-                </span>
-                &nbsp;
+                </span>{' '}
                 <span className="font-mono text-foreground">{field.pageWidth.toFixed(2)}</span>
               </span>
               <span>
                 <span className="text-muted-foreground">
                   <Trans>Height:</Trans>
-                </span>
-                &nbsp;
+                </span>{' '}
                 <span className="font-mono text-foreground">{field.pageHeight.toFixed(2)}</span>
               </span>
             </div>