diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index f7cf842fc..2d6959f41 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -10,7 +10,6 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -18,6 +17,12 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
 interface Props extends SmartSearchProps, OrderingProps {
   filters?: object
 
@@ -88,22 +93,24 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui six wide field">
-          <label for="channel-search">{{ t('components.manage.ChannelsTable.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="channel-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui six wide field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            id="channel-search"
+            ref="search"
+            name="search"
+            search
+            :label="t('components.manage.ChannelsTable.label.search')"
+            v-model="query"
+            :placeholder="labels.searchPlaceholder"
+          />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="channel-category">{{ t('components.manage.ChannelsTable.label.category') }}</label>
           <select
@@ -157,108 +164,99 @@ const labels = computed(() => ({
             </option>
           </select>
         </div>
-      </div>
-    </div>
-    <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <action-table
-        v-if="result"
-        :objects-data="result"
-        :actions="[]"
-        action-url="manage/library/artists/action/"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.ChannelsTable.table.channel.header.name') }}
-          </th>
-          <th>
-            {{ t('components.manage.ChannelsTable.table.channel.header.account') }}
-          </th>
-          <th>
-            {{ t('components.manage.ChannelsTable.table.channel.header.domain') }}
-          </th>
-          <th>
-            {{ t('components.manage.ChannelsTable.table.channel.header.albums') }}
-          </th>
-          <th>
-            {{ t('components.manage.ChannelsTable.table.channel.header.tracks') }}
-          </th>
-          <th>
-            {{ t('components.manage.ChannelsTable.table.channel.header.creationDate') }}
-          </th>
-        </template>
-        <template
-          #row-cells="scope"
-        >
-          <td>
-            <router-link :to="{name: 'manage.channels.detail', params: {id: scope.obj.actor.full_username }}">
-              {{ scope.obj.artist.name }}
-            </router-link>
-          </td>
-          <td>
-            <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.attributed_to.full_username }}">
-              <i class="wrench icon" />
-              <span class="visually-hidden">{{ labels.openModeration }}</span>
-            </router-link>
-            <a
-              href=""
-              class="discrete link"
-              @click.prevent="addSearchToken('account', scope.obj.attributed_to.full_username)"
-            >{{ scope.obj.attributed_to.preferred_username }}</a>
-          </td>
-          <td>
-            <template v-if="!scope.obj.is_local">
-              <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.attributed_to.domain }}">
-                <i class="wrench icon" />
-                <span class="visually-hidden">{{ labels.openModeration }}</span>
-              </router-link>
-              <a
-                href=""
-                class="discrete link"
-                @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)"
-              >{{ scope.obj.attributed_to.domain }}</a>
-            </template>
-            <a
-              v-else
-              href=""
-              class="ui tiny accent icon link label"
-              @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)"
-            >
-              <i class="home icon" />
-              {{ t('components.manage.ChannelsTable.link.local') }}
-            </a>
-          </td>
-          <td>
-            {{ scope.obj.artist.albums_count }}
-          </td>
-          <td>
-            {{ scope.obj.artist.tracks_count }}
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-        </template>
-      </action-table>
-    </div>
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        v-model:current="page"
-        :compact="true"
-        :paginate-by="paginateBy"
-        :total="result.count"
-      />
-
-      <span v-if="result && result.results.length > 0">
-        {{ t('components.manage.ChannelsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <Loader v-if="isLoading" />
+  <action-table
+    v-if="result"
+    :objects-data="result"
+    :actions="[]"
+    action-url="manage/library/artists/action/"
+    :filters="actionFilters"
+    @action-launched="fetchData"
+  >
+    <template #header-cells>
+      <th>
+        {{ t('components.manage.ChannelsTable.table.channel.header.name') }}
+      </th>
+      <th>
+        {{ t('components.manage.ChannelsTable.table.channel.header.account') }}
+      </th>
+      <th>
+        {{ t('components.manage.ChannelsTable.table.channel.header.domain') }}
+      </th>
+      <th>
+        {{ t('components.manage.ChannelsTable.table.channel.header.albums') }}
+      </th>
+      <th>
+        {{ t('components.manage.ChannelsTable.table.channel.header.tracks') }}
+      </th>
+      <th>
+        {{ t('components.manage.ChannelsTable.table.channel.header.creationDate') }}
+      </th>
+    </template>
+    <template
+      #row-cells="scope"
+    >
+      <td>
+        <router-link :to="{name: 'manage.channels.detail', params: {id: scope.obj.actor.full_username }}">
+          {{ scope.obj.artist.name }}
+        </router-link>
+      </td>
+      <td>
+        <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.attributed_to.full_username }}">
+          <i class="wrench icon" />
+          <span class="visually-hidden">{{ labels.openModeration }}</span>
+        </router-link>
+        <a
+          href=""
+          class="discrete link"
+          @click.prevent="addSearchToken('account', scope.obj.attributed_to.full_username)"
+        >{{ scope.obj.attributed_to.preferred_username }}</a>
+      </td>
+      <td>
+        <template v-if="!scope.obj.is_local">
+          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.attributed_to.domain }}">
+            <i class="wrench icon" />
+            <span class="visually-hidden">{{ labels.openModeration }}</span>
+          </router-link>
+          <a
+            href=""
+            class="discrete link"
+            @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)"
+          >{{ scope.obj.attributed_to.domain }}</a>
+        </template>
+        <a
+          v-else
+          href=""
+          class="ui tiny accent icon link label"
+          @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)"
+        >
+          <i class="home icon" />
+          {{ t('components.manage.ChannelsTable.link.local') }}
+        </a>
+      </td>
+      <td>
+        {{ scope.obj.artist.albums_count }}
+      </td>
+      <td>
+        {{ scope.obj.artist.tracks_count }}
+      </td>
+      <td>
+        <human-date :date="scope.obj.creation_date" />
+      </td>
+    </template>
+  </action-table>
+  <div>
+    <Pagination
+      v-if="result && result.count > paginateBy"
+      v-model:page="page"
+      :pages="Math.ceil(result.count / paginateBy)"
+    />
+
+    <span v-if="result && result.results.length > 0">
+      {{ t('components.manage.ChannelsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+    </span>
+  </div>
 </template>
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index f0c9272f9..93592a8de 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -10,7 +10,6 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -18,6 +17,12 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
 interface Props extends SmartSearchProps, OrderingProps {
   filters?: object
 
@@ -100,22 +105,24 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui six wide field">
-          <label for="albums-search">{{ t('components.manage.library.AlbumsTable.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="albums-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui six wide field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            id="albums-search"
+            ref="search"
+            name="search"
+            search
+            :label="t('components.manage.library.AlbumsTable.label.search')"
+            v-model="query"
+            :placeholder="labels.searchPlaceholder"
+          />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="albums-ordering">{{ t('components.manage.library.AlbumsTable.ordering.label') }}</label>
           <select
@@ -146,115 +153,104 @@ const labels = computed(() => ({
             </option>
           </select>
         </div>
-      </div>
-    </div>
-    <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <action-table
-        v-if="result"
-        :objects-data="result"
-        :actions="actions"
-        action-url="manage/library/albums/action/"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.library.AlbumsTable.table.album.header.name') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.AlbumsTable.table.album.header.artist') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.AlbumsTable.table.album.header.domain') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.AlbumsTable.table.album.header.tracks') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.AlbumsTable.table.album.header.releaseDate') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.AlbumsTable.table.album.header.creationDate') }}
-          </th>
-        </template>
-        <template
-          #row-cells="scope"
-        >
-          <td>
-            <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.id }}">
-              {{ scope.obj.title }}
-            </router-link>
-          </td>
-          <td>
-            <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
-              <i class="wrench icon" />
-              <span class="visually-hidden">{{ labels.openModeration }}</span>
-            </router-link>
-            <a
-              href=""
-              class="discrete link"
-              :title="scope.obj.artist.name"
-              @click.prevent="addSearchToken('artist', scope.obj.artist.name)"
-            >{{ scope.obj.artist.name }}</a>
-          </td>
-          <td>
-            <template v-if="!scope.obj.is_local">
-              <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-                <i class="wrench icon" />
-                <span class="visually-hidden">{{ labels.openModeration }}</span>
-              </router-link>
-              <a
-                href=""
-                class="discrete link"
-                @click.prevent="addSearchToken('domain', scope.obj.domain)"
-              >{{ scope.obj.domain }}</a>
-            </template>
-            <a
-              v-else
-              href=""
-              class="ui tiny accent icon link label"
-              @click.prevent="addSearchToken('domain', scope.obj.domain)"
-            >
-              <i class="home icon" />
-              {{ t('components.manage.library.AlbumsTable.link.local') }}
-            </a>
-          </td>
-          <td>
-            {{ scope.obj.tracks_count }}
-          </td>
-          <td>
-            <human-date
-              v-if="scope.obj.release_date"
-              :date="scope.obj.release_date"
-            />
-            <span v-else>
-              {{ t('components.manage.library.AlbumsTable.notApplicable') }}
-            </span>
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-        </template>
-      </action-table>
-    </div>
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        v-model:current="page"
-        :compact="true"
-        :paginate-by="paginateBy"
-        :total="result.count"
-      />
-
-      <span v-if="result && result.results.length > 0">
-        {{ t('components.manage.library.AlbumsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <Loader v-if="isLoading" />
+  <action-table
+    v-if="result"
+    :objects-data="result"
+    :actions="actions"
+    action-url="manage/library/albums/action/"
+    :filters="actionFilters"
+    @action-launched="fetchData"
+  >
+    <template #header-cells>
+      <th>
+        {{ t('components.manage.library.AlbumsTable.table.album.header.name') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.AlbumsTable.table.album.header.artist') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.AlbumsTable.table.album.header.domain') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.AlbumsTable.table.album.header.tracks') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.AlbumsTable.table.album.header.releaseDate') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.AlbumsTable.table.album.header.creationDate') }}
+      </th>
+    </template>
+    <template
+      #row-cells="scope"
+    >
+      <td>
+        <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.id }}">
+          {{ scope.obj.title }}
+        </router-link>
+      </td>
+      <td>
+        <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
+          <i class="wrench icon" />
+          <span class="visually-hidden">{{ labels.openModeration }}</span>
+        </router-link>
+        <a
+          href=""
+          class="discrete link"
+          :title="scope.obj.artist.name"
+          @click.prevent="addSearchToken('artist', scope.obj.artist.name)"
+        >{{ scope.obj.artist.name }}</a>
+      </td>
+      <td>
+        <template v-if="!scope.obj.is_local">
+          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
+            <i class="wrench icon" />
+            <span class="visually-hidden">{{ labels.openModeration }}</span>
+          </router-link>
+          <a
+            href=""
+            class="discrete link"
+            @click.prevent="addSearchToken('domain', scope.obj.domain)"
+          >{{ scope.obj.domain }}</a>
+        </template>
+        <a
+          v-else
+          href=""
+          class="ui tiny accent icon link label"
+          @click.prevent="addSearchToken('domain', scope.obj.domain)"
+        >
+          <i class="home icon" />
+          {{ t('components.manage.library.AlbumsTable.link.local') }}
+        </a>
+      </td>
+      <td>
+        {{ scope.obj.tracks_count }}
+      </td>
+      <td>
+        <human-date
+          v-if="scope.obj.release_date"
+          :date="scope.obj.release_date"
+        />
+        <span v-else>
+          {{ t('components.manage.library.AlbumsTable.notApplicable') }}
+        </span>
+      </td>
+      <td>
+        <human-date :date="scope.obj.creation_date" />
+      </td>
+    </template>
+  </action-table>
+  <Pagination
+    v-if="result && result.count > paginateBy"
+    v-model:page="page"
+    :pages="Math.ceil(result.count / paginateBy)"
+  />
+
+  <span v-if="result && result.results.length > 0">
+    {{ t('components.manage.library.AlbumsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+  </span>
 </template>
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index b569649f4..f70f333ac 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -10,7 +10,6 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -18,6 +17,12 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
 interface Props extends SmartSearchProps, OrderingProps {
   filters?: object
 
@@ -104,22 +109,24 @@ const getUrl = (artist: { channel?: number; id: number }) => {
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui six wide field">
-          <label for="artists-serarch">{{ t('components.manage.library.ArtistsTable.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="artists-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui six wide field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            id="artists-search"
+            ref="search"
+            name="search"
+            search
+            :label="t('components.manage.library.ArtistsTable.label.search')"
+            v-model="query"
+            :placeholder="labels.searchPlaceholder"
+          />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="artists-category">{{ t('components.manage.library.ArtistsTable.label.category') }}</label>
           <select
@@ -173,94 +180,83 @@ const getUrl = (artist: { channel?: number; id: number }) => {
             </option>
           </select>
         </div>
-      </div>
-    </div>
-    <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <action-table
-        v-if="result"
-        :objects-data="result"
-        :actions="actions"
-        action-url="manage/library/artists/action/"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.library.ArtistsTable.table.artist.header.name') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.ArtistsTable.table.artist.header.domain') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.ArtistsTable.table.artist.header.albums') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.ArtistsTable.table.artist.header.tracks') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.ArtistsTable.table.artist.header.creationDate') }}
-          </th>
-        </template>
-        <template
-          #row-cells="scope"
-        >
-          <td>
-            <router-link :to="getUrl(scope.obj)">
-              {{ scope.obj.name }}
-            </router-link>
-          </td>
-          <td>
-            <template v-if="!scope.obj.is_local">
-              <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-                <i class="wrench icon" />
-              </router-link>
-              <a
-                href=""
-                class="discrete link"
-                :title="scope.obj.domain"
-                @click.prevent="addSearchToken('domain', scope.obj.domain)"
-              >{{ scope.obj.domain }}</a>
-            </template>
-            <a
-              v-else
-              href=""
-              class="ui tiny accent icon link label"
-              @click.prevent="addSearchToken('domain', scope.obj.domain)"
-            >
-              <i class="home icon" />
-              {{ t('components.manage.library.ArtistsTable.link.local') }}
-            </a>
-          </td>
-          <td>
-            {{ scope.obj.albums_count }}
-          </td>
-          <td>
-            {{ scope.obj.tracks_count }}
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-        </template>
-      </action-table>
-    </div>
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        v-model:current="page"
-        :compact="true"
-        :paginate-by="paginateBy"
-        :total="result.count"
-      />
-
-      <span v-if="result && result.results.length > 0">
-        {{ t('components.manage.library.ArtistsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <Loader v-if="isLoading" />
+  <action-table
+    v-if="result"
+    :objects-data="result"
+    :actions="actions"
+    action-url="manage/library/artists/action/"
+    :filters="actionFilters"
+    @action-launched="fetchData"
+  >
+    <template #header-cells>
+      <th>
+        {{ t('components.manage.library.ArtistsTable.table.artist.header.name') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.ArtistsTable.table.artist.header.domain') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.ArtistsTable.table.artist.header.albums') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.ArtistsTable.table.artist.header.tracks') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.ArtistsTable.table.artist.header.creationDate') }}
+      </th>
+    </template>
+    <template
+      #row-cells="scope"
+    >
+      <td>
+        <router-link :to="getUrl(scope.obj)">
+          {{ scope.obj.name }}
+        </router-link>
+      </td>
+      <td>
+        <template v-if="!scope.obj.is_local">
+          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
+            <i class="wrench icon" />
+          </router-link>
+          <a
+            href=""
+            class="discrete link"
+            :title="scope.obj.domain"
+            @click.prevent="addSearchToken('domain', scope.obj.domain)"
+          >{{ scope.obj.domain }}</a>
+        </template>
+        <a
+          v-else
+          href=""
+          class="ui tiny accent icon link label"
+          @click.prevent="addSearchToken('domain', scope.obj.domain)"
+        >
+          <i class="home icon" />
+          {{ t('components.manage.library.ArtistsTable.link.local') }}
+        </a>
+      </td>
+      <td>
+        {{ scope.obj.albums_count }}
+      </td>
+      <td>
+        {{ scope.obj.tracks_count }}
+      </td>
+      <td>
+        <human-date :date="scope.obj.creation_date" />
+      </td>
+    </template>
+  </action-table>
+  <Pagination
+    v-if="result && result.count > paginateBy"
+    v-model:page="page"
+    :pages="Math.ceil(result.count / paginateBy)"
+  />
+
+  <span v-if="result && result.results.length > 0">
+    {{ t('components.manage.library.ArtistsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+  </span>
 </template>
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index 58d190ce8..9e73be3fc 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/front/src/components/manage/library/EditsCardList.vue
@@ -12,7 +12,6 @@ import { uniq } from 'lodash-es'
 
 import axios from 'axios'
 
-import Pagination from '~/components/vui/Pagination.vue'
 import EditCard from '~/components/library/EditCard.vue'
 
 import useEditConfigs from '~/composables/moderation/useEditConfigs'
@@ -22,6 +21,13 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 
+import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/Section.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
 interface Props extends SmartSearchProps, OrderingProps {
   filters?: object
 
@@ -159,28 +165,36 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
 </script>
 
 <template>
-  <div class="ui text container">
-    <slot />
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui field">
-          <label for="search-edits">{{ t('components.manage.library.EditsCardList.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="search-edits"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
-        <div class="field">
-          <label for="edit-status">{{ t('components.manage.library.EditsCardList.label.status') }}</label>
+  <slot />
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            search
+            id="search-edits"
+            ref="search"
+            name="search"
+            v-model="query"
+            :label="t('components.manage.library.EditsCardList.label.search')"
+            autofocus
+            :placeholder="labels.searchPlaceholder"
+          />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
+        <Layout
+          stack
+          no-gap
+          label
+          for="edit-status"
+        >
+          <span class="label">{{ t('components.manage.library.EditsCardList.label.status') }}</span>
           <select
             id="edit-status"
-            class="ui dropdown"
+            class="dropdown"
             :value="getTokenValue('is_approved', '')"
             @change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)"
           >
@@ -197,7 +211,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
               {{ t('components.manage.library.EditsCardList.option.rejected') }}
             </option>
           </select>
-        </div>
+        </Layout>
         <div class="field">
           <label for="edit-ordering">{{ t('components.manage.library.EditsCardList.ordering.label') }}</label>
           <select
@@ -229,44 +243,35 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
             </option>
           </select>
         </div>
-      </div>
-    </div>
-    <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <div v-else-if="(result?.count ?? 0) > 0">
-        <edit-card
-          v-for="obj in result?.results ?? []"
-          :key="obj.uuid"
-          :obj="obj"
-          :current-state="getCurrentState(obj.target)"
-          @deleted="handle('delete', obj.uuid, false)"
-          @approved="handle('approved', obj.uuid, $event)"
-        />
-      </div>
-      <empty-state
-        v-else
-        :refresh="true"
-        @refresh="fetchData()"
-      />
-    </div>
-    <div class="ui hidden divider" />
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        v-model:current="page"
-        :compact="true"
-        :paginate-by="paginateBy"
-        :total="result.count"
-      />
-
-      <span v-if="result && result.results.length > 0">
-        {{ t('components.manage.library.EditsCardList.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <Loader v-if="isLoading" />
+  <Section
+    v-else-if="(result?.count ?? 0) > 0"
+    small-items
+  >
+    <edit-card
+      v-for="obj in result?.results ?? []"
+      :key="obj.uuid"
+      :obj="obj"
+      :current-state="getCurrentState(obj.target)"
+      @deleted="handle('delete', obj.uuid, false)"
+      @approved="handle('approved', obj.uuid, $event)"
+    />
+  </Section>
+  <empty-state
+    v-else
+    :refresh="true"
+    @refresh="fetchData()"
+  />
+  <Pagination
+  v-if="result && result.count > paginateBy"
+  v-model:page="page"
+  :pages="Math.ceil(result.count / paginateBy)"
+  />
+
+  <span v-if="result && result.results.length > 0">
+    {{ t('components.manage.library.EditsCardList.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+  </span>
 </template>
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index 1bc5314dc..2ccb5c05c 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -10,7 +10,6 @@ import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
@@ -18,6 +17,12 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
 interface Props extends SmartSearchProps, OrderingProps {
   filters?: object
 
@@ -103,22 +108,24 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui six wide field">
-          <label for="libraries-search">{{ t('components.manage.library.LibrariesTable.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="libraries-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui six wide field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            id="libraries-search"
+            ref="search"
+            name="search"
+            search
+            :label="t('components.manage.library.LibrariesTable.label.search')"
+            v-model="query"
+            :placeholder="labels.searchPlaceholder"
+          />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="libraries-visibility">{{ t('components.manage.library.LibrariesTable.label.visibility') }}</label>
           <select
@@ -172,119 +179,108 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             </option>
           </select>
         </div>
-      </div>
-    </div>
-    <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <action-table
-        v-if="result"
-        :objects-data="result"
-        :actions="actions"
-        action-url="manage/library/libraries/action/"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.library.LibrariesTable.table.library.header.name') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.LibrariesTable.table.library.header.account') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.LibrariesTable.table.library.header.domain') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.LibrariesTable.table.library.header.visibility') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.LibrariesTable.table.library.header.uploads') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.LibrariesTable.table.library.header.followers') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.LibrariesTable.table.library.header.creationDate') }}
-          </th>
-        </template>
-        <template #row-cells="scope">
-          <td>
-            <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.uuid }}">
-              {{ scope.obj.name }}
-            </router-link>
-          </td>
-          <td>
-            <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.actor.full_username }}">
-              <i class="wrench icon" />
-            </router-link>
-            <a
-              href=""
-              class="discrete link"
-              :title="scope.obj.actor.full_username"
-              @click.prevent="addSearchToken('account', scope.obj.actor.full_username)"
-            >{{ scope.obj.actor.preferred_username }}</a>
-          </td>
-          <td>
-            <template v-if="!scope.obj.is_local">
-              <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-                <i class="wrench icon" />
-              </router-link>
-              <a
-                href=""
-                class="discrete link"
-                :title="scope.obj.domain"
-                @click.prevent="addSearchToken('domain', scope.obj.domain)"
-              >{{ scope.obj.domain }}</a>
-            </template>
-            <a
-              v-else
-              href=""
-              class="ui tiny accent icon link label"
-              @click.prevent="addSearchToken('domain', scope.obj.domain)"
-            >
-              <i class="home icon" />
-              {{ t('components.manage.library.LibrariesTable.link.local') }}
-            </a>
-          </td>
-          <td>
-            <a
-              href=""
-              class="discrete link"
-              :title="getPrivacyLevelChoice(scope.obj.privacy_level)"
-              @click.prevent="addSearchToken('privacy_level', scope.obj.privacy_level)"
-            >
-              {{ getPrivacyLevelChoice(scope.obj.privacy_level) }}
-            </a>
-          </td>
-          <td>
-            {{ scope.obj.uploads_count }}
-          </td>
-          <td>
-            {{ scope.obj.followers_count }}
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-        </template>
-      </action-table>
-    </div>
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        v-model:current="page"
-        :compact="true"
-        :paginate-by="paginateBy"
-        :total="result.count"
-      />
-
-      <span v-if="result && result.results.length > 0">
-        {{ t('components.manage.library.LibrariesTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <Loader v-if="isLoading" />
+  <action-table
+    v-if="result"
+    :objects-data="result"
+    :actions="actions"
+    action-url="manage/library/libraries/action/"
+    :filters="actionFilters"
+    @action-launched="fetchData"
+  >
+    <template #header-cells>
+      <th>
+        {{ t('components.manage.library.LibrariesTable.table.library.header.name') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.LibrariesTable.table.library.header.account') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.LibrariesTable.table.library.header.domain') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.LibrariesTable.table.library.header.visibility') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.LibrariesTable.table.library.header.uploads') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.LibrariesTable.table.library.header.followers') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.LibrariesTable.table.library.header.creationDate') }}
+      </th>
+    </template>
+    <template #row-cells="scope">
+      <td>
+        <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.uuid }}">
+          {{ scope.obj.name }}
+        </router-link>
+      </td>
+      <td>
+        <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.actor.full_username }}">
+          <i class="wrench icon" />
+        </router-link>
+        <a
+          href=""
+          class="discrete link"
+          :title="scope.obj.actor.full_username"
+          @click.prevent="addSearchToken('account', scope.obj.actor.full_username)"
+        >{{ scope.obj.actor.preferred_username }}</a>
+      </td>
+      <td>
+        <template v-if="!scope.obj.is_local">
+          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
+            <i class="wrench icon" />
+          </router-link>
+          <a
+            href=""
+            class="discrete link"
+            :title="scope.obj.domain"
+            @click.prevent="addSearchToken('domain', scope.obj.domain)"
+          >{{ scope.obj.domain }}</a>
+        </template>
+        <a
+          v-else
+          href=""
+          class="ui tiny accent icon link label"
+          @click.prevent="addSearchToken('domain', scope.obj.domain)"
+        >
+          <i class="home icon" />
+          {{ t('components.manage.library.LibrariesTable.link.local') }}
+        </a>
+      </td>
+      <td>
+        <a
+          href=""
+          class="discrete link"
+          :title="getPrivacyLevelChoice(scope.obj.privacy_level)"
+          @click.prevent="addSearchToken('privacy_level', scope.obj.privacy_level)"
+        >
+          {{ getPrivacyLevelChoice(scope.obj.privacy_level) }}
+        </a>
+      </td>
+      <td>
+        {{ scope.obj.uploads_count }}
+      </td>
+      <td>
+        {{ scope.obj.followers_count }}
+      </td>
+      <td>
+        <human-date :date="scope.obj.creation_date" />
+      </td>
+    </template>
+  </action-table>
+  <Pagination
+    v-if="result && result.count > paginateBy"
+    v-model:page="page"
+    :pages="Math.ceil(result.count / paginateBy)"
+  />
+
+  <span v-if="result && result.results.length > 0">
+    {{ t('components.manage.library.LibrariesTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+  </span>
 </template>
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index 062c4721e..3bd1c5d4d 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -12,7 +12,6 @@ import axios from 'axios'
 
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
@@ -20,6 +19,12 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
 interface Props extends SmartSearchProps, OrderingProps {
   filters?: object
 
@@ -105,22 +110,24 @@ const showUploadDetailModal = ref(false)
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui six wide field">
-          <label for="tags-search">{{ t('components.manage.library.TagsTable.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="tags-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui six wide field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            id="tags-search"
+            ref="search"
+            name="search"
+            search
+            :label="t('components.manage.library.TagsTable.label.search')"
+            v-model="query"
+            :placeholder="labels.searchPlaceholder"
+          />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="tags-ordering">{{ t('components.manage.library.TagsTable.ordering.label') }}</label>
           <select
@@ -152,81 +159,70 @@ const showUploadDetailModal = ref(false)
             </option>
           </select>
         </div>
-      </div>
-    </div>
-    <import-status-modal
-      v-if="detailedUpload"
-      v-model:show="showUploadDetailModal"
-      :upload="detailedUpload"
-    />
-    <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <action-table
-        v-if="result"
-        :objects-data="result"
-        :actions="actions"
-        action-url="manage/tags/action/"
-        id-field="name"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.library.TagsTable.table.tag.header.name') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TagsTable.table.tag.header.artists') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TagsTable.table.tag.header.albums') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TagsTable.table.tag.header.tracks') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TagsTable.table.tag.header.creationDate') }}
-          </th>
-        </template>
-        <template
-          #row-cells="scope"
-        >
-          <td>
-            <router-link :to="{name: 'manage.library.tags.detail', params: {id: scope.obj.name }}">
-              {{ truncate(scope.obj.name, 30, undefined, true) }}
-            </router-link>
-          </td>
-          <td>
-            {{ scope.obj.artists_count }}
-          </td>
-          <td>
-            {{ scope.obj.albums_count }}
-          </td>
-          <td>
-            {{ scope.obj.tracks_count }}
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-        </template>
-      </action-table>
-    </div>
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        v-model:current="page"
-        :compact="true"
-        :paginate-by="paginateBy"
-        :total="result.count"
-      />
-
-      <span v-if="result && result.results.length > 0">
-        {{ t('components.manage.library.TagsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <import-status-modal
+    v-if="detailedUpload"
+    v-model:show="showUploadDetailModal"
+    :upload="detailedUpload"
+  />
+  <Loader v-if="isLoading" />
+  <action-table
+    v-if="result"
+    :objects-data="result"
+    :actions="actions"
+    action-url="manage/tags/action/"
+    id-field="name"
+    :filters="actionFilters"
+    @action-launched="fetchData"
+  >
+    <template #header-cells>
+      <th>
+        {{ t('components.manage.library.TagsTable.table.tag.header.name') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TagsTable.table.tag.header.artists') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TagsTable.table.tag.header.albums') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TagsTable.table.tag.header.tracks') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TagsTable.table.tag.header.creationDate') }}
+      </th>
+    </template>
+    <template
+      #row-cells="scope"
+    >
+      <td>
+        <router-link :to="{name: 'manage.library.tags.detail', params: {id: scope.obj.name }}">
+          {{ truncate(scope.obj.name, 30, undefined, true) }}
+        </router-link>
+      </td>
+      <td>
+        {{ scope.obj.artists_count }}
+      </td>
+      <td>
+        {{ scope.obj.albums_count }}
+      </td>
+      <td>
+        {{ scope.obj.tracks_count }}
+      </td>
+      <td>
+        <human-date :date="scope.obj.creation_date" />
+      </td>
+    </template>
+  </action-table>
+    <Pagination
+      v-if="result && result.count > paginateBy"
+      v-model:page="page"
+      :pages="Math.ceil(result.count / paginateBy)"
+    />
+
+    <span v-if="result && result.results.length > 0">
+      {{ t('components.manage.library.TagsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+    </span>
 </template>
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 38e590cb7..116f8d863 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -11,13 +11,18 @@ import axios from 'axios'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
 interface Props extends SmartSearchProps, OrderingProps {
   filters?: object
 
@@ -97,22 +102,24 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui six wide field">
-          <label for="tracks-search">{{ t('components.manage.library.TracksTable.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="tracks-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui six wide field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            id="tracks-search"
+            ref="search"
+            name="search"
+            search
+            :label="t('components.manage.library.TracksTable.label.search')"
+            v-model="query"
+            :placeholder="labels.searchPlaceholder"
+          />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="tracks-ordering">{{ t('components.manage.library.TracksTable.ordering.label') }}</label>
           <select
@@ -144,127 +151,118 @@ const labels = computed(() => ({
             </option>
           </select>
         </div>
-      </div>
-    </div>
-    <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <action-table
-        v-if="result"
-        :objects-data="result"
-        :actions="actions"
-        action-url="manage/library/tracks/action/"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.library.TracksTable.table.track.header.title') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TracksTable.table.track.header.album') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TracksTable.table.track.header.artist') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TracksTable.table.track.header.domain') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TracksTable.table.track.header.license') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.TracksTable.table.track.header.creationDate') }}
-          </th>
-        </template>
-        <template
-          #row-cells="scope"
-        >
-          <td>
-            <router-link :to="{name: 'manage.library.tracks.detail', params: {id: scope.obj.id }}">
-              {{ scope.obj.title }}
-            </router-link>
-          </td>
-          <td>
-            <template v-if="scope.obj.album">
-              <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.album.id }}">
-                <i class="wrench icon" />
-              </router-link>
-              <a
-                href=""
-                class="discrete link"
-                :title="scope.obj.album.title"
-                @click.prevent="addSearchToken('album_id', scope.obj.album.id)"
-              >{{ scope.obj.album.title }}</a>
-            </template>
-          </td>
-          <td>
-            <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
-              <i class="wrench icon" />
-            </router-link>
-            <a
-              href=""
-              class="discrete link"
-              :title="scope.obj.artist.name"
-              @click.prevent="addSearchToken('artist_id', scope.obj.artist.id)"
-            >{{ scope.obj.artist.name }}</a>
-          </td>
-          <td>
-            <template v-if="!scope.obj.is_local">
-              <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-                <i class="wrench icon" />
-              </router-link>
-              <a
-                href=""
-                class="discrete link"
-                :title="scope.obj.domain"
-                @click.prevent="addSearchToken('domain', scope.obj.domain)"
-              >{{ scope.obj.domain }}</a>
-            </template>
-            <a
-              v-else
-              href=""
-              class="ui tiny accent icon link label"
-              @click.prevent="addSearchToken('domain', scope.obj.domain)"
-            >
-              <i class="home icon" />
-              {{ t('components.manage.library.TracksTable.link.local') }}
-            </a>
-          </td>
-          <td>
-            <a
-              v-if="scope.obj.license"
-              href=""
-              class="discrete link"
-              :title="scope.obj.license"
-              @click.prevent="addSearchToken('license', scope.obj.license)"
-            >{{ scope.obj.license }}</a>
-            <span v-else>
-              {{ t('components.manage.library.TracksTable.notApplicable') }}
-            </span>
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-        </template>
-      </action-table>
-    </div>
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        v-model:current="page"
-        :compact="true"
-        :paginate-by="paginateBy"
-        :total="result.count"
-      />
-
-      <span v-if="result && result.results.length > 0">
-        {{ t('components.manage.library.TracksTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <Loader v-if="isLoading" />
+  <action-table
+    v-if="result"
+    :objects-data="result"
+    :actions="actions"
+    action-url="manage/library/tracks/action/"
+    :filters="actionFilters"
+    @action-launched="fetchData"
+  >
+    <template #header-cells>
+      <th>
+        {{ t('components.manage.library.TracksTable.table.track.header.title') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TracksTable.table.track.header.album') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TracksTable.table.track.header.artist') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TracksTable.table.track.header.domain') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TracksTable.table.track.header.license') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.TracksTable.table.track.header.creationDate') }}
+      </th>
+    </template>
+    <template
+      #row-cells="scope"
+    >
+      <td>
+        <router-link :to="{name: 'manage.library.tracks.detail', params: {id: scope.obj.id }}">
+          {{ scope.obj.title }}
+        </router-link>
+      </td>
+      <td>
+        <template v-if="scope.obj.album">
+          <router-link :to="{name: 'manage.library.albums.detail', params: {id: scope.obj.album.id }}">
+            <i class="wrench icon" />
+          </router-link>
+          <a
+            href=""
+            class="discrete link"
+            :title="scope.obj.album.title"
+            @click.prevent="addSearchToken('album_id', scope.obj.album.id)"
+          >{{ scope.obj.album.title }}</a>
+        </template>
+      </td>
+      <td>
+        <router-link :to="{name: 'manage.library.artists.detail', params: {id: scope.obj.artist.id }}">
+          <i class="wrench icon" />
+        </router-link>
+        <a
+          href=""
+          class="discrete link"
+          :title="scope.obj.artist.name"
+          @click.prevent="addSearchToken('artist_id', scope.obj.artist.id)"
+        >{{ scope.obj.artist.name }}</a>
+      </td>
+      <td>
+        <template v-if="!scope.obj.is_local">
+          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
+            <i class="wrench icon" />
+          </router-link>
+          <a
+            href=""
+            class="discrete link"
+            :title="scope.obj.domain"
+            @click.prevent="addSearchToken('domain', scope.obj.domain)"
+          >{{ scope.obj.domain }}</a>
+        </template>
+        <a
+          v-else
+          href=""
+          class="ui tiny accent icon link label"
+          @click.prevent="addSearchToken('domain', scope.obj.domain)"
+        >
+          <i class="home icon" />
+          {{ t('components.manage.library.TracksTable.link.local') }}
+        </a>
+      </td>
+      <td>
+        <a
+          v-if="scope.obj.license"
+          href=""
+          class="discrete link"
+          :title="scope.obj.license"
+          @click.prevent="addSearchToken('license', scope.obj.license)"
+        >{{ scope.obj.license }}</a>
+        <span v-else>
+          {{ t('components.manage.library.TracksTable.notApplicable') }}
+        </span>
+      </td>
+      <td>
+        <human-date :date="scope.obj.creation_date" />
+      </td>
+    </template>
+  </action-table>
+  <div>
+    <Pagination
+      v-if="result && result.count > paginateBy"
+      v-model:page="page"
+      :pages="Math.ceil(result.count / paginateBy)"
+    />
+
+    <span v-if="result && result.results.length > 0">
+      {{ t('components.manage.library.TracksTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+    </span>
+  </div>
 </template>
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index 34716fba8..80dd83db8 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -13,8 +13,6 @@ import axios from 'axios'
 
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
-import Button from '~/components/ui/Button.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -22,6 +20,13 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+
 interface Props extends SmartSearchProps, OrderingProps {
   filters?: object
 
@@ -120,22 +125,24 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui six wide field">
-          <label for="uploads-search">{{ t('components.manage.library.UploadsTable.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="uploads-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui six wide field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            id="uploads-search"
+            ref="search"
+            name="search"
+            search
+            :label="t('components.manage.library.UploadsTable.label.search')"
+            v-model="query"
+            :placeholder="labels.searchPlaceholder"
+          />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="uploads-visibility">{{ t('components.manage.library.UploadsTable.label.visibility') }}</label>
           <select
@@ -214,167 +221,156 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
             </option>
           </select>
         </div>
-      </div>
-    </div>
-    <!-- TODO (wvffle): Check if :upload shouldn't be v-model:upload -->
-    <import-status-modal
-      v-if="detailedUpload"
-      v-model:show="showUploadDetailModal"
-      :upload="detailedUpload"
-    />
-    <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <action-table
-        v-if="result"
-        :objects-data="result"
-        :actions="actions"
-        action-url="manage/library/uploads/action/"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.name') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.library') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.account') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.domain') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.visibility') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.importStatus') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.size') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.creationDate') }}
-          </th>
-          <th>
-            {{ t('components.manage.library.UploadsTable.table.upload.header.accessedDate') }}
-          </th>
-        </template>
-        <template #row-cells="scope">
-          <td>
-            <router-link :to="{name: 'manage.library.uploads.detail', params: {id: scope.obj.uuid }}">
-              {{ truncate(displayName(scope.obj), 30, undefined, true) }}
-            </router-link>
-          </td>
-          <td>
-            <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.library.uuid }}">
-              <i class="wrench icon" />
-            </router-link>
-            <a
-              href=""
-              class="discrete link"
-              :title="scope.obj.library.name"
-              @click.prevent="addSearchToken('library_id', scope.obj.library.id)"
-            >
-              {{ truncate(scope.obj.library.name, 20) }}
-            </a>
-          </td>
-          <td>
-            <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.library.actor.full_username }}" />
-            <a
-              href=""
-              class="discrete link"
-              :title="scope.obj.library.actor.full_username"
-              @click.prevent="addSearchToken('account', scope.obj.library.actor.full_username)"
-            >{{ scope.obj.library.actor.preferred_username }}</a>
-          </td>
-          <td>
-            <template v-if="!scope.obj.is_local">
-              <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
-                <i class="wrench icon" />
-              </router-link>
-              <a
-                href=""
-                class="discrete link"
-                :title="scope.obj.domain"
-                @click.prevent="addSearchToken('domain', scope.obj.domain)"
-              >{{ scope.obj.domain }}</a>
-            </template>
-            <a
-              v-else
-              href=""
-              class="ui tiny accent icon link label"
-              @click.prevent="addSearchToken('domain', scope.obj.domain)"
-            >
-              <i class="home icon" />
-              {{ t('components.manage.library.UploadsTable.link.local') }}
-            </a>
-          </td>
-          <td>
-            <a
-              href=""
-              class="discrete link"
-              :title="getPrivacyLevelChoice(scope.obj.library.privacy_level)"
-              @click.prevent="addSearchToken('privacy_level', scope.obj.library.privacy_level)"
-            >
-              {{ getPrivacyLevelChoice(scope.obj.library.privacy_level) }}
-            </a>
-          </td>
-          <td>
-            <a
-              href=""
-              class="discrete link"
-              :title="getImportStatusChoice(scope.obj.import_status).help"
-              @click.prevent="addSearchToken('status', scope.obj.import_status)"
-            >
-              {{ getImportStatusChoice(scope.obj.import_status).label }}
-            </a>
-            <Button
-              class="tiny"
-              icon="bi-question-circle"
-              :title="sharedLabels.fields.import_status.label"
-              @click="detailedUpload = scope.obj; showUploadDetailModal = true"
-            />
-          </td>
-          <td>
-            <span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>
-            <span v-else>
-              {{ t('components.manage.library.UploadsTable.notApplicable') }}
-            </span>
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-          <td>
-            <human-date
-              v-if="scope.obj.accessed_date"
-              :date="scope.obj.accessed_date"
-            />
-            <span v-else>
-              {{ t('components.manage.library.UploadsTable.notApplicable') }}
-            </span>
-          </td>
-        </template>
-      </action-table>
-    </div>
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        v-model:current="page"
-        :compact="true"
-        :paginate-by="paginateBy"
-        :total="result.count"
-      />
-
-      <span v-if="result && result.results.length > 0">
-        {{ t('components.manage.library.UploadsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <!-- TODO (wvffle): Check if :upload shouldn't be v-model:upload -->
+  <import-status-modal
+    v-if="detailedUpload"
+    v-model:show="showUploadDetailModal"
+    :upload="detailedUpload"
+  />
+  <Loader v-if="isLoading" />
+  <action-table
+    v-if="result"
+    :objects-data="result"
+    :actions="actions"
+    action-url="manage/library/uploads/action/"
+    :filters="actionFilters"
+    @action-launched="fetchData"
+  >
+    <template #header-cells>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.name') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.library') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.account') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.domain') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.visibility') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.importStatus') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.size') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.creationDate') }}
+      </th>
+      <th>
+        {{ t('components.manage.library.UploadsTable.table.upload.header.accessedDate') }}
+      </th>
+    </template>
+    <template #row-cells="scope">
+      <td>
+        <router-link :to="{name: 'manage.library.uploads.detail', params: {id: scope.obj.uuid }}">
+          {{ truncate(displayName(scope.obj), 30, undefined, true) }}
+        </router-link>
+      </td>
+      <td>
+        <router-link :to="{name: 'manage.library.libraries.detail', params: {id: scope.obj.library.uuid }}">
+          <i class="wrench icon" />
+        </router-link>
+        <a
+          href=""
+          class="discrete link"
+          :title="scope.obj.library.name"
+          @click.prevent="addSearchToken('library_id', scope.obj.library.id)"
+        >
+          {{ truncate(scope.obj.library.name, 20) }}
+        </a>
+      </td>
+      <td>
+        <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.library.actor.full_username }}" />
+        <a
+          href=""
+          class="discrete link"
+          :title="scope.obj.library.actor.full_username"
+          @click.prevent="addSearchToken('account', scope.obj.library.actor.full_username)"
+        >{{ scope.obj.library.actor.preferred_username }}</a>
+      </td>
+      <td>
+        <template v-if="!scope.obj.is_local">
+          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.domain }}">
+            <i class="wrench icon" />
+          </router-link>
+          <a
+            href=""
+            class="discrete link"
+            :title="scope.obj.domain"
+            @click.prevent="addSearchToken('domain', scope.obj.domain)"
+          >{{ scope.obj.domain }}</a>
+        </template>
+        <a
+          v-else
+          href=""
+          class="ui tiny accent icon link label"
+          @click.prevent="addSearchToken('domain', scope.obj.domain)"
+        >
+          <i class="home icon" />
+          {{ t('components.manage.library.UploadsTable.link.local') }}
+        </a>
+      </td>
+      <td>
+        <a
+          href=""
+          class="discrete link"
+          :title="getPrivacyLevelChoice(scope.obj.library.privacy_level)"
+          @click.prevent="addSearchToken('privacy_level', scope.obj.library.privacy_level)"
+        >
+          {{ getPrivacyLevelChoice(scope.obj.library.privacy_level) }}
+        </a>
+      </td>
+      <td>
+        <a
+          href=""
+          class="discrete link"
+          :title="getImportStatusChoice(scope.obj.import_status).help"
+          @click.prevent="addSearchToken('status', scope.obj.import_status)"
+        >
+          {{ getImportStatusChoice(scope.obj.import_status).label }}
+        </a>
+        <Button
+          class="tiny"
+          icon="bi-question-circle"
+          :title="sharedLabels.fields.import_status.label"
+          @click="detailedUpload = scope.obj; showUploadDetailModal = true"
+        />
+      </td>
+      <td>
+        <span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>
+        <span v-else>
+          {{ t('components.manage.library.UploadsTable.notApplicable') }}
+        </span>
+      </td>
+      <td>
+        <human-date :date="scope.obj.creation_date" />
+      </td>
+      <td>
+        <human-date
+          v-if="scope.obj.accessed_date"
+          :date="scope.obj.accessed_date"
+        />
+        <span v-else>
+          {{ t('components.manage.library.UploadsTable.notApplicable') }}
+        </span>
+      </td>
+    </template>
+  </action-table>
+    <Pagination
+      v-if="result && result.count > paginateBy"
+      v-model:page="page"
+      :pages="Math.ceil(result.count / paginateBy)"
+    />
+
+    <span v-if="result && result.results.length > 0">
+      {{ t('components.manage.library.UploadsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
+    </span>
 </template>
diff --git a/front/src/views/admin/library/Base.vue b/front/src/views/admin/library/Base.vue
index a84c02496..749de0f30 100644
--- a/front/src/views/admin/library/Base.vue
+++ b/front/src/views/admin/library/Base.vue
@@ -1,73 +1,62 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+import Layout from '~/components/ui/Layout.vue'
+import Tabs from '~/components/ui/Tabs.vue'
+import Tab from '~/components/ui/Tab.vue'
 
 const { t } = useI18n()
 const labels = computed(() => ({
   title: t('views.admin.library.Base.title'),
   secondaryMenu: t('views.admin.library.Base.menu.secondary')
 }))
+
+const route = useRoute()
 </script>
 
 <template>
-  <div
+  <Layout
     v-title="labels.title"
-    class="main page-admin-library"
+    main
+    stack
+    class="page-admin-library"
   >
-    <nav
-      class="ui secondary pointing menu"
-      role="navigation"
-      :aria-label="labels.secondaryMenu"
-    >
-      <router-link
-        class="ui item"
+    <Tabs>
+      <Tab
+        :title="t('views.admin.library.Base.link.edits')"
         :to="{name: 'manage.library.edits'}"
-      >
-        {{ t('views.admin.library.Base.link.edits') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.library.Base.link.channels')"
         :to="{name: 'manage.channels'}"
-      >
-        {{ t('views.admin.library.Base.link.channels') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.library.Base.link.artists')"
         :to="{name: 'manage.library.artists'}"
-      >
-        {{ t('views.admin.library.Base.link.artists') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.library.Base.link.albums')"
         :to="{name: 'manage.library.albums'}"
-      >
-        {{ t('views.admin.library.Base.link.albums') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.library.Base.link.tracks')"
         :to="{name: 'manage.library.tracks'}"
-      >
-        {{ t('views.admin.library.Base.link.tracks') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.library.Base.link.libraries')"
         :to="{name: 'manage.library.libraries'}"
-      >
-        {{ t('views.admin.library.Base.link.libraries') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.library.Base.link.uploads')"
         :to="{name: 'manage.library.uploads'}"
-      >
-        {{ t('views.admin.library.Base.link.uploads') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.library.Base.link.tags')"
         :to="{name: 'manage.library.tags'}"
-      >
-        {{ t('views.admin.library.Base.link.tags') }}
-      </router-link>
-    </nav>
-    <router-view :key="$route.fullPath" />
-  </div>
+      />
+    </Tabs>
+    <router-view :key="route.fullPath" />
+  </Layout>
 </template>
diff --git a/front/src/views/admin/library/EditsList.vue b/front/src/views/admin/library/EditsList.vue
index d5600bc11..24b622d68 100644
--- a/front/src/views/admin/library/EditsList.vue
+++ b/front/src/views/admin/library/EditsList.vue
@@ -4,6 +4,8 @@ import { computed } from 'vue'
 
 import EditsCardList from '~/components/manage/library/EditsCardList.vue'
 
+import Header from '~/components/ui/Header.vue'
+
 interface Props {
   defaultQuery?: string
 }
@@ -19,16 +21,13 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <main v-title="labels.title">
-    <section class="ui vertical stripe segment">
-      <edits-card-list
-        :update-url="true"
-        :default-query="defaultQuery"
-      >
-        <h2 class="ui header">
-          {{ t('views.admin.library.EditsList.header.edits') }}
-        </h2>
-      </edits-card-list>
-    </section>
-  </main>
+  <Header
+    align-left
+    no-items
+    :h1="t('views.admin.library.EditsList.header.edits')"
+  />
+  <edits-card-list
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
 </template>