diff --git a/src/servala/frontend/forms/service.py b/src/servala/frontend/forms/service.py
index 6047293..d7ea60f 100644
--- a/src/servala/frontend/forms/service.py
+++ b/src/servala/frontend/forms/service.py
@@ -17,6 +17,6 @@ class ServiceFilterForm(forms.Form):
             queryset = queryset.filter(category=category)
         if cloud_provider := self.cleaned_data.get("cloud_provider"):
             queryset = queryset.filter(
-                service_offerings__control_planes__cloud_provider=cloud_provider
+                offerings__control_planes__cloud_provider=cloud_provider
             )
         return queryset
diff --git a/src/servala/frontend/templates/frontend/organizations/services.html b/src/servala/frontend/templates/frontend/organizations/services.html
index 6c6bba9..0e8fd16 100644
--- a/src/servala/frontend/templates/frontend/organizations/services.html
+++ b/src/servala/frontend/templates/frontend/organizations/services.html
@@ -5,35 +5,44 @@
         {% translate "Services" %}
     {% endblock page_title %}
 {% endblock html_title %}
-{% block card_content %}
-    <form class="search-form" auto-submit>
-        {{ filter_form }}
-    </form>
-    {% for service in services %}
-        <div class="col-12 col-md-6 col-lg-4 mb-4">
-            <div class="card h-100">
-                <div class="card-content">
-                    <div class="card-body">
-                        <div class="d-flex align-items-center mb-3">
-                            {% if service.logo %}
-                                <img src="{{ service.logo.url }}"
-                                     alt="{{ service.name }}"
-                                     class="me-3"
-                                     style="max-width: 48px;
-                                            max-height: 48px">
-                            {% endif %}
-                            <h5 class="card-title mb-0">{{ service.name }}</h5>
-                        </div>
-                        {% if service.description %}<p class="card-text">{{ service.description }}</p>{% endif %}
-                    </div>
-                    <div class="card-footer d-flex justify-content-end">
-                        <a href="#" class="btn btn-primary">{% translate "View Details" %}</a>
-                    </div>
+{% block content %}
+    <section class="section">
+        <div class="card">
+            <div class="card-content">
+                <div class="card-body">
+                    <form class="search-form" auto-submit>
+                        {{ filter_form }}
+                    </form>
                 </div>
             </div>
         </div>
-    {% empty %}
-        <p>{% translate "No services found." %}</p>
-    {% endfor %}
+        {% for service in services %}
+            <div class="card col-6 col-lg-3 col-md-4">
+                <div class="card-content">
+                    <div class="card-header d-flex align-items-center">
+                        {% if service.logo %}
+                            <img src="{{ service.logo.url }}"
+                                 alt="{{ service.name }}"
+                                 class="me-3"
+                                 style="max-width: 48px;
+                                        max-height: 48px">
+                        {% endif %}
+                        <div class="d-flex flex-column">
+                            <h4 class="card-title mb-0">{{ service.name }}</h4>
+                            <small class="text-muted">{{ service.category }}</small>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        {% if service.description %}<p class="card-text">{{ service.description }}</p>{% endif %}
+                    </div>
+                    <div class="card-footer d-flex justify-content-end">
+                        <a href="{{ service.pk }}/" class="btn btn-primary">{% translate "View Details" %}</a>
+                    </div>
+                </div>
+            </div>
+        {% empty %}
+            <p>{% translate "No services found." %}</p>
+        {% endfor %}
+    </section>
     <script src="{% static "js/autosubmit.js" %}" defer></script>
-{% endblock card_content %}
+{% endblock content %}