diff --git a/src/bundle/Resources/config/services/tabs.yaml b/src/bundle/Resources/config/services/tabs.yaml
index db108b4ae2..028080d772 100644
--- a/src/bundle/Resources/config/services/tabs.yaml
+++ b/src/bundle/Resources/config/services/tabs.yaml
@@ -2,6 +2,7 @@ imports:
     - { resource: tabs/locationview.yaml }
     - { resource: tabs/content_type.yaml }
     - { resource: tabs/url_management.yaml }
+    - { resource: tabs/languages.yaml }
 
 services:
     _defaults:
diff --git a/src/bundle/Resources/config/services/tabs/languages.yaml b/src/bundle/Resources/config/services/tabs/languages.yaml
new file mode 100644
index 0000000000..268ee6cb61
--- /dev/null
+++ b/src/bundle/Resources/config/services/tabs/languages.yaml
@@ -0,0 +1,13 @@
+services:
+    ibexa.admin_ui.languages.tab_group:
+        parent: Ibexa\AdminUi\Component\TabsComponent
+        arguments:
+            $template: '@@ibexadesign/ui/tab/languages.html.twig'
+            $groupIdentifier: 'languages'
+        tags:
+            - { name: ibexa.twig.component, group: 'admin-ui-languages-tab-groups' }
+
+    Ibexa\AdminUi\Tab\Language\LanguagesTab:
+        parent: Ibexa\Contracts\AdminUi\Tab\AbstractTab
+        tags:
+            - { name: ibexa.admin_ui.tab, group: 'languages' }
diff --git a/src/bundle/Resources/views/themes/admin/language/list.html.twig b/src/bundle/Resources/views/themes/admin/language/list.html.twig
index 52d1deda3c..571c2d8522 100644
--- a/src/bundle/Resources/views/themes/admin/language/list.html.twig
+++ b/src/bundle/Resources/views/themes/admin/language/list.html.twig
@@ -1,9 +1,5 @@
 {% extends "@ibexadesign/ui/layout.html.twig" %}
 
-{% from '@ibexadesign/ui/component/macros.html.twig' import results_headline %}
-
-{% form_theme form_languages_delete '@ibexadesign/ui/form_fields.html.twig'  %}
-
 {% trans_default_domain 'ibexa_language' %}
 
 {% block body_class %}ibexa-language-list-view{% endblock %}
@@ -45,140 +41,11 @@
 {% endblock %}
 
 {% block content %}
-    <section class="container ibexa-container">
-        {% set body_rows = [] %}
-        {% for language in pager.currentPageResults %}
-            {% set body_row_cols = [] %}
-
-            {% set col_raw %}
-                {% if can_administrate %}
-                    {{ form_widget(form_languages_delete.languages[language.id]) }}
-                {% else %}
-                    {% do form_languages_delete.languages.setRendered %}
-                {% endif %}
-            {% endset %}
-            {% set body_row_cols = body_row_cols|merge([{
-                has_checkbox: true,
-                content: col_raw,
-                raw: true,
-            }]) %}
-
-            {% set col_raw %}
-                <a href="{{ path( 'ibexa.language.view', {'languageId': language.id} ) }}">
-                    {{ language.name }}
-                </a>
-            {% endset %}
-            {% set body_row_cols = body_row_cols|merge([{
-                content: col_raw,
-                raw: true,
-            }]) %}
-
-            {% set body_row_cols = body_row_cols|merge([
-                { content: language.languageCode },
-                { content: language.id },
-            ]) %}
-
-            {% set col_raw %}
-                <div class="form-check">
-                    <input
-                        type="checkbox"
-                        title="{{ language.enabled ? 'language.enabled'|trans|desc('Enabled')  : 'language.disabled'|trans|desc('Disabled')  }}"
-                        class="ibexa-input ibexa-input--checkbox form-check-input"
-                        disabled
-                        {% if language.enabled %}checked{% endif %}
-                    >
-                </div>
-            {% endset %}
-            {% set body_row_cols = body_row_cols|merge([{
-                content: col_raw,
-                center_content: true,
-                raw: true,
-            }]) %}
-
-            {% set col_raw %}
-                {% if can_administrate %}
-                    <a
-                        title="{{ 'language.edit'|trans|desc('Edit') }}"
-                        href="{{ path('ibexa.language.edit', {'languageId': language.id}) }}"
-                        class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text"
-                    >
-                        <svg class="ibexa-icon ibexa-icon--small-medium">
-                            <use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
-                        </svg>
-                    </a>
-                {% endif %}
-            {% endset %}
-            {% set body_row_cols = body_row_cols|merge([{
-                has_action_btns: true,
-                content: col_raw,
-                raw: true,
-            }]) %}
-
-            {% set body_rows = body_rows|merge([{ cols: body_row_cols }]) %}
-        {% endfor %}
-
-        {% embed '@ibexadesign/ui/component/table/table.html.twig' with {
-            headline: custom_results_headline ?? results_headline(pager.getNbResults()),
-            head_cols: [
-                { has_checkbox: true },
-                { content: 'language.name'|trans|desc('Name') },
-                { content: 'language.code'|trans|desc('Code') },
-                { content: 'language.id'|trans|desc('ID') },
-                {
-                    content: 'language.enabled'|trans|desc('Enabled'),
-                    center_content: true,
-                },
-                { },
-            ],
-            body_rows,
-        } %}
-            {% block header %}
-                {% embed '@ibexadesign/ui/component/table/table_header.html.twig' %}
-                    {% block actions %}
-                        {% if can_administrate %}
-                            {% set modal_data_target = 'delete-languages-modal' %}
-                            <button
-                                id="delete-languages"
-                                type="button"
-                                class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small"
-                                disabled
-                                data-bs-toggle="modal"
-                                data-bs-target="#{{ modal_data_target }}"
-                            >
-                                <svg class="ibexa-icon ibexa-icon--small-medium ibexa-icon--trash">
-                                    <use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
-                                </svg>
-                                <span class="ibexa-btn__small">
-                                    {{ 'language.delete'|trans|desc('Delete') }}
-                                </span>
-                            </button>
-                            {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with {
-                                'id': modal_data_target,
-                                'message': 'language.modal.message'|trans|desc(
-                                    'Delete the languages?'
-                                ),
-                                'data_click': '#languages_delete_delete',
-                            }%}
-                        {% endif %}
-                    {% endblock %}
-                {% endembed %}
-            {% endblock %}
-
-            {% block between_header_and_table %}
-                {{ form_start(form_languages_delete, {
-                    'action': path('ibexa.language.bulk_delete'),
-                    'attr': { 'class': 'ibexa-toggle-btn-state', 'data-toggle-button-id': '#delete-languages' }
-                }) }}
-            {% endblock %}
-        {% endembed %}
-        {{ form_end(form_languages_delete) }}
-
-        {% if pager.haveToPaginate %}
-            {% include '@ibexadesign/ui/pagination.html.twig' with {
-                'pager': pager
-            } %}
-        {% endif %}
-    </section>
+    {{ ibexa_twig_component_group('admin-ui-languages-tab-groups', {
+        pager: pager,
+        form_languages_delete: form_languages_delete,
+        can_administrate: can_administrate,
+    }) }}
 {% endblock %}
 
 {% block javascripts %}
