diff --git a/src/bundle/Resources/encore/ez.js.config.js b/src/bundle/Resources/encore/ez.js.config.js
index 9f264e4e47..6edef51b0d 100644
--- a/src/bundle/Resources/encore/ez.js.config.js
+++ b/src/bundle/Resources/encore/ez.js.config.js
@@ -109,11 +109,13 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../public/js/scripts/button.state.toggle.js'),
             path.resolve(__dirname, '../public/js/scripts/button.content.edit.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.version.edit.conflict.js'),
+            path.resolve(__dirname, '../public/js/scripts/admin.content.tree.js'),
         ])
         .addEntry('ezplatform-admin-ui-content-draft-list-js', [
             path.resolve(__dirname, '../public/js/scripts/button.state.toggle.js'),
             path.resolve(__dirname, '../public/js/scripts/button.content.edit.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.version.edit.conflict.js'),
+            path.resolve(__dirname, '../public/js/scripts/admin.content.tree.js'),
         ])
         .addEntry('ezplatform-admin-ui-content-type-create-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.contenttype.selection.js'),
@@ -155,17 +157,21 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../public/js/scripts/button.content.edit.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.search.filters.js'),
             path.resolve(__dirname, '../public/js/scripts/udw/select.location.js'),
+            path.resolve(__dirname, '../public/js/scripts/admin.content.tree.js'),
         ])
         .addEntry('ezplatform-admin-ui-section-list-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.section.list.js'),
             path.resolve(__dirname, '../public/js/scripts/button.state.toggle.js'),
         ])
         .addEntry('ezplatform-admin-ui-section-view-js', [path.resolve(__dirname, '../public/js/scripts/admin.section.view.js')])
-        .addEntry('ezplatform-admin-ui-trash-list-js', [path.resolve(__dirname, '../public/js/scripts/admin.trash.list.js')])
+        .addEntry('ezplatform-admin-ui-trash-list-js', [
+            path.resolve(__dirname, '../public/js/scripts/admin.trash.list.js'),
+            path.resolve(__dirname, '../public/js/scripts/admin.content.tree.js'),
+        ])
         .addEntry('ezplatform-admin-ui-content-preview-js', [path.resolve(__dirname, '../public/js/scripts/admin.preview.js')])
         .addEntry('ezplatform-admin-ui-location-view-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.location.change.language.js'),
