diff --git a/frontend/src/components/CardModel/CardOffer.jsx b/frontend/src/components/CardModel/CardOffer.jsx
index 91d837d..20b44d8 100644
--- a/frontend/src/components/CardModel/CardOffer.jsx
+++ b/frontend/src/components/CardModel/CardOffer.jsx
@@ -1,10 +1,19 @@
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import ButtonMini from "../Boutons/ButtonMini";
 import "./card-model.css";
 import { useGlobalContext } from "../../contexts/GlobalContext";
 
 function CardOffer() {
+  const navigate = useNavigate();
+  const handleClickPostuler = () => navigate("/login");
+  const trimText = (chaine, limite) => {
+    if (chaine.length <= limite) {
+      return chaine;
+    }
+    return `${chaine.slice(0, limite)}...`;
+  };
   const globalContext = useGlobalContext();
   const [offers, setOffers] = useState([]);
   useEffect(() => {
@@ -22,7 +31,7 @@ function CardOffer() {
   }, []);
 
   return (
-    <div>
+    <>
       {offers.map((offer) => (
         <div className="card-container" key={offer.id}>
           <h3 className="label-offre">{offer.title}</h3>
@@ -30,42 +39,14 @@ function CardOffer() {
             {offer.type} - {offer.city}
           </h5>
           <h4 className="entreprise-champs">{offer.company}</h4>
-          <p className="p-description ">{offer.mission}</p>
-          <ButtonMini textBtn="Postuler" />
+          <p className="p-description ">{trimText(offer.mission, 250)}</p>
+          <ButtonMini onClick={handleClickPostuler} textBtn="Postuler" />
         </div>
       ))}
-    </div>
+    </>
   );
 }
 
-//   return (
-//     <div>
-//       {offers.map((offer) => (
-//         <div className="card-container" key={offer.id}>
-//           {" "}
-//           {/* Ajoutez une clé unique pour chaque élément de la liste */}
-//           <h3 className="label-offre">{offer.title}</h3>{" "}
-//           {/* Utilisez la propriété 'title' pour afficher le titre de l'offre */}
-//           <div className="competence">
-//             {/* Affichez les compétences de l'offre si nécessaire */}
-//             {offer.competences.map((competence) => (
-//               <h3 key={competence.id}>{competence.name}</h3>
-//             ))}
-//           </div>
-//           <h5 className="poste-champs">
-//             {offer.type} - {offer.city}
-//           </h5>
-//           <h4 className="entreprise-champs">{offer.company}</h4>{" "}
-//           {/* Utilisez la propriété 'company' pour afficher le nom de l'entreprise */}
-//           <p className="p-description">{offer.description}</p>{" "}
-//           {/* Utilisez la propriété 'description' pour afficher la description de l'offre */}
-//           <ButtonMini textBtn="Postuler" />
-//         </div>
-//       ))}
-//     </div>
-//   );
-// }
-
 CardOffer.propTypes = {
   offer: PropTypes.shape({
     id: PropTypes.number.isRequired,
diff --git a/frontend/src/pages/HomeOffer/Home.css b/frontend/src/pages/HomeOffer/Home.css
index 60b91ab..e56d693 100644
--- a/frontend/src/pages/HomeOffer/Home.css
+++ b/frontend/src/pages/HomeOffer/Home.css
@@ -22,3 +22,7 @@
     font-style: italic;
   }
 }
+.offer-container-offer {
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/frontend/src/pages/HomeOffer/Home.jsx b/frontend/src/pages/HomeOffer/Home.jsx
index b56f8eb..4e5bd31 100644
--- a/frontend/src/pages/HomeOffer/Home.jsx
+++ b/frontend/src/pages/HomeOffer/Home.jsx
@@ -4,6 +4,7 @@ import { useGlobalContext } from "../../contexts/GlobalContext";
 import "./Home.css";
 import CardOffre from "../../components/CardModel/CardOffre";
 import { useUserContext } from "../../contexts/UserContext";
+
 import HomeCard from "../../components/HomeCard/HomeCard";
 import CardOffer from "../../components/CardModel/CardOffer";
 
@@ -13,22 +14,6 @@ function Home() {
   const [matchingOffers, setMatchingOffers] = useState([]);
 
   useEffect(() => {
-    // const getOffer = async () => {
-    //   try {
-    //     const response = await fetch(
-    //       `${import.meta.env.VITE_BACKEND_URL}/api/offer`
-    //     );
-    //     if (response.ok) {
-    //       const data = await response.json();
-    //       setOffers(data);
-    //     } else {
-    //       console.error("Echec de la récupération des données.");
-    //     }
-    //   } catch (err) {
-    //     console.error(err);
-    //   }
-    // };
-
     const getOfferMatch = async () => {
       try {
         const response = await apiService.get(
@@ -41,19 +26,6 @@ function Home() {
     };
 
     getOfferMatch();
-    // getOffer();
-
-    //     const getOffer = async () => {
-    //       try {
-    //         const response = await axios.get(`${import.meta.env.VITE_BACKEND_URL}/api/offer`);
-    //         console.log(response.data);
-    //         setOffers(response.data);
-    //   } catch (err) {
-    //     console.error(err);
-    //   };
-    // }
-
-    // getOffer();
   }, []);
 
   return (
@@ -80,12 +52,9 @@ function Home() {
               />
             ))
           ) : (
-            <>
-              <CardOffer />
-              <CardOffer />
-              <CardOffer />
+            <div className="offer-container-offer">
               <CardOffer />
-            </>
+            </div>
           )}
         </div>
       </div>