diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d66948336cd802885e9942317b72fb392a32169..affba45590254c16835ed983f4b72c44c9208b43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ###### _TBD_
 
 - [chore] front: updated wording and information regarding previous exchanges and offers
+- [refacto] front: use Material-ui pagination component
 
 ## v2.7.0
 
diff --git a/frontend/src/components/common/PaginatedData.jsx b/frontend/src/components/common/PaginatedData.jsx
index 4fa5527097d02a117954fbba4a8483111094c8cb..1f67d3c6ee1a2697064c7a1709d01bfb929d8650 100644
--- a/frontend/src/components/common/PaginatedData.jsx
+++ b/frontend/src/components/common/PaginatedData.jsx
@@ -1,9 +1,6 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import MobileStepper from "@material-ui/core/MobileStepper";
-import Button from "@material-ui/core/Button";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+import Pagination from "@material-ui/lab/Pagination";
 import PropTypes from "prop-types";
 
 const useStyles = makeStyles((theme) => ({
@@ -12,7 +9,9 @@ const useStyles = makeStyles((theme) => ({
     margin: "0 auto",
   },
   stepperContainer: {
-    width: "100%",
+    margin: "0 auto",
+    marginBottom: theme.spacing(1),
+    width: "max-content",
   },
   progress: {
     [theme.breakpoints.up("sm")]: {
@@ -38,9 +37,7 @@ function PaginatedData(props) {
     EmptyMessageComponent,
   } = props;
   const {
-    page: activeStep,
-    last,
-    first,
+    page,
     pages_count: nbOfPages,
     content,
     number_elements: totalElements,
@@ -50,39 +47,23 @@ function PaginatedData(props) {
     return EmptyMessageComponent;
   }
 
+  const handleChange = (event, value) => {
+    goToPage(value);
+  };
+
   function renderStepper() {
     if (nbOfPages === 1) {
       return <></>;
     }
     return (
       <div className={classes.stepperContainer}>
-        <MobileStepper
-          variant="progress"
-          steps={nbOfPages}
-          position="static"
-          activeStep={activeStep - 1}
-          className={classes.root}
-          classes={{ progress: classes.progress }}
-          backButton={
-            <Button
-              size="small"
-              onClick={() => goToPage(activeStep - 1)}
-              disabled={first}
-            >
-              <KeyboardArrowLeft />
-              Précédent
-            </Button>
-          }
-          nextButton={
-            <Button
-              size="small"
-              onClick={() => goToPage(activeStep + 1)}
-              disabled={last}
-            >
-              Suivant
-              <KeyboardArrowRight />
-            </Button>
-          }
+        <Pagination
+          count={nbOfPages}
+          page={page}
+          onChange={handleChange}
+          showFirstButton
+          showLastButton
+          color="secondary"
         />
       </div>
     );
diff --git a/frontend/src/components/edition/History.jsx b/frontend/src/components/edition/History.jsx
index 164e0394b62740bf0e4f06c6f9f12285fb4787db..7228929ed255722f529368a1ece97ea4c299c84f 100644
--- a/frontend/src/components/edition/History.jsx
+++ b/frontend/src/components/edition/History.jsx
@@ -3,16 +3,12 @@ import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import compose from "recompose/compose";
 import Button from "@material-ui/core/Button";
-
-import MobileStepper from "@material-ui/core/MobileStepper";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+import Pagination from "@material-ui/lab/Pagination";
 import { makeStyles } from "@material-ui/styles";
 import Typography from "@material-ui/core/Typography";
 import Divider from "@material-ui/core/Divider";
 import RequestParams from "../../utils/api/RequestParams";
 import FullScreenDialogService from "../../services/FullScreenDialogService";
-import useStepper from "../../hooks/useStepper";
 import FullScreenDialogFrame from "../common/FullScreenDialogFrame";
 import dateTimeStrToStr from "../../utils/dateTimeStrToStr";
 import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper";
@@ -26,6 +22,10 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(2),
   },
+  center: {
+    margin: "0 auto",
+    width: "max-content",
+  },
 }));
 
 function VersionInfo({ rawModelData, versionNumber, editFromVersion }) {
@@ -71,21 +71,23 @@ function History({
   editFromVersion,
   rawModelDataEx,
 }) {
+  const classes = useStyles();
   const resetVersions = useApiInvalidateAll("versions");
 
   useEffect(() => {
     return () => resetVersions(); // only on unmount
   }, []);
 
-  const [currentVersion, goNextVersion, goPreviousVersion] = useStepper(
-    versions.length - 1
-  );
-
   const maxSteps = versions.length;
+  const [currentVersion, setCurrentVersion] = React.useState(maxSteps);
+
+  const handleChange = (event, value) => {
+    setCurrentVersion(value);
+  };
 
   const newRawModelData = {
     ...rawModelDataEx,
-    ...versions[currentVersion].data,
+    ...versions[currentVersion - 1].data,
   };
 
   return (
@@ -94,38 +96,21 @@ function History({
       title="Parcours de l'historique"
     >
       <>
-        <MobileStepper
-          steps={versions.length}
-          position="static"
-          activeStep={currentVersion}
-          nextButton={
-            <Button
-              color="secondary"
-              size="small"
-              onClick={goNextVersion}
-              disabled={currentVersion >= maxSteps - 1}
-            >
-              Version suivante
-              <KeyboardArrowRight />
-            </Button>
-          }
-          backButton={
-            <Button
-              color="secondary"
-              size="small"
-              onClick={goPreviousVersion}
-              disabled={currentVersion === 0}
-            >
-              <KeyboardArrowLeft />
-              Version précédente
-            </Button>
-          }
-        />
+        <div className={classes.center}>
+          <Pagination
+            count={maxSteps}
+            page={currentVersion}
+            onChange={handleChange}
+            showFirstButton
+            showLastButton
+            color="secondary"
+          />
+        </div>
         <br />
         <Divider />
         <VersionInfo
           rawModelData={newRawModelData}
-          versionNumber={currentVersion}
+          versionNumber={currentVersion - 1}
           editFromVersion={editFromVersion}
         />
         <br />
diff --git a/frontend/src/components/search/UnivList.jsx b/frontend/src/components/search/UnivList.jsx
index c200c6759a87e6a017c3e33e5267a91f319d056f..da2a8afe758cd5717aaea649ec1440760ea3d517 100644
--- a/frontend/src/components/search/UnivList.jsx
+++ b/frontend/src/components/search/UnivList.jsx
@@ -1,18 +1,14 @@
 import React, { useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
-import MobileStepper from "@material-ui/core/MobileStepper";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import Divider from "@material-ui/core/Divider";
-import Button from "@material-ui/core/Button";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+import Pagination from "@material-ui/lab/Pagination";
 import { makeStyles } from "@material-ui/styles";
 import range from "../../utils/range";
 import APP_ROUTES from "../../config/appRoutes";
 import CustomNavLink from "../common/CustomNavLink";
-import useStepper from "../../hooks/useStepper";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -29,6 +25,10 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: 20,
     backgroundColor: theme.palette.background.default,
   },
+  center: {
+    margin: "0 auto",
+    width: "max-content",
+  },
 }));
 
 /**
@@ -36,20 +36,23 @@ const useStyles = makeStyles((theme) => ({
  */
 function UnivList({ universitiesToList, itemsPerPage }) {
   const classes = useStyles();
-  const [activeStep, goNext, goBack, goTo] = useStepper(0);
+  const [page, setPage] = React.useState(1);
 
   useEffect(() => {
     // If the list is not the same, then make sure to "reset" and move to the first page
-    goTo(0);
+    setPage(1);
   }, [universitiesToList]);
 
   const numberOfItems = universitiesToList.length;
   const maxSteps = Math.ceil(numberOfItems / itemsPerPage);
 
   const getIndexesOnPage = useCallback(
-    (page) => {
-      const firstIdxOnPage = page * itemsPerPage;
-      const lastIdxOnPage = Math.min((page + 1) * itemsPerPage, numberOfItems);
+    (currentPage) => {
+      const firstIdxOnPage = currentPage * itemsPerPage;
+      const lastIdxOnPage = Math.min(
+        (currentPage + 1) * itemsPerPage,
+        numberOfItems
+      );
       return range(lastIdxOnPage - firstIdxOnPage).map(
         (el) => el + firstIdxOnPage
       );
@@ -62,11 +65,15 @@ function UnivList({ universitiesToList, itemsPerPage }) {
     return <></>;
   }
 
+  const handleChange = (event, value) => {
+    setPage(value);
+  };
+
   return (
     <div className={classes.root}>
       <List component="nav">
         <Divider />
-        {getIndexesOnPage(activeStep).map((univIdx) => (
+        {getIndexesOnPage(page - 1).map((univIdx) => (
           <CustomNavLink
             to={APP_ROUTES.forUniversity(universitiesToList[univIdx].id)}
             key={univIdx}
@@ -77,36 +84,16 @@ function UnivList({ universitiesToList, itemsPerPage }) {
           </CustomNavLink>
         ))}
       </List>
-
-      <MobileStepper
-        steps={maxSteps}
-        position="static"
-        variant="progress"
-        activeStep={activeStep}
-        className={classes.mobileStepper}
-        nextButton={
-          <Button
-            color="secondary"
-            size="small"
-            onClick={goNext}
-            disabled={activeStep >= maxSteps - 1}
-          >
-            Suivant
-            <KeyboardArrowRight />
-          </Button>
-        }
-        backButton={
-          <Button
-            color="secondary"
-            size="small"
-            onClick={goBack}
-            disabled={activeStep === 0}
-          >
-            <KeyboardArrowLeft />
-            Précédent
-          </Button>
-        }
-      />
+      <div className={classes.center}>
+        <Pagination
+          count={maxSteps}
+          page={page}
+          onChange={handleChange}
+          showFirstButton
+          showLastButton
+          color="secondary"
+        />
+      </div>
     </div>
   );
 }