diff --git a/apps/web/components/pdf-viewer.jsx b/apps/web/components/pdf-viewer.jsx
index adac19831..b63c367ba 100644
--- a/apps/web/components/pdf-viewer.jsx
+++ b/apps/web/components/pdf-viewer.jsx
@@ -1,6 +1,7 @@
 import { Fragment, useState } from "react";
 import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
 import Field from "./editor/field";
+import short from "short-uuid";
 
 export default function PDFViewer(props) {
   const [file, setFile] = useState("");
@@ -30,8 +31,9 @@ export default function PDFViewer(props) {
           options={options}
         >
           {Array.from({ length: numPages }, (_, index) => (
-            <Fragment>
+            <Fragment key={short.generate().toString()}>
               <div
+                key={short.generate().toString()}
                 style={{
                   position: "relative",
                   background: "green",
@@ -51,9 +53,14 @@ export default function PDFViewer(props) {
                     renderTextLayer={false}
                     onLoadSuccess={() => setLoading(false)}
                     onRenderError={() => setLoading(false)}
-                  >
-                    <Field></Field>
-                  </Page>
+                  ></Page>
+                  {props.fields.map((item) => (
+                    <Field
+                      key={short.generate().toString()}
+                      position={{ x: 0, y: -500 }}
+                      className="absolute"
+                    ></Field>
+                  ))}
                 </div>
               </div>
             </Fragment>
diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index 207a31dfd..e18ed99b2 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -15,6 +15,7 @@ import {
 import { getDocument } from "@documenso/lib/query";
 import { Document as PrismaDocument } from "@prisma/client";
 import { Button, Breadcrumb } from "@documenso/ui";
+import short from "short-uuid";
 
 const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), {
   ssr: false,
@@ -100,7 +101,7 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
             defaultValue={props?.document?.Recipient[0]}
           >
             {props?.document?.Recipient?.map((item: any) => (
-              <option key={item.email}>
+              <option key={item.email + short.generate().toString()}>
                 {item.name ? `${item.name} <${item.email}>` : item.email}
               </option>
             ))}