diff --git a/hub/services/templates/services/service_list.html b/hub/services/templates/services/service_list.html
index f21f420..38b6be5 100644
--- a/hub/services/templates/services/service_list.html
+++ b/hub/services/templates/services/service_list.html
@@ -1,138 +1,178 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="card">
-            <div class="card-body">
-                <h5 class="card-title">Filters</h5>
-                <form method="get">
-                    <div class="mb-3">
-                        <label for="search" class="form-label">Search</label>
-                        <input type="text" class="form-control" id="search" name="search" value="{{ request.GET.search }}">
-                    </div>
-                    
-                    <div class="mb-3">
-                        <label for="category" class="form-label">Category</label>
-                        <select class="form-select" id="category" name="category">
-                            <option value="">All Categories</option>
-                            {% for category in categories %}
-                                <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ category.name }}
-                                </option>
-                                {% for subcategory in category.children.all %}
-                                    <option value="{{ subcategory.id }}" {% if request.GET.category == subcategory.id|stringformat:'i' %}selected{% endif %}>
-                                        &nbsp;&nbsp;&nbsp;{{ subcategory.name }}
-                                    </option>
-                                {% endfor %}
-                            {% endfor %}
-                        </select>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="cloud_provider" class="form-label">Cloud Provider</label>
-                        <select class="form-select" id="cloud_provider" name="cloud_provider">
-                            <option value="">All Providers</option>
-                            {% for provider in cloud_providers %}
-                                <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ provider.name }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="consulting_partner" class="form-label">Consulting Partner</label>
-                        <select class="form-select" id="consulting_partner" name="consulting_partner">
-                            <option value="">All Partners</option>
-                            {% for partner in consulting_partners %}
-                                <option value="{{ partner.id }}" {% if request.GET.consulting_partner == partner.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ partner.name }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    
-                    <button type="submit" class="btn btn-primary">Apply Filters</button>
-                    <a href="{% url 'services:service_list' %}" class="btn btn-secondary">Clear</a>
-                </form>
+<section class="section bg-primary-subtle">
+    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
+        <header class="section-primary__header text-center">
+            <h2 class="section-h1 fs-40 fs-lg-64 mb-24">Discover Services</h2>
+            <div class="text-gray-300 w-lg-37 mx-auto">
+                <p class="mb-0">Discover our service catalog</p>
             </div>
-        </div>
+        </header>
     </div>
-    
-    <div class="col-md-9">
-        <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 %}
-                                    <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
+</section>
+
+<section class="section">
+    <div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
+        <div x-data="{ open: window.innerWidth > 1024 }"
+            @resize.window="open = window.innerWidth > 1024 ? open : true" class="d-lg-flex">
+            <!-- Filters -->
+            <div class="w-lg-20 flex-none">
+                <!-- Mobile Menu -->
+                <div class="page-action d-lg-none mb-40">
+                    <button @click="open = !open"
+                        class="btn btn-outline-primary btn-md w-100 d-flex justify-content-center align-items-center"
+                        type="button">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <mask id="mask0_115_3182" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0"
+                                y="0" width="24" height="24">
+                                <rect width="24" height="24" fill="#D9D9D9" />
+                            </mask>
+                            <g mask="url(#mask0_115_3182)">
+                                <path d="M7 18V16H17V18H7ZM5 13V11H19V13H5ZM3 8V6H21V8H3Z" fill="#9A63EC" />
+                            </g>
+                        </svg>
+                        <span class="ms-2">Filters</span>
+                    </button>
+                </div>
+                <!-- Desktop View -->
+                <div x-cloak x-show="open || window.innerWidth >= 1024" class="w-lg-85" x-collapse>
+                    <div class="d-flex d-lg-none justify-content-between align-items-center mb-24"
+                        role="button">
+                        <h3 class="sidebar-dropdown__title mb-0">Filters</h3>
+                        <span @click="open = false">
+                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <mask id="mask0_115_3177" style="mask-type:alpha" maskUnits="userSpaceOnUse"
+                                    x="0" y="0" width="24" height="25">
+                                    <rect y="0.5" width="24" height="24" fill="#D9D9D9" />
+                                </mask>
+                                <g mask="url(#mask0_115_3177)">
+                                    <path
+                                        d="M6.4 19.5L5 18.1L10.6 12.5L5 6.9L6.4 5.5L12 11.1L17.6 5.5L19 6.9L13.4 12.5L19 18.1L17.6 19.5L12 13.9L6.4 19.5Z"
+                                        fill="#160037" />
+                                </g>
+                            </svg>
+                        </span>
+                    </div>
+
+                    <div class="search-form position-relative mb-24">
+                        <form method="get" x-data="{submitForm() { $refs.filterForm.submit(); } }" x-ref="filterForm">
+                            <!-- Search -->
+                            <div class="mb-24">
+                                <label for="search" class="d-none">Search</label>
+                                <input type="text" id="search" class="input-search" placeholder="Search" name="search" value="{{ request.GET.search }}">
+                                <button class="search-button position-absolute top-0 start-0 d-flex justify-content-center align-items-center border-0 bg-transparent p-0"
+                                    type="button" title="search">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M17.5 17.5L22 22" stroke="#9A63EC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
+                                            stroke="#9A63EC" stroke-width="1.5" stroke-linejoin="round" />
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <!-- Category Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Category</h3>
+                                </div>
                                 <div>
