diff --git a/src/component/home/HomeSections.jsx b/src/component/home/HomeSections.jsx
index 22d463a..a1eb2e0 100644
--- a/src/component/home/HomeSections.jsx
+++ b/src/component/home/HomeSections.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import RecentActions from "./RecentActions";
+import Products from "./Products";
 // import { useQuery } from "@tanstack/react-query";
 // import { accountDashboard } from "../../services/services";
 // import queryKeys from "../../services/queryKeys";
@@ -163,100 +164,7 @@ export default function HomeSections(){
         </div>
         <div className="row">
             <div className="col-xxl-6 m-b-30">
-                <div className="card card-statistics h-100 mb-0">
-                    <div className="card-header">
-                        <h4 className="card-title">My Products</h4>
-                    </div>
-                    <div className="card-body pb-0">
-                        <div className="row m-b-20">
-                            <div 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>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Activate now</p>
-                                        <h4>Professional Website</h4>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div 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>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Activate now</p>
-                                        <h4>Professional Blog</h4>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div 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>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Activate now</p>
-                                        <h4>Business Website</h4>
-                                    </div>
-                                </div>
-                            </div>
-                            <div 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>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Activate now</p>
-                                        <h4>Business Blog Site</h4>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div 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>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Activate now</p>
-                                        <h4>OpenEmr </h4>
-                                    </div>
-                                </div>
-                            </div>
-                            <div 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>
-                                    </div>
-                                    <div className="report-details">
-                                        <p>Activate now</p>
-                                        <h4>Dummy</h4>
-                                    </div>
-                                </div>
-                            </div>
-
-
-                            {/*<div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">*/}
-                            {/*    <div className="d-flex align-items-center">*/}
-                            {/*        <div className="icon-container img-icon m-r-20 bg-light-gray rounded">*/}
-                            {/*            <i className="fa fa-dollar text-primary"></i>*/}
-                            {/*        </div>*/}
-                            {/*        <div className="report-details">*/}
-                            {/*            <p>Annual Revenue</p>*/}
-                            {/*            <h3>$40,516</h3>*/}
-                            {/*        </div>*/}
-                            {/*    </div>*/}
-                            {/*</div>*/}
-                        </div>
-                        <div className="apexchart-wrapper">
-                            <div id="ecommerce5" className="chart-fit"></div>
-                        </div>
-                    </div>
-                </div>
+                <Products />
             </div>
             <div className="col-xxl-6 m-b-30">
                 <RecentActions />
diff --git a/src/component/home/Products.jsx b/src/component/home/Products.jsx
new file mode 100644
index 0000000..8ab573a
--- /dev/null
+++ b/src/component/home/Products.jsx
@@ -0,0 +1,71 @@
+import { useQuery } from '@tanstack/react-query'
+import React from 'react'
+import { productData } from '../../services/services'
+import queryKeys from '../../services/queryKeys'
+
+export default function Products() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.product,
+        queryFn: () => productData()
+    })
+
+    const products = data?.data?.products_data?.products
+
+  return (
+    <>
+        <div className="card card-statistics h-100 mb-0">
+            <div className="card-header">
+                <h4 className="card-title">My Products</h4>
+            </div>
+            <div className="card-body pb-0">
+            {isFetching ? 
+                <>
+                    <div className="row">
+                        <div className="col-12">
+                            <p className='text-mute'>Loading...</p>
+                        </div>
+                    </div>
+                </>
+                : isError ?
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-danger'>{error.message}</p>
+                    </div>
+                </div>
+                :
+                <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>
+                                </div>
+                                <div className="report-details">
+                                    <p>{product?.status}</p>
+                                    <h4>{product?.description}</h4>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                    {/*<div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">*/}
+                    {/*    <div className="d-flex align-items-center">*/}
+                    {/*        <div className="icon-container img-icon m-r-20 bg-light-gray rounded">*/}
+                    {/*            <i className="fa fa-dollar text-primary"></i>*/}
+                    {/*        </div>*/}
+                    {/*        <div className="report-details">*/}
+                    {/*            <p>Annual Revenue</p>*/}
+                    {/*            <h3>$40,516</h3>*/}
+                    {/*        </div>*/}
+                    {/*    </div>*/}
+                    {/*</div>*/}
+                </div>
+            }
+                <div className="apexchart-wrapper">
+                    <div id="ecommerce5" className="chart-fit"></div>
+                </div>
+            </div>
+        </div>
+    </>
+  )
+}
diff --git a/src/component/home/RecentActions.jsx b/src/component/home/RecentActions.jsx
index 56fada0..f2a1128 100644
--- a/src/component/home/RecentActions.jsx
+++ b/src/component/home/RecentActions.jsx
@@ -10,6 +10,8 @@ export default function RecentActions() {
         queryFn: () => recentActions()
     })
 
+    const actionData = dataAction?.data?.action_data
+
   return (
     <>
         <div className="card card-statistics h-100 mb-0">
@@ -60,19 +62,19 @@ export default function RecentActions() {
                     <div className="row no-gutters">
                         <div className="col-6 col-xxs-3 ">
                             <p>Initial</p>
-                            <h4>{dataAction?.data?.action_data?.initial}</h4>
+                            <h4>{actionData?.initial}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Processing</p>
-                            <h4>{dataAction?.data?.action_data?.processing}</h4>
+                            <h4>{actionData?.processing}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Verifying</p>
-                            <h4>{dataAction?.data?.action_data?.verifying}</h4>
+                            <h4>{actionData?.verifying}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Completed</p>
-                            <h4>{dataAction?.data?.action_data?.completed}</h4>
+                            <h4>{actionData?.completed}</h4>
                         </div>
                     </div>
                     <div className="table-responsive m-t-20">
@@ -86,7 +88,7 @@ export default function RecentActions() {
                             </tr>
                             </thead>
                             <tbody className="text-muted">
-                            {dataAction?.data?.action_data?.actions.map((action, index) => {
+                            {actionData && actionData?.actions.map((action, index) => {
                                 let bgColor = action?.status == 'completed' ? 'badge-success-inverse' : action?.status == 'verifying' ? 'badge-info-inverse' : action?.status == 'processing' ? 'badge-warning-inverse' : 'badge-primary-inverse'
                                 return (
                                     <tr key={index}>
diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js
index 7b8b944..e184ee4 100644
--- a/src/services/queryKeys.js
+++ b/src/services/queryKeys.js
@@ -1,6 +1,7 @@
 const queryKeys = {
     dashboard: ['dashboard'],
-    recentAction: ['recent-action']
+    recentAction: ['recent-action'],
+    product: ['product-data']
 }
 
 export default queryKeys
\ No newline at end of file
diff --git a/src/services/services.js b/src/services/services.js
index 59d3621..5734986 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -60,3 +60,8 @@ export const accountDashboard = () => {
 export const recentActions = () => {
     return getAuxEnd(`/panel/account/actions`)
 }
+
+// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
+export const productData = () => {
+    return getAuxEnd(`/panel/account/products`)
+}