diff --git a/src/modules/manager/task/assignments/AssignmentComplete.tsx b/src/modules/manager/task/assignments/AssignmentComplete.tsx
index 9ab8d0f..ad44fb4 100644
--- a/src/modules/manager/task/assignments/AssignmentComplete.tsx
+++ b/src/modules/manager/task/assignments/AssignmentComplete.tsx
@@ -13,6 +13,7 @@ import TaskTypeAndNameDisplayPanel from "../../workflowTemplates/components/Task
 import Button, { ButtonType } from "../../../../components/common/Button";
 import TaskProcessor from "./components/TaskProcessor";
 import "../../../../Sass/_assignmentComplete.scss";
+import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
 
 const AssignmentComplete: React.FC = () => {
   const { assignmentId } = useParams<{ assignmentId: string }>();
@@ -47,6 +48,19 @@ const AssignmentComplete: React.FC = () => {
     void loadAssignment();
   }, [loadAssignment]);
 
+  const handleComplete = useCallback(async () => {
+    const assignmentGeneralId = MakeGeneralIdRef(
+      assignmentDetails!.assignment.id,
+      assignmentDetails?.assignment.guid,
+    );
+
+    await assignmentCompleteService.completeAssignment(
+      assignmentGeneralId,
+      taskData,
+    );
+    toast.success(`${assignmentDetails?.task.taskName} has been completed.`);
+  }, [assignmentDetails, taskData]);
+
   if (assignmentDetails === undefined) {
     return <LoadingPanel />;
   }
@@ -72,12 +86,9 @@ const AssignmentComplete: React.FC = () => {
           <Button
             buttonType={ButtonType.primary}
             disabled={!isTaskValid}
-            onClick={() => {
-              console.log("Task data to submit:", taskData);
-              toast.info("Complete action not implemented yet");
-            }}
+            onClick={handleComplete}
           >
-            Complete
+            {t("Complete")}
           </Button>
         </div>
       </div>
@@ -111,11 +122,17 @@ const AssignmentComplete: React.FC = () => {
             <div className="assigneeDetailsLabel">Assigned to</div>
             <div>Contacts</div>
             <div>
-              <AssigneePanel user={assignmentDetails.assignment.userId} />
+              {assignmentDetails.assignment.userId && (
+                <AssigneePanel user={assignmentDetails.assignment.userId} />
+              )}
+              {!assignmentDetails.assignment.userId && <div>&nbsp;</div>}
             </div>
             <div>Roles</div>
             <div>
-              <AssigneePanel role={assignmentDetails.assignment.roleId} />
+              {assignmentDetails.assignment.roleId && (
+                <AssigneePanel role={assignmentDetails.assignment.roleId} />
+              )}
+              {!assignmentDetails.assignment.roleId && <div>&nbsp;</div>}
             </div>
           </div>
         </div>
diff --git a/src/modules/manager/task/assignments/services/assignmentCompleteService.ts b/src/modules/manager/task/assignments/services/assignmentCompleteService.ts
index be1d972..61f4bd3 100644
--- a/src/modules/manager/task/assignments/services/assignmentCompleteService.ts
+++ b/src/modules/manager/task/assignments/services/assignmentCompleteService.ts
@@ -41,6 +41,11 @@ export interface GetAssignmentForCompletion {
   workflowTemplateVersion: ReadWorkflowTemplateVersion;
 }
 
+export interface CompleteAssignmentRequest {
+  assignmenId: GeneralIdRef;
+  taskData: Record<string, unknown>;
+}
+
 export async function getAssignmentForCompletion(
   assignmentId: bigint,
 ): Promise<GetAssignmentForCompletion> {
@@ -52,8 +57,21 @@ export async function getAssignmentForCompletion(
   return response?.data;
 }
 
+export async function completeAssignment(
+  assignmentGeneralId: GeneralIdRef,
+  taskData: Record<string, unknown>,
+): Promise<any> {
+  const request: CompleteAssignmentRequest = {
+    assignmenId: assignmentGeneralId,
+    taskData,
+  };
+
+  return await httpService.post(apiEndpoint + "/CompleteAssignmost", request);
+}
+
 const assignmentCompleteService = {
   getAssignmentForCompletion,
+  completeAssignment,
 };
 
 export default assignmentCompleteService;