diff --git a/hub/services/templates/services/provider_detail.html b/hub/services/templates/services/provider_detail.html
index b680070..8aaf545 100644
--- a/hub/services/templates/services/provider_detail.html
+++ b/hub/services/templates/services/provider_detail.html
@@ -1,56 +1,68 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="card">
-    <div class="card-body">
-        <div class="d-flex align-items-start mb-4">
-            {% if provider.logo %}
-                <img src="{{ provider.logo.url }}" alt="{{ provider.name }} logo" class="me-4" 
-                     style="max-height: 120px; max-width: 240px; object-fit: contain;">
-            {% endif %}
-            <div>
-                <h2 class="card-title mb-3">{{ provider.name }}</h2>
-                <div class="rich-text-content">
-                    {{ provider.description|safe }}
+<section class="section bg-primary-subtle">
+    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
+        <div class="row align-items-center">
+            <div class="col-12 col-lg-5 mb-47 mb-lg-0">
+                <header class="section-primary__header">
+                    <h2 class="section-h1 fs-40 fs-lg-64 mb-14">{{ provider.name }}</h2>
+                    <div class="text-gray-300 mb-14">
+                        <div class="rich-text-content">
+                            {{ provider.description|safe }}
+                        </div>
+                    </div>
+                    {% if provider.website %}
+                    <div>
+                        <a class="btn btn-primary btn-lg" href="{{ provider.website }}" target="_blank" role="button">Visit Website</a>
+                    </div>
+                    {% endif %}
+                </header>
+            </div>
+            <div class="col-12 col-lg-7">
+                <div>
+                    {% if provider.logo %}
+                    <img class="img-fluid d-block ml-lg-auto" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo">
+                    {% endif %}
                 </div>
             </div>
         </div>
+    </div>
+</section>
 
-        <h3 class="mb-4">Available Services</h3>
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for service in services %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if service.logo %}
+<div class="container mx-auto px-20 px-lg-0 py-60">
+    <h3 class="section-h2 fs-32 fs-lg-48 mb-40 mt-5">Available Services</h3>
+    <p>The following services are available on {{ provider.name }}</p>
+    <div class="row row-cols-1 row-cols-md-2 g-4">
+        {% for service in services %}
+            <div class="col">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center mb-3">
+                            <!-- TODO: link to offering, not service detail page -->
+                            {% if service.logo %}
+                                <a href="{{ service.get_absolute_url }}">
                                     <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" 
                                          class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
-                                <div>
-                                    <h5 class="card-title mb-0">{{ service.name }}</h5>
-                                </div>
+                                </a>
+                            {% endif %}
+                            <div>
+                                <h5 class="card-title mb-0"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h5>
                             </div>
-                            <div class="card-text description-preview mb-3">
-                                {{ service.description|safe|truncatewords_html:30 }}
-                            </div>
-                            <div class="mb-2">
-                                {% for category in service.categories.all %}
-                                    <span class="badge bg-secondary me-1">{{ category.full_path }}</span>
-                                {% endfor %}
-                            </div>
-                            <a href="{% url 'services:service_detail' service.slug %}" class="btn btn-primary">View Details</a>
+                        </div>
+                        <div class="card-text description-preview mb-3">
+                            {{ service.description|safe|truncatewords_html:30 }}
                         </div>
                     </div>
                 </div>
-            {% empty %}
-                <div class="col-12">
-                    <div class="alert alert-info">
-                        No services available from this provider yet.
-                    </div>
+            </div>
+        {% empty %}
+            <div class="col-12">
+                <div class="alert alert-info">
+                    No services available from this provider yet.
                 </div>
-            {% endfor %}
-        </div>
+            </div>
+        {% endfor %}
     </div>
 </div>
 {% endblock %}
\ No newline at end of file