diff --git a/src/pages/Facility/services/serviceRequests/ServiceRequestShow.tsx b/src/pages/Facility/services/serviceRequests/ServiceRequestShow.tsx
index 538204c0156..49ce758e875 100644
--- a/src/pages/Facility/services/serviceRequests/ServiceRequestShow.tsx
+++ b/src/pages/Facility/services/serviceRequests/ServiceRequestShow.tsx
@@ -37,6 +37,7 @@ import activityDefinitionApi from "@/types/emr/activityDefinition/activityDefini
 import { DiagnosticReportStatus } from "@/types/emr/diagnosticReport/diagnosticReport";
 import {
   EDITABLE_SERVICE_REQUEST_STATUSES,
+  ServiceRequestReadSpec,
   Status,
 } from "@/types/emr/serviceRequest/serviceRequest";
 import serviceRequestApi from "@/types/emr/serviceRequest/serviceRequestApi";
@@ -95,7 +96,6 @@ export default function ServiceRequestShow({
   const [isPrintingAllQRCodes, setIsPrintingAllQRCodes] = useState(false);
   const [isQRCodeSheetOpen, setIsQRCodeSheetOpen] = useState(false);
   const [isCompleteDialogOpen, setIsCompleteDialogOpen] = useState(false);
-  const [completionNote, setCompletionNote] = useState("");
   const [selectedSpecimenDefinition, setSelectedSpecimenDefinition] =
     useState<SpecimenDefinitionRead | null>(null);
 
@@ -160,22 +160,6 @@ export default function ServiceRequestShow({
     },
   });
 
-  const {
-    mutate: completeServiceRequest,
-    isPending: isCompletingServiceRequest,
-  } = useMutation({
-    mutationFn: mutate(serviceRequestApi.updateServiceRequest, {
-      pathParams: { facilityId, serviceRequestId },
-    }),
-    onSuccess: () => {
-      toast.success(t("service_request_completed"));
-      setIsCompleteDialogOpen(false);
-      queryClient.invalidateQueries({
-        queryKey: ["serviceRequest", facilityId, serviceRequestId],
-      });
-    },
-  });
-
   const createDraftSpecimen = (requirement: SpecimenDefinitionRead) => {
     const matchingSpecimens = request?.specimens.filter(
       (spec) => spec.specimen_definition?.id === requirement.id,
@@ -644,11 +628,7 @@ export default function ServiceRequestShow({
               <Button
                 variant="primary"
                 className="font-semibold shrink-0"
-                onClick={() => {
-                  setCompletionNote(request.note ?? "");
-                  setIsCompleteDialogOpen(true);
-                }}
-                disabled={isCompletingServiceRequest}
+                onClick={() => setIsCompleteDialogOpen(true)}
               >
                 {t("mark_as_complete")}
                 <ShortcutBadge actionId="mark-as-complete" />
@@ -659,9 +639,7 @@ export default function ServiceRequestShow({
           {isMobile ? (
             <Sheet
               open={isCompleteDialogOpen}
-              onOpenChange={(open) => {
-                if (!isCompletingServiceRequest) setIsCompleteDialogOpen(open);
-              }}
+              onOpenChange={setIsCompleteDialogOpen}
             >
               <SheetContent side="bottom">
                 <SheetHeader>
@@ -671,26 +649,18 @@ export default function ServiceRequestShow({
                   </SheetDescription>
                 </SheetHeader>
                 <CompletionNoteContent
-                  note={completionNote}
-                  isUpdating={isCompletingServiceRequest}
-                  onNoteChange={setCompletionNote}
-                  onComplete={() =>
-                    completeServiceRequest({
-                      status: Status.completed,
-                      note: completionNote.trim() || null,
-                      locations: request.locations.map((loc) => loc.id),
-                    })
-                  }
+                  facilityId={facilityId}
+                  serviceRequestId={serviceRequestId}
+                  setIsCompleteDialogOpen={setIsCompleteDialogOpen}
                   onCancel={() => setIsCompleteDialogOpen(false)}
+                  serviceRequest={request}
                 />
               </SheetContent>
             </Sheet>
           ) : (
             <Dialog
               open={isCompleteDialogOpen}
-              onOpenChange={(open) => {
-                if (!isCompletingServiceRequest) setIsCompleteDialogOpen(open);
-              }}
+              onOpenChange={setIsCompleteDialogOpen}
             >
               <DialogContent className="sm:max-w-lg shadow-lg border-white/20">
                 <DialogHeader>
@@ -700,17 +670,11 @@ export default function ServiceRequestShow({
                   </DialogDescription>
                 </DialogHeader>
                 <CompletionNoteContent
-                  note={completionNote}
-                  isUpdating={isCompletingServiceRequest}
-                  onNoteChange={setCompletionNote}
-                  onComplete={() =>
-                    completeServiceRequest({
-                      status: Status.completed,
-                      note: completionNote.trim() || null,
-                      locations: request.locations.map((loc) => loc.id),
-                    })
-                  }
+                  facilityId={facilityId}
+                  serviceRequestId={serviceRequestId}
+                  setIsCompleteDialogOpen={setIsCompleteDialogOpen}
                   onCancel={() => setIsCompleteDialogOpen(false)}
+                  serviceRequest={request}
                 />
               </DialogContent>
             </Dialog>
@@ -722,21 +686,39 @@ export default function ServiceRequestShow({
 }
 
 interface CompletionNoteContentProps {
-  note: string;
-  isUpdating: boolean;
-  onNoteChange: (note: string) => void;
-  onComplete: () => void;
+  facilityId: string;
+  serviceRequestId: string;
   onCancel: () => void;
+  setIsCompleteDialogOpen: (open: boolean) => void;
+  serviceRequest: ServiceRequestReadSpec;
 }
 
 const CompletionNoteContent = ({
-  note,
-  isUpdating,
-  onNoteChange,
-  onComplete,
+  facilityId,
+  serviceRequestId,
   onCancel,
+  setIsCompleteDialogOpen,
+  serviceRequest,
 }: CompletionNoteContentProps) => {
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [note, setNote] = useState(serviceRequest.note ?? "");
+
+  const {
+    mutate: completeServiceRequest,
+    isPending: isCompletingServiceRequest,
+  } = useMutation({
+    mutationFn: mutate(serviceRequestApi.updateServiceRequest, {
+      pathParams: { facilityId, serviceRequestId },
+    }),
+    onSuccess: () => {
+      toast.success(t("service_request_completed"));
+      setIsCompleteDialogOpen(false);
+      queryClient.invalidateQueries({
+        queryKey: ["serviceRequest", facilityId, serviceRequestId],
+      });
+    },
+  });
 
   return (
     <>
@@ -746,18 +728,32 @@ const CompletionNoteContent = ({
         </p>
         <Textarea
           value={note}
-          onChange={(e) => onNoteChange(e.target.value)}
+          onChange={(e) => setNote(e.target.value)}
           placeholder={t("enter_note")}
           className="min-h-14"
           aria-label={t("completion_note")}
         />
       </div>
       <div className="flex flex-row items-start justify-start gap-2 pt-2 sm:pt-0">
-        <Button variant="primary" onClick={onComplete} disabled={isUpdating}>
+        <Button
+          variant="primary"
+          onClick={() =>
+            completeServiceRequest({
+              status: Status.completed,
+              note: note.trim() || null,
+              locations: serviceRequest.locations.map((loc) => loc.id),
+            })
+          }
+          disabled={isCompletingServiceRequest}
+        >
           <CheckIcon className="size-4" />
-          {isUpdating ? t("updating") : `${t("save_and_complete")}`}
+          {isCompletingServiceRequest ? t("updating") : t("save_and_complete")}
         </Button>
-        <Button variant="outline" onClick={onCancel} disabled={isUpdating}>
+        <Button
+          variant="outline"
+          onClick={onCancel}
+          disabled={isCompletingServiceRequest}
+        >
           {t("cancel")}
         </Button>
       </div>