diff --git a/hub/services/templates/services/offering_detail.html b/hub/services/templates/services/offering_detail.html
index 32c4eb7..a51c4ad 100644
--- a/hub/services/templates/services/offering_detail.html
+++ b/hub/services/templates/services/offering_detail.html
@@ -1,87 +1,160 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="card mb-4">
-    <div class="card-body">
-        <div class="d-flex justify-content-between align-items-start mb-4">
-            <div class="d-flex align-items-start">
-                {% if offering.service.logo %}
-                    <img src="{{ offering.service.logo.url }}" alt="{{ offering.service.name }} logo" class="me-4" 
-                         style="max-height: 120px; max-width: 240px; object-fit: contain;">
-                {% endif %}
-                <div>
-                    <h2 class="card-title mb-2">{{ offering.service.name }}</h2>
-                    <h4 class="text-muted">
-                        on 
-                        <a href="{{ offering.cloud_provider.get_absolute_url }}" class="text-decoration-none">
-                            {{ offering.cloud_provider.name }}
-                        </a>
-                    </h4>
+<section class="section">
+    <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
+        <div class="row">
+            <!-- Left Sidebar -->
+            <div class="col-12 col-lg-3">
+                <div class="pr-lg-6">
+                    <!-- Logo -->
+                    <div class="mb-40 border rounded-4 p-4 d-flex align-items-center justify-content-center" style="min-height: 160px;">
+                        {% if offering.service.logo %}
+                            <img class="img-fluid w-100 w-lg-auto" src="{{ offering.service.logo.url }}" 
+                                 alt="{{ offering.service.name }} logo" style="max-height: 120px; object-fit: contain;">
+                        {% endif %}
+                    </div>
+
+                    <!-- Highlights -->
+                    {% if offering.highlights.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">Highlights</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for highlight in offering.highlights.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
+                                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" fill="#9A63EC"/>
+                                        </svg>
+                                    </span>
+                                    <span>{{ highlight.name }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+
+                    <!-- Consulting Partners -->
+                    {% if  offering.service.consulting_partners.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">Consulting Partners</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for partner in  offering.service.consulting_partners.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ partner.get_absolute_url }}">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
+                                            <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" fill="#9A63EC"/>
+                                        </svg>
+                                    </span>
+                                    <span>{{ partner.name }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+
+                    <!-- External Links -->
+                    {% if offering.service.external_links.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">External Links</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for link in offering.service.external_links.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ link.url }}" target="_blank">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" fill="#9A63EC"/>
+                                            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" fill="#9A63EC"/>
+                                          </svg>
+                                    </span>
+                                    <span>{{ link.description }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
                 </div>
             </div>
-            {% if offering.cloud_provider.logo %}
-                <img src="{{ offering.cloud_provider.logo.url }}" 
-                     alt="{{ offering.cloud_provider.name }} logo" 
-                     style="max-height: 80px; max-width: 160px; object-fit: contain;">
-            {% endif %}
-        </div>
 
-        <div class="rich-text-content mb-4">
-            {{ offering.description|safe }}
-        </div>
-    </div>
-</div>
-
-<!-- Plans -->
-<div class="card mb-4">
-    <div class="card-body">
-        <h3 class="mb-4">Available Plans</h3>
-        <div class="row row-cols-1 row-cols-md-3 g-4">
-            {% for plan in offering.plans.all %}
-                <div class="col">
-                    <div class="card h-100 {% if plan.is_default %}border-primary{% endif %}">
-                        {% if plan.is_default %}
-                            <div class="card-header text-primary">
-                                Recommended Plan
-                            </div>
-                        {% endif %}
-                        <div class="card-body">
-                            <h4 class="card-title mb-3">{{ plan.name }}</h4>
-                            
-                            <div class="rich-text-content mb-3">
-                                {{ plan.description|safe }}
-                            </div>
-
-                            {% if plan.features %}
-                                <div class="rich-text-content mb-3">
-                                    {{ plan.features|safe }}
-                                </div>
+            <!-- Main Content -->
+            <div class="col-12 col-lg-9">
+                <div class="pr-lg-32">
+                    <!-- Header -->
+                    <div class="pt-60 pb-lg-60 w-lg-70">
+                        <header>
+                            {% if offering.cloud_provider.logo %}
+                            <p class="mb-6"><a href="{{ offering.cloud_provider.website }}" target="_blank">
+                                <img class="img-fluid" src="{{ offering.cloud_provider.logo.url }}" 
+                                     alt="{{ offering.cloud_provider.name }} logo" style="max-height: 40px;"></a>
+                            </p>
                             {% endif %}
+                            <h2 class="fs-50 fw-semibold lh-1 mb-12">{{ offering.service.name }}</h2>
+                        </header>
+                        <div class="fs-19 text-gray-500">
+                            {% for category in offering.service.categories.all %}
+                                <button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
+                            {% endfor %}
+                        </div>
+                        <div class="fs-19 text-gray-500">
+                            {{ offering.short_description|safe }}
+                        </div>
+                    </div>
 
-                            <div class="mb-3">
-                                {% for price in plan.prices.all %}
-                                    <div class="mb-2">
-                                        <strong>{{ price.currency.symbol }}{{ price.price }}</strong> 
-                                        {{ price.currency.code }} per {{ price.term.name }}
+                    <!-- Description -->
+                    <div class="pt-40 pt-lg-34">
+                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Overview</h3>
+                        <div class="fs-19 text-gray-500">
+                            {{ offering.description|safe }}
+                        </div>
+                    </div>
+
+                    <!-- Plans -->
+                    <div class="pt-24">
+                        <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="text-black mb-20">
+                                        <p class="mb-0">{{ plan.description|safe }}</p>
                                     </div>
-                                {% endfor %}
+                                    <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>
+                                        <div>
+                                            <ul class="list-unstyled text-gray-500 fs-19 lh-1-7 ps-0 mb-0">
+                                                {% for price in plan.prices.all %}
+                                                <li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
+                                                {% endfor %}
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <a class="btn btn-primary btn-lg w-100" 
+                                           href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}&plan={{ plan.id }}">
+                                            Order Now
+                                        </a>
+                                    </div>
+                                </div>
                             </div>
-
-                            <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}&plan={{ plan.id }}" 
-                               class="btn btn-success">Select This Plan</a>
+                            {% empty %}
+                            <div class="col-12">
+                                <div class="alert alert-info">
+                                    No plans available yet.
+                                    <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
+                                       class="btn btn-success ms-3">Show Interest</a>
+                                </div>
+                            </div>
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
-            {% empty %}
-                <div class="col-12">
-                    <div class="alert alert-info">
-                        No plans available yet.
-                        <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
-                           class="btn btn-success ms-3">Show Interest</a>
-                    </div>
-                </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-</div>
+</section>
 {% endblock %}
\ No newline at end of file