diff --git a/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx b/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
index 63bdb09c..61a4c011 100644
--- a/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
+++ b/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
@@ -8,6 +8,7 @@ import { useParams } from "react-router-dom";
 import Pagination from "../../common/Pagination";
 import ConfirmModal from "../../common/ConfirmModal";
 import { SpinnerLoader } from "../../common/Loader";
+import ViewBranchDetails from "./ViewBranchDetails";
 
 const ServiceBranch = () => {
   const { projectId } = useParams();
@@ -19,6 +20,7 @@ const ServiceBranch = () => {
   });
   const { mutate: DeleteBranch, isPending } = useDeleteBranch();
   const [deletingId, setDeletingId] = useState(null);
+  const [ViewRequest, setViewRequest] = useState({ requestId: null, view: false });
 
   const [search, setSearch] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
@@ -84,7 +86,7 @@ const ServiceBranch = () => {
             <div className="col-md-4 col-sm-12 ms-n3 text-start ">
               <h5 className="mb-0">
                 <i className="bx bx-buildings text-primary"></i>
-                <span className="ms-2 fw-bold">Branchs</span>
+                <span className="ms-2 fw-bold">Branches</span>
               </h5>
             </div>
 
@@ -171,37 +173,67 @@ const ServiceBranch = () => {
                   !isError &&
                   data?.data?.length > 0 &&
                   data.data.map((branch) => (
-                    <tr key={branch.id} style={{ height: "35px" }}>
+                    <tr
+                      key={branch.id}
+                      style={{ height: "35px", cursor: "pointer" }}
+                      onClick={(e) => {
+                        if (!e.target.closest(".dropdown") && !e.target.closest(".bx-show")) {
+                          setViewRequest({ branchId: branch.id, view: true });
+                        }
+                      }}
+                    >
                       {columns.map((col) => (
                         <td key={col.key} className={`${col.align} py-3`}>
                           {col.getValue(branch)}
                         </td>
                       ))}
                       <td className="text-center">
-                        <div className="dropdown z-2">
-                          <button
-                            type="button"
-                            className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-                            data-bs-toggle="dropdown"
-                          >
-                            <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
-                          </button>
-                          <ul className="dropdown-menu dropdown-menu-end w-auto">
-                            {!showInactive ? (
-                              <>
-                                <li
-                                  onClick={() =>
-                                    setManageState({
-                                      IsOpen: true,
-                                      branchId: branch.id,
-                                    })
-                                  }
-                                >
-                                  <a className="dropdown-item px-2 cursor-pointer py-1">
-                                    <i className="bx bx-edit text-primary bx-xs me-2"></i>
-                                    Modify
-                                  </a>
-                                </li>
+                        <div className="d-flex justify-content-center align-items-center gap-2">
+                          {/* View Icon */}
+                          <i
+                            className="bx bx-show text-primary cursor-pointer"
+                            onClick={() =>
+                              setViewRequest({ branchId: branch.id, view: true })
+                            }
+                          ></i>
+
+                          <div className="dropdown z-2">
+                            <button
+                              type="button"
+                              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                              data-bs-toggle="dropdown"
+                            >
+                              <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
+                            </button>
+                            <ul className="dropdown-menu dropdown-menu-end w-auto">
+                              {!showInactive ? (
+                                <>
+                                  <li
+                                    onClick={() =>
+                                      setManageState({
+                                        IsOpen: true,
+                                        branchId: branch.id,
+                                      })
+                                    }
+                                  >
+                                    <a className="dropdown-item px-2 cursor-pointer py-1">
+                                      <i className="bx bx-edit text-primary bx-xs me-2"></i>
+                                      Modify
+                                    </a>
+                                  </li>
+                                  <li
+                                    onClick={() => {
+                                      setIsDeleteModalOpen(true);
+                                      setDeletingId(branch.id);
+                                    }}
+                                  >
+                                    <a className="dropdown-item px-2 cursor-pointer py-1">
+                                      <i className="bx bx-trash text-danger bx-xs me-2"></i>
+                                      Delete
+                                    </a>
+                                  </li>
+                                </>
+                              ) : (
                                 <li
                                   onClick={() => {
                                     setIsDeleteModalOpen(true);
@@ -209,25 +241,13 @@ const ServiceBranch = () => {
                                   }}
                                 >
                                   <a className="dropdown-item px-2 cursor-pointer py-1">
-                                    <i className="bx bx-trash text-danger bx-xs me-2"></i>
-                                    Delete
+                                    <i className="bx bx-undo text-danger me-2"></i>
+                                    Restore
                                   </a>
                                 </li>
-                              </>
-                            ) : (
-                              <li
-                                onClick={() => {
-                                  setIsDeleteModalOpen(true);
-                                  setDeletingId(branch.id);
-                                }}
-                              >
-                                <a className="dropdown-item px-2 cursor-pointer py-1">
-                                  <i className="bx bx-undo text-danger  me-2"></i>
-                                  Restore
-                                </a>
-                              </li>
-                            )}
-                          </ul>
+                              )}
+                            </ul>
+                          </div>
                         </div>
                       </td>
                     </tr>
@@ -277,6 +297,17 @@ const ServiceBranch = () => {
               />
             </GlobalModel>
           )}
+          {ViewRequest.view && (
+            <GlobalModel
+              isOpen
+              size="md"
+              modalType="top"
+              closeModal={() => setViewRequest({ branchId: null, view: false })}
+            >
+              <ViewBranchDetails BranchToEdit={ViewRequest.branchId} />
+            </GlobalModel>
+
+          )}
         </div>
       </div>
     </>
diff --git a/src/components/ServiceProject/ServiceProjectBranch/ViewBranchDetails.jsx b/src/components/ServiceProject/ServiceProjectBranch/ViewBranchDetails.jsx
new file mode 100644
index 00000000..db67ea8b
--- /dev/null
+++ b/src/components/ServiceProject/ServiceProjectBranch/ViewBranchDetails.jsx
@@ -0,0 +1,142 @@
+import React from "react";
+import { useBranchDetails } from "../../../hooks/useServiceProject";
+import Avatar from "../../common/Avatar";
+import { formatUTCToLocalTime } from "../../../utils/dateUtils";
+
+const ViewBranchDetails = ({ BranchToEdit }) => {
+    const { data, isLoading, isError, error: requestError } = useBranchDetails(BranchToEdit);
+
+    console.log("branch details:", data);
+
+    if (isLoading) return <p>Loading...</p>;
+    if (isError) return <p>Error: {requestError?.message}</p>;
+
+    return (
+        <form className="container px-3">
+            <div className="col-12 mb-1">
+                <h5 className="fw-semibold m-0">Branch Details</h5>
+            </div>
+            <div className="row mb-1 mt-5">
+                <div className="col-md-12 mb-4">
+                    <div className="d-flex">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold text-start"
+                            style={{ minWidth: "130px" }}
+                        >
+                            Branch Name:
+                        </label>
+                        <div className="text-muted">{data?.branchName || "N/A"}</div>
+                    </div>
+                </div>
+                <div className="col-md-12 mb-4">
+                    <div className="d-flex">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold text-start"
+                            style={{ minWidth: "130px" }}
+                        >
+                            Branch Type:
+                        </label>
+                        <div className="text-muted">{data?.branchName || "N/A"}</div>
+                    </div>
+                </div>
+                <div className="col-md-12 mb-4">
+                    <div className="d-flex">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold text-start"
+                            style={{ minWidth: "130px" }}
+                        >
+                            Project:
+                        </label>
+                        <div className="text-muted text-start">{data?.project?.name || "N/A"}</div>
+                    </div>
+                </div>
+
+                <div className="col-md-12 text-start mb-2">
+                    <div className="d-flex align-items-center">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold"
+                            style={{ minWidth: "125px" }}
+                        >
+                            Updated By :
+                        </label>
+                        <>
+                            <Avatar
+                                size="xs"
+                                classAvatar="m-0 me-1"
+                                firstName={data.updatedBy.firstName}
+                                lastName={data.updatedBy.lastName}
+                            />
+                            <span className="text-muted">
+                                {`${data.updatedBy.firstName ?? ""} ${data.updatedBy.lastName ?? ""
+                                    }`.trim() || "N/A"}
+                            </span>
+                        </>
+                    </div>
+                </div>
+                <div className="col-md-12 text-start mb-3">
+                    <div className="d-flex align-items-center">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold"
+                            style={{ minWidth: "125px" }}
+                        >
+                            Created By :
+                        </label>
+                        <Avatar
+                            size="xs"
+                            classAvatar="m-0 me-1"
+                            firstName={data?.createdBy?.firstName}
+                            lastName={data?.createdBy?.lastName}
+                        />
+                        <span className="text-muted">
+                            {`${data?.createdBy?.firstName ?? ""} ${data?.createdBy?.lastName ?? ""
+                                }`.trim() || "N/A"}
+                        </span>
+                    </div>
+                </div>
+                <div className="col-md-12 mb-3">
+                    <div className="d-flex">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold text-start"
+                            style={{ minWidth: "130px" }}
+                        >
+                            Created At :
+                        </label>
+                        <div className="text-muted">
+                            {data?.createdAt
+                                ? formatUTCToLocalTime(data.createdAt, true)
+                                : "N/A"}
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 mb-3 text-start">
+                    <label className="form-label mb-2 fw-semibold">Contact Information:</label>
+                    <div className="text-muted">
+                        {data?.contactInformation ? (
+                            JSON.parse(data.contactInformation).map((contact, index) => (
+                                <div key={index} className="mb-3">
+                                    <div className="fw-semibold mb-1">Person {index + 1}:-</div>
+                                    <div>
+                                        <label className="fw-semibold mb-1">Person Name:</label> {contact.contactPerson || "N/A"}
+                                    </div>
+                                    <div>
+                                        <label className="fw-semibold mb-1">Designation:</label> {contact.designation || "N/A"}
+                                    </div>
+                                    <div>
+                                        <label className="fw-semibold mb-1">Emails:</label> {contact.contactEmails?.join(", ") || "N/A"}
+                                    </div>
+                                    <div>
+                                        <label className="fw-semibold mb-1">Numbers:</label> {contact.contactNumbers?.join(", ") || "N/A"}
+                                    </div>
+                                </div>
+                            ))
+                        ) : (
+                            "N/A"
+                        )}
+                    </div>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+export default ViewBranchDetails;