-            path.resolve(__dirname, '../public/js/scripts/admin.location.content.tree.js'),
+            path.resolve(__dirname, '../public/js/scripts/admin.content.tree.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.location.view.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.location.tab.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.location.visibility.js'),
diff --git a/src/bundle/Resources/public/js/scripts/admin.location.content.tree.js b/src/bundle/Resources/public/js/scripts/admin.content.tree.js
similarity index 100%
rename from src/bundle/Resources/public/js/scripts/admin.location.content.tree.js
rename to src/bundle/Resources/public/js/scripts/admin.content.tree.js
diff --git a/src/bundle/Resources/public/scss/_view-content.scss b/src/bundle/Resources/public/scss/_content-tree.scss
similarity index 82%
rename from src/bundle/Resources/public/scss/_view-content.scss
rename to src/bundle/Resources/public/scss/_content-tree.scss
index ddb643c866..16e297fa7d 100644
--- a/src/bundle/Resources/public/scss/_view-content.scss
+++ b/src/bundle/Resources/public/scss/_content-tree.scss
@@ -1,6 +1,9 @@
-.ez-content-view {
+.ez-content-view,
+.ez-bookmark-list-view,
+.ez-search-view,
+.ez-trash-list-view,
+.ez-drafts-list-view {
     .ez-content-container {
-        display: flex;
         min-width: 0;
     }
 
@@ -12,7 +15,6 @@
         background: $ez-white;
         color: inherit;
         transition: max-width 0.2s $ez-admin-transition;
-        margin-bottom: calculateRem(-24px);
 
         &--expanded {
             display: initial;
@@ -27,7 +29,7 @@
         }
     }
 
-    .ez-location-view-container {
+    .ez-view-container {
         flex: 1 1 auto;
         min-width: 0;
     }
diff --git a/src/bundle/Resources/public/scss/_main-row.scss b/src/bundle/Resources/public/scss/_main-row.scss
index c2ae2ba341..6598def848 100644
--- a/src/bundle/Resources/public/scss/_main-row.scss
+++ b/src/bundle/Resources/public/scss/_main-row.scss
@@ -1,38 +1,13 @@
 .ez-main-row {
-    display: grid;
-    grid-template-columns: 1fr calculateRem(80px);
-    grid-template-rows: auto;
-    grid-template-areas: 'ez-content-container ez-context-menu';
-
-    .ez-content-container {
-        grid-area: ez-content-container;
-    }
+    display: flex;
+    flex-wrap: nowrap;
 
+    .ez-side-menu,
     .ez-context-menu {
-        grid-area: ez-context-menu;
-    }
-
-    .ez-has-two-sidebars & {
-        grid-template-columns: calculateRem(80px) 1fr calculateRem(80px);
-        grid-template-areas: 'ez-side-menu ez-content-container ez-context-menu';
-
-        .ez-side-menu {
-            grid-area: ez-side-menu;
-        }
+        flex: 0 0 calculateRem(80px);
     }
 
-    .ez-has-no-sidebars & {
-        grid-template-columns: 1fr;
-        grid-template-areas: 'ez-content-container';
-
-        .ez-context-menu,
-        .ez-side-menu {
-            display: none;
-        }
-    }
-
-    &.ez-dashboard-row {
-        grid-template-columns: 1fr;
-        grid-template-areas: 'ez-content-container';
+    .ez-content-container {
+        flex: 1 1 auto;
     }
 }
diff --git a/src/bundle/Resources/public/scss/ezplatform.scss b/src/bundle/Resources/public/scss/ezplatform.scss
index 7b103c5df6..6795079e87 100644
--- a/src/bundle/Resources/public/scss/ezplatform.scss
+++ b/src/bundle/Resources/public/scss/ezplatform.scss
@@ -71,4 +71,4 @@
 @import 'admin.section-view';
 @import 'admin.content-type-view';
 @import 'main-row';
-@import 'view-content';
+@import 'content-tree';
diff --git a/src/bundle/Resources/views/admin/bookmark/list.html.twig b/src/bundle/Resources/views/admin/bookmark/list.html.twig
index 7522d62b0a..371d895169 100644
--- a/src/bundle/Resources/views/admin/bookmark/list.html.twig
+++ b/src/bundle/Resources/views/admin/bookmark/list.html.twig
@@ -22,72 +22,74 @@
                         'attr': { 'class': 'ez-toggle-btn-state', 'data-toggle-button-id': '#bookmark_remove_remove' }
                     }) }}
                     {% include '@ezdesign/parts/table_header.html.twig' with {
-                         ground: 'mt-3',
-                         headerText: 'bookmark.table.header'|trans|desc('Bookmarks') ~ ' (' ~ pager.count ~ ')',
-                         tools: form_widget(form_remove.remove, {'attr': {'class': 'btn btn-danger', 'disabled': true}})
-                     } %}
-                    <table class="ez-table table">
-                        <thead>
-                        <tr>
-                            <th class="ez-table__header-cell"></th>
-                            <th class="ez-table__header-cell ez-table__header-cell--has-icon"></th>
-                            <th class="ez-table__header-cell ez-table__header-cell--after-icon">{{ 'bookmark.list.name'|trans|desc('Name') }}</th>
-                            <th class="ez-table__header-cell">{{ 'bookmark.list.content_type'|trans|desc('Content Type') }}</th>
-                            <th class="ez-table__header-cell">{{ 'bookmark.list.path'|trans|desc('Path') }}</th>
-                            <th class="ez-table__header-cell"></th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% if pager.count is same as(0) %}
-                        <tr>
-                            <td class="ez-table__cell ez-table__cell--no-content" colspan="5">
-                                <span class="mb-0 py-1 pl-0">{{ 'bookmark.list.empty'|trans|desc('The bookmark list is empty. Any Content item you bookmark will end up here.') }}</span>
-                            </td>
-                        </tr>
-                        {% else %}
-                        {% for bookmark in pager.currentPageResults %}
+                        ground: 'mt-3',
+                        headerText: 'bookmark.table.header'|trans|desc('Bookmarks') ~ ' (' ~ pager.count ~ ')',
+                        tools: form_widget(form_remove.remove, {'attr': {'class': 'btn btn-danger', 'disabled': true}})
+                    } %}
+                    <div class="ez-scrollable-table-wrapper">
+                        <table class="ez-table table">
+                            <thead>
                             <tr>
