diff --git a/src/app/product/product-detail.component.html b/src/app/product/product-detail.component.html
index dd0b18b..77260f0 100644
--- a/src/app/product/product-detail.component.html
+++ b/src/app/product/product-detail.component.html
@@ -1,8 +1,9 @@
 <section>
   <div class="content">
-    <h3>{{product.productName}}</h3>
-    <p>Brand: {{product.brand}}</p>
-    <p>$ {{product.price}}</p>
-    <p>{{product.category}}</p>
+    <h3>{{product?.productName}}</h3>
+    <p>ProductCode: {{product?.productCode}}</p>
+    <p>Brand: {{product?.brand}}</p>
+    <p>Price: ${{product?.price}}</p>
+    <p>{{product?.category}}</p>
   </div>
 </section>
diff --git a/src/app/product/product-detail.component.ts b/src/app/product/product-detail.component.ts
index 96402b5..8f73c52 100644
--- a/src/app/product/product-detail.component.ts
+++ b/src/app/product/product-detail.component.ts
@@ -25,7 +25,7 @@ export class ProductDetailComponent implements OnInit {
     // console.log(id$);
     this.productService.getProduct(id).subscribe((res) => {
       this.product = res;
-      console.log(this.product);
+      // console.log(this.product);
     });
   }
 }
diff --git a/src/app/product/product.component.ts b/src/app/product/product.component.ts
index 90c5c07..b1e1eb0 100644
--- a/src/app/product/product.component.ts
+++ b/src/app/product/product.component.ts
@@ -23,7 +23,7 @@ export class ProductComponent implements OnInit {
     this.productService.getProducts().subscribe((res) => {
       this.showSpinner = false;
       this.products = res;
-      console.log(this.products);
+      // console.log(this.products);
     });
   }
 }