diff --git a/hub/services/static/js/price-calculator.js b/hub/services/static/js/price-calculator.js
index 377c097..96069fe 100644
--- a/hub/services/static/js/price-calculator.js
+++ b/hub/services/static/js/price-calculator.js
@@ -525,16 +525,35 @@ Please contact me with next steps for ordering this configuration.`;
 
     // Update addons based on current configuration
     updateAddons() {
-        if (!this.addonsContainer || !this.addonsData) return;
+        if (!this.addonsContainer || !this.addonsData) {
+            // Hide addons section if no container or data
+            const addonsSection = document.getElementById('addonsSection');
+            if (addonsSection) addonsSection.style.display = 'none';
+            return;
+        }
 
         const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value;
-        if (!serviceLevel || !this.addonsData[serviceLevel]) return;
+        if (!serviceLevel || !this.addonsData[serviceLevel]) {
+            // Hide addons section if no service level or no addons for this level
+            const addonsSection = document.getElementById('addonsSection');
+            if (addonsSection) addonsSection.style.display = 'none';
+            return;
+        }
 
         const addons = this.addonsData[serviceLevel];
 
         // Clear existing addons
         this.addonsContainer.innerHTML = '';
 
+        // Show or hide addons section based on availability
+        const addonsSection = document.getElementById('addonsSection');
+        if (addons && addons.length > 0) {
+            if (addonsSection) addonsSection.style.display = 'block';
+        } else {
+            if (addonsSection) addonsSection.style.display = 'none';
+            return;
+        }
+
         // Add each addon
         addons.forEach(addon => {
             const addonElement = document.createElement('div');
diff --git a/hub/services/templates/services/offering_detail.html b/hub/services/templates/services/offering_detail.html
index b8b5a61..000d13d 100644
--- a/hub/services/templates/services/offering_detail.html
+++ b/hub/services/templates/services/offering_detail.html
@@ -276,8 +276,8 @@
                                                     </div>
                                                 </div>
                                                 
-                                                <!-- Addons Section -->
-                                                <div class="mb-4">
+                                                <!-- Addons Section - Hidden by default, shown by JS if addons exist -->
+                                                <div class="mb-4" id="addonsSection" style="display: none;">
                                                     <label class="form-label">Add-ons (Optional)</label>
                                                     <div id="addonsContainer">
                                                         <!-- Add-ons will be dynamically populated here -->