diff --git a/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js b/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js
index c37a9ac3ac..3daf9cb160 100644
--- a/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js
+++ b/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js
@@ -1,7 +1,15 @@
 (function (global, doc, ibexa) {
-    const parseAll = () => {
+    const parseAll = (baseElement = doc) => {
+        if (!baseElement) {
+            return;
+        }
+
         const middleEllipsisContainers = [...doc.querySelectorAll('.ibexa-middle-ellipsis')];
 
+        if (baseElement instanceof Element) {
+            middleEllipsisContainers.push(baseElement);
+        }
+
         middleEllipsisContainers.forEach((middleEllipsisContainer) => {
             const partStart = middleEllipsisContainer.querySelector('.ibexa-middle-ellipsis__name--start');
 
@@ -9,8 +17,18 @@
             ibexa.helpers.tooltips.parse(middleEllipsisContainer);
         });
     };
+    const update = (baseElement, content) => {
+        const contentElements = [...baseElement.querySelectorAll('.ibexa-middle-ellipsis__name-ellipsized')];
+
+        baseElement.dataset.bsOriginalTitle = content;
+        contentElements.forEach((contentElement) => {
+            contentElement.innerHTML = content;
+        });
+        parseAll(baseElement);
+    };
 
     ibexa.addConfig('helpers.ellipsis.middle', {
         parseAll,
+        update,
     });
 })(window, window.document, window.ibexa);
diff --git a/src/bundle/Resources/public/scss/_tag.scss b/src/bundle/Resources/public/scss/_tag.scss
index cbeea70017..3179006afe 100644
--- a/src/bundle/Resources/public/scss/_tag.scss
+++ b/src/bundle/Resources/public/scss/_tag.scss
@@ -3,7 +3,7 @@
     align-items: center;
     position: relative;
     height: calculateRem(24px);
-    padding: calculateRem(4px) calculateRem(24px) calculateRem(4px) calculateRem(10px);
+    padding: calculateRem(4px) calculateRem(10px);
     border-radius: calculateRem(12px);
     background-color: $ibexa-color-light-500;
     max-width: 100%;
@@ -24,6 +24,7 @@
     }
 
     &__remove-btn {
+        display: none;
         position: absolute;
         right: calculateRem(8px);
         cursor: pointer;
@@ -38,6 +39,14 @@
         }
     }
 
+    &--deletable {
+        padding-right: calculateRem(24px);
+
+        .ibexa-tag__remove-btn {
+            display: inline-block;
+        }
+    }
+
     $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200, 'secondary' $ibexa-color-dark $ibexa-color-light-500,
         'info' $ibexa-color-info $ibexa-color-info-200, 'danger' $ibexa-color-danger $ibexa-color-danger-200,
         'success' $ibexa-color-success $ibexa-color-success-200, 'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;
diff --git a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig
index b2939fcc40..fd6c01db06 100644
--- a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig
@@ -1,6 +1,9 @@
 {% import '@ibexadesign/ui/component/macros.html.twig' as html %}
 
-{% set tag_attributes = tag_attributes|default({})|merge({'class': (tag_attributes.class|default('') ~ ' ibexa-tag')|trim}) %}
+{% set is_deletable = is_deletable is defined ? is_deletable : true %}
+{% set tag_attributes = tag_attributes|default({})|merge({
+    'class': (tag_attributes.class|default('') ~ ' ibexa-tag' ~ (is_deletable ? ' ibexa-tag--deletable'))|trim
+}) %}
 
 <div {{ html.attributes(tag_attributes) }}>
     <div class="ibexa-tag__content" {% if is_loading_state %} hidden {% endif %}>