diff --git a/next.config.js b/next.config.js
index 8e08453..fc638e5 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,5 +3,12 @@ module.exports = {
   output: "standalone",
   images: {
     formats: ['image/webp', 'image/avif'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'img.leboncoin.fr',
+        port: '',
+      }
+    ]
   },
 };
\ No newline at end of file
diff --git a/src/app/produits/page.tsx b/src/app/produits/page.tsx
index 47b1a87..0286c37 100644
--- a/src/app/produits/page.tsx
+++ b/src/app/produits/page.tsx
@@ -1,5 +1,6 @@
 import { Container } from "@/components/Container";
 import Products from "@/components/products";
+import Image from "next/image";
 
 export default function ArticlesPage() {
   return (
@@ -10,10 +11,12 @@ export default function ArticlesPage() {
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {Products.map((article, index) => (
             <div key={index} className="bg-white p-6 rounded-lg shadow-lg dark:bg-trueGray-800">
-              <img
-                src={article.imageUrl}
-                alt={article.title}
-                className="w-full h-48 object-cover rounded-t-lg mb-4"
+              <Image
+              src={article.imageUrl}
+              alt={article.title}
+              className="w-full h-48 object-cover rounded-t-lg mb-4"
+              width={1200}
+              height={800}
               />
               <h2 className="text-xl font-semibold text-gray-800 mb-2 dark:text-white">{article.title}</h2>
               <p className="text-gray-600 mb-4 dark:text-grey-200">{article.description}</p>
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a4c66e1..8ee7831 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -29,8 +29,8 @@ export const Hero = () => {
         </div>
         <div className="flex items-center justify-center w-full lg:w-1/2">
           <div className="">
-            <img src="/img/nature.png" width="616" height="617" alt="Hero Illustration" loading="eager"></img>
-            {/* <Image
+            {/* <img src="/img/nature.png" width="616" height="617" alt="Hero Illustration" loading="eager"></img> */}
+            <Image
               src={heroImg}
               width="616"
               height="617"
@@ -38,7 +38,7 @@ export const Hero = () => {
               alt="Hero Illustration"
               loading="eager"
               placeholder="blur"
-            /> */}
+            />
           </div>
         </div>
       </Container>