diff --git a/src/components/Employee/EmpDashboard.jsx b/src/components/Employee/EmpDashboard.jsx
index e3866cab..91958f3f 100644
--- a/src/components/Employee/EmpDashboard.jsx
+++ b/src/components/Employee/EmpDashboard.jsx
@@ -17,7 +17,7 @@ const EmpDashboard = ({ profile }) => {
           {" "}
           <EmpOverview profile={profile}></EmpOverview>
         </div>
-        
+
         <div className="col col-sm-6 pt-5">
           <div className="card ">
             <div className="card-body">
@@ -83,9 +83,12 @@ const EmpDashboard = ({ profile }) => {
           </div>
         </div>
         <div className="col-12 col-sm-6 pt-5">
-          {" "}
-          <EmpReportingManager employeeId={profile?.id}></EmpReportingManager>
+          <EmpReportingManager
+            employeeId={profile?.id}
+            employee={profile}
+          />
         </div>
+
       </div>
     </>
   );
diff --git a/src/components/Employee/EmpReportingManager.jsx b/src/components/Employee/EmpReportingManager.jsx
index 61d33c37..813b0256 100644
--- a/src/components/Employee/EmpReportingManager.jsx
+++ b/src/components/Employee/EmpReportingManager.jsx
@@ -2,61 +2,59 @@ import React, { useState } from "react";
 import { useOrganizationHierarchy } from "../../hooks/useEmployees";
 import GlobalModel from "../common/GlobalModel";
 import ManageReporting from "./ManageReporting";
+import Avatar from "../common/Avatar";
+import { SpinnerLoader } from "../common/Loader";
 
 const EmpReportingManager = ({ employeeId, employee }) => {
     const { data, isLoading } = useOrganizationHierarchy(employeeId);
     const [showManageReportingModal, setShowManageReportingModal] = useState(false);
 
-    if (isLoading) return <span>Loading...</span>;
+    if (isLoading)
+        return (
+            <div className="d-flex justify-content-center py-5">
+                <SpinnerLoader />
+            </div>
+        );
 
-    const primary = data?.find((item) => item.isPrimary);
-    const secondary = data?.filter((item) => !item.isPrimary);
-
-    // Create comma-separated string for secondary managers
-    const secondaryNames = secondary
-        ?.map((item) => `${item.reportTo?.firstName || ""} ${item.reportTo?.lastName || ""}`.trim())
-        .join(", ");
+    // Safe access to primary and secondary managers
+    const primaryManager = data?.find((d) => d.isPrimary)?.reportTo;
+    const secondaryManagers = data?.filter((d) => !d.isPrimary).map((d) => d.reportTo) || [];
 
     return (
         <div className="row">
             <div className="col-12 mb-4">
                 <div className="card">
                     <div className="card-body">
-                        <h5 className="m-0 py-1 mb-3">
-                            Update Reporting Manager
+                        <small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
+                            Reporting Manager
+                        </small>
 
-                        </h5>
+                        <div className="text-start">
+                            {/* Primary Manager */}
+                            <div className="row mb-2 align-items-start">
+                                <div className="col-auto text-end pe-3"><i className="bx bx-user-circle me-1"></i>Primary Manager<span style={{ marginLeft: "50px" }}>:</span></div>
+                                <div className="col text-wrap">
+                                    {primaryManager
+                                        ? `${primaryManager.firstName || ""} ${primaryManager.lastName || ""}`
+                                        : "NA"}
+                                </div>
+                            </div>
 
-
-                        {/* Primary Reporting Manager */}
-                        <div className="d-flex align-items-start mb-3">
-                            <span className="d-flex">
-                                <i className="bx bx-user bx-xs me-2 mt-1"></i>
-                                <span>Primary Reporting Manager</span>
-                            </span>
-                            <span style={{ marginLeft: "75px" }}>:</span>
-                            <span className="ms-5">
-                                {primary?.reportTo?.firstName || <em>NA</em>}{" "}
-                                {primary?.reportTo?.lastName || ""}
-                            </span>
+                            {/* Secondary Managers */}
+                            {secondaryManagers?.length > 0 && (
+                                <div className="row mb-3 align-items-start">
+                                    <div className="col-auto text-end pe-3"><i className="bx bx-group me-1"></i>Secondary Managers<span style={{ marginLeft: "25px" }}>:</span></div>
+                                    <div className="col text-wrap">
+                                        {secondaryManagers
+                                            .map((m) => `${m.firstName || ""} ${m.lastName || ""}`)
+                                            .join(", ")}
+                                    </div>
+                                </div>
+                            )}
                         </div>
 
-                        {/* Secondary Reporting Manager (comma-separated) */}
-                        {secondary?.length > 0 && (
-                            <div className="d-flex align-items-start mb-3" style={{ textAlign: "left" }}>
-                                <span className="d-flex">
-                                    <i className="bx bx-user bx-xs me-2 mt-1"></i>
-                                    <span>Secondary Reporting Manager</span>
-                                </span>
-                                <span style={{ marginLeft: "57px" }}>:</span>
-                                <span className="ms-5" >
-                                    {secondaryNames || <em>NA</em>}
-                                </span>
-                            </div>
-                        )}
-
-                        {/* Open Modal Button */}
-                        <div className="mt-3 text-end">
+                        {/* Manage Reporting Button */}
+                        <div className="mt-5 text-end" >
                             <button
                                 className="btn btn-sm btn-primary"
                                 onClick={() => setShowManageReportingModal(true)}
@@ -68,18 +66,17 @@ const EmpReportingManager = ({ employeeId, employee }) => {
                 </div>
             </div>
 
-            {/* ManageReporting Modal */}
+            {/* Manage Reporting Modal */}
             {showManageReportingModal && (
                 <GlobalModel
                     isOpen={showManageReportingModal}
                     closeModal={() => setShowManageReportingModal(false)}
                 >
                     <ManageReporting
+                        employee={employee}
                         employeeId={employeeId}
-                        employee={primary?.employee || {}}
                         onClosed={() => setShowManageReportingModal(false)}
                     />
-
                 </GlobalModel>
             )}
         </div>
@@ -87,3 +84,4 @@ const EmpReportingManager = ({ employeeId, employee }) => {
 };
 
 export default EmpReportingManager;
+
diff --git a/src/components/Employee/ManageReporting.jsx b/src/components/Employee/ManageReporting.jsx
index c0d2cba6..b9857fea 100644
--- a/src/components/Employee/ManageReporting.jsx
+++ b/src/components/Employee/ManageReporting.jsx
@@ -110,7 +110,7 @@ const ManageReporting = ({ onClosed, employee, employeeId }) => {
           {/* Employee Name + Role */}
           <div className="d-flex flex-column">
             <div className="d-flex align-items-center gap-2">
-              <span className="fw-semibold text-dark fs-6 me-1">
+              <span className="fw-semibold text-dark fs-6 me-1 cursor-pointer" onClick={handleClick}>
                 {`${employee.firstName || ""} ${employee.middleName || ""} ${employee.lastName || ""}`.trim() || "Employee Name NA"}
               </span>