diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss
index da3b1f7d44..33488564e7 100644
--- a/src/bundle/Resources/public/scss/_grid-view-item.scss
+++ b/src/bundle/Resources/public/scss/_grid-view-item.scss
@@ -2,16 +2,15 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    padding: calculateRem(16px);
-    min-height: calculateRem(238px);
     border: calculateRem(1px) solid $ibexa-color-light;
-    border-radius: calculateRem(5px);
+    border-radius: calculateRem(12px);
     background: $ibexa-color-white;
     box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-black, 0.05);
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
-    min-width: calculateRem(216px);
-    max-width: calculateRem(216px);
+    min-width: calculateRem(290px);
+    max-width: calculateRem(290px);
     margin: 0 calculateRem(14px) calculateRem(32px);
+    cursor: pointer;
 
     &:link {
         text-decoration: none;
@@ -23,37 +22,39 @@
         color: $ibexa-color-dark;
         border-color: $ibexa-color-dark;
         text-decoration: none;
+
+        .ibexa-input--checkbox,
+        .ibexa-input--radio {
+            border-color: $ibexa-color-primary;
+        }
     }
 
-    &__content-type {
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        width: calculateRem(30px);
-        height: calculateRem(30px);
-        background: $ibexa-color-white;
+    &:active {
+        border-color: $ibexa-color-dark;
     }
 
-    &__content-type .ibexa-icon {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+    &:hover {
+        border-color: $ibexa-color-primary;
+    }
+
+    &:focus {
+        border-color: $ibexa-color-dark;
+        box-shadow: $ibexa-btn-focus-box-shadow;
     }
 
     &__image {
-        display: block;
-        width: auto;
-        height: auto;
-        max-width: calculateRem(184px);
-        max-height: calculateRem(248px);
+        &:not(.ibexa-grid-view-item__image--none) {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
     }
 
     &__image-wrapper {
-        flex-grow: 1;
-        border-radius: calculateRem(5px);
-        margin-bottom: calculateRem(16px);
+        height: calculateRem(160px);
+        border-top-left-radius: calculateRem(12px);
+        border-top-right-radius: calculateRem(12px);
+        overflow: hidden;
         background: $ibexa-color-light-200;
 
         display: flex;
@@ -61,54 +62,70 @@
         justify-content: center;
     }
 
+    &__footer {
+        display: grid;
+        row-gap: calculateRem(16px);
+        padding: calculateRem(16px);
+    }
+
     &__title {
+        grid-area: 1/-1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         text-decoration: none;
-        font-weight: 600;
+        font-size: $ibexa-text-font-size-medium;
         line-height: calculateRem(21px);
     }
 
-    &__sub-title {
-        margin-top: calculateRem(4px);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-decoration: none;
-        font-size: $ibexa-text-font-size-small;
-        line-height: calculateRem(24px);
+    &__details-wrapper {
+        display: grid;
+    }
+
+    &__detail-a {
+        grid-area: 2/1;
+    }
+
+    &__detail-b {
+        grid-area: 2/2;
+    }
+
+    &__detail-a,
+    &__detail-b {
+        display: flex;
+        align-items: center;
+        gap: calculateRem(8px);
+        line-height: calculateRem(16px);
+        color: $ibexa-color-dark-400;
+
+        .ibexa-icon {
+            fill: $ibexa-color-dark-400;
+        }
     }
 
     &__checkbox {
         position: absolute;
         top: calculateRem(8px);
-        right: calculateRem(8px);
+        left: calculateRem(8px);
         line-height: 1;
     }
 
-    &__info {
-        display: flex;
-        height: calculateRem(64px);
-    }
-
-    &__status-container {
-        width: calculateRem(20px);
-        display: flex;
+    &--marked {
+        border: calculateRem(1px) solid $ibexa-color-dark;
     }
 
-    &__title-container {
-        width: calc(100% - #{calculateRem(40px)});
+    &--not-selectable {
+        background-color: $ibexa-color-light-200;
+        cursor: not-allowed;
     }
 
-    &__actions-container {
-        position: relative;
-        display: flex;
-        justify-content: flex-end;
-        width: calculateRem(20px);
+    &--selected {
+        background: $ibexa-color-light-300;
 
-        .ibexa-popup-menu {
-            left: calculateRem(22px);
+        .ibexa-grid-view-item {
+            &__title {
+                font-weight: 600;
+            }
         }
     }
 }
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss
index feb62354f5..e9a2c9adc8 100644
--- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss
@@ -9,8 +9,6 @@
 
     .ibexa-grid-view-item {
         &--marked {
-            border: calculateRem(1px) solid $ibexa-color-dark;
-
             .c-thumbnail {
                 .ibexa-icon {
                     fill: $ibexa-color-dark;
@@ -18,14 +16,7 @@
             }
         }
 
-        &--not-selectable {
-            background-color: $ibexa-color-light-200;
-            cursor: not-allowed;
-        }
-
         &--selected {
-            border: calculateRem(1px) solid $ibexa-color-primary;
-
             .ibexa-grid-view-item {
                 &__title {
                     color: $ibexa-color-primary;
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig
new file mode 100644
index 0000000000..7fe0027cc4
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig
@@ -0,0 +1,55 @@
+{%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
+
+{%- set is_template = is_template|default(false) -%}
+
+{%- set item_attr = item_attr|default({})|merge({
+    class: ('ibexa-grid-view-item '
+        ~ (is_marked|default(false) ? 'ibexa-grid-view-item--marked ')
+        ~ (is_not_selectable|default(false) ? 'ibexa-grid-view-item--not-selectable ')
+        ~ (is_selected|default(false) ? 'ibexa-grid-view-item--selected ')
+    ~ item_attr.class|default(''))|trim,
+}) -%}
+
+{%- set item_element = item_element|default('div') -%}
+
+{%- block item -%}
+    <{{ item_element }} {{ html.attributes(item_attr, is_template) }}>
+        {%- block item_content -%}
+            {%- block item_image -%}
+                <div class="ibexa-grid-view-item__image-wrapper">
+                    {% if image_url is defined and image_url is not null %}
+                        <img class="ibexa-grid-view-item__image" src="{{ image_url }}" alt="" />
+                    {% else %}
+                        <svg class="ibexa-icon ibexa-icon--dark ibexa-icon--extra-large">
+                            <use xlink:href="{{ icon_path }}"></use>
+                        </svg>
+                    {% endif %}
+                </div>
+            {%- endblock -%}
+
+            {%- block item_footer -%}
+                <div class="ibexa-grid-view-item__footer">
+                    {%- block item_footer_contet -%}
+                        {%- block item_title -%}
+                            <div class="ibexa-grid-view-item__title">
+                                {{ title|default('') }}
+                            </div>
+                        {%- endblock -%}
+
+                        {%- block item_detail_a -%}
+                            <div class="ibexa-grid-view-item__detail-a">
+                                {{ detail_a|default('') }}
+                            </div>
+                        {%- endblock -%}
+
+                        {%- block item_detail_b -%}
+                            <div class="ibexa-grid-view-item__detail-b">
+                                {{ detail_b|default('') }}
+                            </div>
+                        {%- endblock -%}
+                    {%- endblock -%}
+                </div>
+            {%- endblock -%}
+        {%- endblock -%}
+    </{{ item_element }}>
+{%- endblock -%}
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js
index f8061d73e0..53ef236643 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js
@@ -9,8 +9,8 @@ const GridViewItemComponent = ({ item, generateLink }) => {
     const imageClassName = 'ibexa-grid-view-item__image';
     const contentTypeIdentifier = content._info.contentType.identifier;
     const contentTypeIconUrl = ibexa.helpers.contentType.getContentTypeIconUrl(contentTypeIdentifier);
+    const contentTypeName = ibexa.helpers.contentType.getContentTypeName(contentTypeIdentifier);
     let image = null;
-    let contentTypeIcon = null;
 
     if (content._thumbnail === null || content._thumbnail.mimeType === 'image/svg+xml') {
         image = (
@@ -22,21 +22,19 @@ const GridViewItemComponent = ({ item, generateLink }) => {
         const { uri, alternativeText } = content._thumbnail;
 
         image = <img className={imageClassName} src={uri} alt={alternativeText} />;
-        contentTypeIcon = (
-            <div className="ibexa-grid-view-item__content-type">
-                <Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small" />
-            </div>
-        );
     }
 
     return (
         <a className="ibexa-grid-view-item" href={generateLink(locationId, content._info.id)}>
-            {contentTypeIcon}
             <div className="ibexa-grid-view-item__image-wrapper">{image}</div>
-            <div className="ibexa-grid-view-item__title-wrapper">
+            <div className="ibexa-grid-view-item__footer">
                 <div className="ibexa-grid-view-item__title" title={content._name}>
                     {content._name}
                 </div>
+                <div className="ibexa-grid-view-item__detail-a">
+                    <Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small" />
+                    {contentTypeName}
+                </div>
             </div>
         </a>
     );
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js
index e37fae1af0..4a51298967 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js
@@ -77,8 +77,10 @@ const GridViewItem = ({ location, version }) => {
                     contentTypeIconPath={contentTypesMap[location.ContentInfo.Content.ContentType._href].thumbnail}
                 />
             </div>
-            <div className="ibexa-grid-view-item__title-wrapper">
-                <div className="ibexa-grid-view-item__title">{location.ContentInfo.Content.TranslatedName}</div>
+            <div className="ibexa-grid-view-item__footer">
+                <div className="ibexa-grid-view-item__title" title={location.ContentInfo.Content.TranslatedName}>
+                    {location.ContentInfo.Content.TranslatedName}
+                </div>
             </div>
             {renderToggleSelection()}
         </div>