diff --git a/src/pages/ServiceProject/ServiceProjectDetail.jsx b/src/pages/ServiceProject/ServiceProjectDetail.jsx
index ac5eecc5..f8de3964 100644
--- a/src/pages/ServiceProject/ServiceProjectDetail.jsx
+++ b/src/pages/ServiceProject/ServiceProjectDetail.jsx
@@ -5,8 +5,18 @@ import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import ServiceProjectProfile from "../../components/ServiceProject/ServiceProjectProfile";
 import Jobs from "../../components/ServiceProject/Jobs";
 import ProjectTeam from "../../components/ServiceProject/ServiceProjectTeam/ProjectTeam";
+import { useSelectedProject } from "../../slices/apiDataManager";
+import { useParams } from "react-router-dom";
+import { useServiceProject } from "../../hooks/useServiceProject";
 
 const ServiceProjectDetail = () => {
+  const { projectId } = useParams();
+  const {
+    data: projectdata,
+    isLoading: isProjectLoading,
+    isProjectError,
+  } = useServiceProject(projectId);
+
   const [activePill, setActivePill] = useState(
     sessionStorage.getItem("servicePrjectTab") || "profile"
   );
@@ -18,21 +28,22 @@ const ServiceProjectDetail = () => {
     switch (activePill) {
       case "profile":
         return <ServiceProjectProfile />;
-        case "teams":
+      case "teams":
         return <ProjectTeam />;
-        case "jobs":
+      case "jobs":
         return <Jobs />;
       default:
         return <ComingSoonPage />;
     }
   };
+
   return (
     <div className="container-fluid">
       <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
           { label: "Sevice Projects", link: "/projects" },
-          // { label: projects_Details?.name || "Project", link: null },
+          { label: projectdata?.name || "Project", link: null }
         ]}
       />
       <div>