diff --git a/hub/services/templates/services/service_detail.html b/hub/services/templates/services/service_detail.html
index 57bb331..161900a 100644
--- a/hub/services/templates/services/service_detail.html
+++ b/hub/services/templates/services/service_detail.html
@@ -1,165 +1,139 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="card mb-4">
-    <div class="card-body">
-        <div class="d-flex align-items-start mb-4">
-            {% if service.logo %}
-                <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="me-4" 
-                     style="max-height: 120px; max-width: 240px; object-fit: contain;">
-            {% endif %}
-            <div>
-                <h2 class="card-title mb-3">{{ service.name }}</h2>
-                <div class="mb-3">
-                    {% for category in service.categories.all %}
-                        <span class="badge bg-secondary me-1">{{ category.full_path }}</span>
-                    {% endfor %}
+<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">
+                        {% if service.logo %}
+                            <img class="img-fluid w-100 w-lg-auto" src="{{ service.logo.url }}" alt="{{ service.name }} logo">
+                        {% endif %}
+                    </div>
+
+                    <!-- Highlights -->
+                    {% if service.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 service.highlights.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="">
+                                    <span class="pr-10">
+                                        <svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M12.0489 0.709522C12.3483 -0.211788 13.6517 -0.211789 13.9511 0.709521L16.1432 7.45623C16.2771 7.86825 16.661 8.14722 17.0943 8.14722H24.1882C25.1569 8.14722 25.5597 9.38683 24.7759 9.95623L19.0369 14.1259C18.6864 14.3806 18.5397 14.8319 18.6736 15.244L20.8657 21.9907C21.1651 22.912 20.1106 23.6781 19.3269 23.1087L13.5878 18.939C13.2373 18.6844 12.7627 18.6844 12.4122 18.939L6.67312 23.1087C5.88941 23.6781 4.83493 22.912 5.13428 21.9907L7.32642 15.244C7.46029 14.8319 7.31363 14.3806 6.96315 14.1259L1.22405 9.95623C0.440337 9.38683 0.843112 8.14722 1.81184 8.14722H8.90575C9.33897 8.14722 9.72293 7.86826 9.8568 7.45623L12.0489 0.709522Z" fill="#9A63EC"/>
+                                        </svg>
+                                    </span>
+                                    <span>{{ highlight.name }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+
+                    <!-- Categories -->
+                    <div>
+                        <h3 class="fw-semibold mb-12">Categories</h3>
+                        <div>
+                            {% for category in service.categories.all %}
+                                <a class="btn btn-tertiary btn-sm mr-12" href="">{{ category.full_path }}</a>
+                            {% endfor %}
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="rich-text-content mb-4">
-            {{ service.description|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>
+                            <h2 class="fs-50 fw-semibold lh-1 mb-12">{{ service.name }}</h2>
+                            <h4 class="text-primary fs-24 fw-normal">by {{ service.provider.name }}</h4>
+                        </header>
+                        <div class="fs-19 text-gray-500">
+                            {{ service.short_description|safe }}
+                        </div>
+                    </div>
 
-        {% if service.features %}
-            <h3>Features</h3>
-            <div class="rich-text-content mb-4">
-                {{ service.features|safe }}
-            </div>
-        {% endif %}
-    </div>
-</div>
+                    <!-- 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">
+                            {{ service.description|safe }}
+                        </div>
+                    </div>
 
-<!-- Cloud Provider Offerings -->
-<div class="card mb-4">
-    <div class="card-body">
-        <h3 class="mb-4">Available Offerings</h3>
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for offering in service.offerings.all %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if offering.cloud_provider.logo %}
-                                    <img src="{{ offering.cloud_provider.logo.url }}" 
-                                         alt="{{ offering.cloud_provider.name }} logo" 
-                                         class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
-                                <div>
-                                    <h5 class="card-title mb-0">
-                                        <a href="{{ offering.cloud_provider.get_absolute_url }}" class="text-decoration-none">
-                                            {{ offering.cloud_provider.name }}
-                                        </a>
-                                    </h5>
-                                    {% if offering.cloud_provider.website %}
-                                        <a href="{{ offering.cloud_provider.website }}" class="text-muted small" target="_blank">
-                                            Visit Provider Website
-                                        </a>
-                                    {% endif %}
-                                </div>
-                            </div>
+                    <!-- Features -->
+                    {% if service.features %}
+                    <div class="pt-24">
+                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Features</h3>
+                        <div class="page-content fs-19 text-gray-500">
+                            {{ service.features|safe }}
+                        </div>
+                    </div>
+                    {% endif %}
 
-                            <div class="rich-text-content mb-3">
-                                {{ offering.description|safe|truncatewords_html:50 }}
-                            </div>
+                    <!-- Offerings -->
+                    <div class="pt-24">
+                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Available Offerings</h3>
+                        <div class="row">
+                            {% for offering in service.offerings.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="mb-6">
+                                        {% if offering.cloud_provider.logo %}
+                                            <img class="img-fluid" src="{{ offering.cloud_provider.logo.url }}" alt="{{ offering.cloud_provider.name }}">
+                                        {% endif %}
+                                    </div>
+                                    <div class="text-black mb-20">
+                                        <p class="mb-0">{{ offering.description|safe|truncatewords_html:50 }}</p>
+                                    </div>
 
-                            {% if offering.plans.exists %}
-                                <div class="mb-3">
-                                    <h6>Plans:</h6>
                                     {% for plan in offering.plans.all %}
-                                        <div class="card mb-2">
-                                            <div class="card-body">
-                                                <h6 class="card-title">{{ plan.name }}</h6>
+                                    <div class="bg-white border-all rounded-7 p-20 {% if not forloop.last %}mb-12{% else %}mb-20{% endif %}">
+                                        <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 %}
-                                                    <div class="small text-muted">
-                                                        {{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}
-                                                    </div>
+                                                <li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
                                                 {% endfor %}
-                                            </div>
+                                            </ul>
                                         </div>
+                                    </div>
                                     {% endfor %}
-                                </div>
-                            {% endif %}
 
-                            <a href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}" 
-                            class="btn btn-success">
-                             {% if offering.status == 'available' %}
-                                 Order
-                             {% elif offering.status == 'planned' %}
-                                 Show Interest
-                             {% else %}
-                                 Request Information
-                             {% endif %}
-                         </a>
-                        </div>
-                    </div>
-                </div>
-            {% empty %}
-                <div class="col-12">
-                    <div class="alert alert-info d-flex justify-content-between align-items-center">
-                        <span>No offerings available yet.</span>
-                        <a href="{% url 'services:create_lead' service.slug %}" class="btn btn-success">Show Interest</a>
-                    </div>
-                </div>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-
-<!-- Consulting Partners -->
-{% if service.consulting_partners.exists %}
-<div class="card mb-4">
-    <div class="card-body">
-        <h3 class="mb-4">Consulting Partners</h3>
-        <div class="row row-cols-1 row-cols-md-3 g-4">
-            {% for partner in service.consulting_partners.all %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if partner.logo %}
-                                    <img src="{{ partner.logo.url }}" 
-                                         alt="{{ partner.name }} logo" 
-                                         class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
-                                <div>
-                                    <h5 class="card-title mb-0">
-                                        <a href="{{ partner.get_absolute_url }}" class="text-decoration-none">
-                                            {{ partner.name }}
+                                    <div>
+                                        <a class="btn btn-primary btn-lg w-100" href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}">
+                                            {% if offering.status == 'available' %}
+                                                Order Now
+                                            {% elif offering.status == 'planned' %}
+                                                Show Interest
+                                            {% else %}
+                                                Request Information
+                                            {% endif %}
                                         </a>
-                                    </h5>
-                                    {% if partner.website %}
-                                        <a href="{{ partner.website }}" class="text-muted small" target="_blank">
-                                            Visit Website
-                                        </a>
-                                    {% endif %}
+                                    </div>
                                 </div>
                             </div>
+                            {% empty %}
+                            <div class="col-12">
+                                <div class="alert alert-info d-flex justify-content-between align-items-center">
+                                    <span>No offerings available yet.</span>
+                                    <a href="{% url 'services:create_lead' service.slug %}" class="btn btn-primary">Show Interest</a>
+                                </div>
+                            </div>
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-</div>
-{% endif %}
-
-<!-- External Links -->
-{% if service.external_links.exists %}
-<div class="card mb-4">
-    <div class="card-body">
-        <h3>Additional Information</h3>
-        <div class="list-group">
-            {% for link in service.external_links.all %}
-                <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" 
-                   class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
-                    {{ link.description }}
-                    <i class="bi bi-box-arrow-up-right"></i>
-                </a>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-{% endif %}
+</section>
 {% endblock %}
\ No newline at end of file