diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
new file mode 100644
index 00000000..15533622
--- /dev/null
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
@@ -0,0 +1,217 @@
+import React, { useEffect, useState } from "react";
+import moment from "moment";
+import { formatNumber, formatUTCToLocalTime, getDateDifferenceInDays } from "../../../utils/dateUtils";
+import { useNavigate } from "react-router-dom";
+import ManageProjectInfo from "../../Project/ManageProjectInfo";
+import ProjectRepository from "../../../repositories/ProjectRepository";
+import { cacheData, getCachedData } from "../../../slices/apiDataManager";
+import showToast from "../../../services/toastService";
+import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
+import { MANAGE_PROJECT } from "../../../utils/constants";
+import GlobalModel from "../../common/GlobalModel";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../../slices/localVariablesSlice";
+import { useProjectContext } from "../../../pages/project/ProjectPage";
+import { useActiveInActiveServiceProject } from "../../../hooks/useServiceProject";
+import ConfirmModal from "../../common/ConfirmModal";
+import { getProjectStatusColor, getProjectStatusName } from "../../../utils/projectStatus";
+
+const ServiceProjectCard = ({ project, isCore = true }) => {
+    const [deleteProject, setDeleteProject] = useState({
+        project: null,
+        isOpen: false,
+    });
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+    const ManageProject = useHasUserPermission(MANAGE_PROJECT);
+    const { setMangeProject, setManageServiceProject } = useProjectContext();
+
+    const getProgress = (planned, completed) => {
+        return (completed * 100) / planned + "%";
+    };
+    const getProgressInNumber = (planned, completed) => {
+        return (completed * 100) / planned;
+    };
+
+    const handleClose = () => setShowModal(false);
+
+    const handleViewProject = () => {
+        if (isCore) {
+            dispatch(setProjectId(project.id));
+            navigate(`/projects/details`);
+        } else {
+            navigate(`/service-projects/${project.id}`);
+        }
+    };
+    const handleViewActivities = () => {
+        dispatch(setProjectId(project.id));
+        navigate(`/activities/records?project=${project.id}`);
+    };
+    const handleManage = () => {
+        if (isCore) {
+            setMangeProject({
+                isOpen: true,
+                Project: project.id,
+            });
+        } else {
+            setManageServiceProject({
+                isOpen: true,
+                project: project.id,
+            });
+        }
+    };
+
+    const { mutate: DeleteProject, isPending } = useActiveInActiveServiceProject(
+        () => setDeleteProject({ project: null, isOpen: false })
+    );
+    const handleActiveInactive = (projectId) => {
+        DeleteProject(projectId, false);
+    };
+
+    console.log("Kartik", project)
+    return (
+        <>
+            <ConfirmModal
+                type="delete"
+                header="Delete Project"
+                message="Are you sure you want delete?"
+                onSubmit={handleActiveInactive}
+                onClose={() => setDeleteProject({ project: null, isOpen: false })}
+                loading={isPending}
+                paramData={project.id}
+                isOpen={deleteProject.isOpen}
+            />
+            <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
+                <div className={`card cursor-pointer`}>
+                    <div className="card-header pb-4">
+                        <div className="d-flex align-items-start">
+                            <div className="d-flex align-items-center">
+                                <div className="avatar me-4">
+                                    <i
+                                        className="rounded-circle bx bx-building-house"
+                                        style={{ fontSize: "xx-large" }}
+                                    ></i>
+                                </div>
+                                <div className="me-2">
+                                    <h5
+                                        className="mb-0 stretched-link text-heading text-start"
+                                        onClick={handleViewProject}
+                                    >
+                                        {project?.shortName ? project?.shortName : project?.name}
+                                    </h5>
+                                    <div className="client-info text-body">
+                                        <span>{project?.shortName ? project?.name : ""}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className={`ms-auto ${!ManageProject && "d-none"}`}>
+                                <div className="dropdown z-2">
+                                    <button
+                                        type="button"
+                                        className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                    >
+                                        <i
+                                            className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                                            data-bs-toggle="tooltip"
+                                            data-bs-offset="0,8"
+                                            data-bs-placement="top"
+                                            data-bs-custom-class="tooltip-dark"
+                                            title="More Action"
+                                        ></i>
+                                    </button>
+                                    <ul className="dropdown-menu dropdown-menu-end">
+                                        <li>
+                                            <a
+                                                aria-label="click to  View details"
+                                                className="dropdown-item"
+                                                onClick={handleViewProject}
+                                            >
+                                                <i className="bx bx-detail me-2"></i>
+                                                <span className="align-left">View details</span>
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a className="dropdown-item" onClick={handleManage}>
+                                                <i className="bx bx-pencil me-2"></i>
+                                                <span className="align-left">Modify</span>
+                                            </a>
+                                        </li>
+                                        {isCore && (
+                                            <li onClick={handleViewActivities}>
+                                                <a className="dropdown-item">
+                                                    <i className="bx bx-task me-2"></i>
+                                                    <span className="align-left">Activities</span>
+                                                </a>
+                                            </li>
+                                        )}
+                                        {!isCore && (
+                                            <li
+                                                onClick={() =>
+                                                    setDeleteProject({ project: project, isOpen: true })
+                                                }
+                                            >
+                                                <a className="dropdown-item">
+                                                    <i className="bx bx-trash me-2"></i>
+                                                    <span className="align-left">Delete</span>
+                                                </a>
+                                            </li>
+                                        )}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Card View  */}
+
+                    <div className="card-body pb-1">
+                        <div className="d-flex align-items-center flex-wrap">
+                            <div className="text-start mb-4 ms-2">
+                                <div className="ms-11 mb-3">
+                                    <p className="mb-0">
+                                        <span
+                                            className={
+                                                "badge rounded-pill " +
+                                                getProjectStatusColor(project?.status?.id)
+                                            }
+                                        >
+                                            {getProjectStatusName(project?.status?.id)}
+                                        </span>
+                                    </p>
+                                </div>
+
+                                <p className="mb-1">
+                                    <span className="text-heading fw-medium">Contact Person: </span>
+                                    {project?.contactName || "NA"}
+                                </p>
+
+                                <p className="mb-1">
+                                    <span className="text-heading fw-medium">Assigned Date: </span>
+                                    {formatUTCToLocalTime(project?.assignedDate)}
+                                </p>
+
+                                <p className="mb-0">
+                                    <span className="text-heading fw-medium">Address: </span>
+                                    {project?.address || "NA"}
+                                </p>
+
+
+                                <p className="mb-0">{project?.projectAddress}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="card-body border-top">
+                        <div className="d-flex align-items-center mb-4">
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ServiceProjectCard;
\ No newline at end of file
diff --git a/src/pages/ServiceProject/ServiceProjectDisplay.jsx b/src/pages/ServiceProject/ServiceProjectDisplay.jsx
index 1a3eeb24..b089df49 100644
--- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx
+++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx
@@ -10,6 +10,7 @@ import Pagination from "../../components/common/Pagination";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
 import { SpinnerLoader } from "../../components/common/Loader";
+import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard";
 
 const ServiceProjectDisplay = ({ listView }) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -48,7 +49,7 @@ const ServiceProjectDisplay = ({ listView }) => {
         <p>List</p>
       ) : (
         data?.data?.map((project) => (
-          <ProjectCard project={project} isCore={false} />
+          <ServiceProjectCard project={project} isCore={false} />
         ))
       )}