-                                <td class="ez-table__cell ez-table__cell--has-checkbox">{{ form_widget(form_remove.bookmarks[bookmark.id]) }}</td>
-                                <td class="ez-table__cell ez-table__cell--has-icon">
-                                    <svg class="ez-icon ez-icon--small">
-                                        <use xlink:href="{{ ez_content_type_icon(bookmark.contentType.identifier) }}"></use>
-                                    </svg>
-                                </td>
-                                <td class="ez-table__cell ez-table__cell--after-icon"><a href="{{ path('_ezpublishLocation', { 'locationId': bookmark.id }) }}">{{ ez_content_name(bookmark.contentInfo) }}</a></td>
-                                <td class="ez-table__cell">{{ bookmark.contentType.name }}</td>
-                                <td class="ez-table__cell">
-                                    {% if bookmark.pathLocations|length > 1 %}
-                                        {% for location in bookmark.pathLocations %}
-                                            {% if loop.revindex > 1 %}
-                                                <a href="{{ path('_ezpublishLocation', {'locationId': location.id}) }}">
-                                                    {{ ez_content_name(location.contentInfo) }}
-                                                </a>
-                                                {% if loop.revindex > 2 %}/{% endif %}
-                                            {% endif %}
-                                        {% endfor %}
-                                    {% else %}
-                                        -
-                                    {% endif %}
-                                </td>
-                                <td class="ez-table__cell ez-table__cell--has-action-btns text-right">
-                                    {% if bookmark.userCanEdit %}
-                                    <button
-                                        class="btn btn-icon mx-2 ez-btn--content-edit"
-                                        title="{{ 'bookmark.list.content.edit'|trans|desc('Edit Content') }}"
-                                        data-content-id="{{ bookmark.contentInfo.id }}"
-                                        data-version-no="{{ bookmark.contentInfo.currentVersionNo }}"
-                                        data-language-code="{{ bookmark.contentInfo.mainLanguageCode }}">
-                                        <svg class="ez-icon ez-icon-edit">
-                                            <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#edit"></use>
-                                        </svg>
-                                    </button>
-                                    {% endif %}
+                                <th class="ez-table__header-cell"></th>
+                                <th class="ez-table__header-cell ez-table__header-cell--has-icon"></th>
+                                <th class="ez-table__header-cell ez-table__header-cell--after-icon">{{ 'bookmark.list.name'|trans|desc('Name') }}</th>
+                                <th class="ez-table__header-cell">{{ 'bookmark.list.content_type'|trans|desc('Content Type') }}</th>
+                                <th class="ez-table__header-cell">{{ 'bookmark.list.path'|trans|desc('Path') }}</th>
+                                <th class="ez-table__header-cell"></th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {% if pager.count is same as(0) %}
+                            <tr>
+                                <td class="ez-table__cell ez-table__cell--no-content" colspan="5">
+                                    <span class="mb-0 py-1 pl-0">{{ 'bookmark.list.empty'|trans|desc('The bookmark list is empty. Any Content item you bookmark will end up here.') }}</span>
                                 </td>
                             </tr>
