diff --git a/templates/index.html b/templates/index.html
index b86c2e2..647705e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -43,12 +43,23 @@
         .phone-link:hover, .email-link:hover, .address-link:hover, .customer-link:hover {
             text-decoration: underline;
         }
-        .search-icon {
+        .search-icon, .reset-icon {
             position: absolute;
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
             color: #6c757d;
+            cursor: pointer;
+            display: none;
+        }
+        .reset-icon {
+            right: 35px;
+        }
+        .reset-icon.visible {
+            display: block;
+        }
+        .search-icon.visible {
+            display: block;
         }
         .customer-number {
             color: #6c757d;
@@ -129,21 +140,25 @@
                 <div class="search-field">
                     <input type="text" id="nameInput" class="form-control" 
                            placeholder="Name...">
+                    <i class="fa-solid fa-xmark reset-icon" id="nameReset"></i>
                     <span id="nameCount" class="result-count"></span>
                 </div>
                 <div class="search-field">
                     <input type="text" id="ortInput" class="form-control" 
                            placeholder="Ort...">
+                    <i class="fa-solid fa-xmark reset-icon" id="ortReset"></i>
                     <span id="ortCount" class="result-count"></span>
                 </div>
                 <div class="search-field">
                     <input type="text" id="kundennummerInput" class="form-control" 
                            placeholder="Kundennummer...">
+                    <i class="fa-solid fa-xmark reset-icon" id="kundennummerReset"></i>
                     <span id="kundennummerCount" class="result-count"></span>
                 </div>
                 <div class="search-field">
                     <input type="text" id="fachrichtungInput" class="form-control" 
                            placeholder="Fachrichtung...">
+                    <i class="fa-solid fa-xmark reset-icon" id="fachrichtungReset"></i>
                     <span id="fachrichtungCount" class="result-count"></span>
                 </div>
             </div>
@@ -151,6 +166,7 @@
             <div class="input-group mb-4 position-relative">
                 <input type="text" id="searchInput" class="form-control form-control-lg" 
                        placeholder="Allgemeine Suche...">
+                <i class="fa-solid fa-xmark reset-icon" id="searchReset"></i>
                 <span class="search-icon">🔍</span>
                 <span id="generalCount" class="result-count"></span>
             </div>
@@ -366,10 +382,27 @@
             document.getElementById('searchInput')
         ];
 
-        searchInputs.forEach(input => {
+        const resetIcons = [
+            document.getElementById('nameReset'),
+            document.getElementById('ortReset'),
+            document.getElementById('kundennummerReset'),
+            document.getElementById('fachrichtungReset'),
+            document.getElementById('searchReset')
+        ];
+
+        searchInputs.forEach((input, index) => {
             input.addEventListener('input', function() {
                 clearTimeout(searchTimeout);
                 searchTimeout = setTimeout(searchCustomers, 300);
+                
+                // Reset-Icon anzeigen/verstecken
+                resetIcons[index].classList.toggle('visible', this.value.length > 0);
+            });
+
+            // Reset-Funktionalität
+            resetIcons[index].addEventListener('click', function() {
+                searchInputs[index].value = '';
+                searchCustomers();
             });
         });