diff --git a/src/component/product/settingsTab/SiteTemplateSelector.jsx b/src/component/product/settingsTab/SiteTemplateSelector.jsx
index a8203e3..ec884a1 100644
--- a/src/component/product/settingsTab/SiteTemplateSelector.jsx
+++ b/src/component/product/settingsTab/SiteTemplateSelector.jsx
@@ -1,7 +1,26 @@
 import React, {memo} from 'react'
 import getImage from "../../../utils/getImage";
+import { useQuery } from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import { getProductTemplateData } from '../../../services/services';
+
+const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
+
+    const {data:templateData, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.productTemplateData,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getProductTemplateData(reqData)
+        }
+    })
+
+    const settingsData = templateData?.data
+    console.log('data Template', settingsData)
 
-const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
         console.log("Page data == ", data)
         return (
             <div className="page-account-form">
diff --git a/src/component/subscription/Subscription.jsx b/src/component/subscription/Subscription.jsx
index 1532fcf..069d4ea 100644
--- a/src/component/subscription/Subscription.jsx
+++ b/src/component/subscription/Subscription.jsx
@@ -6,6 +6,7 @@ import {useQuery} from '@tanstack/react-query';
 import queryKeys from '../../services/queryKeys';
 import siteLinks from "../../links/siteLinks";
 import {Link, useNavigate} from 'react-router-dom'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
 
 export default function Subscription() {
     const navigate = useNavigate()
@@ -57,7 +58,7 @@ export default function Subscription() {
                                     </div>
                                     <div className="pt-2" style={{textAlign: 'left'}}>
                                         <div style={{fontSize: '10px'}}>
-                                            Next Payment: {currentSubscription?.next_payment}
+                                            Next Payment: {getDateFromDateString(currentSubscription?.next_payment)}
                                         </div>
                                     </div>
                                 </div>
diff --git a/src/helpers/GetDateFromDateString.js b/src/helpers/GetDateFromDateString.js
new file mode 100644
index 0000000..e089893
--- /dev/null
+++ b/src/helpers/GetDateFromDateString.js
@@ -0,0 +1,33 @@
+function getDateFromDateString(dateString) {
+  const date = new Date(dateString);
+
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
+                  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+  const dayName = days[date.getDay()];
+  const monthName = months[date.getMonth()];
+  const day = date.getDate();
+  const year = date.getFullYear();
+
+  // Add ordinal suffix
+  function getOrdinal(n) {
+    if (n > 3 && n < 21) return "th"; // 4-20 are all "th"
+    switch (n % 10) {
+      case 1: return "st";
+      case 2: return "nd";
+      case 3: return "rd";
+      default: return "th";
+    }
+  }
+
+  // Format time in 12hr with AM/PM
+  let hours = date.getHours();
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const ampm = hours >= 12 ? "PM" : "AM";
+  hours = hours % 12 || 12;
+
+  return `${dayName}, ${monthName} ${day}${getOrdinal(day)} ${year} ${hours}:${minutes}${ampm}`;
+}
+
+export default getDateFromDateString
\ No newline at end of file
diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js
index 000f364..082d694 100644
--- a/src/services/queryKeys.js
+++ b/src/services/queryKeys.js
@@ -6,6 +6,7 @@ const queryKeys = {
     product_page: ['product_page'],
     recentAction: ['recent-action'],
     settingsData: ['settings_data'],
+    productTemplateData: ['product_template_data'],
     subscriptions: ['subscriptions'],
     
     dashboard: ['dashboard'],
diff --git a/src/services/services.js b/src/services/services.js
index 9de35af..d9cf8a5 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -173,6 +173,14 @@ export const getSettingsData = (reqData) => {
     return postAuxEnd(`/panel/myproduct/settings/values`, postData, false)
 }
 
+// FUNCTION TO GET SETTINGS DATA
+export const getProductTemplateData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/templates`, postData, false)
+}
+
 // FUNCTION TO GET PRODUCT SUBSCRIPTIONS
 export const completeProfile = (reqData) => {
     let postData = {