diff --git a/links/templates/links/tag_confirm_delete.html b/links/templates/links/tag_confirm_delete.html
index 0d8a559..264fec9 100644
--- a/links/templates/links/tag_confirm_delete.html
+++ b/links/templates/links/tag_confirm_delete.html
@@ -1,30 +1,59 @@
 {% extends "base.html" %}
 {% load i18n %}
-
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <div class="max-w-2xl mx-auto">
-        <div class="bg-white shadow rounded-lg p-6">
-            <h1 class="text-2xl font-bold mb-6">{% trans "Delete Tag" %}</h1>
+<style>
+  :root {
+    --apple-red: #ff3b30; --apple-text: #1d1d1f; --apple-gray: #86868b;
+    --apple-radius-lg: 22px; --apple-ease: cubic-bezier(.25, .1, .25, 1);
+  }
+  .tags-page { max-width: 560px; margin: 0 auto; padding: 2rem 1.25rem 3rem; color: var(--apple-text); }
+  .apple-card {
+    background: #fff; border-radius: var(--apple-radius-lg);
+    border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
+    padding: 1.6rem 1.6rem 1.8rem; text-align: center;
+  }
+  .warn-icon {
+    width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(255, 59, 48, 0.12); color: var(--apple-red);
+  }
+  .warn-icon svg { width: 1.4rem; height: 1.4rem; }
+  .apple-card h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
+  .apple-card p.desc { color: var(--apple-gray); font-size: 0.9rem; margin: 0 0 1.6rem; line-height: 1.5; }
+  .apple-card p.desc strong { color: var(--apple-text); }
+  .form-actions { display: flex; justify-content: center; gap: 0.55rem; }
+  .apple-btn {
+    display: inline-flex; align-items: center; min-height: 38px; padding: 0.45rem 1.15rem;
+    border-radius: 980px; font-size: 0.85rem; font-weight: 600; text-decoration: none;
+    border: none; cursor: pointer; transition: background 0.25s ease, transform 0.2s var(--apple-ease);
+  }
+  .apple-btn-secondary { background: #f0f0f3; color: var(--apple-text); }
+  .apple-btn-secondary:hover { background: #e5e5ea; }
+  .apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 8px 22px rgba(255, 59, 48, 0.3); }
+  .apple-btn-danger:hover { background: #ff5147; }
+  .apple-btn:active { transform: scale(0.96); }
+</style>
 
-            <p class="mb-6 text-gray-600">
-                {% blocktrans with tag_name=tag.name %}
-                Are you sure you want to delete the tag "{{ tag_name }}"? This action cannot be undone.
-                {% endblocktrans %}
-            </p>
-
-            <form method="post" class="space-y-6">
-                {% csrf_token %}
-                <div class="flex justify-end space-x-3">
-                    <a href="{% url 'tag-detail' tag.slug %}" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded">
-                        {% trans "Cancel" %}
-                    </a>
-                    <button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
-                        {% trans "Delete" %}
-                    </button>
-                </div>
-            </form>
+<div class="tags-page">
+    <div class="apple-card">
+        <div class="warn-icon" aria-hidden="true">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+            </svg>
         </div>
+        <h1>{% trans "Delete Tag" %}</h1>
+        <p class="desc">
+            {% blocktrans with tag_name=tag.name %}
+            Are you sure you want to delete the tag <strong>"{{ tag_name }}"</strong>? This action cannot be undone.
+            {% endblocktrans %}
+        </p>
+        <form method="post">
+            {% csrf_token %}
+            <div class="form-actions">
+                <a href="{% url 'tag-detail' tag.slug %}" class="apple-btn apple-btn-secondary">{% trans "Cancel" %}</a>
+                <button type="submit" class="apple-btn apple-btn-danger">{% trans "Delete" %}</button>
+            </div>
+        </form>
     </div>
 </div>
 {% endblock %}
diff --git a/links/templates/links/tag_detail.html b/links/templates/links/tag_detail.html
index 5adee81..7c1b744 100644
--- a/links/templates/links/tag_detail.html
+++ b/links/templates/links/tag_detail.html
@@ -1,218 +1,259 @@
 {% extends "base.html" %}
 {% load i18n %}
-
 {% block content %}
-<div class="container mx-auto px-2 py-8">
-    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
-        <!-- Tag Header -->
-        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6 text-white">
-            <div class="flex justify-between items-start">
-                <div>
-                    <h1 class="text-3xl font-bold mb-2">{{ tag.name }}</h1>
-                    {% if tag.description %}
-                    <p class="text-white text-opacity-90 mb-2">{{ tag.description }}</p>
-                    {% endif %}
-                    <div class="inline-flex items-center bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">
-                        <span class="font-medium">{% trans "Used" %}: {{ total_usage_count }} {% trans "times" %}</span>
-                    </div>
-                </div>
-                <div class="flex space-x-2">
-                    <a href="{% url 'tag-update' tag.slug %}" class="bg-white text-blue-600 hover:bg-blue-50 font-medium py-2 px-2 rounded-lg transition duration-150 ease-in-out">
-                        {% trans "Edit" %}
-                    </a>
-                    <a href="{% url 'tag-delete' tag.slug %}" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-2 rounded-lg transition duration-150 ease-in-out">
-                        {% trans "Delete" %}
-                    </a>
-                </div>
+<style>
+  /* ── Apple design tokens (same system as Files / Collections / Tags list) ── */
+  :root {
+    --apple-blue: #0071e3; --apple-red: #ff3b30; --apple-text: #1d1d1f;
+    --apple-gray: #86868b; --apple-separator: rgba(0, 0, 0, 0.06);
+    --apple-bg: #f5f5f7; --apple-radius-lg: 22px;
+    --apple-ease: cubic-bezier(.25, .1, .25, 1);
+    --apple-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.12);
+  }
+  .tags-page {
+    max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem 3rem;
+    color: var(--apple-text);
+  }
+  .apple-card {
+    background: #fff; border-radius: var(--apple-radius-lg);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
+    padding: 1.5rem; margin-bottom: 1.25rem;
+  }
+
+  /* ── Tag header ── */
+  .tag-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+  .tag-header h1 {
+    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
+    font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem;
+  }
+  .tag-hash { color: var(--apple-blue); }
+  .tag-desc { color: var(--apple-gray); font-size: 0.95rem; margin: 0 0 0.9rem; }
+  .tag-usage {
+    display: inline-flex; align-items: center; gap: 0.4rem;
+    padding: 0.32rem 0.85rem; border-radius: 980px;
+    background: rgba(0, 113, 227, 0.1); color: var(--apple-blue);
+    font-size: 0.78rem; font-weight: 700;
+  }
+  .tag-actions { display: flex; gap: 0.55rem; flex: none; }
+  .apple-btn {
+    display: inline-flex; align-items: center; gap: 0.4rem;
+    min-height: 38px; padding: 0.45rem 1.05rem; border-radius: 980px;
+    font-size: 0.85rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer;
+    transition: background 0.25s ease, transform 0.2s var(--apple-ease), box-shadow 0.25s ease;
+  }
+  .apple-btn-secondary { background: #fff; color: var(--apple-text); border: 1px solid rgba(0, 0, 0, 0.12); }
+  .apple-btn-secondary:hover { background: #f0f0f3; }
+  .apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 8px 22px rgba(255, 59, 48, 0.3); }
+  .apple-btn-danger:hover { background: #ff5147; }
+  .apple-btn:active { transform: scale(0.96); }
+
+  /* ── Segmented tabs ── */
+  .seg-tabs {
+    display: inline-flex; padding: 3px; gap: 2px;
+    background: rgba(0, 0, 0, 0.055); border-radius: 12px;
+    margin-bottom: 1.4rem; flex-wrap: wrap;
+  }
+  .seg-tab {
+    display: inline-flex; align-items: center; gap: 0.4rem;
+    padding: 0.45rem 0.95rem; border-radius: 9px; border: none; cursor: pointer;
+    background: transparent; font-size: 0.82rem; font-weight: 600; color: var(--apple-text);
+    transition: background 0.2s ease, box-shadow 0.2s ease;
+  }
+  .seg-tab:hover { background: rgba(0, 0, 0, 0.05); }
+  .seg-tab.active { background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); }
+  .seg-tab .tab-count {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-width: 1.35rem; height: 1.15rem; padding: 0 0.35rem;
+    border-radius: 980px; font-size: 0.68rem; font-weight: 700;
+    background: rgba(0, 0, 0, 0.07); color: var(--apple-gray);
+  }
+  .seg-tab.active .tab-count { background: rgba(0, 113, 227, 0.14); color: var(--apple-blue); }
+
+  /* ── Resource cards ── */
+  .res-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+  .res-card {
+    display: block; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 16px; padding: 1rem 1.1rem; text-decoration: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--apple-ease);
+  }
+  .res-card:hover {
+    border-color: rgba(0, 113, 227, 0.35);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+    transform: translateY(-1px);
+  }
+  .res-card h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; color: var(--apple-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .res-card h3 a { color: var(--apple-blue); text-decoration: none; }
+  .res-card h3 a:hover { text-decoration: underline; }
+  .res-card .res-desc { font-size: 0.8rem; color: var(--apple-gray); margin: 0 0 0.55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .res-card .res-meta { font-size: 0.72rem; color: var(--apple-gray); display: flex; align-items: center; gap: 0.3rem; }
+  .res-card .res-meta svg { width: 0.85rem; height: 0.85rem; flex: none; }
+  .res-empty {
+    padding: 2.5rem 1rem; text-align: center; color: var(--apple-gray); font-size: 0.9rem;
+    background: #fff; border: 1px dashed rgba(0, 0, 0, 0.12); border-radius: 16px;
+  }
+
+  @media (max-width: 640px) {
+    .tags-page { padding: 1.35rem 1rem 2.5rem; }
+    .tag-header h1 { font-size: 1.6rem; }
+    .res-grid { grid-template-columns: 1fr; }
+  }
+</style>
+
+<div class="tags-page">
+    <div class="apple-card">
+        <!-- Header -->
+        <div class="tag-header">
+            <div style="min-width:0">
+                <h1><span class="tag-hash" aria-hidden="true">#</span><span style="overflow-wrap:anywhere">{{ tag.name }}</span></h1>
+                {% if tag.description %}<p class="tag-desc">{{ tag.description }}</p>{% endif %}
+                <span class="tag-usage">
+                    <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                    </svg>
+                    {% trans "Used" %} {{ total_usage_count }} {% trans "times" %}
+                </span>
             </div>
-        </div>
-
-        <!-- Resource Tabs -->
-        <div class="border-b border-gray-200">
-            <nav class="flex -mb-px overflow-x-auto" aria-label="Tabs">
-                <button class="resource-tab text-blue-600 border-blue-500 whitespace-nowrap py-2 px-6 border-b-2 font-medium text-sm" data-target="links-section">
-                    {% trans "Links" %} ({{ links|length }})
-                </button>
-                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="posts-section">
-                    {% trans "Posts" %} ({{ posts|length }})
-                </button>
-                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="pages-section">
-                    {% trans "Pages" %} ({{ pages|length }})
-                </button>
-                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="collections-section">
-                    {% trans "Image Collections" %} ({{ image_collections|length }})
-                </button>
-            </nav>
-        </div>
-
-        <!-- Resource Sections -->
-        <div class="p-6">
-            <!-- Links Section -->
-            <div id="links-section" class="resource-section">
-                <h2 class="text-xl font-semibold mb-4 flex items-center">
-                    {% trans "Links with this tag" %}
-                    <span class="ml-2 bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ links|length }}</span>
-                </h2>
-                {% if links %}
-                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                    {% for link in links %}
-                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150 ease-in-out">
-                        <h3 class="font-medium text-lg">
-                            <a href="{% url 'link_detail' pk=link.pk %}" class="text-blue-600 hover:text-blue-800">
-                                {{ link.alias }}
-                            </a>
-                        </h3>
-                        {% if link.description %}
-                        <p class="text-gray-600 mt-1 line-clamp-2">{{ link.description }}</p>
-                        {% endif %}
-                        <div class="mt-2 text-sm text-gray-500 flex items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                            </svg>
-                            {{ link.created_at|date:"Y-m-d" }}
-                        </div>
-                    </div>
-                    {% endfor %}
-                </div>
-                {% else %}
-                <div class="bg-gray-50 rounded-lg p-6 text-center">
-                    <p class="text-gray-500">{% trans "No links found with this tag." %}</p>
-                </div>
-                {% endif %}
-            </div>
-
-            <!-- Posts Section -->
-            <div id="posts-section" class="resource-section hidden">
-                <h2 class="text-xl font-semibold mb-4 flex items-center">
-                    {% trans "Posts with this tag" %}
-                    <span class="ml-2 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ posts|length }}</span>
-                </h2>
-                {% if posts %}
-                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                    {% for post in posts %}
-                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150 ease-in-out">
-                        <h3 class="font-medium text-lg">
-                            <a href="{% url 'post-detail' pk=post.pk %}" class="text-blue-600 hover:text-blue-800">
-                                {{ post.title }}
-                            </a>
-                        </h3>
-                        {% if post.summary %}
-                        <p class="text-gray-600 mt-1 line-clamp-2">{{ post.summary }}</p>
-                        {% endif %}
-                        <div class="mt-2 text-sm text-gray-500 flex items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                            </svg>
-                            {{ post.created_at|date:"Y-m-d" }}
-                        </div>
-                    </div>
-                    {% endfor %}
-                </div>
-                {% else %}
-                <div class="bg-gray-50 rounded-lg p-6 text-center">
-                    <p class="text-gray-500">{% trans "No posts found with this tag." %}</p>
-                </div>
-                {% endif %}
-            </div>
-
-            <!-- Pages Section -->
-            <div id="pages-section" class="resource-section hidden">
-                <h2 class="text-xl font-semibold mb-4 flex items-center">
-                    {% trans "Pages with this tag" %}
-                    <span class="ml-2 bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ pages|length }}</span>
-                </h2>
-                {% if pages %}
-                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                    {% for page in pages %}
-                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150 ease-in-out">
-                        <h3 class="font-medium text-lg">
-                            <a href="{% url 'page-detail' pk=page.pk %}" class="text-blue-600 hover:text-blue-800">
-                                {{ page.title|default:page.url }}
-                            </a>
-                        </h3>
-                        {% if page.summary %}
-                        <p class="text-gray-600 mt-1 line-clamp-2">{{ page.summary }}</p>
-                        {% endif %}
-                        <div class="mt-2 text-sm text-gray-500 flex items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                            </svg>
-                            {{ page.created_at|date:"Y-m-d" }}
-                        </div>
-                    </div>
-                    {% endfor %}
-                </div>
-                {% else %}
-                <div class="bg-gray-50 rounded-lg p-6 text-center">
-                    <p class="text-gray-500">{% trans "No pages found with this tag." %}</p>
-                </div>
-                {% endif %}
-            </div>
-
-            <!-- Image Collections Section -->
-            <div id="collections-section" class="resource-section hidden">
-                <h2 class="text-xl font-semibold mb-4 flex items-center">
-                    {% trans "Image Collections with this tag" %}
-                    <span class="ml-2 bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ image_collections|length }}</span>
-                </h2>
-                {% if image_collections %}
-                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                    {% for collection in image_collections %}
-                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150 ease-in-out">
-                        <h3 class="font-medium text-lg">
-                            <a href="{% url 'collection-detail' pk=collection.pk %}" class="text-blue-600 hover:text-blue-800">
-                                {{ collection.name }}
-                            </a>
-                        </h3>
-                        {% if collection.description %}
-                        <p class="text-gray-600 mt-1 line-clamp-2">{{ collection.description }}</p>
-                        {% endif %}
-                        <div class="mt-2 text-sm text-gray-500 flex items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                            </svg>
-                            {{ collection.created_at|date:"Y-m-d" }}
-                        </div>
-                    </div>
-                    {% endfor %}
-                </div>
-                {% else %}
-                <div class="bg-gray-50 rounded-lg p-6 text-center">
-                    <p class="text-gray-500">{% trans "No image collections found with this tag." %}</p>
-                </div>
-                {% endif %}
+            <div class="tag-actions">
+                <a href="{% url 'tag-update' tag.slug %}" class="apple-btn apple-btn-secondary">
+                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125"/>
+                    </svg>
+                    {% trans "Edit" %}
+                </a>
+                <a href="{% url 'tag-delete' tag.slug %}" class="apple-btn apple-btn-danger">
+                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                    </svg>
+                    {% trans "Delete" %}
+                </a>
             </div>
         </div>
     </div>
+
+    <!-- Segmented tabs -->
+    <div class="seg-tabs" role="tablist" aria-label="{% trans 'Tagged resources' %}">
+        <button type="button" class="seg-tab active" data-target="links-section" role="tab" aria-selected="true">
+            {% trans "Links" %}<span class="tab-count">{{ links|length }}</span>
+        </button>
+        <button type="button" class="seg-tab" data-target="posts-section" role="tab" aria-selected="false">
+            {% trans "Posts" %}<span class="tab-count">{{ posts|length }}</span>
+        </button>
+        <button type="button" class="seg-tab" data-target="pages-section" role="tab" aria-selected="false">
+            {% trans "Pages" %}<span class="tab-count">{{ pages|length }}</span>
+        </button>
+        <button type="button" class="seg-tab" data-target="collections-section" role="tab" aria-selected="false">
+            {% trans "Collections" %}<span class="tab-count">{{ image_collections|length }}</span>
+        </button>
+    </div>
+
+    <!-- Links -->
+    <div id="links-section" class="resource-section apple-card">
+        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">{% trans "Links with this tag" %}</h2>
+        {% if links %}
+        <div class="res-grid">
+            {% for link in links %}
+            <a href="{% url 'link_detail' pk=link.pk %}" class="res-card">
+                <h3>{{ link.alias }}</h3>
+                {% if link.description %}<p class="res-desc">{{ link.description }}</p>{% endif %}
+                <p class="res-meta">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                    </svg>
+                    {{ link.created_at|date:"Y-m-d" }}
+                </p>
+            </a>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="res-empty">{% trans "No links found with this tag." %}</div>
+        {% endif %}
+    </div>
+
+    <!-- Posts -->
+    <div id="posts-section" class="resource-section apple-card" hidden>
+        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">{% trans "Posts with this tag" %}</h2>
+        {% if posts %}
+        <div class="res-grid">
+            {% for post in posts %}
+            <a href="{% url 'post-detail' pk=post.pk %}" class="res-card">
+                <h3>{{ post.title }}</h3>
+                {% if post.summary %}<p class="res-desc">{{ post.summary }}</p>{% endif %}
+                <p class="res-meta">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                    </svg>
+                    {{ post.created_at|date:"Y-m-d" }}
+                </p>
+            </a>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="res-empty">{% trans "No posts found with this tag." %}</div>
+        {% endif %}
+    </div>
+
+    <!-- Pages -->
+    <div id="pages-section" class="resource-section apple-card" hidden>
+        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">{% trans "Pages with this tag" %}</h2>
+        {% if pages %}
+        <div class="res-grid">
+            {% for page in pages %}
+            <a href="{% url 'page-detail' pk=page.pk %}" class="res-card">
+                <h3>{{ page.title|default:page.url }}</h3>
+                {% if page.summary %}<p class="res-desc">{{ page.summary }}</p>{% endif %}
+                <p class="res-meta">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                    </svg>
+                    {{ page.created_at|date:"Y-m-d" }}
+                </p>
+            </a>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="res-empty">{% trans "No pages found with this tag." %}</div>
+        {% endif %}
+    </div>
+
+    <!-- Image Collections -->
+    <div id="collections-section" class="resource-section apple-card" hidden>
+        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">{% trans "Image Collections with this tag" %}</h2>
+        {% if image_collections %}
+        <div class="res-grid">
+            {% for collection in image_collections %}
+            <a href="{% url 'collection-detail' pk=collection.pk %}" class="res-card">
+                <h3>{{ collection.name }}</h3>
+                {% if collection.description %}<p class="res-desc">{{ collection.description }}</p>{% endif %}
+                <p class="res-meta">
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                    </svg>
+                    {{ collection.created_at|date:"Y-m-d" }}
+                </p>
+            </a>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="res-empty">{% trans "No image collections found with this tag." %}</div>
+        {% endif %}
+    </div>
 </div>
 
-<!-- JavaScript for tab functionality -->
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const tabs = document.querySelectorAll('.resource-tab');
-        const sections = document.querySelectorAll('.resource-section');
-
-        tabs.forEach(tab => {
-            tab.addEventListener('click', function() {
-                // Hide all sections
-                sections.forEach(section => {
-                    section.classList.add('hidden');
-                });
-
-                // Show the selected section
-                const targetId = this.getAttribute('data-target');
-                document.getElementById(targetId).classList.remove('hidden');
-
-                // Update tab styles
-                tabs.forEach(t => {
-                    t.classList.remove('text-blue-600', 'border-blue-500');
-                    t.classList.add('text-gray-500', 'border-transparent');
-                });
-
-                this.classList.remove('text-gray-500', 'border-transparent');
-                this.classList.add('text-blue-600', 'border-blue-500');
-            });
+document.addEventListener('DOMContentLoaded', function () {
+    const tabs = document.querySelectorAll('.seg-tab');
+    const sections = document.querySelectorAll('.resource-section');
+    tabs.forEach(tab => {
+        tab.addEventListener('click', function () {
+            sections.forEach(s => { s.hidden = true; });
+            const target = document.getElementById(this.getAttribute('data-target'));
+            if (target) target.hidden = false;
+            tabs.forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected', 'false'); });
+            this.classList.add('active');
+            this.setAttribute('aria-selected', 'true');
         });
     });
+});
 </script>
 {% endblock %}
diff --git a/links/templates/links/tag_form.html b/links/templates/links/tag_form.html
index 81d9c71..5c46edc 100644
--- a/links/templates/links/tag_form.html
+++ b/links/templates/links/tag_form.html
@@ -1,60 +1,68 @@
 {% extends "base.html" %}
 {% load i18n %}
-
 {% block content %}
-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <div class="bg-white shadow-md rounded-lg overflow-hidden">
-        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
-            <h1 class="text-2xl font-bold text-gray-900">
-                {% if form.instance.pk %}
-                {% trans "Edit Tag" %}
+<style>
+  :root {
+    --apple-blue: #0071e3; --apple-text: #1d1d1f; --apple-gray: #86868b;
+    --apple-separator: rgba(0, 0, 0, 0.06); --apple-radius-lg: 22px;
+    --apple-ease: cubic-bezier(.25, .1, .25, 1);
+  }
+  .tags-page { max-width: 640px; margin: 0 auto; padding: 2rem 1.25rem 3rem; color: var(--apple-text); }
+  .apple-card {
+    background: #fff; border-radius: var(--apple-radius-lg);
+    border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
+    padding: 1.6rem 1.6rem 1.8rem;
+  }
+  .apple-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.3rem; }
+  .field { margin-bottom: 1.15rem; }
+  .field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.45rem; }
+  .field input, .field textarea {
+    width: 100%; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px;
+    padding: 0.65rem 0.9rem; font-size: 0.9rem; font-family: inherit; color: var(--apple-text);
+    background: var(--apple-bg); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
+    box-sizing: border-box;
+  }
+  .field input:focus, .field textarea:focus {
+    outline: none; background: #fff; border-color: rgba(0, 113, 227, 0.5);
+    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.14);
+  }
+  .field .help { font-size: 0.78rem; color: var(--apple-gray); margin-top: 0.35rem; }
+  .field .errors { color: #ff3b30; font-size: 0.8rem; margin-top: 0.35rem; }
+  .form-actions { display: flex; justify-content: flex-end; gap: 0.55rem; margin-top: 1.6rem; }
+  .apple-btn {
+    display: inline-flex; align-items: center; min-height: 38px; padding: 0.45rem 1.1rem;
+    border-radius: 980px; font-size: 0.85rem; font-weight: 600; text-decoration: none;
+    border: none; cursor: pointer; transition: background 0.25s ease, transform 0.2s var(--apple-ease);
+  }
+  .apple-btn-secondary { background: #f0f0f3; color: var(--apple-text); }
+  .apple-btn-secondary:hover { background: #e5e5ea; }
+  .apple-btn-primary { background: var(--apple-blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 113, 227, 0.3); }
+  .apple-btn-primary:hover { background: #2487e6; }
+  .apple-btn:active { transform: scale(0.96); }
+</style>
+
+<div class="tags-page">
+    <div class="apple-card">
+        <h1>{% if form.instance.pk %}{% trans "Edit Tag" %}{% else %}{% trans "New Tag" %}{% endif %}</h1>
+        <form method="post">
+            {% csrf_token %}
+            {% for field in form %}
+            <div class="field">
+                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+                {% if field.name == 'description' %}
+                <textarea name="{{ field.name }}" id="{{ field.id_for_label }}" rows="3">{{ field.value|default:'' }}</textarea>
                 {% else %}
-                {% trans "New Tag" %}
+                <input type="text" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value|default:'' }}">
                 {% endif %}
-            </h1>
-        </div>
-
-        <div class="px-4 py-5 sm:p-6">
-            <form method="post" class="space-y-6">
-                {% csrf_token %}
-                
-                {% for field in form %}
-                <div class="space-y-2">
-                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">
-                        {{ field.label }}
-                    </label>
-                    <div class="mt-1">
-                        {% if field.name == 'description' %}
-                            <textarea name="{{ field.name }}" id="{{ field.id_for_label }}" 
-                                class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                                rows="3">{{ field.value|default:'' }}</textarea>
-                        {% else %}
-                            <input type="text" name="{{ field.name }}" id="{{ field.id_for_label }}" 
-                                value="{{ field.value|default:'' }}"
-                                class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md">
-                        {% endif %}
-                    </div>
-                    {% if field.help_text %}
-                    <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
-                    {% endif %}
-                    {% if field.errors %}
-                    <div class="mt-2 text-sm text-red-600">
-                        {{ field.errors }}
-                    </div>
-                    {% endif %}
-                </div>
-                {% endfor %}
-
-                <div class="flex justify-end space-x-3 mt-6">
-                    <a href="{% url 'tag-list' %}" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                        {% trans "Cancel" %}
-                    </a>
-                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                        {% trans "Save" %}
-                    </button>
-                </div>
-            </form>
-        </div>
+                {% if field.help_text %}<p class="help">{{ field.help_text }}</p>{% endif %}
+                {% if field.errors %}<p class="errors">{{ field.errors }}</p>{% endif %}
+            </div>
+            {% endfor %}
+            <div class="form-actions">
+                <a href="{% url 'tag-list' %}" class="apple-btn apple-btn-secondary">{% trans "Cancel" %}</a>
+                <button type="submit" class="apple-btn apple-btn-primary">{% trans "Save" %}</button>
+            </div>
+        </form>
     </div>
 </div>
 {% endblock %}
diff --git a/links/templates/links/tag_list.html b/links/templates/links/tag_list.html
index e9c87e8..d64820a 100644
--- a/links/templates/links/tag_list.html
+++ b/links/templates/links/tag_list.html
@@ -1,240 +1,242 @@
 {% extends "base.html" %}
-{% load i18n %}
-
+{% load i18n static %}
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold">{% trans "Tags" %}</h1>
-        <a href="{% url 'tag-create' %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+<style>
+  /* ── Apple design tokens (same system as Files / Collections) ── */
+  :root {
+    --apple-blue: #0071e3; --apple-green: #27ae60; --apple-text: #1d1d1f;
+    --apple-gray: #86868b; --apple-separator: rgba(0, 0, 0, 0.06);
+    --apple-bg: #f5f5f7; --apple-radius-lg: 22px;
+    --apple-ease: cubic-bezier(.25, .1, .25, 1);
+    --apple-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.12);
+  }
+
+  .tags-page {
+    max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem 3rem;
+    color: var(--apple-text);
+  }
+
+  /* ── Header ── */
+  .tags-header {
+    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
+    margin-bottom: 1.4rem;
+  }
+  .tags-header h1 {
+    font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.2rem;
+  }
+  .tags-header .count { font-size: 0.9rem; color: var(--apple-gray); margin: 0; }
+  .apple-btn {
+    display: inline-flex; align-items: center; gap: 0.45rem;
+    min-height: 40px; padding: 0.5rem 1.15rem; border-radius: 980px;
+    font-size: 0.875rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer;
+    transition: background 0.25s ease, transform 0.2s var(--apple-ease), box-shadow 0.25s ease;
+  }
+  .apple-btn-primary { background: var(--apple-blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 113, 227, 0.32); }
+  .apple-btn-primary:hover { background: #2487e6; }
+  .apple-btn-primary:active { transform: scale(0.96); }
+
+  /* ── Apple card ── */
+  .apple-card {
+    background: #fff; border-radius: var(--apple-radius-lg);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
+    padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
+  }
+  .apple-card h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; }
+
+  /* ── Word cloud ── */
+  #tag-cloud-container { width: 100%; height: 380px; }
+  @media (max-width: 640px) { #tag-cloud-container { height: 300px; } }
+
+  /* ── Toolbar: sort segmented + search ── */
+  .tags-toolbar {
+    display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
+    margin-bottom: 1.1rem; flex-wrap: wrap;
+  }
+  .sort-segmented {
+    display: inline-flex; padding: 3px; gap: 2px;
+    background: rgba(0, 0, 0, 0.055); border-radius: 12px;
+  }
+  .sort-btn {
+    padding: 0.42rem 0.85rem; border-radius: 9px;
+    font-size: 0.8rem; font-weight: 600; color: var(--apple-text);
+    text-decoration: none; white-space: nowrap;
+    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  }
+  .sort-btn:hover { background: rgba(0, 0, 0, 0.05); }
+  .sort-btn.active { background: #fff; color: var(--apple-text); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); }
+  .tags-search { position: relative; flex: 1; min-width: 220px; max-width: 300px; }
+  .tags-search svg {
+    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
+    width: 1rem; height: 1rem; color: var(--apple-gray); pointer-events: none;
+  }
+  .tags-search input {
+    width: 100%; height: 40px; padding: 0 1rem 0 2.35rem;
+    border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 12px;
+    background: #fff; font-size: 0.875rem; color: var(--apple-text);
+    transition: border-color 0.25s ease, box-shadow 0.25s ease;
+  }
+  .tags-search input::placeholder { color: var(--apple-gray); }
+  .tags-search input:focus {
+    outline: none; border-color: rgba(0, 113, 227, 0.45);
+    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
+  }
+
+  /* ── Tag grid ── */
+  .tags-grid {
+    display: grid; gap: 0.7rem;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+  .tag-card {
+    display: flex; align-items: center; gap: 0.6rem;
+    background: #fff; border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 16px; padding: 0.8rem 1rem;
+    text-decoration: none; min-width: 0;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--apple-ease);
+  }
+  .tag-card:hover {
+    border-color: rgba(0, 113, 227, 0.35);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+    transform: translateY(-1px);
+  }
+  .tag-hash { font-size: 1.05rem; font-weight: 800; flex: none; }
+  .tag-name {
+    font-size: 0.9rem; font-weight: 600; color: var(--apple-text);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
+  }
+  .tag-count {
+    flex: none; display: inline-flex; align-items: center;
+    min-width: 1.9rem; height: 1.5rem; padding: 0 0.5rem; justify-content: center;
+    border-radius: 980px; font-size: 0.72rem; font-weight: 700;
+    background: rgba(0, 0, 0, 0.055); color: var(--apple-gray);
+  }
+  .no-results { display: none; text-align: center; padding: 2.5rem 1rem; color: var(--apple-gray); font-size: 0.9rem; }
+
+  @media (max-width: 640px) {
+    .tags-page { padding: 1.35rem 1rem 2.5rem; }
+    .tags-header h1 { font-size: 1.7rem; }
+    .tags-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.55rem; }
+    .tag-card { padding: 0.7rem 0.8rem; }
+    .sort-segmented { overflow-x: auto; max-width: 100%; }
+    .tags-search { max-width: 100%; }
+  }
+</style>
+
+<div class="tags-page">
+    <!-- Header -->
+    <div class="tags-header">
+        <div>
+            <h1>{% trans "Tags" %}</h1>
+            <p class="count">{{ tags|length }} {% trans "tags" %} · {% trans "click the cloud or a card to explore" %}</p>
+        </div>
+        <a href="{% url 'tag-create' %}" class="apple-btn apple-btn-primary">
+            <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
+            </svg>
             {% trans "New Tag" %}
         </a>
     </div>
 
-    <!-- Tag Cloud Section -->
-    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
-        <h2 class="text-xl font-semibold mb-4">{% trans "Tag Cloud" %}</h2>
-        <div id="tag-cloud-container" style="width: 100%; height: 400px;"></div>
+    <!-- Tag Cloud (local echarts, no CDN) -->
+    <div class="apple-card">
+        <h2>{% trans "Tag Cloud" %}</h2>
+        <div id="tag-cloud-container"></div>
     </div>
 
-    <!-- Sort Controls and Filter -->
-    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
-        <div class="flex flex-wrap gap-2">
-            <span class="text-gray-700 font-medium self-center mr-2">{% trans "Sort by:" %}</span>
-            <a href="?sort=name" class="sort-btn px-3 py-1 rounded text-sm {% if current_sort == 'name' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
-                {% trans "Name (A-Z)" %}
-            </a>
-            <a href="?sort=name_desc" class="sort-btn px-3 py-1 rounded text-sm {% if current_sort == 'name_desc' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
-                {% trans "Name (Z-A)" %}
-            </a>
-            <a href="?sort=count" class="sort-btn px-3 py-1 rounded text-sm {% if current_sort == 'count' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
-                {% trans "Most Used" %}
-            </a>
-            <a href="?sort=count_asc" class="sort-btn px-3 py-1 rounded text-sm {% if current_sort == 'count_asc' %}bg-blue-500 text-white{% else %}bg-gray-200 text-gray-700 hover:bg-gray-300{% endif %}">
-                {% trans "Least Used" %}
-            </a>
+    <!-- Sort + filter -->
+    <div class="tags-toolbar">
+        <div class="sort-segmented" role="group" aria-label="{% trans 'Sort tags' %}">
+            <a href="?sort=name" class="sort-btn {% if current_sort == 'name' %}active{% endif %}">{% trans "Name A–Z" %}</a>
+            <a href="?sort=name_desc" class="sort-btn {% if current_sort == 'name_desc' %}active{% endif %}">{% trans "Z–A" %}</a>
+            <a href="?sort=count" class="sort-btn {% if current_sort == 'count' %}active{% endif %}">{% trans "Most Used" %}</a>
+            <a href="?sort=count_asc" class="sort-btn {% if current_sort == 'count_asc' %}active{% endif %}">{% trans "Least Used" %}</a>
         </div>
-
-        <!-- Quick Filter Input -->
-        <div class="w-full sm:w-64 relative">
-            <input type="text" id="filter-tags-input" placeholder="{% trans 'Filter tags...' %}"
-                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                <svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-                </svg>
-            </div>
+        <div class="tags-search">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 10.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"/>
+            </svg>
+            <input type="text" id="filter-tags-input" placeholder="{% trans 'Filter tags…' %}" autocomplete="off">
         </div>
     </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="tags-grid">
+    <!-- Tag cards -->
+    <div class="tags-grid" id="tags-grid">
         {% for tag in tags %}
-        <a href="{% url 'tag-detail' tag.slug %}" class="block group tag-item" data-tag-name="{{ tag.name|lower }}">
-            <div
-                class="tag-card rounded-lg p-2 h-full flex flex-col items-center justify-center text-center shadow-md hover:shadow-lg transition-all duration-200">
-                <div class="mb-2">
-                    {% with icon_classes="w-8 h-8 mx-auto" %}
-                    {% if forloop.counter|divisibleby:5 %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
-                    </svg>
-                    {% elif forloop.counter|divisibleby:4 %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                    </svg>
-                    {% elif forloop.counter|divisibleby:3 %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                    </svg>
-                    {% elif forloop.counter|divisibleby:2 %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
-                    </svg>
-                    {% else %}
-                    <svg class="{{ icon_classes }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
-                    </svg>
-                    {% endif %}
-                    {% endwith %}
-                </div>
-                <h2 class="text-lg font-semibold mb-1">{{ tag.name }}</h2>
-                <div class="mt-1">
-                    <span
-                        class="inline-flex items-center justify-center bg-white bg-opacity-30 text-xs font-medium px-2 py-1 rounded-full">
-                        {{ tag.total_count }} {% trans "uses" %}
-                    </span>
-                </div>
-            </div>
+        <a href="{% url 'tag-detail' tag.slug %}" class="tag-card tag-item" data-tag-name="{{ tag.name|lower }}">
+            <span class="tag-hash" aria-hidden="true">#</span>
+            <span class="tag-name" title="{{ tag.name }}">{{ tag.name }}</span>
+            <span class="tag-count">{{ tag.total_count }}</span>
         </a>
         {% empty %}
-        <div class="col-span-full text-center py-8 text-gray-500">
-            {% trans "No tags found." %}
-        </div>
+        <div class="no-results" style="display:block;grid-column:1/-1">{% trans "No tags found." %}</div>
         {% endfor %}
     </div>
-
-    <!-- No results message (hidden by default) -->
-    <div id="no-results-message" class="hidden col-span-full text-center py-8 text-gray-500">
-        {% trans "No matching tags found." %}
-    </div>
+    <div id="no-results-message" class="no-results">{% trans "No matching tags found." %}</div>
 </div>
 
-<!-- ECharts (CDN — page-specific, benefits from edge proximity) -->
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.1.0/dist/echarts-wordcloud.min.js"></script>
-
+<script src="{% static 'vendor/echarts/echarts.min.js' %}"></script>
+<script src="{% static 'vendor/echarts/echarts-wordcloud.min.js' %}"></script>
 <script>
-    document.addEventListener('DOMContentLoaded', function () {
-        // Define colors for tags - using colors from the image
-        const tagColors = [
-            '#3498db', // blue
-            '#2ecc71', // green
-            '#e74c3c', // red
-            '#f39c12', // orange
-            '#9b59b6', // purple
-            '#1abc9c', // teal
-            '#d35400', // dark orange
-            '#34495e', // navy
-            '#16a085', // dark green
-            '#27ae60', // medium green
-            '#8e44ad', // violet
-            '#f1c40f'  // yellow
-        ];
+document.addEventListener('DOMContentLoaded', function () {
+    const tagColors = [
+        '#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6',
+        '#1abc9c', '#d35400', '#16a085', '#8e44ad', '#e91e63'
+    ];
+    // Stable per-name colour (hash) so cards don't repaint on every load
+    const colorOf = name => tagColors[Math.abs([...name].reduce((h, c) => (h * 31 + c.charCodeAt(0)) >>> 0, 7)) % tagColors.length];
+    document.querySelectorAll('.tag-item').forEach(card => {
+        const name = card.dataset.tagName;
+        card.querySelector('.tag-hash').style.color = colorOf(name || 'x');
+    });
 
-        // Apply colors to tag cards
-        const tagCards = document.querySelectorAll('.tag-card');
-
-        tagCards.forEach((card, index) => {
-            const randomColor = tagColors[Math.floor(Math.random() * tagColors.length)];
-            card.style.backgroundColor = randomColor;
-            card.style.color = 'white';
-        });
-
-        // Initialize ECharts instance
-        const chartDom = document.getElementById('tag-cloud-container');
-        const myChart = echarts.init(chartDom);
-
-        // Prepare data for word cloud
-        const tagCloudData = [];
+    // ── Word cloud (local echarts) ──
+    const chartDom = document.getElementById('tag-cloud-container');
+    const myChart = echarts.init(chartDom);
+    const tagCloudData = [
         {% for tag in tag_cloud %}
-        tagCloudData.push({
-            name: '{{ tag.name }}',
-            value: {{ tag.count }},
-            slug: '{{ tag.slug }}'
-        });
+        { name: '{{ tag.name|escapejs }}', value: {{ tag.count }}, slug: '{{ tag.slug|escapejs }}' },
         {% endfor %}
-
-        // Configure word cloud options
-        const option = {
-            series: [{
-                type: 'wordCloud',
-                shape: 'circle',
-                left: 'center',
-                top: 'center',
-                width: '100%',
-                height: '100%',
-                right: null,
-                bottom: null,
-                sizeRange: [14, 60],  // Increased max size for better visibility
-                rotationRange: [0, 0],  // No rotation for better readability like in the image
-                rotationStep: 0,
-                gridSize: 15,  // Increased grid size for better spacing
-                drawOutOfBound: false,
-                layoutAnimation: true,  // Enable animation when rendering
-                textStyle: {
-                    fontFamily: 'sans-serif',
-                    fontWeight: 'bold',
-                    color: function () {
-                        return tagColors[Math.floor(Math.random() * tagColors.length)];
-                    }
-                },
-                emphasis: {
-                    textStyle: {
-                        fontWeight: 'bold',
-                        shadowBlur: 10,
-                        shadowColor: '#333'
-                    }
-                },
-                data: tagCloudData
-            }]
-        };
-
-        // Set configuration and render chart
-        myChart.setOption(option);
-
-        // Add click event to navigate to tag detail page
-        myChart.on('click', function(params) {
-            const clickedTag = tagCloudData.find(tag => tag.name === params.name);
-            if (clickedTag) {
-                window.location.href = `/ui/tags/${clickedTag.slug}/`;
-            }
-        });
-
-        // Make chart responsive
-        window.addEventListener('resize', function() {
-            myChart.resize();
-        });
+    ];
+    myChart.setOption({
+        tooltip: { show: true, formatter: p => p.name },
+        series: [{
+            type: 'wordCloud',
+            shape: 'circle',
+            left: 'center', top: 'center', width: '100%', height: '100%',
+            sizeRange: [16, 60], rotationRange: [0, 0], gridSize: 16,
+            drawOutOfBound: false, layoutAnimation: true,
+            textStyle: {
+                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                fontWeight: 'bold',
+                color: () => tagColors[Math.floor(Math.random() * tagColors.length)],
+            },
+            emphasis: { textStyle: { fontWeight: 'bold', shadowBlur: 12, shadowColor: 'rgba(0,0,0,0.25)' } },
+            data: tagCloudData,
+        }],
     });
+    myChart.on('click', p => {
+        const hit = tagCloudData.find(t => t.name === p.name);
+        if (hit) window.location.href = `/ui/tags/${hit.slug}/`;
+    });
+    window.addEventListener('resize', () => myChart.resize());
 
-    // Quick filter functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const filterInput = document.getElementById('filter-tags-input');
-        const tagItems = document.querySelectorAll('.tag-item');
-        const noResultsMessage = document.getElementById('no-results-message');
-
-        if (filterInput && tagItems.length > 0) {
-            filterInput.addEventListener('keyup', function() {
-                const filterTerm = this.value.toLowerCase().trim();
-                let visibleCount = 0;
-
-                tagItems.forEach(function(item) {
-                    const tagName = item.getAttribute('data-tag-name');
-
-                    if (tagName && tagName.includes(filterTerm)) {
-                        item.style.display = '';
-                        visibleCount++;
-                    } else {
-                        item.style.display = 'none';
-                    }
-                });
-
-                // Show/hide no results message
-                if (visibleCount === 0 && filterTerm.length > 0) {
-                    noResultsMessage.classList.remove('hidden');
-                } else {
-                    noResultsMessage.classList.add('hidden');
-                }
+    // ── Live filter ──
+    const filterInput = document.getElementById('filter-tags-input');
+    const tagItems = document.querySelectorAll('.tag-item');
+    const noResults = document.getElementById('no-results-message');
+    if (filterInput) {
+        filterInput.addEventListener('input', () => {
+            const term = filterInput.value.toLowerCase().trim();
+            let visible = 0;
+            tagItems.forEach(item => {
+                const name = item.getAttribute('data-tag-name') || '';
+                const match = name.includes(term);
+                item.style.display = match ? '' : 'none';
+                if (match) visible++;
             });
-        }
-    });
+            noResults.style.display = (visible === 0 && term.length > 0) ? 'block' : 'none';
+        });
+    }
+});
 </script>
 {% endblock %}