diff --git a/hub/services/templates/services/offering_detail.html b/hub/services/templates/services/offering_detail.html
index 000d13d..b5c946f 100644
--- a/hub/services/templates/services/offering_detail.html
+++ b/hub/services/templates/services/offering_detail.html
@@ -7,6 +7,26 @@
 {% block extra_js %}
 <script defer src="{% static "js/price-calculator.js" %}"></script>
 <link rel="stylesheet" type="text/css" href='{% static "css/price-calculator.css" %}'>
+<script>
+// Function to select a plan in the dropdown when clicking "Select This Plan"
+function selectPlan(element) {
+    const planId = element.getAttribute('data-plan-id');
+    const planName = element.getAttribute('data-plan-name');
+    
+    // Find the plan dropdown in the contact form
+    const planDropdown = document.getElementById('id_choice');
+    if (planDropdown) {
+        // Find the option with matching plan id and select it
+        for (let i = 0; i < planDropdown.options.length; i++) {
+            const optionValue = planDropdown.options[i].value;
+            if (optionValue.startsWith(planId + '|')) {
+                planDropdown.selectedIndex = i;
+                break;
+            }
+        }
+    }
+}
+</script>
 {% endblock %}
 
 {% block content %}
@@ -400,40 +420,90 @@
                             </div>
                         {% elif offering.plans.all %}
                             <!-- Traditional Plans -->
-                            <h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
-                            <div class="row">
-                                {% for plan in offering.plans.all %}
-                                <div class="col-12 col-lg-6 {% if not forloop.last %}mb-20 mb-lg-0{% endif %}">
-                                    <div class="bg-purple-50 rounded-16 border-all p-24">
-                                        <div class="bg-white border-all rounded-7 p-20 mb-20">
-                                            <h3 class="text-purple fs-22 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
-                                            {% if plan.plan_description %}
-                                            <div class="text-black mb-20">
-                                                {{ plan.plan_description.text|safe }}
+                            <h3 class="fs-24 fw-semibold lh-1 mb-12">Choose your Plan</h3>
+                            <div class="bg-light rounded-4 p-4 mb-4">
+                                <div class="row">
+                                    {% for plan in offering.plans.all %}
+                                    <div class="col-12 {% if offering.plans.all|length == 1 %}col-lg-8 mx-auto{% elif offering.plans.all|length == 2 %}col-lg-6{% else %}col-lg-4{% endif %} mb-4">
+                                        <div class="card h-100 border-primary shadow-sm">
+                                            <div class="card-body">
+                                                <h5 class="card-title text-primary mb-3">
+                                                    <i class="bi bi-box me-2"></i>{{ plan.name }}
+                                                </h5>
+                                                
+                                                <!-- Plan Description -->
+                                                {% if plan.plan_description %}
+                                                <div class="mb-3">
+                                                    <small class="text-muted">Description</small>
+                                                    <div class="text-dark">
+                                                        {{ plan.plan_description.text|safe }}
+                                                    </div>
+                                                </div>
+                                                {% endif %}
+                                                
+                                                {% if plan.description %}
+                                                <div class="mb-3">
+                                                    <small class="text-muted">Details</small>
+                                                    <div class="text-dark">
+                                                        {{ plan.description|safe }}
+                                                    </div>
+                                                </div>
+                                                {% endif %}
+
+                                                <!-- Pricing Information -->
+                                                {% if plan.plan_prices.exists %}
+                                                <div class="border-top pt-3 mt-3">
+                                                    <div class="mb-2">
+                                                        <small class="text-muted">Pricing</small>
+                                                    </div>
+                                                    {% for price in plan.plan_prices.all %}
+                                                    <div class="d-flex justify-content-between mb-2">
+                                                        <span>Monthly Price</span>
+                                                        <span class="fs-5 fw-bold text-primary">{{ price.currency }} {{ price.amount }}</span>
+                                                    </div>
+                                                    {% endfor %}
+                                                    <small class="text-muted mt-2 d-block">
+                                                        <i class="bi bi-info-circle me-1"></i>
+                                                        Prices exclude VAT. Monthly pricing based on 30 days.
+                                                    </small>
+                                                </div>
+                                                {% else %}
+                                                <div class="border-top pt-3 mt-3">
+                                                    <div class="text-center text-muted">
+                                                        <i class="bi bi-envelope me-2"></i>Contact us for pricing details
+                                                    </div>
+                                                </div>
+                                                {% endif %}
+
+                                                <!-- Plan Action Button -->
+                                                <div class="text-center mt-4">
+                                                    <a href="#plan-order-form" class="btn btn-primary btn-lg px-4 py-2 fw-semibold w-100" data-plan-id="{{ plan.id }}" data-plan-name="{{ plan.name }}" onclick="selectPlan(this)">
+                                                        <i class="bi bi-cart me-2"></i>Select This Plan
+                                                    </a>
+                                                </div>
                                             </div>
-                                            {% endif %}
-                                            {% if plan.description %}
-                                            <div class="text-black mb-20">
-                                                {{ plan.description|safe }}
-                                            </div>
-                                            {% endif %}
-                                            {% if plan.pricing %}
-                                            <div class="text-black mb-20">
-                                                {{ plan.pricing|safe }}
-                                            </div>
-                                            {% endif %}
                                         </div>
                                     </div>
+                                    {% empty %} 
+                                    <div class="col-12" id="interest" style="scroll-margin-top: 30px;">
+                                        <div class="alert alert-info">
+                                            <p>No plans available yet.</p>
+                                            <h4 class="mb-3">I'm interested in this offering</h4>
+                                            {% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
+                                        </div>
+                                    </div>
+                                    {% endfor %}
                                 </div>
-                                {% empty %} 
-                                <div class="col-12" id="interest" style="scroll-margin-top: 30px;">
-                                    <div class="alert alert-info">
-                                        <p>No plans available yet.</p>
-                                        <h4 class="mb-3">I'm interested in this offering</h4>
-                                        {% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
+                            </div>
+
+                            <!-- Plan Order Forms -->
+                            <div id="plan-order-form" class="pt-40" style="scroll-margin-top: 30px;">
+                                <h4 class="fs-22 fw-semibold lh-1 mb-12">Order Your Plan</h4>
+                                <div class="row">
+                                    <div class="col-12">
+                                        {% embedded_contact_form source="Plan Order" service=offering.service offering_id=offering.id choices=offering.plans.all choice_label="Select a Plan" %}
                                     </div>
                                 </div>
-                                {% endfor %}
                             </div>
                         {% else %}
                             <!-- No Plans Available -->
@@ -443,17 +513,6 @@
                                 {% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
                             </div>
                         {% endif %}
-                        
-                        {% if offering.plans.exists and not pricing_data_by_group_and_service_level %}
-                        <div id="form" class="pt-40">
-                            <h4 class="fs-22 fw-semibold lh-1 mb-12">I'm interested in a plan</h4>
-                            <div class="row">
-                                <div class="col-12">
-                                    {% embedded_contact_form source="Plan Order" service=offering.service offering_id=offering.id choices=offering.plans.all choice_label="Select a Plan" %}
-                                </div>
-                            </div>
-                        </div>
-                        {% endif %}
                     </div>
                 </div>
             </div>