diff --git a/src/component/product/settingsTab/Settings.jsx b/src/component/product/settingsTab/Settings.jsx
index ab0c9b8..3965da7 100644
--- a/src/component/product/settingsTab/Settings.jsx
+++ b/src/component/product/settingsTab/Settings.jsx
@@ -130,7 +130,7 @@ const Settings = memo(({productData}) => {
                         ))}
                         <div className={`tab-pane fade  ${(activeTab == 'config_temp') && 'active show'}`}
                         >
-                            <TemplateConfigure />
+                            <TemplateConfigure productData={productData} />
                         </div>
                     </>
                 </div>
diff --git a/src/component/product/settingsTab/TemplateConfigure.jsx b/src/component/product/settingsTab/TemplateConfigure.jsx
index 58f6106..640f75f 100644
--- a/src/component/product/settingsTab/TemplateConfigure.jsx
+++ b/src/component/product/settingsTab/TemplateConfigure.jsx
@@ -1,24 +1,74 @@
-
+import React, {memo} from 'react'
+import getImage from "../../../utils/getImage";
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import {
+    getTemplateConfig,
+} from '../../../services/services';
+import {Link} from "react-router-dom";
+import siteLinks from "../../../links/siteLinks";
 
 const TemplateConfigure = ({productData}) => {
 
+    // /panel/myproduct/template-config
+
+    const queryClient = useQueryClient()
+
+    const {data: templateData, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.templateConfigItems,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+            return getTemplateConfig(reqData)
+        },
+        staleTime: 0
+    })
+
+    const templateResponse = templateData?.data
+   // debugger;
+    console.log("templateResponse",templateResponse);
+    // const currentColorUID = templateResponse?.current_colorstyle_uid
+    // const color_styles = templateResponse?.color_styles
+    // const custom_template_name = templateResponse?.custom_template_name
+    //
     return <>
         <div className="card card-statistics">
-            <div className="card-header">
-                <div className="card-heading">
-                    <h4 className="card-title" style={{textTransform: 'none'}}>Some headings</h4>
-                </div>
-            </div>
-            {/*<div className="card-body">*/}
-            {/*    <div className="form-group">*/}
-            {/*        /!*<label htmlFor="exampleInputEmail1">Email address</label>*!/*/}
-            {/*        <input type="email" className="form-control"*/}
-            {/*               aria-describedby="defaultUrlHelp" value={defaultUrl} readOnly={true} />*/}
-            {/*    </div>*/}
-            {/*</div>*/}
-        </div>
+            {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="card-header">
+                            <div className="card-heading">
+                                <h4 className="card-title" style={{textTransform: 'none'}}>{templateResponse?.template_name}</h4>
+                            </div>
+                        </div>
+                        {/*<div className="card-body">*/}
+                        {/*    <div className="form-group">*/}
+                        {/*        /!*<label htmlFor="exampleInputEmail1">Email address</label>*!/*/}
+                        {/*        <input type="email" className="form-control"*/}
+                        {/*               aria-describedby="defaultUrlHelp" value={defaultUrl} readOnly={true} />*/}
+                        {/*    </div>*/}
+                        {/*</div>*/}
+
+                    </>
 
 
+            } </div>
     </>
 }
 
diff --git a/src/services/services.js b/src/services/services.js
index b2cf95d..336e227 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -244,6 +244,14 @@ export const getProductColorStyles = (reqData) => {
     }
     return postAuxEnd(`/panel/account/products/color-styles`, postData, false)
 }
+
+export const getTemplateConfig = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/template-config`, postData, false)
+}
+
 // FUNCTION TO ACTIVATE TEMPLATE
 export const activateTemplate = (reqData) => {
     let postData = {