diff --git a/src/main/resources/static/css/dbadmin.css b/src/main/resources/static/css/dbadmin.css
index 9b546f2..ef05fde 100644
--- a/src/main/resources/static/css/dbadmin.css
+++ b/src/main/resources/static/css/dbadmin.css
@@ -133,6 +133,10 @@ td.table-checkbox, th.table-checkbox {
 }
 
 
+.cursor-pointer {
+	cursor: pointer;
+}
+
 /**
 AUTOCOMPLETE
 **/
diff --git a/src/main/resources/templates/model/list.html b/src/main/resources/templates/model/list.html
index 6c8eb8a..fcd5d77 100644
--- a/src/main/resources/templates/model/list.html
+++ b/src/main/resources/templates/model/list.html
@@ -64,19 +64,24 @@
 		    			</div>
 		    			<div th:if="${!schema.getFilterableFields().isEmpty()}" class="col-3">
 							<div class="box">
-								<h3 class="fw-bold"><i class="bi bi-funnel"></i> Filters</h3>
-								<ul>
-									<li th:each="field : ${schema.getFilterableFields()}">
-										<span class="fw-bold" th:text="${field.getName()}"></span>
+								<h3 class="fw-bold mb-3"><i class="bi bi-funnel"></i> Filters</h3>
+								
+								<div th:each="field : ${schema.getFilterableFields()}">
+									<div class="card mb-3 cursor-pointer">
+										<div class="card-header">
+											<i class="bi bi-caret-right"></i> <span class="fw-bold" th:text="${field.getName()}"></span>
+										</div>
 										
-										<th:block th:if="${field.getConnectedType() != null}">
-											<div th:each="val : ${schema.getFieldValues(field)}">
-												<span th:text="${val}"></span>
-											</div>
-										</th:block>
-									
-									</li>
-								</ul>
+										<div class="card-body d-none">
+											<th:block th:if="${field.getConnectedType() != null}">
+												<div th:each="val : ${schema.getFieldValues(field)}">
+													<span th:text="${val}"></span>
+												</div>
+											</th:block>
+										</div>
+									</div>
+								
+								</div>
 							</div>
 						</div>
 		    		</div>