-                                    <h5 class="card-title mb-0">{{ service.name }}</h5>
-                                    <div class="mt-2">
-                                        {% for offering in service.offerings.all %}
-                                            <div class="d-inline-block me-2">
-                                                {% if offering.cloud_provider.logo %}
-                                                    <a href="{% url 'services:provider_detail' offering.cloud_provider.slug %}" title="{{ offering.cloud_provider.name }}">
-                                                        <img src="{{ offering.cloud_provider.logo.url }}" 
-                                                             alt="{{ offering.cloud_provider.name }}" 
-                                                             style="max-height: 25px; max-width: 50px; object-fit: contain;">
-                                                    </a>
-                                                {% else %}
-                                                    <a href="{% url 'services:provider_detail' offering.cloud_provider.slug %}" 
-                                                       class="badge bg-secondary text-decoration-none">
-                                                        {{ offering.cloud_provider.name }}
-                                                    </a>
-                                                {% endif %}
-                                            </div>
+                                    <select class="form-select" id="category" name="category" @change="submitForm()">
+                                        <option value="">All Categories</option>
+                                        {% for category in categories %}
+                                            <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ category.name }}
+                                            </option>
+                                            {% if category.children.all %}
+                                                {% for subcategory in category.children.all %}
+                                                    <option value="{{ subcategory.id }}" {% if request.GET.category == subcategory.id|stringformat:'i' %}selected{% endif %}>
+                                                        &nbsp;&nbsp;&nbsp;{{ subcategory.name }}
+                                                    </option>
+                                                {% endfor %}
+                                            {% endif %}
                                         {% endfor %}
-                                    </div>
+                                    </select>
                                 </div>
                             </div>
-                            <div class="mb-2">
-                                {% for category in service.categories.all %}
-                                    <span class="badge bg-secondary me-1">{{ category.full_path }}</span>
-                                {% endfor %}
-                            </div>
-                            <p class="card-text">{{ service.description|safe|truncatewords:30 }}</p>
 
-                            <div class="mt-3">
-                                <a href="{{ service.get_absolute_url }}" class="btn btn-primary">View Details</a>
-                                {% if service.offerings.exists %}
-                                    <div class="dropdown d-inline-block">
-                                        <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">
-                                            Order
-                                        </button>
-                                        <ul class="dropdown-menu">
-                                            {% for offering in service.offerings.all %}
-                                                <li>
-                                                    <a class="dropdown-item" href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}">
-                                                        via {{ offering.cloud_provider.name }}
-                                                    </a>
-                                                </li>
-                                            {% endfor %}
-                                        </ul>
-                                    </div>
-                                {% else %}
-                                    <a href="{% url 'services:create_lead' service.slug %}" class="btn btn-success">
-                                        Show Interest
-                                    </a>
-                                {% endif %}
+                            <!-- Consulting Partners Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Consulting Partners</h3>
+                                </div>
+                                <div>
+                                    <select class="form-select" id="consulting_partner" name="consulting_partner" @change="submitForm()">
+                                        <option value="">All Partners</option>
+                                        {% for partner in consulting_partners %}
+                                            <option value="{{ partner.id }}" {% if request.GET.consulting_partner == partner.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ partner.name }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Cloud Providers Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Cloud Providers</h3>
+                                </div>
+                                <div>
+                                    <select class="form-select" id="cloud_provider" name="cloud_provider" @change="submitForm()">
+                                        <option value="">All Providers</option>
+                                        {% for provider in cloud_providers %}
+                                            <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ provider.name }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Filter Actions -->
+                            <div class="d-flex gap-2">
+                                <a href="{% url 'services:service_list' %}" class="btn btn-outline-secondary btn-sm">Clear</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Service Listing -->
+            <div class="section__grid flex-1">
+                <div class="row">
+                    {% for service in services %}
+                    <div class="col-12 col-md-6 col-lg-4 mb-30">
+                        <div class="card h-100 d-flex flex-column">
+                            {% if service.logo %}
+                            <div class="card__image flex-shrink-0">
+                                <a href="{{ service.get_absolute_url }}">
+                                    <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="img-fluid">
+                                </a>
+                            </div>
+                            {% endif %}
+                            <div class="card__content d-flex flex-column flex-grow-1">
+                                <div class="card__header">
+                                    <h3 class="card__title"><a href="{{ service.get_absolute_url }}">{{ service.name }}</a></h3>
+                                    <p class="card__subtitle">
+                                        {% for category in service.categories.all %}
+                                        <span>{{ category.full_path }}</span>
+                                        {% endfor %}
+                                    </p>
+                                </div>
+                                <div class="card__desc flex-grow-1">
+                                    <p class="mb-0">{{ service.description|safe|truncatewords:30 }}</p>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    {% endfor %}
                 </div>
-            {% empty %}
-                <div class="col">
-                    <div class="alert alert-info">
-                        No services found matching your criteria.
-                    </div>
-                </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-</div>
+</section>
+
 {% endblock %}
\ No newline at end of file