diff --git a/src/components/CampaignPortal/CampaignPortal.css b/src/components/CampaignPortal/CampaignPortal.css
index 0453488..bffc9f8 100644
--- a/src/components/CampaignPortal/CampaignPortal.css
+++ b/src/components/CampaignPortal/CampaignPortal.css
@@ -2,6 +2,14 @@
   width: 30%;
 }
 
+.MailRow{
+  background-color: white;
+}
+
+.ContactRow{
+ width: 100%;
+}
+
 .DatesLeftHeader{
   width: 30%;
 }
diff --git a/src/components/CampaignPortal/CampaignPortal.jsx b/src/components/CampaignPortal/CampaignPortal.jsx
index fde6d41..9d31ac1 100644
--- a/src/components/CampaignPortal/CampaignPortal.jsx
+++ b/src/components/CampaignPortal/CampaignPortal.jsx
@@ -106,7 +106,44 @@ function CampaignPortal({
               </Row>
               <Row>
                 <Col>
-                  <Contacts email = {surveyInfo.email} />
+                  <Contacts 
+                    email={surveyInfo.email}
+                    // TODO: remove mock 
+                    referents={[
+                      {
+                        "firstName":"Bob",
+                        "lastName":"Lennon",
+                        "phoneNumber":"0123456789",
+                        "role":"PRIMARY"
+                      },
+                      {
+                        "firstName":"Bob",
+                        "lastName":"Lennon",
+                        "phoneNumber":"0123456789",
+                        "role":"PRIMARY"
+                      },
+                      {
+                        "firstName":"Bob",
+                        "lastName":"Lennon",
+                        "phoneNumber":"0123456789",
+                        "role":"PRIMARY"
+                      },
+                      {
+                        "firstName":"Bob",
+                        "lastName":"Lennon",
+                        "phoneNumber":"0123456789",
+                        "role":"PRIMARY"
+                      },
+                      
+                      {
+                        // "firstName":"John",
+                         "lastName":"Doe",
+                        "phoneNumber":"9876543210",
+                        "role":"SECONDARY"
+                      },
+
+                    ]}
+                  />
                   <DatesTable
                     identificationPhaseStartDate={surveyInfo.identificationPhaseStartDate}
                     collectionStartDate={surveyInfo.collectionStartDate}
diff --git a/src/components/CampaignPortal/Contacts.jsx b/src/components/CampaignPortal/Contacts.jsx
index 56c9c3a..b63231a 100644
--- a/src/components/CampaignPortal/Contacts.jsx
+++ b/src/components/CampaignPortal/Contacts.jsx
@@ -5,7 +5,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import D from '../../i18n';
 
-function Contacts({email}) {
+function Contacts({email, referents}) {
   const renderTooltip = (
     <Popover id="popover-basic">
       <Popover.Content>
@@ -13,6 +13,11 @@ function Contacts({email}) {
       </Popover.Content>
     </Popover>
   );
+
+  const primaryReferents = referents?.filter((referent) => referent.role === "PRIMARY");
+  const secondaryReferents = referents?.filter((referent) => referent.role === "SECONDARY");
+
+  console.log(primaryReferents)
   return (
     <Card className="ViewCard">
       <div>
@@ -27,23 +32,41 @@ function Contacts({email}) {
                 onClick={() => { window.location.assign(`mailto:${email}`); }}
               >
                 <th className="ContactsLeftHeader">{D.functionalBox}</th>
-                <td className=" LightGreyLine MailLink">{email}</td>
+                <td className="MailLink MailRow" >{email}</td>
               </tr>
             </OverlayTrigger>
             <tr>
               <th rowSpan="2" className="VerticallyCentered ContactsLeftHeader">{D.cpos}</th>
-              <td className="LightGreyLine">Chloé Dupont</td>
-            </tr>
-            <tr>
-              <td className="LightGreyLine">01 01 01 01 01</td>
+              {primaryReferents.map((primaryReferent) => {
+                return (
+                  <tr key={primaryReferent.phoneNumber}  className="LightGreyLine">
+                    <td >
+                      <div className='ContactRow' >
+                      {primaryReferent.firstName || primaryReferent.lastName ? 
+                        `${primaryReferent.firstName ?? ""} ${primaryReferent.lastName ?? ""}` 
+                        : "-"
+                      }
+                      </div>
+                      <div >
+                      {primaryReferent.phoneNumber ?? "-"}
+                      </div>
+                    </td>
+                    </tr>
+                  )
+                })}
             </tr>
-            <tr>
+            {/* <tr>
               <th rowSpan="2" className="VerticallyCentered ContactsLeftHeader">{D.deputyCpos}</th>
-              <td className="LightGreyLine">Thierry Fabres</td>
+              <td className="LightGreyLine">
+                {secondaryReferent.firstName || secondaryReferent.lastName ? 
+                  `${secondaryReferent.firstName ?? ""} ${secondaryReferent.lastName ?? ""}` 
+                  : "-"
+                }
+              </td>
             </tr>
             <tr>
-              <td className="LightGreyLine">02 01 01 01 01</td>
-            </tr>
+              <td className="LightGreyLine">{secondaryReferent && secondaryReferent.phoneNumber }</td>
+            </tr> */}
           </tbody>
         </Table>
       </div>