diff --git a/src/routes.js b/src/routes.js
index d0cab84..5dcb0dc 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -148,6 +148,7 @@ import ViewSalesCoOrdinatorTM from "./views/TerritoryManager/ViewSalesCoOrdinato
 import ViewPrincipalDistributorTM from "./views/TerritoryManager/ViewPrincipalDistributorTM";
 import ViewRetailDistributorTM from "./views/TerritoryManager/ViewRetailDistributor";
 import AddRetailDistributor from "./views/RetailDistributors/addRetailDistributor";
+import ViewPrincipalDistributorSC from "./views/SalesCoOrdinators/ViewPrincipalDistributorTM";
 const routes = [
   //dashboard
 
@@ -239,6 +240,12 @@ const routes = [
     element: AddSalesCoOrdinator,
     navName: "SalesCoOrdinators",
   },
+  {
+    path: "/view/SCprincipaldistributor/:id",
+    name: "View Principal Distributor",
+    element: ViewPrincipalDistributorSC,
+    navName: "SalesCoOrdinators",
+  },
   //TerritoryManager
   {
     path: "/territorymanager/edit/:id",
diff --git a/src/views/RetailDistributors/addRetailDistributor.js b/src/views/RetailDistributors/addRetailDistributor.js
index 0750e51..fad9510 100644
--- a/src/views/RetailDistributors/addRetailDistributor.js
+++ b/src/views/RetailDistributors/addRetailDistributor.js
@@ -20,6 +20,7 @@ const AddRetailDistributor = () => {
 
   const [user, setUser] = useState({
     name: "",
+    email: "",
     trade_name: "",
     address: "",
     state: "",
@@ -104,6 +105,7 @@ const AddRetailDistributor = () => {
       // Validate input fields
       if (
         !user.name ||
+        !user.email ||
         !user.trade_name ||
         !user.address ||
         !user.mobile_number ||
@@ -121,9 +123,10 @@ const AddRetailDistributor = () => {
 
       const formData = new FormData();
       formData.append("name", user.name);
+      formData.append("email", user.email);
       formData.append("trade_name", user.trade_name);
       formData.append("address", user.address);
-      formData.append("state", selectedState.value);
+      formData.append("state", selectedState.label);
       formData.append("city", selectedCity.value);
       formData.append("district", user.district);
       formData.append("pincode", user.pincode);
@@ -164,7 +167,6 @@ const AddRetailDistributor = () => {
   const handleCancel = () => {
     navigate("/retail-distributor");
   };
-
   return (
     <div>
       <Card
@@ -210,7 +212,29 @@ const AddRetailDistributor = () => {
                 />
               </Grid>
             </Grid>
-
+            <Grid item xs={12} className="d-flex align-items-center">
+              <Grid item xs={2}>
+                <Typography
+                  variant="body1"
+                  htmlFor="email"
+                  className="form-label"
+                >
+                  Email*
+                </Typography>
+              </Grid>
+              <Grid item xs={10}>
+                <TextField
+                  id="email"
+                  required
+                  type="text"
+                  fullWidth
+                  name="email"
+                  value={user.email}
+                  variant="outlined"
+                  onChange={handleInputChange}
+                />
+              </Grid>
+            </Grid>
             {/* Trade Name */}
             <Grid item xs={12} className="d-flex align-items-center">
               <Grid item xs={2}>
diff --git a/src/views/SalesCoOrdinators/SalesCoOrdinator.js b/src/views/SalesCoOrdinators/SalesCoOrdinator.js
index cad844a..c53887f 100644
--- a/src/views/SalesCoOrdinators/SalesCoOrdinator.js
+++ b/src/views/SalesCoOrdinators/SalesCoOrdinator.js
@@ -214,6 +214,7 @@ const SalesCoOrdinator = () => {
                           <th className="text-start">Email</th>
                           <th className="text-start">Verify</th>
                           <th className="text-start">Register On</th>
+                          <th className="text-start">Mapping</th>
                           <th className="text-start">Action</th>
                         </tr>
                       </thead>
@@ -264,16 +265,32 @@ const SalesCoOrdinator = () => {
                                   {new Date(
                                     salescoordinator.createdAt
                                   ).toLocaleString("en-IN", {
-                                    weekday: "short",
+                                    // weekday: "short",
                                     month: "short",
                                     day: "numeric",
                                     year: "numeric",
-                                    hour: "numeric",
-                                    minute: "numeric",
-                                    hour12: true,
+                                    // hour: "numeric",
+                                    // minute: "numeric",
+                                    // hour12: true,
                                   })}
                                 </td>
                                 <td className="text-start">
+                                <Link
+                                    to={`/view/SCprincipaldistributor/${salescoordinator._id}`}
+                                  >
+                                    <button
+                                      style={{
+                                        color: "white",
+                                        marginRight: "1rem",
+                                      }}
+                                      type="button"
+                                      className="btn btn-primary btn-sm  waves-effect waves-light btn-table ml-2"
+                                    >
+                                       PD
+                                    </button>
+                                  </Link>
+                                  </td>
+                                  <td className="text-start">
                                   <Link
                                     to={`/salescoordinator/edit/${salescoordinator._id}`}
                                   >
diff --git a/src/views/SalesCoOrdinators/ViewPrincipalDistributorTM.js b/src/views/SalesCoOrdinators/ViewPrincipalDistributorTM.js
new file mode 100644
index 0000000..7ad117b
--- /dev/null
+++ b/src/views/SalesCoOrdinators/ViewPrincipalDistributorTM.js
@@ -0,0 +1,548 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Link, useParams } from "react-router-dom";
+import axios from "axios";
+import Button from "@material-ui/core/Button";
+import { useNavigate } from "react-router-dom";
+import { isAutheticated } from "src/auth";
+import swal from "sweetalert";
+import debounce from "lodash.debounce";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import TextField from "@material-ui/core/TextField";
+
+const ViewPrincipalDistributorSC = () => {
+  const token = isAutheticated();
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(true);
+  const [principaldistributorData, setprincipaldistributorData] = useState([]);
+  const [data, setData] = useState({});
+  const nameRef = useRef();
+  const mobileRef = useRef();
+  const pdnameRef = useRef();
+  const pdmobileRef = useRef();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemPerPage, setItemPerPage] = useState(10);
+  const [modalcurrentPage, setmodalCurrentPage] = useState(1);
+  const modalitemPerPage = 10;
+  const [totalData, setTotalData] = useState(0);
+  const [openModal, setOpenModal] = useState(false);
+  const [modalPrincipalDistributors, setmodalPrincipalDistributors] = useState(
+    []
+  );
+  const [modalTotalData, setModalTotalData] = useState(0);
+
+  // Fetch territory manager data
+  useEffect(() => {
+    axios
+      .get(`/api/salescoordinator/getOne/${id}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+      .then((response) => setData(response.data.data))
+      .catch((error) => console.error("Error fetching SC data:", error));
+  }, [id, token]);
+
+  // Fetch Principal Distributors data
+  const getTMsprincipaldistributorData = async () => {
+    setLoading(true);
+    axios
+      .get(`/api/v1/getbySCId/${id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          page: currentPage,
+          show: itemPerPage,
+          name: nameRef.current?.value,
+          mobileNumber: mobileRef.current?.value,
+        },
+      })
+      .then((res) => {
+        setprincipaldistributorData(res.data?.principaldistributor);
+        setTotalData(res.data?.total_data);
+      })
+      .catch((err) => {
+        const msg = err?.response?.data?.message || "Something went wrong!";
+        swal({
+          title: "Error",
+          text: msg,
+          icon: "error",
+          button: "Retry",
+          dangerMode: true,
+        });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    getTMsprincipaldistributorData();
+  }, [success, itemPerPage, currentPage]);
+
+  // Debounced search for Principal Distributors
+  const debouncedSearch = useCallback(
+    debounce(() => {
+      setCurrentPage(1);
+      getTMsprincipaldistributorData();
+    }, 500),
+    [currentPage, itemPerPage]
+  );
+
+  const handleSearchChange = useCallback(() => {
+    debouncedSearch();
+  }, [debouncedSearch]);
+  // Fetch Principal Distributors data for modal
+  const getprincipaldistributorData = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(`/api/v1/admin/users`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          page: modalcurrentPage,
+          show: modalitemPerPage,
+          name: pdnameRef.current?.value,
+          mobileNumber: pdmobileRef.current?.value,
+        },
+      });
+      setmodalPrincipalDistributors(res.data?.users);
+      setModalTotalData(res.data?.totalUsers);
+    } catch (err) {
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (openModal) {
+      getprincipaldistributorData();
+    }
+  }, [openModal, modalcurrentPage]);
+
+  // Debounced search for Principal Distributors in modal
+  const debouncedmodalSearch = useCallback(
+    debounce(() => {
+      setmodalCurrentPage(1);
+      getprincipaldistributorData();
+    }, 500),
+    [modalcurrentPage]
+  );
+
+  const handlemodalSearchChange = useCallback(() => {
+    debouncedmodalSearch();
+  }, [debouncedmodalSearch]);
+
+  const handleOpenModal = () => {
+    setOpenModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setOpenModal(false);
+  };
+  const handlePreviousPage = () => {
+    if (modalcurrentPage > 1) {
+      setmodalCurrentPage(modalcurrentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (modalPrincipalDistributors.length === modalitemPerPage) {
+      setmodalCurrentPage(modalcurrentPage + 1);
+    }
+  };
+
+  const handleDelete = (id) => {
+    swal({
+      title: "Are you sure?",
+      icon: "warning",
+      buttons: {
+        Yes: { text: "Yes", value: true },
+        Cancel: { text: "Cancel", value: "cancel" },
+      },
+    }).then((value) => {
+      if (value === true) {
+        axios
+        .patch(`/api/v1/unmapSC/${id}`, {}, { // Changed to PATCH and sent an empty body
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+          .then((res) => {
+            swal({
+              title: "Deleted",
+              text: "Principal Distributor Unmapped successfully!",
+              icon: "success",
+              button: "ok",
+            });
+            setSuccess((prev) => !prev);
+          })
+          .catch((err) => {
+            let msg = err?.response?.data?.message
+              ? err?.response?.data?.message
+              : "Something went wrong!";
+            swal({
+              title: "Warning",
+              text: msg,
+              icon: "error",
+              button: "Retry",
+              dangerMode: true,
+            });
+          });
+      }
+    });
+  };
+  const handleAddPrincipalDistributor = async (pdid) => {
+    try {
+      await axios.put(
+        `/api/v1/mappedSC/${pdid}`,
+        { mappedbySC: id },
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      swal({
+        title: "Success",
+        text: "Principal Distributor added successfully!",
+        icon: "success",
+        button: "Ok",
+      });
+      setSuccess((prev) => !prev);
+      handleCloseModal(); // Close modal after adding
+    } catch (err) {
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    }
+  };
+
+  return (
+    <div className="main-content">
+      <div className="page-content">
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-12">
+              <div className="page-title-box d-flex mb-1 align-items-center justify-content-between">
+                {/* Left Side with Information in Separate Columns */}
+                <div className="d-flex flex-column">
+                  <div style={{ fontSize: "18px" }} className="fw-bold">
+                    Unique ID: {data?.uniqueId}
+                  </div>
+                  <div style={{ fontSize: "18px" }} className="fw-bold">
+                    Name: {data?.name}
+                  </div>
+                  <div style={{ fontSize: "18px" }} className="fw-bold">
+                    Mobile Number: {data?.mobileNumber}
+                  </div>
+                  <div style={{ fontSize: "18px" }} className="fw-bold">
+                    Mail: {data?.email}
+                  </div>
+                </div>
+
+                {/* Right Side with the Button */}
+                <div className="page-title-right">
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "1rem",
+                      textTransform: "capitalize",
+                    }}
+                    onClick={handleOpenModal}
+                  >
+                    Add Principal Distributor
+                  </Button>
+                  <Button
+                    variant="contained"
+                    color="secondary"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "1rem",
+                      marginLeft: "1rem",
+                      textTransform: "capitalize",
+                      backgroundColor: "#d32f2f", // Red color for danger
+                      color: "#fff",
+                      "&:hover": {
+                        backgroundColor: "#b71c1c", // Darker red on hover
+                      },
+                    }}
+                    onClick={() => navigate("/territorymanagers")}
+                  >
+                    Back
+                  </Button>
+                </div>
+              </div>
+              <Dialog
+                open={openModal}
+                onClose={handleCloseModal}
+                maxWidth="md"
+                fullWidth
+              >
+                <DialogTitle>Search and Add Principal Distributor</DialogTitle>
+                <DialogContent>
+                    <div style={{ display: "flex", gap: "16px", marginBottom:"2rem",marginTop:"-1rem" }}>
+                      <TextField
+                        label="Principal Distributor Name"
+                        placeholder="Principal Distributor name"
+                        inputRef={pdnameRef}
+                        onChange={handlemodalSearchChange}
+                        disabled={loading}
+                        style={{ flex: 1, marginRight: "16px" }}
+                      />
+                      <TextField
+                        style={{ flex: 1 }}
+                        label="Mobile Number"
+                        placeholder="Mobile Number"
+                        inputRef={pdmobileRef}
+                        onChange={handlemodalSearchChange}
+                        disabled={loading}
+                      />
+                    </div>
+                    <div className="table-responsive table-shoot mt-3">
+                      <table className="table table-centered table-nowrap">
+                        <thead>
+                          <tr>
+                            <th>Id</th>
+                            <th>SBU</th>
+                            <th>Name</th>
+                            <th>Mobile</th>
+                            <th>Email</th>
+                            <th>Action</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {modalPrincipalDistributors.length > 0 ? (
+                            modalPrincipalDistributors.map((PD) => (
+                              <tr key={PD._id}>
+                                <td>{PD.uniqueId}</td>
+                                <td>{PD.SBU}</td>
+                                <td>{PD.name}</td>
+                                <td>{PD.phone}</td>
+                                <td>{PD.email}</td>
+                                <td>
+                                  <Button
+                                    variant="contained"
+                                    color="primary"
+                                    onClick={() =>
+                                      handleAddPrincipalDistributor(PD._id)
+                                    }
+                                  >
+                                    Add
+                                  </Button>
+                                </td>
+                              </tr>
+                            ))
+                          ) : (
+                            <tr>
+                              <td colSpan="6" className="text-center">
+                                No Principal Distributor found!
+                              </td>
+                            </tr>
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+                    <div className="d-flex justify-content-between">
+                      <div>
+                        Showing {modalPrincipalDistributors?.length} of{" "}
+                        {modalTotalData} entries
+                      </div>
+                      <div>
+                        <button
+                          onClick={handlePreviousPage}
+                          disabled={modalcurrentPage === 1 || loading}
+                          className="btn btn-primary"
+                        >
+                          Previous
+                        </button>
+                        <button
+                          onClick={handleNextPage}
+                          disabled={
+                            modalPrincipalDistributors?.length <
+                              modalitemPerPage || loading
+                          }
+                          className="btn btn-primary ml-2"
+                        >
+                          Next
+                        </button>
+                      </div>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                  <Button onClick={handleCloseModal} color="secondary">
+                    Cancel
+                  </Button>
+                </DialogActions>
+              </Dialog>
+            </div>
+          </div>
+
+          <div className="row">
+            <div className="col-lg-12">
+              <div className="card">
+                <div className="card-body">
+                  <div className="row ml-0 mr-0 mb-10">
+                    <div className="col-lg-1">
+                      <div className="dataTables_length">
+                        <label className="w-100">
+                          Show
+                          <select
+                            onChange={(e) => {
+                              setItemPerPage(e.target.value);
+                              setCurrentPage(1);
+                            }}
+                            className="form-control"
+                            disabled={loading}
+                          >
+                            <option value="10">10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                          </select>
+                          entries
+                        </label>
+                      </div>
+                    </div>
+                    <div className="col-lg-3">
+                      <label>Principal Distributor Name:</label>
+                      <input
+                        type="text"
+                        placeholder="Principal Distributor name"
+                        className="form-control"
+                        ref={nameRef}
+                        onChange={handleSearchChange}
+                        disabled={loading}
+                      />
+                    </div>
+                    <div className="col-lg-3">
+                      <label>Mobile Number:</label>
+                      <input
+                        type="text"
+                        placeholder="Mobile Number"
+                        className="form-control"
+                        ref={mobileRef}
+                        onChange={handleSearchChange}
+                        disabled={loading}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="table-responsive table-shoot mt-3">
+                    <table className="table table-centered table-nowrap">
+                      <thead
+                        className="thead-light"
+                        style={{ background: "#ecdddd" }}
+                      >
+                        <tr>
+                          <th>Unique Id </th>
+                          <th className="text-start">SBU</th>
+                          <th className="text-start">Name</th>
+                          <th className="text-start">Mobile No.</th>
+                          <th className="text-start">Email</th>
+                          <th className="text-start">Action</th>
+                        </tr>
+                      </thead>
+
+                      <tbody>
+                        {loading ? (
+                          <tr>
+                            <td className="text-center" colSpan="6">
+                              Loading...
+                            </td>
+                          </tr>
+                        ) : principaldistributorData?.length > 0 ? (
+                          principaldistributorData?.map((PD, i) => {
+                            return (
+                              <tr key={i}>
+                                <td className="text-start">{PD?.uniqueId}</td>
+                                <td className="text-start">{PD?.SBU}</td>
+                                <td className="text-start">{PD?.name}</td>
+                                <td className="text-start">{PD?.phone}</td>
+                                <td className="text-start">
+                                  {PD?.email ? (
+                                    PD?.email
+                                  ) : (
+                                    <small className="m-0 text-secondary">
+                                      No Email Added!
+                                    </small>
+                                  )}
+                                </td>
+                                <td className="text-start">
+                                  <button
+                                    type="button"
+                                    style={{ color: "white" }}
+                                    className="btn btn-danger btn-sm  waves-effect waves-light btn-table ml-2"
+                                    onClick={() => handleDelete(PD._id)}
+                                  >
+                                    Delete
+                                  </button>
+                                </td>
+                              </tr>
+                            );
+                          })
+                        ) : (
+                          <tr>
+                            <td className="text-center" colSpan="6">
+                              No Principal Distributor found!
+                            </td>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                  <div className="d-flex justify-content-between">
+                    <div>
+                      Showing {principaldistributorData?.length} of {totalData}{" "}
+                      entries
+                    </div>
+                    <div>
+                      <button
+                        onClick={() => setCurrentPage(currentPage - 1)}
+                        disabled={currentPage === 1 || loading}
+                        className="btn btn-primary"
+                      >
+                        Previous
+                      </button>
+                      <button
+                        onClick={() => setCurrentPage(currentPage + 1)}
+                        disabled={
+                          principaldistributorData?.length < itemPerPage ||
+                          loading
+                        }
+                        className="btn btn-primary ml-2"
+                      >
+                        Next
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewPrincipalDistributorSC;
diff --git a/src/views/TerritoryManager/TerritoryManager.js b/src/views/TerritoryManager/TerritoryManager.js
index f76faae..e5566b4 100644
--- a/src/views/TerritoryManager/TerritoryManager.js
+++ b/src/views/TerritoryManager/TerritoryManager.js
@@ -214,6 +214,7 @@ const TerritoryManager = () => {
                           <th className="text-start">Email</th>
                           <th className="text-start">Verify</th>
                           <th className="text-start">Register On</th>
+                          <th className="text-start">Mapping</th>
                           <th className="text-start">Action</th>
                         </tr>
                       </thead>
@@ -264,13 +265,13 @@ const TerritoryManager = () => {
                                   {new Date(
                                     territorymanager.createdAt
                                   ).toLocaleString("en-IN", {
-                                    weekday: "short",
+                                    // weekday: "short",
                                     month: "short",
                                     day: "numeric",
                                     year: "numeric",
-                                    hour: "numeric",
-                                    minute: "numeric",
-                                    hour12: true,
+                                    // hour: "numeric",
+                                    // minute: "numeric",
+                                    // hour12: true,
                                   })}
                                 </td>
                                 <td className="text-start">
@@ -316,6 +317,8 @@ const TerritoryManager = () => {
                                        RD
                                     </button>
                                   </Link>
+                                  </td>
+                                  <td className="text-start">
                                   <Link
                                     to={`/territorymanager/edit/${territorymanager._id}`}
                                   >