diff --git a/03_source/frontend/src/actions/product.ts b/03_source/frontend/src/actions/product.ts
index 364fdd1..9dd5304 100644
--- a/03_source/frontend/src/actions/product.ts
+++ b/03_source/frontend/src/actions/product.ts
@@ -99,7 +99,9 @@ export async function createProduct(productData: IProductItem) {
    * Work on server
    */
   const data = { productData };
-  await axiosInstance.post(endpoints.product.create, data);
+  const {
+    data: { id },
+  } = await axiosInstance.post(endpoints.product.create, data);
 
   /**
    * Work in local
@@ -109,7 +111,7 @@ export async function createProduct(productData: IProductItem) {
     (currentData: any) => {
       const currentProducts: IProductItem[] = currentData?.products;
 
-      const products = [...currentProducts, productData];
+      const products = [...currentProducts, { ...productData, id }];
 
       return { ...currentData, products };
     },
diff --git a/03_source/frontend/src/sections/product/product-list.tsx b/03_source/frontend/src/sections/product/product-list.tsx
index 88f37bd..09844eb 100644
--- a/03_source/frontend/src/sections/product/product-list.tsx
+++ b/03_source/frontend/src/sections/product/product-list.tsx
@@ -17,13 +17,15 @@ export function ProductList({ products, loading, sx, ...other }: Props) {
   const renderLoading = () => <ProductItemSkeleton />;
 
   const renderList = () =>
-    products.map((product) => (
-      <ProductItem
-        key={product.id}
-        product={product}
-        detailsHref={paths.product.details(product.id)}
-      />
-    ));
+    products.map((product) => {
+      return (
+        <ProductItem
+          key={product.id}
+          product={product}
+          detailsHref={paths.product.details(product.id)}
+        />
+      );
+    });
 
   return (
     <>