diff --git a/src/components/Activities/ReportTask.jsx b/src/components/Activities/ReportTask.jsx
index 5888968f..3aab1d16 100644
--- a/src/components/Activities/ReportTask.jsx
+++ b/src/components/Activities/ReportTask.jsx
@@ -13,7 +13,7 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
     completedTask: z
       .number()
       .min(1, "Completed Work must be at least 1")
-      
+
       .int("Completed Work must be an integer")
       .positive("Completed Work must be a positive number")
       .optional(),
@@ -63,78 +63,65 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
           ></button>
 
           <div className="container  m-0">
-            <div className="d-flex justify-content-between">
-              <figure className="text-start p-0 m-0">
-                <blockquote className="blockquote">
-                  <small>
-                    {" "}
-                    Assigned Date : {formatDate(report?.assignmentDate)}
-                  </small>
-                </blockquote>
-              </figure>
-              <figure className="text-end p-0 m-0">
-                <blockquote className="blockquote">
-                  <small>Assigned By</small>
-                </blockquote>
-                <figcaption className="blockquote-footer mb-0">
-                  {/* <div className="d-flex avatar avatar-xs">
-            <span className="avatar-initial rounded-circle bg-label-primary">
-              {report?.assignedBy?.firstName.slice(0, 1)}
-            </span> */}
-                  <cite title="Source Title m-0">{` ${report?.assignedBy.firstName} ${report?.assignedBy.lastName}`}</cite>
-                  {/* </div> */}
-                </figcaption>
-              </figure>
-            </div>
-
-            <div className="d-flex  p-0 m-0">
-              <div className="flex-shrink-0 mt-1 mx-sm-0 px-2  mx-auto">
-                <i className="bx bx-buildings"></i>
+            <div class="mb-1 row text-start">
+              <label for="html5-text-input" class="col-md-4 col-form-label">
+                Assigned Date :{" "}
+              </label>
+              <div class="col-md-8 text-start">
+                <label class="col-md-2 col-form-label">
+                  {formatDate(report?.assignmentDate)}
+                </label>
+              </div>
+            </div>
+            <div class="mb-1 row text-start">
+              <label for="html5-search-input" class="col-md-4 col-form-label">
+                Assigned By :{" "}
+              </label>
+              <div class="col-md-8  text-start">
+                <label class=" col-form-label">{` ${report?.assignedBy.firstName} ${report?.assignedBy.lastName}`}</label>
+              </div>
+            </div>
+            <div class="mb-1 row text-start">
+              <label for="html5-email-input" class="col-md-4 col-form-label">
+                Wrok Area :
+              </label>
+              <div class="col-md-8 text-start text-wrap">
+                <label class=" col-form-label">
+                  {" "}
+                  {report?.workItem?.workArea?.floor?.building?.name}{" "}
+                  <i class="bx bx-chevron-right"></i>{" "}
+                  {report?.workItem?.workArea?.floor?.floorName}{" "}
+                  <i class="bx bx-chevron-right"> </i>
+                  {report?.workItem?.workArea?.areaName}
+                </label>
+              </div>
+            </div>
+            <div class="mb-1 row text-start">
+              <label for="html5-email-input" class="col-md-4 col-form-label">
+                Activity :
+              </label>
+              <div class="col-md-8 text-start text-wrap">
+                <label class=" col-form-label">
+                  {report?.workItem?.activityMaster.activityName}
+                </label>
+              </div>
+            </div>
+            <div class="mb-1 row text-start">
+              <label for="html5-email-input" class="col-md-4 col-form-label">
+                Team Size :
+              </label>
+              <div class="col-md-8 text-start text-wrap">
+                <label class=" col-form-label">
+                  {report?.teamMembers?.length}
+                </label>
               </div>
-              <p className="lead">
-                {report?.workItem?.workArea?.floor?.building?.name}
-              </p>
-              <p className="lead ms-12">
-                {report?.workItem?.workArea?.floor?.floorName}
-              </p>
             </div>
-            <dl className="row text-start ms-3">
-              <dt className="col-sm-6">
-                Work Area : {report?.workItem?.workArea?.areaName}
-              </dt>
-              <dd className="col-sm-6">
-                <small> {report?.workItem?.activityMaster.activityName}</small>
-              </dd>
-            </dl>
-            <dl className="row text-start ms-3">
-              <dt className="col-sm-4">Team</dt>
-
-              <dd className="col-sm-4 d-flex align-items-center avatar-group justify-content-start">
-                {report?.teamMembers.map((member) => (
-                  <>
-                    <div
-                      data-bs-toggle="tooltip"
-                      data-bs-html="true"
-                      data-popup="tooltip-custom"
-                      data-bs-placement="top"
-                      title={`${member.firstName} ${member.lastName}`}
-                      className="avatar avatar-xs"
-                    >
-                      {/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
-                      <span className="avatar-initial rounded-circle bg-label-primary">
-                        {member?.firstName.slice(0, 1)}
-                      </span>
-                    </div>
-                  </>
-                ))}
-              </dd>
-              <dt className="col-sm-4 text-start">
-                Planned : {report?.plannedTask}
-              </dt>
-            </dl>
             <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="row p-0">
-                <div className="col-4">
+              <div class="mb-1 row text-start">
+                <label for="html5-email-input" class="col-md-4 col-form-label">
+                  Completed Work
+                </label>
+                <div class="col-md-8 text-start text-wrap">
                   <input
                     {...register("completedTask", { valueAsNumber: true })}
                     id="smallInput"
@@ -148,7 +135,12 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
                     </div>
                   )}
                 </div>
-                <div className="col-8">
+              </div>
+              <div class="mb-1 row text-start">
+                <label for="html5-email-input" class="col-md-4 col-form-label">
+                  Comment
+                </label>
+                <div class="col-md-8 text-start text-wrap">
                   <textarea
                     {...register("comment")}
                     className="form-control"
@@ -157,11 +149,10 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
                     placeholder="Enter comment"
                   />
                   {errors.comment && (
-                    <div className="text-danger">{errors.comment.message}</div>
+                    <div className="danger-text">{errors.comment.message}</div>
                   )}
                 </div>
               </div>
-
               <div className="col-12 text-center my-2">
                 <button type="submit" className="btn btn-sm btn-primary me-3">
                   {loading ? "Please wait" : "Submit Report"}