diff --git a/src/main/resources/static/css/dbadmin.css b/src/main/resources/static/css/dbadmin.css
index ef05fde..2121c85 100644
--- a/src/main/resources/static/css/dbadmin.css
+++ b/src/main/resources/static/css/dbadmin.css
@@ -137,6 +137,13 @@ td.table-checkbox, th.table-checkbox {
 	cursor: pointer;
 }
 
+
+.noselect {
+	cursor: pointer; -webkit-user-select: none; 
+  	-ms-user-select: none; 
+  	user-select: none;
+}
+
 /**
 AUTOCOMPLETE
 **/
@@ -158,4 +165,12 @@ AUTOCOMPLETE
 
 .clear-all-badge {
 	padding: 0.4rem;
+}
+
+/**
+ * Filters
+ */
+ 
+.filterable-field .card-header:hover {
+	background-color: #F0F0F0;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/js/filters.js b/src/main/resources/static/js/filters.js
new file mode 100644
index 0000000..4f6754f
--- /dev/null
+++ b/src/main/resources/static/js/filters.js
@@ -0,0 +1,19 @@
+document.addEventListener("DOMContentLoaded", () => {
+	let rootElements = document.querySelectorAll('.filterable-field');
+	
+	rootElements.forEach(root => {
+		root.querySelector(".card-header").addEventListener('click', function(e) {
+			if (root.querySelector(".card-body").classList.contains('d-none')) {
+				root.querySelector(".card-body").classList.remove('d-none');
+				root.querySelector(".card-body").classList.add('d-block');
+				root.querySelector(".card-header i.bi").classList.remove('bi-caret-right');
+				root.querySelector(".card-header i.bi").classList.add('bi-caret-down');
+			} else {
+				root.querySelector(".card-body").classList.remove('d-block');
+				root.querySelector(".card-body").classList.add('d-none');
+				root.querySelector(".card-header i.bi").classList.remove('bi-caret-down');
+				root.querySelector(".card-header i.bi").classList.add('bi-caret-right');
+			}
+		});
+	});
+});
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/resources.html b/src/main/resources/templates/fragments/resources.html
index e9ee873..acc4964 100644
--- a/src/main/resources/templates/fragments/resources.html
+++ b/src/main/resources/templates/fragments/resources.html
@@ -9,6 +9,7 @@
 		<script type="text/javascript" src="/js/table.js"></script>
 		<script type="text/javascript" src="/js/autocomplete.js"></script>
 		<script type="text/javascript" src="/js/autocomplete-multi.js"></script>
+		<script type="text/javascript" src="/js/filters.js"></script>
 		<title th:text="${title != null ? title + ' | Spring Boot DB Admin Panel' : 'Spring Boot DB Admin Panel'}"></title>
 	</head>
 	
diff --git a/src/main/resources/templates/model/list.html b/src/main/resources/templates/model/list.html
index fcd5d77..9ff42b0 100644
--- a/src/main/resources/templates/model/list.html
+++ b/src/main/resources/templates/model/list.html
@@ -66,22 +66,21 @@
 							<div class="box">
 								<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>
-										
-										<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 class="card mb-3 filterable-field" th:each="field : ${schema.getFilterableFields()}">
+									<div class="card-header noselect cursor-pointer">
+										<i class="bi bi-caret-right filter-icon  align-middle"></i> 
+										<span class="fw-bold align-middle" th:text="${field.getName()}"></span>
+									</div>
+									
+									<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>