diff --git a/shaarli-pro/tag.list.html b/shaarli-pro/tag.list.html
index 820f24a..a9c2b00 100644
--- a/shaarli-pro/tag.list.html
+++ b/shaarli-pro/tag.list.html
@@ -1,88 +1,238 @@
 <!DOCTYPE html>
-<html{if="$language !== 'auto'"} lang="{$language}"{/if}>
-<head>
-{$pageName="tag.list"}
-{include="includes"}
-</head>
-<body>
-{include="page.header"}
+<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
 
-{include="tag.sort"}
+    <head>
+        {$pageName="tag.list"}
+        {include="includes"}
+        <style>
+            .tag-filter-container {
+                position: relative;
+                margin-bottom: 1rem;
+            }
 
-<div class="container">
-    {$countTags=count($tags)}
+            .tag-filter-input {
+                width: 100%;
+                padding: 0.75rem 1rem;
+                padding-right: 2.5rem;
+                border: 1px solid var(--border-light, #3a3f4b);
+                border-radius: 8px;
+                background: var(--bg-secondary, #1e2128);
+                color: var(--text-primary, #e4e6eb);
+                font-size: 1rem;
+                transition: border-color 0.2s ease, box-shadow 0.2s ease;
+            }
 
-    <div id="plugin_zone_start_tagcloud" class="plugin_zone">
-        {loop="$plugin_start_zone"}
-            {$value}
-        {/loop}
-    </div>
+            .tag-filter-input:focus {
+                outline: none;
+                border-color: var(--primary, #4a7dff);
+                box-shadow: 0 0 0 3px rgba(74, 125, 255, 0.15);
+            }
 
-    <div id="taglist" class="card">
-        <div class="card-header">
-            <div class="pull-right" style="font-size: 0.9rem;">
-                <a href="{$base_path}/?searchtags={$search_tags|urlencode}" title="{'List all links with those tags'|t}">{$countTags} {'tags'|t}</a>
+            .tag-filter-input::placeholder {
+                color: var(--text-muted, #6c757d);
+            }
+
+            .tag-filter-clear {
+                position: absolute;
+                right: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+                background: none;
+                border: none;
+                color: var(--text-muted, #6c757d);
+                cursor: pointer;
+                padding: 0.25rem;
+                display: none;
+                font-size: 1.2rem;
+                line-height: 1;
+            }
+
+            .tag-filter-clear:hover {
+                color: var(--text-primary, #e4e6eb);
+            }
+
+            .tag-filter-clear.visible {
+                display: block;
+            }
+
+            .tag-count-info {
+                font-size: 0.85rem;
+                color: var(--text-muted, #6c757d);
+                margin-top: 0.5rem;
+            }
+
+            .tag-count-info .count-visible {
+                color: var(--primary, #4a7dff);
+                font-weight: 600;
+            }
+
+            .tag-count-info .count-total {
+                color: var(--text-muted, #6c757d);
+            }
+
+            .no-tags-message {
+                padding: 2rem;
+                text-align: center;
+                color: var(--text-muted, #6c757d);
+                display: none;
+            }
+
+            .no-tags-message.visible {
+                display: block;
+            }
+
+            .list-group-item.hidden-by-filter {
+                display: none !important;
+            }
+        </style>
+    </head>
+
+    <body>
+        {include="page.header"}
+
+        {include="tag.sort"}
+
+        <div class="container">
+            {$countTags=count($tags)}
+
+            <div id="plugin_zone_start_tagcloud" class="plugin_zone">
+                {loop="$plugin_start_zone"}
+                {$value}
+                {/loop}
             </div>
-            {'Tag list'|t}
-        </div>
-        <div class="card-body" style="padding-bottom: 0;">
-            <form class="card-search" method="get">
-                <input type="hidden" name="do" value="taglist">
-                <div class="form-group">
-                    <input type="search" name="searchtags" class="form-control" placeholder="{'Filter by tag'|t}..."
-                        {if="!empty($search_tags)"}
-                        value="{$search_tags}"
-                        {/if}
-                        autocomplete="off" data-multiple data-autofirst data-minChars="1"
-                        data-list="{loop="$tags"}{$key}, {/loop}"
-                    >
-                </div>
-            </form>
-        </div>
-        <div class="list-group list-group-flush">
-        {loop="tags"}
-            <div class="list-group-item">
-                <div class="list-group-item-content" style="display: flex; align-items: center; justify-content: space-between;">
-                    <div style="flex: 1;">
-                        <a href="{$base_path}/?searchtags={$key|urlencode} {$search_tags|urlencode}" class="tag-link" style="font-weight: 500; font-size: 1rem;">{$key}</a>
-                        {loop="$value.tag_plugin"}
-                            {$value}
-                        {/loop}
+
+            <div id="taglist" class="card">
+                <div class="card-header">
+                    <div class="pull-right" style="font-size: 0.9rem;">
+                        <span class="tag-count-info">
+                            <span class="count-visible" id="visibleTagCount">{$countTags}</span> / <span class="count-total" id="totalTagCount">{$countTags}</span> {'tags'|t}
+                        </span>
                     </div>
-                    <div style="margin-right: 1rem;">
-                        <span class="badge" style="background: var(--border-light); padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.8rem;">{$value}</span>
+                    {'Tag list'|t}
+                </div>
+                <div class="card-body" style="padding-bottom: 0;">
+                    <div class="tag-filter-container">
+                        <input type="text" id="tagFilterInput" class="tag-filter-input" placeholder="{'Filter by tag'|t}..." autocomplete="off">
+                        <button type="button" id="tagFilterClear" class="tag-filter-clear" title="Clear filter">
+                            <i class="mdi mdi-close"></i>
+                        </button>
+                    </div>
+                    <div id="noTagsMessage" class="no-tags-message">
+                        <i class="mdi mdi-tag-off-outline" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
+                        <p>{'No tags match your filter'|t}</p>
                     </div>
                 </div>
-                <div class="list-group-item-action">
-                    <a href="{$base_path}/add-tag/{$key|urlencode}" title="{'Add tag'|t} {$key} {'to the filters'|t}" class="btn btn-secondary btn-sm" style="padding: 0.25rem 0.5rem;">
-                        <i class="mdi mdi-magnify-plus-outline"></i>
-                    </a>
-                    {if="$is_logged_in"}
-                    <a href="{$base_path}/admin/tags?fromtag={$key|urlencode}" title="{'Rename tag'|t} {$key}" data-tag="{$key}" class="rename-tag btn btn-secondary btn-sm" style="padding: 0.25rem 0.5rem;">
-                        <i class="mdi mdi-pencil"></i>
-                    </a>
-                    <a href="#" class="delete-tag btn btn-danger btn-sm" data-tag="{$key}" title="{'Delete tag'|t} {$key}" style="padding: 0.25rem 0.5rem;">
-                        <i class="mdi mdi-delete"></i>
-                    </a>
-                    {/if}
+                <div class="list-group list-group-flush" id="tagListContainer">
+                    {loop="tags"}
+                    <div class="list-group-item" data-tag-name="{$key|strtolower}">
+                        <div class="list-group-item-content" style="display: flex; align-items: center; justify-content: space-between;">
+                            <div style="flex: 1;">
+                                <a href="{$base_path}/?searchtags={$key|urlencode}" class="tag-link" style="font-weight: 500; font-size: 1rem;">{$key}</a>
+                            </div>
+                            <div style="margin-right: 1rem;">
+                                <span class="badge" style="background: var(--border-light); padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.8rem;">{$value}</span>
+                            </div>
+                        </div>
+                        <div class="list-group-item-action">
+                            <a href="{$base_path}/add-tag/{$key|urlencode}" title="{'Add tag'|t} {$key} {'to the filters'|t}" class="btn btn-secondary btn-sm" style="padding: 0.25rem 0.5rem;">
+                                <i class="mdi mdi-magnify-plus-outline"></i>
+                            </a>
+                            {if="$is_logged_in"}
+                            <a href="{$base_path}/admin/tags?fromtag={$key|urlencode}" title="{'Rename tag'|t} {$key}" data-tag="{$key}" class="rename-tag btn btn-secondary btn-sm" style="padding: 0.25rem 0.5rem;">
+                                <i class="mdi mdi-pencil"></i>
+                            </a>
+                            <a href="#" class="delete-tag btn btn-danger btn-sm" data-tag="{$key}" title="{'Delete tag'|t} {$key}" style="padding: 0.25rem 0.5rem;">
+                                <i class="mdi mdi-delete"></i>
+                            </a>
+                            {/if}
+                        </div>
+                    </div>
+                    {/loop}
                 </div>
             </div>
-        {/loop}
+
+            <div id="plugin_zone_end_tagcloud" class="plugin_zone">
+                {loop="$plugin_end_zone"}
+                {$value}
+                {/loop}
+            </div>
         </div>
-    </div>
 
-    <div id="plugin_zone_end_tagcloud" class="plugin_zone">
-        {loop="$plugin_end_zone"}
-            {$value}
-        {/loop}
-    </div>
-</div>
+        {if="$is_logged_in"}
+        <input type="hidden" name="taglist" id="tagListData" value="">
+        {/if}
 
-{if="$is_logged_in"}
-  <input type="hidden" name="taglist" value="{loop="$tags"}{$key} {/loop}">
-{/if}
+        {literal}
+        <script>
+            (function () {
+                var filterInput = document.getElementById('tagFilterInput');
+                var clearBtn = document.getElementById('tagFilterClear');
+                var tagListContainer = document.getElementById('tagListContainer');
+                var noTagsMessage = document.getElementById('noTagsMessage');
+                var visibleTagCount = document.getElementById('visibleTagCount');
 
-{include="page.footer"}
-</body>
-</html>
+                if (!filterInput || !tagListContainer) return;
 
+                var tagItems = tagListContainer.querySelectorAll('.list-group-item');
+                var totalTags = tagItems.length;
+
+                function filterTags() {
+                    var filterValue = filterInput.value.toLowerCase().trim();
+                    var visibleCount = 0;
+
+                    // Show/hide clear button
+                    if (filterValue.length > 0) {
+                        clearBtn.classList.add('visible');
+                    } else {
+                        clearBtn.classList.remove('visible');
+                    }
+
+                    for (var i = 0; i < tagItems.length; i++) {
+                        var item = tagItems[i];
+                        var tagName = item.getAttribute('data-tag-name') || '';
+
+                        if (filterValue === '' || tagName.indexOf(filterValue) !== -1) {
+                            item.classList.remove('hidden-by-filter');
+                            visibleCount++;
+                        } else {
+                            item.classList.add('hidden-by-filter');
+                        }
+                    }
+
+                    // Update count
+                    if (visibleTagCount) {
+                        visibleTagCount.textContent = visibleCount;
+                    }
+
+                    // Show/hide no results message
+                    if (visibleCount === 0 && filterValue.length > 0) {
+                        noTagsMessage.classList.add('visible');
+                    } else {
+                        noTagsMessage.classList.remove('visible');
+                    }
+                }
+
+                filterInput.addEventListener('input', filterTags);
+                filterInput.addEventListener('keyup', filterTags);
+
+                clearBtn.addEventListener('click', function () {
+                    filterInput.value = '';
+                    filterTags();
+                    filterInput.focus();
+                });
+
+                // Handle escape key
+                filterInput.addEventListener('keydown', function (e) {
+                    if (e.key === 'Escape') {
+                        filterInput.value = '';
+                        filterTags();
+                    }
+                });
+            })();
+        </script>
+        {/literal}
+
+        {include="page.footer"}
+    </body>
+
+    </html>
\ No newline at end of file
