diff --git a/src/app/v/_components/vendor-portal-documents.tsx b/src/app/v/_components/vendor-portal-documents.tsx
index 204d8092..5ebc1538 100644
--- a/src/app/v/_components/vendor-portal-documents.tsx
+++ b/src/app/v/_components/vendor-portal-documents.tsx
@@ -21,6 +21,64 @@ type VendorPortalDocumentsProps = {
   onChanged: () => Promise<void>;
 };
 
+type VendorPortalDocumentRowProps = {
+  document: VendorPortalDocument;
+  locked: boolean;
+  uploading: boolean;
+  onDownload: () => void;
+  onReplace: () => void;
+};
+
+function VendorPortalDocumentRow({
+  document,
+  locked,
+  uploading,
+  onDownload,
+  onReplace,
+}: VendorPortalDocumentRowProps) {
+  return (
+    <article className="vp-uplift-row">
+      <div className="vp-row">
+        <strong>File</strong>
+        <span>
+          {document.originalFileName} · v{document.version}
+        </span>
+      </div>
+      <div className="vp-row">
+        <strong>Security scan</strong>
+        <span>{document.scanStatus}</span>
+      </div>
+      <div className="vp-row">
+        <strong>Review</strong>
+        <span>{document.reviewStatus}</span>
+      </div>
+      {Boolean(document.rejectionReason) && (
+        <VendorPortalFeedback tone="error">{document.rejectionReason}</VendorPortalFeedback>
+      )}
+      <div className="vp-actions">
+        <button
+          type="button"
+          className="vp-btn vp-btn-ghost"
+          disabled={!document.canDownload}
+          onClick={onDownload}
+        >
+          {document.canDownload ? "Download" : "Quarantined"}
+        </button>
+        {!locked && (
+          <button
+            type="button"
+            className="vp-btn vp-btn-ghost"
+            disabled={uploading}
+            onClick={onReplace}
+          >
+            Replace
+          </button>
+        )}
+      </div>
+    </article>
+  );
+}
+
 type UploadRequest = {
   file: File;
   replacementId?: number;
@@ -112,45 +170,14 @@ export function VendorPortalDocuments({
       )}
 
       {documents.map((document) => (
-        <article key={document.id} className="vp-uplift-row">
-          <div className="vp-row">
-            <strong>File</strong>
-            <span>
-              {document.originalFileName} · v{document.version}
-            </span>
-          </div>
-          <div className="vp-row">
-            <strong>Security scan</strong>
-            <span>{document.scanStatus}</span>
-          </div>
-          <div className="vp-row">
-            <strong>Review</strong>
-            <span>{document.reviewStatus}</span>
-          </div>
-          {Boolean(document.rejectionReason) && (
-            <VendorPortalFeedback tone="error">{document.rejectionReason}</VendorPortalFeedback>
-          )}
-          <div className="vp-actions">
-            <button
-              type="button"
-              className="vp-btn vp-btn-ghost"
-              disabled={!document.canDownload}
-              onClick={() => void vendorPortalApi.downloadDocument(token, dispatchId, document)}
-            >
-              {document.canDownload ? "Download" : "Quarantined"}
-            </button>
-            {!locked && (
-              <button
-                type="button"
-                className="vp-btn vp-btn-ghost"
-                disabled={uploadMutation.isPending}
-                onClick={() => chooseFile(document.id)}
-              >
-                Replace
-              </button>
-            )}
-          </div>
-        </article>
+        <VendorPortalDocumentRow
+          key={document.id}
+          document={document}
+          locked={locked}
+          uploading={uploadMutation.isPending}
+          onDownload={() => void vendorPortalApi.downloadDocument(token, dispatchId, document)}
+          onReplace={() => chooseFile(document.id)}
+        />
       ))}
 
       {progress !== undefined && (