diff --git a/src/component/product/settingsTab/TemplateConfigure.jsx b/src/component/product/settingsTab/TemplateConfigure.jsx
index 03d7b6b..dffc025 100644
--- a/src/component/product/settingsTab/TemplateConfigure.jsx
+++ b/src/component/product/settingsTab/TemplateConfigure.jsx
@@ -1,130 +1,165 @@
-import React, {useState} from 'react'
+import React, { useState } from "react";
 //import getImage from "../../../utils/getImage";
-import { useQuery, useQueryClient} from '@tanstack/react-query';
-import queryKeys from '../../../services/queryKeys';
-import {getTemplateConfig} from '../../../services/services';
+import { 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";
-import UploadModal from './UploadModal';
+import UploadModal from "./UploadModal";
 
-const TemplateConfigure = ({productData}) => {
+const TemplateConfigure = ({ productData }) => {
+  const [selectedSectionDetails, setSelectedSectionDetails] = useState({});
 
-    const [selectedSectionDetails, setSelectedSectionDetails] = useState({})
+  const {
+    data: templateData,
+    isFetching,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: queryKeys.myTemplateConfig,
+    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,
+  });
 
-    // /panel/myproduct/template-config
+  const templateResponse = templateData?.data;
+  const templateImages = Array.isArray(templateResponse?.template_images?.data)
+    ? templateResponse.template_images.data
+    : [];
+  console.log("templateResponse", templateResponse);
 
-    //const queryClient = useQueryClient()
+  return (
+    <>
+      <div className="card card-statistics">
+        {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>
 
-    const {data: templateData, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.myTemplateConfig,
-        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
-    const templateImages = templateResponse?.template_images?.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">
-            {isFetching ?
-                <>
-                    <div className="row">
-                        <div className="col-12">
-                            <p className='text-mute'>Loading...</p>
-                        </div>
+            <div>
+              <div className="col-12">
+                <div>
+                  <div>
+                    <div>
+                      <h4>Image List</h4>
                     </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>
-                            <div className="col-12">
-                                <div>
-                                    <div>
-                                        <div>
-                                            <h4>Image List</h4>
-                                        </div>
-                                    </div>
-                                    <div>
-                                        <ul className="list-unstyled">
-                                            {templateImages && templateImages.map(
-                                                (item) => {
-                                                    const currImage = item?.default_val;
-                                                    return (
-                                                        <li className="media">
-                                                            <div style={{
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                padding: '5px',
-                                                                backgroundColor: 'aliceblue',
-                                                                margin: '2px',
-                                                                maxHeight: '150px'
-                                                            }}>
-                                                                <div className='d-flex justify-content-center align-items-center' style={{padding: '6px', width: '120px', height: '100px'}}>
-                                                                    <img className="mb-xxs-0 img-fluid"
-                                                                    style={{height: 'auto', maxHeight: '100px'}}
-                                                                         src={currImage} alt="image"/>
-                                                                </div>
-
-                                                                <div className="media-body" style={{padding: '2px'}}>
-                                                                    <div style={{
-                                                                        display: 'flex',
-                                                                        flexDirection: 'column'
-                                                                    }}>
-                                                                        <div style={{textAlign: 'right',width: '100%'}}></div>
-                                                                        {/* [Change Image] */}
-                                                                        <label onClick={()=>setSelectedSectionDetails(item)} className='w-100 text-end' data-bs-toggle="modal" data-bs-target="#verticalCenter" style={{cursor: 'pointer'}}>[Change Image]</label>
-                                                                        {/* <input id={item?.id} name={item?.id} className="d-none form-control form-control-sm" type="file" onChange={handleFileChange}/> */}
-                                                                        <div>
-                                                                            <h5 className="mt-0 mb-1">{item?.name}</h5>
-                                                                            {item?.description}
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-
-                                                        </li>
-                                                    )
-                                                }
-                                            )
-                                            }
-                                        </ul>
-                                    </div>
+                  </div>
+                  <div>
+                    <ul className="list-unstyled">
+                      {templateImages &&
+                        templateImages.map((item) => {
+                          const currImage = item?.default_val;
+                          return (
+                            <li className="media">
+                              <div
+                                style={{
+                                  display: "flex",
+                                  flexDirection: "row",
+                                  padding: "5px",
+                                  backgroundColor: "aliceblue",
+                                  margin: "2px",
+                                  maxHeight: "150px",
+                                }}
+                              >
+                                <div
+                                  className="d-flex justify-content-center align-items-center"
+                                  style={{
+                                    padding: "6px",
+                                    width: "120px",
+                                    height: "100px",
+                                  }}
+                                >
+                                  <img
+                                    className="mb-xxs-0 img-fluid"
+                                    style={{
+                                      height: "auto",
+                                      maxHeight: "100px",
+                                    }}
+                                    src={currImage}
+                                    alt="image"
+                                  />
                                 </div>
-                            </div>
-                        </div>
 
-                    </>
-
-
-            } </div>
-            <UploadModal productId={productData?.product_id} selectedSectionDetails={selectedSectionDetails} />
+                                <div
+                                  className="media-body"
+                                  style={{ padding: "2px" }}
+                                >
+                                  <div
+                                    style={{
+                                      display: "flex",
+                                      flexDirection: "column",
+                                    }}
+                                  >
+                                    <div
+                                      style={{
+                                        textAlign: "right",
+                                        width: "100%",
+                                      }}
+                                    ></div>
+                                    {/* [Change Image] */}
+                                    <label
+                                      onClick={() =>
+                                        setSelectedSectionDetails(item)
+                                      }
+                                      className="w-100 text-end"
+                                      data-bs-toggle="modal"
+                                      data-bs-target="#verticalCenter"
+                                      style={{ cursor: "pointer" }}
+                                    >
+                                      [Change Image]
+                                    </label>
+                                    {/* <input id={item?.id} name={item?.id} className="d-none form-control form-control-sm" type="file" onChange={handleFileChange}/> */}
+                                    <div>
+                                      <h5 className="mt-0 mb-1">
+                                        {item?.name}
+                                      </h5>
+                                      {item?.description}
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </li>
+                          );
+                        })}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </>
+        )}{" "}
+      </div>
+      <UploadModal
+        productId={productData?.product_id}
+        selectedSectionDetails={selectedSectionDetails}
+      />
     </>
-}
+  );
+};
 
-export default TemplateConfigure
\ No newline at end of file
+export default TemplateConfigure;