-                        {% endfor %}
-                        {% endif %}
-                        </tbody>
-                    </table>
+                            {% else %}
+                            {% for bookmark in pager.currentPageResults %}
+                                <tr>
+                                    <td class="ez-table__cell ez-table__cell--has-checkbox">{{ form_widget(form_remove.bookmarks[bookmark.id]) }}</td>
+                                    <td class="ez-table__cell ez-table__cell--has-icon">
+                                        <svg class="ez-icon ez-icon--small">
+                                            <use xlink:href="{{ ez_content_type_icon(bookmark.contentType.identifier) }}"></use>
+                                        </svg>
+                                    </td>
+                                    <td class="ez-table__cell ez-table__cell--after-icon"><a href="{{ path('_ezpublishLocation', { 'locationId': bookmark.id }) }}">{{ ez_content_name(bookmark.contentInfo) }}</a></td>
+                                    <td class="ez-table__cell">{{ bookmark.contentType.name }}</td>
+                                    <td class="ez-table__cell">
+                                        {% if bookmark.pathLocations|length > 1 %}
+                                            {% for location in bookmark.pathLocations %}
+                                                {% if loop.revindex > 1 %}
+                                                    <a href="{{ path('_ezpublishLocation', {'locationId': location.id}) }}">
+                                                        {{ ez_content_name(location.contentInfo) }}
+                                                    </a>
+                                                    {% if loop.revindex > 2 %}/{% endif %}
+                                                {% endif %}
+                                            {% endfor %}
+                                        {% else %}
+                                            -
+                                        {% endif %}
+                                    </td>
+                                    <td class="ez-table__cell ez-table__cell--has-action-btns text-right">
+                                        {% if bookmark.userCanEdit %}
+                                        <button
+                                            class="btn btn-icon mx-2 ez-btn--content-edit"
+                                            title="{{ 'bookmark.list.content.edit'|trans|desc('Edit Content') }}"
+                                            data-content-id="{{ bookmark.contentInfo.id }}"
+                                            data-version-no="{{ bookmark.contentInfo.currentVersionNo }}"
+                                            data-language-code="{{ bookmark.contentInfo.mainLanguageCode }}">
+                                            <svg class="ez-icon ez-icon-edit">
+                                                <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#edit"></use>
+                                            </svg>
+                                        </button>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                            {% endif %}
+                            </tbody>
+                        </table>
+                    </div>
                     {{ form_end(form_remove) }}
 
 
@@ -115,6 +117,10 @@
     </div>
 {% endblock %}
 
+{% block react_modules %}
+    {{ encore_entry_script_tags('ezplatform-admin-ui-modules-content-tree-js', null, 'ezplatform') }}
+{% endblock %}
+
 {% block javascripts %}
     {{ encore_entry_script_tags('ezplatform-admin-ui-bookmark-list-js', null, 'ezplatform') }}
 {% endblock %}
diff --git a/src/bundle/Resources/views/admin/content_draft/list.html.twig b/src/bundle/Resources/views/admin/content_draft/list.html.twig
index 32037c86d4..a7ddb42ad4 100644
--- a/src/bundle/Resources/views/admin/content_draft/list.html.twig
+++ b/src/bundle/Resources/views/admin/content_draft/list.html.twig
@@ -8,7 +8,7 @@
 
 {% block title %}{{ 'drafts.list'|trans|desc('Drafts') }} - {{ parent() }}{% endblock %}
 
-{% block body_class %}ez-drafts-list-view ez-has-two-sidebars{% endblock %}
+{% block body_class %}ez-drafts-list-view{% endblock %}
 
 {% block content %}
     <div class="row align-items-stretch ez-main-row">
@@ -37,68 +37,70 @@
                         headerText: 'drafts.table.header'|trans|desc('Drafts') ~ ' (' ~ pager.count ~ ')',
                         tools: macros.table_header_tools(form_remove)
                      } %}
-                    <table class="ez-table table">
-                        <thead>
-                            <tr>
-                                <th class="ez-table__header-cell"></th>
-                                <th class="ez-table__header-cell ez-table__header-cell--has-icon"></th>
-                                <th class="ez-table__header-cell ez-table__header-cell--after-icon">{{ 'drafts.list.name'|trans|desc('Name') }}</th>
-                                <th class="ez-table__header-cell">{{ 'drafts.list.content_type'|trans|desc('Content Type') }}</th>
-                                <th class="ez-table__header-cell">{{ 'drafts.list.modified_language'|trans|desc('Modified Language') }}</th>
-                                <th class="ez-table__header-cell">{{ 'drafts.list.version'|trans|desc('Version') }}</th>
-                                <th class="ez-table__header-cell">{{ 'drafts.list.last_saved'|trans|desc('Last Saved') }}</th>
-                                <th class="ez-table__header-cell"></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {% if pager.count is same as(0) %}
-                            <tr>
-                                <td class="ez-table__cell ez-table__cell--no-content" colspan="5">
-                                    <span class="mb-0 py-1 pl-0">
-                                        {{ 'drafts.list.empty'|trans|desc('The draft list is empty. Any Content draft you create will end up here.') }}
-                                    </span>
-                                </td>
-                            </tr>
-                        {% else %}
-                            {% for row in pager.currentPageResults %}
-                                {% set content_draft_edit_url = content_is_user|default(false) ? 'ez_user_update' : 'ez_content_draft_edit' %}
+                    <div class="ez-scrollable-table-wrapper">
+                        <table class="ez-table table">
+                            <thead>
                                 <tr>