diff --git a/src/bundle/Resources/views/themes/admin/language/tab/languages.html.twig b/src/bundle/Resources/views/themes/admin/language/tab/languages.html.twig
new file mode 100644
index 0000000000..ab47eae92b
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/language/tab/languages.html.twig
@@ -0,0 +1,138 @@
+{% trans_default_domain 'ibexa_language' %}
+
+{% from '@ibexadesign/ui/component/macros.html.twig' import results_headline %}
+
+{% form_theme form_languages_delete '@ibexadesign/ui/form_fields.html.twig' %}
+
+<section class="container ibexa-container">
+    {% set body_rows = [] %}
+    {% for language in pager.currentPageResults %}
+        {% set body_row_cols = [] %}
+
+        {% set col_raw %}
+            {% if can_administrate %}
+                {{ form_widget(form_languages_delete.languages[language.id]) }}
+            {% else %}
+                {% do form_languages_delete.languages.setRendered %}
+            {% endif %}
+        {% endset %}
+        {% set body_row_cols = body_row_cols|merge([{
+            has_checkbox: true,
+            content: col_raw,
+            raw: true,
+        }]) %}
+
+        {% set col_raw %}
+            <a href="{{ path('ibexa.language.view', {'languageId': language.id}) }}">
+                {{ language.name }}
+            </a>
+        {% endset %}
+        {% set body_row_cols = body_row_cols|merge([{
+            content: col_raw,
+            raw: true,
+        }]) %}
+
+        {% set body_row_cols = body_row_cols|merge([
+            { content: language.languageCode },
+            { content: language.id },
+        ]) %}
+
+        {% set col_raw %}
+            <div class="form-check">
+                <input
+                    type="checkbox"
+                    title="{{ language.enabled ? 'language.enabled'|trans|desc('Enabled') : 'language.disabled'|trans|desc('Disabled') }}"
+                    class="ibexa-input ibexa-input--checkbox form-check-input"
+                    disabled
+                    {% if language.enabled %}checked{% endif %}
+                >
+            </div>
+        {% endset %}
+        {% set body_row_cols = body_row_cols|merge([{
+            content: col_raw,
+            center_content: true,
+            raw: true,
+        }]) %}
+
+        {% set col_raw %}
+            {% if can_administrate %}
+                <a
+                    title="{{ 'language.edit'|trans|desc('Edit') }}"
+                    href="{{ path('ibexa.language.edit', {'languageId': language.id}) }}"
+                    class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text"
+                >
+                    <svg class="ibexa-icon ibexa-icon--small-medium">
+                        <use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
+                    </svg>
+                </a>
+            {% endif %}
+        {% endset %}
+        {% set body_row_cols = body_row_cols|merge([{
+            has_action_btns: true,
+            content: col_raw,
+            raw: true,
+        }]) %}
+
+        {% set body_rows = body_rows|merge([{ cols: body_row_cols }]) %}
+    {% endfor %}
+
+    {% embed '@ibexadesign/ui/component/table/table.html.twig' with {
+        headline: custom_results_headline ?? results_headline(pager.getNbResults()),
+        head_cols: [
+            { has_checkbox: true },
+            { content: 'language.name'|trans|desc('Name') },
+            { content: 'language.code'|trans|desc('Code') },
+            { content: 'language.id'|trans|desc('ID') },
+            {
+                content: 'language.enabled'|trans|desc('Enabled'),
+                center_content: true,
+            },
+            {},
+        ],
+        body_rows,
+    } %}
+        {% block header %}
+            {% embed '@ibexadesign/ui/component/table/table_header.html.twig' %}
+                {% block actions %}
+                    {% if can_administrate %}
+                        {% set modal_data_target = 'delete-languages-modal' %}
+                        <button
+                            id="delete-languages"
+                            type="button"
+                            class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small"
+                            disabled
+                            data-bs-toggle="modal"
+                            data-bs-target="#{{ modal_data_target }}"
+                        >
+                            <svg class="ibexa-icon ibexa-icon--small-medium ibexa-icon--trash">
+                                <use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
+                            </svg>
+                            <span class="ibexa-btn__small">
+                                {{ 'language.delete'|trans|desc('Delete') }}
+                            </span>
+                        </button>
+                        {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with {
+                            id: modal_data_target,
+                            message: 'language.modal.message'|trans|desc('Delete the languages?'),
+                            data_click: '#languages_delete_delete',
+                        } %}
+                    {% endif %}
+                {% endblock %}
+            {% endembed %}
+        {% endblock %}
+
+        {% block between_header_and_table %}
+            {{ form_start(form_languages_delete, {
+                action: path('ibexa.language.bulk_delete'),
+                attr: {'class': 'ibexa-toggle-btn-state', 'data-toggle-button-id': '#delete-languages'}
+            }) }}
+        {% endblock %}
+    {% endembed %}
+    {{ form_end(form_languages_delete) }}
+
+    {% if pager.haveToPaginate %}
+        {% include '@ibexadesign/ui/pagination.html.twig' with {
+            pager: pager,
+        } %}
+    {% endif %}
+</section>
diff --git a/src/bundle/Resources/views/themes/admin/ui/tab/languages.html.twig b/src/bundle/Resources/views/themes/admin/ui/tab/languages.html.twig
new file mode 100644
index 0000000000..01a019ced5
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/tab/languages.html.twig
@@ -0,0 +1,13 @@
+{% set tabs_to_show = tabs|map((tab, index) => {
+    id: group ~ '-' ~ tab.identifier,
+    label: tab.name,
+    content: tab.view,
+    active: index == 0,
+}) %}
+{% include '@ibexadesign/ui/component/tab/tabs.html.twig' with {
+    tabs: tabs_to_show,
+} %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('ibexa-admin-ui-tabs-js', null, 'ibexa') }}
+{% endblock %}
diff --git a/src/lib/Tab/Language/LanguagesTab.php b/src/lib/Tab/Language/LanguagesTab.php
new file mode 100644
index 0000000000..6a9a4431cc
--- /dev/null
+++ b/src/lib/Tab/Language/LanguagesTab.php
@@ -0,0 +1,43 @@
+<?php
+
+/**
+ * @copyright Copyright (C) Ibexa AS. All rights reserved.
+ * @license For full copyright and license information view LICENSE file distributed with this source code.
+ */
+declare(strict_types=1);
+
+namespace Ibexa\AdminUi\Tab\Language;
+
+use Ibexa\Contracts\AdminUi\Tab\AbstractTab;
+use Ibexa\Contracts\AdminUi\Tab\OrderedTabInterface;
+use JMS\TranslationBundle\Annotation\Desc;
+
+class LanguagesTab extends AbstractTab implements OrderedTabInterface
+{
+    public function getIdentifier(): string
+    {
+        return 'languages';
+    }
+
+    public function getName(): string
+    {
+        return /** @Desc("Languages") */
+            $this->translator->trans('language.list', [], 'ibexa_language');
+    }
+
+    public function getOrder(): int
+    {
+        return 10;
+    }
+
+    /**
+     * @param array<string, mixed> $parameters
+     */
+    public function renderView(array $parameters): string
+    {
+        return $this->twig->render(
+            '@ibexadesign/language/tab/languages.html.twig',
+            $parameters
+        );
+    }
+}