diff --git a/src/assets/img/product/banner.jpg b/src/assets/img/product/banner.jpg
new file mode 100644
index 0000000..fbdd78b
Binary files /dev/null and b/src/assets/img/product/banner.jpg differ
diff --git a/src/component/calendar/Calendar.jsx b/src/component/calendar/Calendar.jsx
index cf427c6..0357048 100644
--- a/src/component/calendar/Calendar.jsx
+++ b/src/component/calendar/Calendar.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
 
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import EventCalendar from "./EventCalendar";
@@ -16,12 +16,34 @@ export default function Calendar(){
     //     setDraggedEvent(event)
     // }
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.calendar_events,
-        queryFn: () => getCalendarEvents()
+    // const {data, isFetching, isError, error} = useQuery({
+    //     queryKey: queryKeys.calendar_events,
+    //     queryFn: () => getCalendarEvents()
+    // })
+
+    const calendarEvents = useMutation({
+        mutationFn: (reqData) => {
+            return getCalendarEvents(reqData)
+        },
+        onError: (error) => {
+            console.log(error)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                throw({message: 'Something went wrong'})
+            }
+        }
     })
 
-    const receievedEvents = data?.data?.bar_data
+    useEffect(()=>{
+    let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
+    calendarEvents.mutate(reqData)
+    },[])
+
+    const receievedEvents = calendarEvents?.data?.data
     const category = receievedEvents?.category  //EVENT CATEGORIES FROM API
     const eventList = receievedEvents?.list //EVENT LIST FROM API
 
@@ -62,15 +84,15 @@ export default function Calendar(){
                         </div>
                         <div className="card-body">
                             <div className="row">
-                            {isFetching ? 
+                            {calendarEvents?.isPending ? 
                                 <>
                                     <div className="col-12">
                                         <p className='text-mute'>Loading...</p>
                                     </div>
                                 </>
-                                : isError ?
+                                : calendarEvents?.error ?
                                 <div className="col-12">
-                                    <p className='text-danger'>{error.message}</p>
+                                    <p className='text-danger'>{calendarEvents?.error?.message}</p>
                                 </div>
                                 :
                                 <>
@@ -83,7 +105,7 @@ export default function Calendar(){
                                             Drag and drop your event or click in the calendar.
                                         </p> */}
 
-                                        {category.map((item, index) => {
+                                        {category?.map((item, index) => {
                                             let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
                                             let circleColor = item?.cid == '1' ? 'text-success' : item?.cid == '2' ? 'text-danger' : item?.cid == '3' ? 'text-warning' : 'text-primary'
                                             return (
diff --git a/src/component/product/ProductFactory.jsx b/src/component/product/ProductFactory.jsx
index ec17ee7..3cd5419 100644
--- a/src/component/product/ProductFactory.jsx
+++ b/src/component/product/ProductFactory.jsx
@@ -1,11 +1,10 @@
-import React, {useState} from "react";
-import { useQuery } from '@tanstack/react-query'
+import {useEffect} from "react";
+import { useMutation, useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
 import { useLocation } from 'react-router-dom';
-import {MyProductData, productData} from "../../services/services";
-import queryKeys from "../../services/queryKeys";
+import {MyProductData} from "../../services/services";
 import ProductActive from "./ProductActive";
 import ProductProvision from "./ProductProvision";
 import {productConst} from "../../constants/products";
@@ -13,34 +12,42 @@ import {productConst} from "../../constants/products";
 export default function ProductFactory(){
     const location = useLocation();
     const pathname = location.pathname;
-    const [productStatus, setProductStatus] = useState(0);
-
-    //productConst.PRODUCT_ACTIVE
-
 
     // Split the pathname by '/' and get the last element
-    const lastPart = pathname.split('/').pop();
-    // console.log(lastPart)
+    const productID = pathname.split('/').pop();
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.product,
-        queryFn: () => MyProductData(lastPart)
+    const getProductData = useMutation({
+        mutationFn: (reqData) => {
+            return MyProductData(reqData)
+        },
+        onError: (error) => {
+            console.log(error)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                throw({message: 'Something went wrong'})
+            }
+        }
     })
 
-
-
-    const myproduct_data = data?.data?.myproduct_data
-    //setProductStatus(myproduct_data?.status)
-
-    const product_name =  myproduct_data?.product_name;
-
-    const product_status  = myproduct_data?.status;
+    useEffect(()=>{
+    let reqData = {
+        product_id : productID,
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
+    getProductData.mutate(reqData)
+    },[])
+        
+        const myproduct_data = getProductData?.data?.data?.myproduct?.myproudct // PRODUCT DETAILS
+        const product_name =  myproduct_data?.product_name;
+        const product_status  = myproduct_data?.status;
 
     return(
         <>
             <BreadcrumbComBS title={product_name} paths={['Dashboard', 'Product']} />
             <div className="row">
-                {isFetching ?
+                {getProductData?.isPending ?
                     <>
                         <div className="row">
                             <div className="col-12">
@@ -48,10 +55,10 @@ export default function ProductFactory(){
                             </div>
                         </div>
                     </>
-                    : isError ?
+                    : getProductData?.error ?
                         <div className="row">
                             <div className="col-12">
-                                <p className='text-danger'>{error.message}</p>
+                                <p className='text-danger'>{getProductData?.error?.message}</p>
                             </div>
                         </div>
                         :
diff --git a/src/services/services.js b/src/services/services.js
index ecdb8b4..b6d4239 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -75,6 +75,22 @@ export const topBar = (reqData) => {
     return postAuxEnd(`/panel/account/bar`, postData, false)
 }
 
+// FUNCTION TO GET PRODUCT BY ID
+export const MyProductData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/dash`, postData, false)
+}
+
+// FUNCTION TO GET CALENDAR EVENTS
+export const getCalendarEvents = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/calendar`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
 export const recentActions = (reqData) => {
     let postData = {
@@ -98,6 +114,7 @@ export const productsData = (reqData) => {
 
 
 
+
 // FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
 export const productsURL = (reqData) => {
     let postData = {
@@ -152,16 +169,6 @@ export const recoverPWD = (reqData) => {
     return postAuxEnd('/panel/auth/reset', postData, false)
 }
 
-// FUNCTION TO GET CALENDAR EVENTS
-export const getCalendarEvents = (reqData) => {
-    let postData = {
-        ...reqData,
-        token: localStorage.getItem('token'), // USER TOKEN
-        uid: localStorage.getItem('uid') // USER UID
-    }
-    return postAuxEnd(`/panel/account/calendar`, postData, false)
-}
-
 // FUNCTION TO GET MY PRODUCT PROVISION DATA
 export const productProvision = (reqData) => {
     let postData = {
@@ -182,15 +189,4 @@ export const contactData = (reqData) => {
     }
     return postAuxEnd(`/panel/contacts`, postData, false)
     // return getAuxEnd(`/panel/contacts`)
-}
-
-export const MyProductData = (productID) => {
-    const reqData = { product_id : productID}
-    let postData = {
-        ...reqData,
-        token: localStorage.getItem('token'), // USER TOKEN
-        uid: localStorage.getItem('uid') // USER UID
-    }
-    return postAuxEnd(`/panel/myproduct/dash`, postData, false)
-    // return getAuxEnd(`/panel/myproduct/dash`,reqData)
 }
\ No newline at end of file