diff --git a/src/AppRouters.jsx b/src/AppRouters.jsx
index 26f1a00..4d84db3 100644
--- a/src/AppRouters.jsx
+++ b/src/AppRouters.jsx
@@ -14,7 +14,7 @@ import ContactsPage from './views/ContactsPage'
 import UserPage from './views/UserPage'
 import CalendarPage from './views/CalendarPage'
 import SettingsPage from './views/SettingsPage'
-
+import ProductPage from './views/ProductPage'
 
 function AppRouters() {
   return (
@@ -32,6 +32,7 @@ function AppRouters() {
         {/* protected routes */}
         <Route element={<UserExist />}> 
           <Route path={siteLinks.dash} element={<HomePage />} />
+          <Route path={siteLinks.product} element={<ProductPage />} />
           <Route path={siteLinks.reports} element={<ReportsPage />} />
           <Route path={siteLinks.comments} element={<CommentsPage />} />
           <Route path={siteLinks.contacts} element={<ContactsPage />} />
diff --git a/src/component/comments/Comments.js b/src/component/comments/Comments.js
index 85baab0..7357d7a 100644
--- a/src/component/comments/Comments.js
+++ b/src/component/comments/Comments.js
@@ -358,8 +358,8 @@ export default function Comments(){
                                                 <h3>Landing page Designer...</h3>
                                             </div>
                                             <div className="d-flex">
-                                                <a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>
-                                                <a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>
+                                                {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
+                                                {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
                                             </div>
                                         </div>
                                         <div>
@@ -373,16 +373,16 @@ export default function Comments(){
                                             </div>
                                         </div>
                                     </div>
-                                    <div className="d-md-flex px-5 py-4">
-                                        <div className="flex-fill align-items-center">
-                                            <div className="d-flex">
-                                                <i className="ti ti-clip pr-3 font-22"></i>
-                                                <p className="pr-3 font-weight-bold">Wireframe</p>
-                                                <p>(220.MB)</p>
-                                            </div>
-                                        </div>
-                                        <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>
-                                    </div>
+                                    {/*<div className="d-md-flex px-5 py-4">*/}
+                                    {/*    <div className="flex-fill align-items-center">*/}
+                                    {/*        <div className="d-flex">*/}
+                                    {/*            <i className="ti ti-clip pr-3 font-22"></i>*/}
+                                    {/*            <p className="pr-3 font-weight-bold">Wireframe</p>*/}
+                                    {/*            <p>(220.MB)</p>*/}
+                                    {/*        </div>*/}
+                                    {/*    </div>*/}
+                                    {/*    <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>*/}
+                                    {/*</div>*/}
                                     <div className="bg-light mail-f px-4 py-3">
                                         <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
                                             <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
diff --git a/src/component/contacts/Contacts.js b/src/component/contacts/Contacts.js
index bce6877..ceb3195 100644
--- a/src/component/contacts/Contacts.js
+++ b/src/component/contacts/Contacts.js
@@ -358,8 +358,8 @@ export default function Contacts(){
                                                 <h3>Landing page Designer...</h3>
                                             </div>
                                             <div className="d-flex">
-                                                <a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>
-                                                <a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>
+                                                {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
+                                                {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
                                             </div>
                                         </div>
                                         <div>
@@ -373,16 +373,16 @@ export default function Contacts(){
                                             </div>
                                         </div>
                                     </div>
-                                    <div className="d-md-flex px-5 py-4">
-                                        <div className="flex-fill align-items-center">
-                                            <div className="d-flex">
-                                                <i className="ti ti-clip pr-3 font-22"></i>
-                                                <p className="pr-3 font-weight-bold">Wireframe</p>
-                                                <p>(220.MB)</p>
-                                            </div>
-                                        </div>
-                                        <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>
-                                    </div>
+                                    {/*<div className="d-md-flex px-5 py-4">*/}
+                                    {/*    <div className="flex-fill align-items-center">*/}
+                                    {/*        <div className="d-flex">*/}
+                                    {/*            <i className="ti ti-clip pr-3 font-22"></i>*/}
+                                    {/*            <p className="pr-3 font-weight-bold">Wireframe</p>*/}
+                                    {/*            <p>(220.MB)</p>*/}
+                                    {/*        </div>*/}
+                                    {/*    </div>*/}
+                                    {/*    <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>*/}
+                                    {/*</div>*/}
                                     <div className="bg-light mail-f px-4 py-3">
                                         <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
                                             <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
diff --git a/src/component/home/Products.jsx b/src/component/home/Products.jsx
index 8ab573a..fb88755 100644
--- a/src/component/home/Products.jsx
+++ b/src/component/home/Products.jsx
@@ -37,15 +37,18 @@ export default function Products() {
                 <div className="row m-b-20">
                     {products && products.map((product, index) => (
                         <div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
-                            <div className="d-flex align-items-center extraProductCard">
-                                <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                    <i className="fa fa-cart-plus text-primary"></i>
+                            <a href="/product/product_uid" >
+                                <div className="d-flex align-items-center extraProductCard">
+                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
+                                        <i className="fa fa-cart-plus text-primary"></i>
+                                    </div>
+                                    <div className="report-details">
+                                        <p>{product?.status}</p>
+                                        <h4>{product?.description}</h4>
+                                    </div>
                                 </div>
-                                <div className="report-details">
-                                    <p>{product?.status}</p>
-                                    <h4>{product?.description}</h4>
-                                </div>
-                            </div>
+                            </a>
+
                         </div>
                     ))}
                     {/*<div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">*/}
diff --git a/src/component/product/ProductFactory.jsx b/src/component/product/ProductFactory.jsx
new file mode 100644
index 0000000..4fed339
--- /dev/null
+++ b/src/component/product/ProductFactory.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+
+
+export default function ProductFactory(){
+
+    return(
+        <>
+            <BreadcrumbComBS title='Name of the Product Here' paths={['Dashboard', 'Product']} />
+            <div className="row">
+                <>
+
+                    <div className="row">
+                        <div className="col-md-9">
+                            <div className="card card-statistics ">
+                                <img className="card-img-top" src={getImage('widget/01.jpg')}  alt="Card image cap" />
+                                    <div className="card-body">
+                                        <h4 className="card-title">Commitment</h4>
+                                        <p className="card-text">Commitment is something that comes from understanding that everything has its price and then having the willingness to pay that price. This is important because nobody wants to put significant effort into something, only to find out after the fact that the price was too high.The price is something not necessarily defined as financial. It could be time, effort, sacrifice, money or perhaps, something else.</p>
+                                        <a href="javascript:void(0)" className="btn btn-primary mt-2">Read More</a>
+                                    </div>
+                            </div>
+                        </div>
+                        <div className="col-md-3">
+                            <div className="card card-statistics mb-30">
+                                {/*<img className="card-img-top" src={getImage('widget/01.jpg')} alt="Card image cap" />*/}
+                                    <div className="card-body">
+                                        <h4 className="card-title">Information</h4>
+                                        <p className="card-text">Start with your goals in mind and then work possible.ith yand Goals. If the plan doesn’t support the vision then change it! </p>
+                                    </div>
+                                    <ul className="list-group list-group-flush">
+                                        <li className="list-group-item">FAQ pages is for consistency</li>
+                                        <li className="list-group-item">Information</li>
+                                        <li className="list-group-item">Related content</li>
+                                    </ul>
+                                    <div className="card-body">
+                                        <a href="javascript:void(0)" className="card-link">Card link</a>
+                                        <a href="javascript:void(0)" className="card-link">Another link</a>
+                                    </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+                </>
+
+
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/links/siteLinks.js b/src/links/siteLinks.js
index 2bceea4..952d319 100644
--- a/src/links/siteLinks.js
+++ b/src/links/siteLinks.js
@@ -2,6 +2,7 @@ const siteLinks = {
     error: '*',
     home: '/',
     dash: '/dash',
+    product: '/product/*',
     contacts: '/contacts',
     comments: '/comments',
     reports: '/reports',
diff --git a/src/views/ProductPage.jsx b/src/views/ProductPage.jsx
new file mode 100644
index 0000000..b3a7fda
--- /dev/null
+++ b/src/views/ProductPage.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import ProductFactory from '../component/product/ProductFactory'
+export default function ProductPage() {
+    return (
+        <ProductFactory />
+    )
+}