diff --git a/.changeset/honest-crews-serve.md b/.changeset/honest-crews-serve.md
new file mode 100644
index 00000000..6a3e1f94
--- /dev/null
+++ b/.changeset/honest-crews-serve.md
@@ -0,0 +1,5 @@
+---
+'frontend': patch
+---
+
+Fixed bug where signatures wouldn't be displayed correctly when more than one signature is on the page
diff --git a/apps/backend/src/index.ts b/apps/backend/src/index.ts
index f3889a5e..b3d19e11 100644
--- a/apps/backend/src/index.ts
+++ b/apps/backend/src/index.ts
@@ -10,7 +10,7 @@ import http from 'http';
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '5000');
+var port = normalizePort(process.env.PORT || '8080');
 app.set('port', port);
 
 /**
diff --git a/apps/frontend/src/components/ControlledSignatureCanvas/ControlledSignatureCanvas.tsx b/apps/frontend/src/components/ControlledSignatureCanvas/ControlledSignatureCanvas.tsx
index 24ce7c3f..bde0f091 100644
--- a/apps/frontend/src/components/ControlledSignatureCanvas/ControlledSignatureCanvas.tsx
+++ b/apps/frontend/src/components/ControlledSignatureCanvas/ControlledSignatureCanvas.tsx
@@ -19,6 +19,7 @@ export const ControlledSignatureCanvas: FC<ControlledSignatureCanvasProps> = ({
     useEffect(() => {
         if (!value?.signatureData || !sigCanvas.current || doesCanvasHaveData) return
 
+        sigCanvas?.current?.off()
         const canvas = sigCanvas.current.getCanvas()
         if (!canvas) return
 
@@ -66,5 +67,5 @@ export const ControlledSignatureCanvas: FC<ControlledSignatureCanvasProps> = ({
         return formattedData
     }
 
-    return <ReactSignatureCanvas ref={sigCanvas} />
+    return <ReactSignatureCanvas ref={sigCanvas} clearOnResize={false} />
 }
diff --git a/apps/frontend/src/components/Fields/SignatureField.tsx b/apps/frontend/src/components/Fields/SignatureField.tsx
index 2c40fb5d..4514f19c 100644
--- a/apps/frontend/src/components/Fields/SignatureField.tsx
+++ b/apps/frontend/src/components/Fields/SignatureField.tsx
@@ -87,7 +87,7 @@ const SignatureField = <T extends string>({
             />
             <div className="sig-container">
                 {/* We need to keep changing the key to force a rerender */}
-                <ControlledSignatureCanvas key={hash(value || {})} value={value} />
+                <ControlledSignatureCanvas key={hashSignature(value)} value={value} />
                 <div className="sig-ctl-container">
                     <Button
                         className="sig-ctl-button doc-btn"
@@ -111,4 +111,11 @@ const SignatureField = <T extends string>({
     )
 }
 
+const hashSignature = (sig: Nullish<Signature>): string => {
+    if (!sig)
+        return hash(Math.random())
+
+    return hash(JSON.stringify(sig))
+}
+
 export default SignatureField