-                                    <td class="ez-table__cell ez-table__cell--has-checkbox">
-                                         {{ form_widget(form_remove.versions[row.id ~ '']) }}
-                                    </td>
-                                    <td class="ez-table__cell ez-table__cell--has-icon">
-                                        <svg class="ez-icon ez-icon--small">
-                                            <use xlink:href="{{ ez_content_type_icon(row.content_type.identifier) }}"></use>
-                                        </svg>
-                                    </td>
-                                    <td class="ez-table__cell ez-table__cell--after-icon">{{ row.name }}</td>
-                                    <td class="ez-table__cell">{{ row.content_type.name }}</td>
-                                    <td class="ez-table__cell">{{ admin_ui_config.languages.mappings[row.language].name }}</td>
-                                    <td class="ez-table__cell">{{ row.version }}</td>
-                                    <td class="ez-table__cell">{{ row.modified|ez_full_datetime }}</td>
-                                    <td class="ez-table__cell ez-table__cell--has-action-btns text-right">
-                                        <button class="btn btn-icon mx-2 ez-btn--content-draft-edit"
-                                                title="{{ 'drafts.list.action.edit'|trans|desc('Edit Draft') }}"
-                                                data-content-draft-edit-url="{{ path(content_draft_edit_url, {
-                                                    'contentId': row.contentId,
-                                                    'versionNo': row.version,
-                                                    'language': row.language
-                                                }) }}"
-                                                data-version-has-conflict-url="{{ path('ezplatform.version.has_no_conflict', {
-                                                    'contentId': row.contentId,
-                                                    'versionNo': row.version,
-                                                    'languageCode': row.language
-                                                }) }}">
-                                            <svg class="ez-icon ez-icon-edit">
-                                                <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#edit"></use>
-                                            </svg>
-                                        </button>
+                                    <th class="ez-table__header-cell"></th>
+                                    <th class="ez-table__header-cell ez-table__header-cell--has-icon"></th>
+                                    <th class="ez-table__header-cell ez-table__header-cell--after-icon">{{ 'drafts.list.name'|trans|desc('Name') }}</th>
+                                    <th class="ez-table__header-cell">{{ 'drafts.list.content_type'|trans|desc('Content Type') }}</th>
+                                    <th class="ez-table__header-cell">{{ 'drafts.list.modified_language'|trans|desc('Modified Language') }}</th>
+                                    <th class="ez-table__header-cell">{{ 'drafts.list.version'|trans|desc('Version') }}</th>
+                                    <th class="ez-table__header-cell">{{ 'drafts.list.last_saved'|trans|desc('Last Saved') }}</th>
+                                    <th class="ez-table__header-cell"></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            {% if pager.count is same as(0) %}
+                                <tr>
+                                    <td class="ez-table__cell ez-table__cell--no-content" colspan="5">
+                                        <span class="mb-0 py-1 pl-0">
+                                            {{ 'drafts.list.empty'|trans|desc('The draft list is empty. Any Content draft you create will end up here.') }}
+                                        </span>
                                     </td>
                                 </tr>
