diff --git a/src/app/produits/page.tsx b/src/app/produits/page.tsx
index 0286c37..af189ab 100644
--- a/src/app/produits/page.tsx
+++ b/src/app/produits/page.tsx
@@ -1,27 +1,48 @@
 import { Container } from "@/components/Container";
-import Products from "@/components/products";
+import Products, { Product } from "@/components/products";
 import Image from "next/image";
 
+const productsData: Product[] = Products;
+
 export default function ArticlesPage() {
+  if (!productsData || productsData.length === 0) {
+    return (
+      <Container className="py-12">
+        <h1 className="text-3xl font-bold text-center mb-8">
+          Plus de stock disponible
+        </h1>
+      </Container>
+    );
+  }
+
   return (
     <Container>
       <div className="py-12">
-        <h1 className="text-3xl font-bold text-center mb-8">Nos Articles</h1>
-        
+        <h1 className="text-3xl font-bold text-center mb-8">
+          Nos Articles
+        </h1>
+
         <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">
+          {productsData.map((product, index) => (
+            <div
+              key={index}
+              className="bg-white p-6 rounded-lg shadow-lg dark:bg-trueGray-800"
+            >
               <Image
-              src={article.imageUrl}
-              alt={article.title}
-              className="w-full h-48 object-cover rounded-t-lg mb-4"
-              width={1200}
-              height={800}
+                src={product.imageUrl}
+                alt={product.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>
+              <h2 className="text-xl font-semibold text-gray-800 mb-2 dark:text-white">
+                {product.title}
+              </h2>
+              <p className="text-gray-600 mb-4 dark:text-grey-200">
+                {product.description}
+              </p>
               <a
-                href={article.url}
+                href={product.url}
                 className="text-[#7ed957] hover:text-indigo-500"
               >
                 Voir l'article
@@ -32,4 +53,4 @@ export default function ArticlesPage() {
       </div>
     </Container>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/products.js b/src/components/products.js
deleted file mode 100644
index 7ce002a..0000000
--- a/src/components/products.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const Products = [];
-
-export default Products;
diff --git a/src/components/products.ts b/src/components/products.ts
new file mode 100644
index 0000000..95fa6cb
--- /dev/null
+++ b/src/components/products.ts
@@ -0,0 +1,18 @@
+export type Product = {
+  imageUrl: string;
+  title: string;
+  description: string;
+  url: string;
+};
+
+const Products: Product[] = [];
+
+export default Products;
+
+// Sample product data
+// {
+//   imageUrl: "",
+//   title: "",
+//   description: "",
+//   url: "",
+// },
\ No newline at end of file