diff --git a/api-runtime/rest-runtime/CBSpiderRuntime.go b/api-runtime/rest-runtime/CBSpiderRuntime.go
index a714aeac3..e32b0ed53 100644
--- a/api-runtime/rest-runtime/CBSpiderRuntime.go
+++ b/api-runtime/rest-runtime/CBSpiderRuntime.go
@@ -440,7 +440,7 @@ func RunServer() {
 		{"GET", "/adminweb/vmimage/:ConnectConfig", aw.VMImage},
 		{"GET", "/adminweb/vmspec/:ConnectConfig", aw.VMSpec},
 		{"GET", "/adminweb/regionzone/:ConnectConfig", aw.RegionZone},
-		{"GET", "/adminweb/priceinforequest/:ConnectConfig", aw.RiceInfoRequest},
+		{"GET", "/adminweb/priceinforequest/:ConnectConfig", aw.PRiceInfoRequest},
 
 		{"GET", "/adminweb/cluster/:ConnectConfig", aw.Cluster},
 		{"GET", "/adminweb/clustermgmt/:ConnectConfig", aw.ClusterMgmt},
diff --git a/api-runtime/rest-runtime/admin-web/AdminWeb-PriceInfo-Request.go b/api-runtime/rest-runtime/admin-web/AdminWeb-PriceInfo-Request.go
index c2f3c01a9..60463c058 100644
--- a/api-runtime/rest-runtime/admin-web/AdminWeb-PriceInfo-Request.go
+++ b/api-runtime/rest-runtime/admin-web/AdminWeb-PriceInfo-Request.go
@@ -21,16 +21,16 @@ import (
 )
 
 func productFamilyList() []string {
-	return []string{"Compute", "Storage", "Database"}
+	return []string{"Select a Region first"}
 }
 
 func regionList() []string {
-	return []string{"us-east-1", "us-west-1", "eu-central-1"}
+	return []string{"No regions available"}
 }
 
 //====================================== PriceInfo Request
 
-func RiceInfoRequest(c echo.Context) error {
+func PRiceInfoRequest(c echo.Context) error {
 	cblog.Info("call RequestRiceInfo()")
 
 	connConfig := c.Param("ConnectConfig")
@@ -82,12 +82,14 @@ func RiceInfoRequest(c echo.Context) error {
 
 	type PageData struct {
 		LoggingUrl        template.JS
+		ConnectionName    string
 		RegionList        []string
 		ProductFamilyList []string
 		LoggingResult     template.JS
 	}
 
 	data := PageData{
+		ConnectionName:    connConfig,
 		RegionList:        regionNameList,
 		ProductFamilyList: productFamilyList(),
 	}
diff --git a/api-runtime/rest-runtime/admin-web/html/priceinfo-request-template.html b/api-runtime/rest-runtime/admin-web/html/priceinfo-request-template.html
index 4d19bfe77..502c144f3 100644
--- a/api-runtime/rest-runtime/admin-web/html/priceinfo-request-template.html
+++ b/api-runtime/rest-runtime/admin-web/html/priceinfo-request-template.html
@@ -90,8 +90,8 @@
             position: absolute;
             top: 50%;
             left: 50%;
-            width: 70%;
-            height: 70%;
+            width: 90%;
+            height: 90%;
             transform: translate(-50%, -50%);
             background-color: white;
             border: none;
@@ -100,6 +100,7 @@
     </style>
 </head>
 <body>
+    <input type="hidden" id="connectionName" value="{{.ConnectionName}}">
     <div class="container">
         <h2>Multi-Cloud Price Info</h2>
         <form id="filterForm">
@@ -138,12 +139,13 @@ <h2>Multi-Cloud Price Info</h2>
     </div>
 
     <script>
-        // Example data - Replace with actual function calls
-        const productFamilies = productFamilyList();
-        const regions = regionList();
 
         function populateSelect(selectId, options) {
             const select = document.getElementById(selectId);
+            // Remove all existing options
+            while (select.options.length > 0) {
+                select.remove(0);
+            }            
             options.forEach(option => {
                 let opt = document.createElement('option');
                 opt.value = option;
@@ -152,13 +154,33 @@ <h2>Multi-Cloud Price Info</h2>
             });
         }
 
-        // Populate the select boxes
-        populateSelect('productFamily', productFamilies);
-        populateSelect('region', regions);
+        document.getElementById('region').addEventListener('change', function() {
+            const selectedRegion = this.value;
+            const connectionName = document.getElementById('connectionName').value;
+            updateProductFamilyList(selectedRegion, connectionName);
+        });
 
-        // Replace the above example data with actual function calls
-        // populateSelect('productFamily', productFamilyList());
-        // populateSelect('region', regionList());
+        function updateProductFamilyList(region, connectionName) {
+            // Clear the product family select box and show a fetching message
+            const productFamilySelect = document.getElementById('productFamily');
+            productFamilySelect.innerHTML = '<option>fetching</option>';
+            let fetchText = 'fetching';
+            let intervalId = setInterval(() => {
+                fetchText += '.';
+                productFamilySelect.innerHTML = `<option>${fetchText}</option>`;
+            }, 100);
+
+            fetch(`/spider/productfamily/${region}?ConnectionName=${connectionName}`)
+                .then(response => response.json())
+                .then(productFamilies => {
+                    clearInterval(intervalId); // stop the interval
+                    populateSelect('productFamily', productFamilies);
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    clearInterval(intervalId); // stop the interval
+                });
+        }
 
         function openOverlay() {
             document.getElementById('overlay').style.display = 'block';
@@ -172,8 +194,7 @@ <h2>Multi-Cloud Price Info</h2>
 
         function setFilter(filterContent) {
             document.getElementById('filter').value = filterContent;
-            document.getElementById('overlay').style.display = 'none';
-            document.getElementById('overlayContent').src = '';
+            closeOverlay();
         }
     </script>
 </body>