-                            {% endfor %}
-                        {% endif %}
-                        </tbody>
-                    </table>
+                            {% else %}
+                                {% for row in pager.currentPageResults %}
+                                    {% set content_draft_edit_url = content_is_user|default(false) ? 'ez_user_update' : 'ez_content_draft_edit' %}
+                                    <tr>
+                                        <td class="ez-table__cell ez-table__cell--has-checkbox">
+                                            {{ form_widget(form_remove.versions[row.id ~ '']) }}
+                                        </td>
+                                        <td class="ez-table__cell ez-table__cell--has-icon">
+                                            <svg class="ez-icon ez-icon--small">
+                                                <use xlink:href="{{ ez_content_type_icon(row.content_type.identifier) }}"></use>
+                                            </svg>
+                                        </td>
+                                        <td class="ez-table__cell ez-table__cell--after-icon">{{ row.name }}</td>
+                                        <td class="ez-table__cell">{{ row.content_type.name }}</td>
+                                        <td class="ez-table__cell">{{ admin_ui_config.languages.mappings[row.language].name }}</td>
+                                        <td class="ez-table__cell">{{ row.version }}</td>
+                                        <td class="ez-table__cell">{{ row.modified|ez_full_datetime }}</td>
+                                        <td class="ez-table__cell ez-table__cell--has-action-btns text-right">
+                                            <button class="btn btn-icon mx-2 ez-btn--content-draft-edit"
+                                                    title="{{ 'drafts.list.action.edit'|trans|desc('Edit Draft') }}"
+                                                    data-content-draft-edit-url="{{ path(content_draft_edit_url, {
+                                                        'contentId': row.contentId,
+                                                        'versionNo': row.version,
+                                                        'language': row.language
+                                                    }) }}"
+                                                    data-version-has-conflict-url="{{ path('ezplatform.version.has_no_conflict', {
+                                                        'contentId': row.contentId,
+                                                        'versionNo': row.version,
+                                                        'languageCode': row.language
+                                                    }) }}">
+                                                <svg class="ez-icon ez-icon-edit">
+                                                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#edit"></use>
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+                            {% endif %}
+                            </tbody>
+                        </table>
+                    </div>
                     {{ form_widget(form_remove.remove, {
                         'attr': {
                             'hidden': true
@@ -127,6 +129,10 @@
     {% include '@ezdesign/content/modal_version_conflict.html.twig' %}
 {% endblock %}
 
+{% block react_modules %}
+    {{ encore_entry_script_tags('ezplatform-admin-ui-modules-content-tree-js', null, 'ezplatform') }}
+{% endblock %}
+
 {% block javascripts %}
     {{ encore_entry_script_tags('ezplatform-admin-ui-content-draft-list-js', null, 'ezplatform') }}
 {% endblock %}
diff --git a/src/bundle/Resources/views/admin/search/search.html.twig b/src/bundle/Resources/views/admin/search/search.html.twig
index c3da76a641..b6293d2465 100644
--- a/src/bundle/Resources/views/admin/search/search.html.twig
+++ b/src/bundle/Resources/views/admin/search/search.html.twig
@@ -22,12 +22,12 @@
 
                 {% if results is defined %}
 
-                    <div class="ez-table-header mt-3 ml-4">
+                    <div class="ez-table-header mt-3 mx-4">
                         <div class="ez-table-header__headline">{{ 'search.header'|trans({'%total%': pager.nbResults})|desc('Search results (%total%)') }}</div>
                     </div>
 
                     {% if results is empty %}
-                        <div class="ml-4">
+                        <div class="mx-4">
                             <table class="table">
                                 <tr>
                                     <td colspan="4">
@@ -44,8 +44,8 @@
                             </ul>
                         </div>
                     {% else %}
-                        <div class="mr-4">
-                            <table class="table mx-4">
+                        <div class="ez-scrollable-table-wrapper mx-4">
+                            <table class="table">
                                 <thead>
                                 <tr>
                                     <th class="ez-table__header-cell ez-table__header-cell--has-icon"></th>
@@ -61,20 +61,20 @@
                                 {% endfor %}
                                 </tbody>
                             </table>
-
-                            {% if pager.haveToPaginate %}
-                                <div class="row justify-content-center align-items-center mb-2 ml-4 ez-pagination__spacing">
-                                    <span class="ez-pagination__text">
-                                        {{ 'pagination.viewing'|trans({
-                                            '%viewing%': pager.currentPageResults|length,
-                                            '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
-                                    </span>
-                                </div>
-                                <div class="row justify-content-center align-items-center ez-pagination__btn mb-5 ml-4">
-                                    {{ pagerfanta(pager, 'ez', {'pageParameter': '[search][page]'}) }}
-                                </div>
-                            {% endif %}
                         </div>
+
+                        {% if pager.haveToPaginate %}
+                            <div class="row justify-content-center align-items-center mb-2 ml-4 ez-pagination__spacing">
+                                <span class="ez-pagination__text">
+                                    {{ 'pagination.viewing'|trans({
+                                        '%viewing%': pager.currentPageResults|length,
+                                        '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
+                                </span>
+                            </div>
+                            <div class="row justify-content-center align-items-center ez-pagination__btn mb-5 mx-4">
+                                {{ pagerfanta(pager, 'ez', {'pageParameter': '[search][page]'}) }}
+                            </div>
+                        {% endif %}
                     {% endif %}
 
                     {% form_theme form_edit '@ezdesign/parts/form/flat_widgets.html.twig' %}
@@ -91,6 +91,10 @@
     </div>
 {% endblock %}
 
+{% block react_modules %}
+    {{ encore_entry_script_tags('ezplatform-admin-ui-modules-content-tree-js', null, 'ezplatform') }}
+{% endblock %}
+
 {% block javascripts %}
     {{ encore_entry_script_tags('ezplatform-admin-ui-search-js', null, 'ezplatform') }}
 {% endblock %}
diff --git a/src/bundle/Resources/views/admin/search/search_form.html.twig b/src/bundle/Resources/views/admin/search/search_form.html.twig
index b934d79646..bed8e10c5d 100644
--- a/src/bundle/Resources/views/admin/search/search_form.html.twig
+++ b/src/bundle/Resources/views/admin/search/search_form.html.twig
@@ -3,7 +3,7 @@
 {% trans_default_domain 'search' %}
 
 {{ form_start(form) }}
-<div class="input-group pl-4">
+<div class="input-group px-4">
     {{ form_widget(form.query) }}
 
     <span class="input-group-btn">
diff --git a/src/bundle/Resources/views/admin/trash/list.html.twig b/src/bundle/Resources/views/admin/trash/list.html.twig
index 4107fe718d..2156e0a528 100644
--- a/src/bundle/Resources/views/admin/trash/list.html.twig
+++ b/src/bundle/Resources/views/admin/trash/list.html.twig
@@ -62,54 +62,56 @@
                             {% endif %}
                         </div>
                     </div>
-                    <table class="ez-table table">
-                        <thead>
-                        <tr>
-                            <th class="ez-table__header-cell"></th>
-                            <th class="ez-table__header-cell ez-table__header-cell--has-icon"></th>
-                            <th class="ez-table__header-cell ez-table__header-cell--after-icon">{{ 'trash.name'|trans|desc('Name') }}</th>
-                            <th class="ez-table__header-cell">{{ 'trash.type'|trans|desc('Type') }}</th>
-                            <th class="ez-table__header-cell">{{ 'trash.original_location'|trans|desc('Original location') }}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% if trash_items is empty %}
+                    <div class="ez-scrollable-table-wrapper">
+                        <table class="ez-table table">
+                            <thead>
                             <tr>
-                                <td class="ez-table__cell ez-table__cell--no-content" colspan="4">
-                                    <span class="mb-0 py-1 pl-0">
-                                        {{ 'trash.empty'|trans|desc('Trash is empty. Any content item you send to trash will end up here.') }}
-                                    </span>
-                                </td>
+                                <th class="ez-table__header-cell"></th>
+                                <th class="ez-table__header-cell ez-table__header-cell--has-icon"></th>
+                                <th class="ez-table__header-cell ez-table__header-cell--after-icon">{{ 'trash.name'|trans|desc('Name') }}</th>
+                                <th class="ez-table__header-cell">{{ 'trash.type'|trans|desc('Type') }}</th>
+                                <th class="ez-table__header-cell">{{ 'trash.original_location'|trans|desc('Original location') }}</th>
                             </tr>
-                        {% else %}
-                            {% for key, form in form_trash_item_restore.trash_items %}
-                                {% set trash_item = trash_items[key] %}
-                                {% set is_parent_in_trash = trash_item.parentInTrash %}
+                            </thead>
+                            <tbody>
+                            {% if trash_items is empty %}
                                 <tr>
-                                    <td class="ez-table__cell">
-                                        {{ form_widget(form, {attr: {
-                                            'data-is-parent-in-trash': is_parent_in_trash ? '1': '0'
-                                        }}) }}
-                                    </td>
-                                    <td class="ez-table__cell ez-table__cell--has-icon">
-                                        <svg class="ez-icon ez-icon--small">
-                                            <use xlink:href="{{ ez_content_type_icon(trash_item.contentType.identifier) }}"></use>
-                                        </svg>
-                                    </td>
-                                    <td class="ez-table__cell ez-table__cell--after-icon">{{ ez_content_name(trash_item.location.contentInfo) }}</td>
-                                    <td class="ez-table__cell">{{ trash_item.contentType.name }}</td>
-                                    <td class="ez-table__cell">
-                                        {% if not is_parent_in_trash %}
-                                            {% include '@ezdesign/parts/path.html.twig' with {'locations': trash_item.ancestors, 'link_last_element': true} %}
-                                        {% else %}
-                                            <em>{{ 'trash.item.ancesor_in_trash'|trans|desc('Ancestor is in the Trash') }}</em>
-                                        {% endif %}
+                                    <td class="ez-table__cell ez-table__cell--no-content" colspan="4">
+                                        <span class="mb-0 py-1 pl-0">
+                                            {{ 'trash.empty'|trans|desc('Trash is empty. Any content item you send to trash will end up here.') }}
+                                        </span>
                                     </td>
                                 </tr>
-                            {% endfor %}
-                        {% endif %}
-                        </tbody>
-                    </table>
+                            {% else %}
+                                {% for key, form in form_trash_item_restore.trash_items %}
+                                    {% set trash_item = trash_items[key] %}
+                                    {% set is_parent_in_trash = trash_item.parentInTrash %}
+                                    <tr>
+                                        <td class="ez-table__cell">
+                                            {{ form_widget(form, {attr: {
+                                                'data-is-parent-in-trash': is_parent_in_trash ? '1': '0'
+                                            }}) }}
+                                        </td>
+                                        <td class="ez-table__cell ez-table__cell--has-icon">
+                                            <svg class="ez-icon ez-icon--small">
+                                                <use xlink:href="{{ ez_content_type_icon(trash_item.contentType.identifier) }}"></use>
+                                            </svg>
+                                        </td>
+                                        <td class="ez-table__cell ez-table__cell--after-icon">{{ ez_content_name(trash_item.location.contentInfo) }}</td>
+                                        <td class="ez-table__cell">{{ trash_item.contentType.name }}</td>
+                                        <td class="ez-table__cell">
+                                            {% if not is_parent_in_trash %}
+                                                {% include '@ezdesign/parts/path.html.twig' with {'locations': trash_item.ancestors, 'link_last_element': true} %}
+                                            {% else %}
+                                                <em>{{ 'trash.item.ancesor_in_trash'|trans|desc('Ancestor is in the Trash') }}</em>
+                                            {% endif %}
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+                            {% endif %}
+                            </tbody>
+                        </table>
+                    </div>
                     {{ form_widget(form_trash_item_restore._token) }}
                     {{ form_end(form_trash_item_restore, { 'render_rest': false }) }}
                 </div>
@@ -151,6 +153,10 @@
     </div>
 {% endblock %}
 
+{% block react_modules %}
+    {{ encore_entry_script_tags('ezplatform-admin-ui-modules-content-tree-js', null, 'ezplatform') }}
+{% endblock %}
+
 {% block javascripts %}
     {{ encore_entry_script_tags('ezplatform-admin-ui-trash-list-js', null, 'ezplatform') }}
 {% endblock %}
diff --git a/src/bundle/Resources/views/layout.html.twig b/src/bundle/Resources/views/layout.html.twig
index dd0d6375d1..f36b551aaa 100644
--- a/src/bundle/Resources/views/layout.html.twig
+++ b/src/bundle/Resources/views/layout.html.twig
@@ -123,6 +123,12 @@
                             {{ knp_menu_render('ezplatform_admin_ui.menu.content.sidebar_left', {'template': '@ezdesign/parts/menu/sidebar_left.html.twig'}) }}
                         </div>
                     </div>
+                    <div class="ez-content-tree-container"
+                        data-user-id="{{ admin_ui_config.user.user.id }}"
+                        data-tree-root-location-id="{{ admin_ui_config['contentTree']['treeRootLocationId'] }}"
+                        data-current-location-path="{{ location_path|default('') }}">
+                        <div class="ez-content-tree-container__wrapper"></div>
+                    </div>
                 {% endblock left_sidebar %}
 
             {% endblock content %}