diff --git a/src/api/send-mail/index.tsx b/src/api/send-mail/index.tsx
index b5be945..3fd8a8b 100644
--- a/src/api/send-mail/index.tsx
+++ b/src/api/send-mail/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Button, Col, Container, Row, TextArea } from "@dataesr/dsfr-plus";
-import { Contribution } from "../../types";
+import { Contribution, Contribute_Production } from "../../types";
 import { postHeaders } from "../../config/api";
 import { toast } from "react-toastify";
 
@@ -8,7 +8,7 @@ function EmailSender({
   contribution,
   setResponseScanR,
 }: {
-  contribution: Contribution;
+  contribution: Contribution | Contribute_Production;
   setResponseScanR: any;
 }) {
   const [, setEmailSent] = useState(false);
diff --git a/src/api/utils/buildURL.tsx b/src/api/utils/buildURL.tsx
index d07dc85..e92b48b 100644
--- a/src/api/utils/buildURL.tsx
+++ b/src/api/utils/buildURL.tsx
@@ -8,9 +8,13 @@ export const buildURL = (
   searchInMessages: boolean = false
 ): string => {
   const location = useLocation();
-  const baseUrl = location.pathname.includes("contributionpage")
-    ? "contribute"
-    : "contact";
+  let baseUrl = "contact";
+
+  if (location.pathname.includes("contributionpage")) {
+    baseUrl = "contribute";
+  } else if (location.pathname.includes("apioperations")) {
+    baseUrl = "contribute_productions";
+  }
 
   const sorted = sort === "ASC" ? "sort=created_at" : "sort=-created_at";
   const where: any = {};
diff --git a/src/components/edit-modal/index.tsx b/src/components/edit-modal/index.tsx
index 24e42d2..09a05ac 100644
--- a/src/components/edit-modal/index.tsx
+++ b/src/components/edit-modal/index.tsx
@@ -54,21 +54,28 @@ const EditModal: React.FC<EditModalProps> = ({ isOpen, data, onClose }) => {
     setInputs((prevInputs) => ({ ...prevInputs, idRef: newIdref }));
   };
 
-  const basePath = window.location.pathname.includes("contact")
-    ? "contact"
-    : "contribute";
+  let basePath = "contact";
+
+  if (window.location.pathname.includes("contribute")) {
+    basePath = "contribute";
+  } else if (window.location.pathname.includes("contribute_production")) {
+    basePath = "contribute_production";
+  }
 
   const handleSubmit = async () => {
     try {
-      const response = await fetch(`${window.location.origin}/api/${basePath}/${data._id}`, {
-        method: "PATCH",
-        headers: postHeaders,
-        body: JSON.stringify({
-          status: inputs.status,
-          tag: inputs.tag,
-          idref: inputs.idRef,
-        }),
-      });
+      const response = await fetch(
+        `${window.location.origin}/api/${basePath}/${data._id}`,
+        {
+          method: "PATCH",
+          headers: postHeaders,
+          body: JSON.stringify({
+            status: inputs.status,
+            tag: inputs.tag,
+            idref: inputs.idRef,
+          }),
+        }
+      );
       if (!response.ok) {
         console.log("Erreur de réponse", response);
       } else {
@@ -133,7 +140,6 @@ const EditModal: React.FC<EditModalProps> = ({ isOpen, data, onClose }) => {
             />
           </Col>
         </Row>
-
         <Col className="fr-mt-5w">
           <Button onClick={handleSubmit} variant="secondary" size="sm">
             <Title as="h3">Enregistrer</Title>
diff --git a/src/components/selectors/index.tsx b/src/components/selectors/index.tsx
index 736bfc6..ac517aa 100644
--- a/src/components/selectors/index.tsx
+++ b/src/components/selectors/index.tsx
@@ -45,13 +45,15 @@ const Selectors = ({
         onChange={(selectedOption) => setStatus(selectedOption.value)}
         styles={customStyles}
       />
-      <Toggle
-        checked={searchInMessage}
-        id="searchInMessage"
-        name={"Rechercher dans les messages"}
-        onChange={(e) => setSearchInMessage(e.target.checked)}
-        label="Rechercher dans les messages"
-      />
+      {location.pathname !== "/apioperations" && (
+        <Toggle
+          checked={searchInMessage}
+          id="searchInMessage"
+          name={"Rechercher dans les messages"}
+          onChange={(e) => setSearchInMessage(e.target.checked)}
+          label="Rechercher dans les messages"
+        />
+      )}
     </Col>
   );
 };
diff --git a/src/config/api.ts b/src/config/api.ts
index 22b6937..47220dd 100644
--- a/src/config/api.ts
+++ b/src/config/api.ts
@@ -7,4 +7,7 @@ export const contributionUrl = "/api/contribute?max_results=2000";
 //   "https://scanr-api.dataesr.ovh/contribute?max_results=2000";
 export const contactUrl = "/api/contact?max_results=2000";
 // export const contactUrl =
-//   "https://scanr-api.dataesr.ovh/contact?max_results=2000";
+// "https://scanr-api.dataesr.ovh/contact?max_results=2000";
+// export const productionUrl =
+//   "https://scanr-api.dataesr.ovh/contribute_production?max_results=2000";
+export const productionUrl = "/api/contribute_production?max_results=2000";
diff --git a/src/pages/api-operation-page/contribution-production-card.tsx b/src/pages/api-operation-page/contribution-production-card.tsx
new file mode 100644
index 0000000..1de4b98
--- /dev/null
+++ b/src/pages/api-operation-page/contribution-production-card.tsx
@@ -0,0 +1,65 @@
+import {
+  Accordion,
+  AccordionGroup,
+  Badge,
+  Col,
+  Container,
+  Row,
+  Text,
+} from "@dataesr/dsfr-plus";
+import "./styles.scss";
+import { Contribute_Production } from "../../types";
+import ContributorProductionInfo from "./contributor-production-info";
+import StaffProductionActions from "./staff-production-action";
+
+const ContributionProductionItem = ({
+  data,
+}: {
+  data: Contribute_Production;
+}) => {
+  const renderAccordion = () => (
+    <Container fluid className="accordion">
+      <Row>
+        <Col>
+          <Badge
+            size="sm"
+            color="purple-glycine"
+            className="fr-mr-1w fr-mb-1w status"
+          >
+            {data.status}
+          </Badge>
+          <Badge
+            size="sm"
+            color="green-emeraude"
+            className="fr-mr-1w fr-mb-1w status"
+          >
+            {data.productions.length.toString() + " Publications à lier "}
+          </Badge>
+        </Col>
+        <Text size="sm">
+          <i className="date">
+            Reçu le {new Date(data.created_at).toLocaleDateString()}
+          </i>
+        </Text>
+      </Row>
+      <Row>
+        <Col>
+          <Text size="sm" bold className="name">
+            {data.name}
+          </Text>
+        </Col>
+      </Row>
+    </Container>
+  );
+
+  return (
+    <AccordionGroup>
+      <Accordion title={renderAccordion}>
+        <ContributorProductionInfo data={data} />
+        <StaffProductionActions data={data} />
+      </Accordion>
+    </AccordionGroup>
+  );
+};
+
+export default ContributionProductionItem;
diff --git a/src/pages/api-operation-page/contributor-production-info.tsx b/src/pages/api-operation-page/contributor-production-info.tsx
new file mode 100644
index 0000000..6497f24
--- /dev/null
+++ b/src/pages/api-operation-page/contributor-production-info.tsx
@@ -0,0 +1,12 @@
+import { Contribute_Production } from "../../types";
+import MessagePreview from "./message-preview";
+
+const ContributorProductionInfo = ({
+  data,
+}: {
+  data: Contribute_Production;
+}) => {
+  return <MessagePreview data={data} />;
+};
+
+export default ContributorProductionInfo;
diff --git a/src/pages/api-operation-page/contributor-requests.tsx b/src/pages/api-operation-page/contributor-requests.tsx
new file mode 100644
index 0000000..f8a4aa4
--- /dev/null
+++ b/src/pages/api-operation-page/contributor-requests.tsx
@@ -0,0 +1,81 @@
+import { Col, Link, Text } from "@dataesr/dsfr-plus";
+import React, { useState } from "react";
+import { Production } from "../../types";
+
+const ContributorRequests: React.FC<{
+  data: { productions: Production[] };
+}> = ({ data }) => {
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedId(text);
+    });
+  };
+
+  return (
+    <>
+      {data.productions.map((production, index) => (
+        <Col md="3" className="fr-mr-1v">
+          <Text
+            size="sm"
+            key={index}
+            style={{
+              border: "1px solid #ccc",
+              borderRadius: "5px",
+              padding: "5px",
+            }}
+          >
+            <Text size="sm" className="textInCard">
+              <strong>ID :</strong>{" "}
+              <span onClick={() => copyToClipboard(production.id)}>
+                {production.id}
+              </span>
+              {copiedId === production.id && (
+                <span
+                  style={{
+                    color: "white",
+                    backgroundColor: "#efcb3a",
+                    marginLeft: "10px",
+                    padding: "2px 5px",
+                    borderRadius: "5px",
+                    fontSize: "0.8em",
+                  }}
+                >
+                  ID copié
+                </span>
+              )}
+            </Text>
+            <Text className="textInCard" size="sm">
+              <Link
+                className="fr-mr-1w"
+                target="_blank"
+                rel="noreferrer noopener external"
+                href={`https://scanr.enseignementsup-recherche.gouv.fr/publication/${production.id}`}
+              >
+                scanR
+              </Link>
+              <Link
+                className="fr-mr-1w"
+                target="_blank"
+                rel="noreferrer noopener external"
+                href={`https://paysage.enseignementsup-recherche.gouv.fr/`}
+              >
+                Paysage
+              </Link>
+              <Link
+                target="_blank"
+                rel="noreferrer noopener external"
+                href={`https://paysage.enseignementsup-recherche.gouv.fr/`}
+              >
+                dataESR
+              </Link>
+            </Text>
+          </Text>
+        </Col>
+      ))}
+    </>
+  );
+};
+
+export default ContributorRequests;
diff --git a/src/pages/api-operation-page/index.tsx b/src/pages/api-operation-page/index.tsx
index 65eead5..9f40590 100644
--- a/src/pages/api-operation-page/index.tsx
+++ b/src/pages/api-operation-page/index.tsx
@@ -1,10 +1,132 @@
-import { Container, Text, Title } from "@dataesr/dsfr-plus";
+import { useState, useEffect } from "react";
+import {
+  Col,
+  Container,
+  Row,
+  SearchBar,
+  Text,
+  Title,
+} from "@dataesr/dsfr-plus";
+import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { Contribute_Production, ContributionPageProps } from "../../types";
+import { useLocation } from "react-router-dom";
+import { buildURL } from "../../api/utils/buildURL";
+import BottomPaginationButtons from "../../components/pagination/bottom-buttons";
+import Selectors from "../../components/selectors";
+import TopPaginationButtons from "../../components/pagination/top-buttons";
+import ContributionProductionItem from "./contribution-production-card";
+
+const ContributionPage: React.FC<ContributionPageProps> = () => {
+  const [reload] = useState(0);
+  const [sort, setSort] = useState("DESC");
+  const [status, setStatus] = useState("new");
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(1);
+
+  const location = useLocation();
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    setPage(parseInt(params.get("page") || "1"));
+    setQuery(params.get("query") || "");
+  }, [location.search]);
+
+  useEffect(() => {
+    const newSearchParams = new URLSearchParams();
+    newSearchParams.set("page", page.toString());
+    newSearchParams.set("query", query);
+
+    const newURL = `${window.location.pathname}?${newSearchParams.toString()}`;
+    window.history.pushState({}, "", newURL);
+  }, [page, query]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [reload, location.pathname]);
+
+  useEffect(() => {
+    if (location.pathname.includes("apioperations")) {
+    }
+  }, [location.pathname]);
+
+  const { data, isLoading, isError } = useGetContributionData(
+    buildURL(sort, status, query, page),
+    reload
+  );
+  console.log(data);
+
+  const meta = (data as { meta: any }).meta;
+  const maxPage = meta ? Math.ceil(meta?.total / 10) : 1;
+  const contrib: Contribute_Production[] = (
+    data as { data: Contribute_Production[] }
+  ).data;
+
+  const handleSearch = (value: string) => {
+    setQuery(value.trim());
+  };
+
+  const filteredContributions = contrib?.filter((contribution) => {
+    const nameMatches = contribution.name
+      .toLowerCase()
+      .includes(query.toLowerCase());
+    return nameMatches;
+  });
+
+  if (isLoading)
+    return (
+      <Container className="fr-my-5w">
+        <Text>Chargement</Text>
+      </Container>
+    );
+  if (isError)
+    return (
+      <Container className="fr-my-5w">
+        <Text>Erreur</Text>
+      </Container>
+    );
 
-export default function ApiOperationPage() {
   return (
-    <Container className="fr-my-15w">
-      <Title as="h1">Operation API</Title>
-      <Text>Coucou OPERATION API</Text>
+    <Container className="fr-my-5w">
+      <Row gutters className="fr-mb-3w">
+        <Col md="12">
+          <Title as="h1">Opérations sur l'API</Title>
+        </Col>
+        <Col md="8" xs="12">
+          <SearchBar
+            className="fr-mb-1w"
+            onSearch={(value) => handleSearch(value || "")}
+            isLarge
+            buttonLabel="Rechercher"
+            placeholder="Rechercher par nom"
+          />
+          <TopPaginationButtons
+            meta={meta}
+            page={page}
+            maxPage={maxPage}
+            setPage={setPage}
+          />
+        </Col>
+        <Col offsetLg="1">
+          <Selectors
+            setSort={setSort}
+            setStatus={setStatus}
+            searchInMessage={""}
+            setSearchInMessage={""}
+          />
+        </Col>
+      </Row>
+      {filteredContributions?.map((contribution) => (
+        <ContributionProductionItem
+          data={contribution as Contribute_Production}
+        />
+      ))}
+      <BottomPaginationButtons
+        page={page}
+        maxPage={maxPage}
+        setPage={setPage}
+      />
     </Container>
   );
-}
+};
+
+export default ContributionPage;
diff --git a/src/pages/api-operation-page/message-preview.tsx b/src/pages/api-operation-page/message-preview.tsx
new file mode 100644
index 0000000..512c260
--- /dev/null
+++ b/src/pages/api-operation-page/message-preview.tsx
@@ -0,0 +1,121 @@
+import { Button, Col, Container, Row, Text } from "@dataesr/dsfr-plus";
+import type { Contribute_Production } from "../../types";
+import EditModal from "../../components/edit-modal";
+import { useState, useCallback } from "react";
+import ContributorRequests from "./contributor-requests";
+import "./styles.scss";
+
+const MessagePreview = ({ data }: { data: Contribute_Production }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [copySuccess, setCopySuccess] = useState("");
+
+  const copyToClipboard = useCallback((text, successMessage) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopySuccess(successMessage);
+      setTimeout(() => setCopySuccess(""), 2000);
+    });
+  }, []);
+
+  const handleOpenModal = () => {
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <Container fluid>
+      <EditModal
+        isOpen={showModal}
+        onClose={handleCloseModal}
+        data-production={data}
+        data={{
+          responseByMail: "",
+          responseFrom: "",
+          modified_at: "",
+          team: undefined,
+          _id: undefined,
+          status: "",
+          tags: undefined,
+          message: "",
+          created_at: "",
+          fonction: undefined,
+          organisation: undefined,
+          email: undefined,
+          name: undefined,
+          type: "",
+          id: "",
+          comment: "",
+          data: [],
+          meta: {
+            total: 0,
+          },
+          highlightedQuery: "",
+        }}
+      />
+      <Row className="contributorProductionSideInfo">
+        {data.id && (
+          <Text
+            className="fr-mr-2w"
+            size="sm"
+            style={{ cursor: "pointer" }}
+            onClick={() => copyToClipboard(data.id, "ID copié")}
+          >
+            ID de l'objet concerné: {data.id}
+            {copySuccess === "ID copié" && (
+              <span
+                style={{
+                  color: "white",
+                  backgroundColor: "#efcb3a",
+                  marginLeft: "10px",
+                  padding: "2px 5px",
+                  borderRadius: "5px",
+                  fontSize: "0.8em",
+                }}
+              >
+                {copySuccess}
+              </span>
+            )}
+          </Text>
+        )}
+        <Text className="fr-mr-2w" size="sm">
+          {data.name ? `Nom: ${data.name}` : "Nom non renseigné"}
+        </Text>
+        {data.email && (
+          <Text
+            size="sm"
+            style={{ cursor: "pointer" }}
+            onClick={() => copyToClipboard(data.email, "Email copié")}
+          >
+            Email: {data.email}
+            {copySuccess === "Email copié" && (
+              <span
+                style={{
+                  color: "white",
+                  backgroundColor: "#efcb3a",
+                  marginLeft: "10px",
+                  padding: "2px 5px",
+                  borderRadius: "5px",
+                  fontSize: "0.8em",
+                }}
+              >
+                {copySuccess}
+              </span>
+            )}
+          </Text>
+        )}
+      </Row>
+      <Row>
+        <Col className="contributorProductionSide">
+          <ContributorRequests data={data} />
+        </Col>
+      </Row>
+      <Row className="fr-mb-2w">
+        <Button onClick={handleOpenModal}>Editer la contribution</Button>
+      </Row>
+    </Container>
+  );
+};
+
+export default MessagePreview;
diff --git a/src/pages/api-operation-page/staff-production-action.tsx b/src/pages/api-operation-page/staff-production-action.tsx
new file mode 100644
index 0000000..6d3c1aa
--- /dev/null
+++ b/src/pages/api-operation-page/staff-production-action.tsx
@@ -0,0 +1,25 @@
+import EmailSender from "../../api/send-mail";
+import type { Contribute_Production } from "../../types";
+import { useState } from "react";
+import { Col, Text } from "@dataesr/dsfr-plus";
+
+const StaffProductionActions = ({ data }: { data: Contribute_Production }) => {
+  const [responseScanR, setResponseScanR] = useState(null);
+
+  return (
+    <>
+      {data?.comment && (
+        <Col className="staffSide">
+          <Text size="sm">
+            Réponse apportée par {responseScanR?.responseFrom || data.team[0]}{" "}
+            le {new Date(data?.modified_at).toLocaleDateString()}{" "}
+          </Text>
+          <Text>{responseScanR?.comment || data.comment}</Text>
+        </Col>
+      )}
+      <EmailSender contribution={data} setResponseScanR={setResponseScanR} />
+    </>
+  );
+};
+
+export default StaffProductionActions;
diff --git a/src/pages/api-operation-page/styles.scss b/src/pages/api-operation-page/styles.scss
new file mode 100644
index 0000000..57d400d
--- /dev/null
+++ b/src/pages/api-operation-page/styles.scss
@@ -0,0 +1,20 @@
+.contributorProductionSideInfo {
+  display: flex;
+  justify-content: center;
+}
+.contributorProductionSide {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.staffSide {
+  text-align: right;
+  background-color: var(--background-alt-blue-ecume);
+  border-radius: 20px;
+  padding: 20px;
+  margin-left: 140px;
+}
+.textInCard {
+  text-align: center;
+}
diff --git a/src/router.tsx b/src/router.tsx
index aabf662..a481973 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -15,7 +15,7 @@ export default function Router() {
           element={<ContributionPage url={""} />}
         />
         <Route path="/contact" element={<ContributionPage url={""} />} />
-        <Route path="/apioperations" element={<ApiOperationPage />} />
+        <Route path="/apioperations" element={<ApiOperationPage url={""} />} />
       </Route>
     </Routes>
   );
diff --git a/src/types/index.ts b/src/types/index.ts
index c300ef8..3555f00 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -52,3 +52,30 @@ export type StaffActionsProps = {
 export type MessagePreviewProps = {
   renderMessage: any;
 };
+
+export type Contribute_Production = {
+  _id: string;
+  team: any;
+  modified_at: string | number | Date;
+  comment: any;
+  id: string;
+  treated_at: Date;
+  created_at: Date;
+  email: string;
+  message?: string;
+  name: string;
+  status: string;
+  productions: any[];
+};
+
+export type EditModalProps = {
+  isOpen: boolean;
+  "data-production": Contribute_Production[];
+  data: Contribution[];
+  onClose: () => void;
+};
+
+export type Production = {
+  id: string;
+  treated: boolean;
+};