diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index a983125c6..daa2ce48c 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -208,6 +208,7 @@ const launchAction = async () => {
                   :disabled="checked.length === 0 || undefined"
                   :is-loading="isLoading"
                   :confirm-color="currentAction?.confirmColor ?? 'success'"
+                  style="margin-top: 7px;"
                   :aria-label="labels.performAction"
                   :title="t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount)"
                   @confirm="launchAction"
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 64c7cb7f3..79b52bb2e 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -11,7 +11,11 @@ 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 Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -98,22 +102,21 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui six wide field">
-          <label for="accounts-search">{{ t('components.manage.moderation.AccountsTable.label.search') }}</label>
-          <form @submit.prevent="query = search.value">
-            <input
-              id="accounts-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
-              :placeholder="labels.searchPlaceholder"
-            >
-          </form>
-        </div>
+  <Spacer />
+  <div class="ui inline form">
+    <div class="fields">
+      <form @submit.prevent="query = search.value">
+        <Input
+          id="accounts-search"
+          v-model="query"
+          search
+          :label="t('components.manage.moderation.AccountsTable.label.search')"
+          :placeholder="labels.searchPlaceholder"
+        />
+      </form>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="accounts-ordering">{{ t('components.manage.moderation.AccountsTable.ordering.label') }}</label>
           <select
@@ -145,103 +148,96 @@ 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/accounts/action/"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.moderation.AccountsTable.table.account.header.name') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.AccountsTable.table.account.header.domain') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.AccountsTable.table.account.header.uploads') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.AccountsTable.table.account.header.firstSeen') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.AccountsTable.table.account.header.lastSeen') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.AccountsTable.table.account.header.moderationRule') }}
-          </th>
-        </template>
-        <template
-          #row-cells="scope"
-        >
-          <td>
-            <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.full_username }}">
-              {{ scope.obj.preferred_username }}
-            </router-link>
-          </td>
-          <td>
-            <template v-if="!scope.obj.user">
-              <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.moderation.AccountsTable.link.local') }}
-            </a>
-          </td>
-          <td>
-            {{ scope.obj.uploads_count }}
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-          <td>
-            <human-date
-              v-if="scope.obj.last_fetch_date"
-              :date="scope.obj.last_fetch_date"
-            />
-          </td>
-          <td>
-            <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ t('components.manage.moderation.AccountsTable.table.account.moderationRule') }}</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.moderation.AccountsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <div class="dimmable">
+    <Loader v-if="isLoading" />
+    <action-table
+      v-if="result"
+      :objects-data="result"
+      :actions="actions"
+      action-url="manage/accounts/action/"
+      :filters="actionFilters"
+      @action-launched="fetchData"
+    >
+      <template #header-cells>
+        <th>
+          {{ t('components.manage.moderation.AccountsTable.table.account.header.name') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.AccountsTable.table.account.header.domain') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.AccountsTable.table.account.header.uploads') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.AccountsTable.table.account.header.firstSeen') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.AccountsTable.table.account.header.lastSeen') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.AccountsTable.table.account.header.moderationRule') }}
+        </th>
+      </template>
+      <template
+        #row-cells="scope"
+      >
+        <td>
+          <router-link :to="{name: 'manage.moderation.accounts.detail', params: {id: scope.obj.full_username }}">
+            {{ scope.obj.preferred_username }}
+          </router-link>
+        </td>
+        <td>
+          <template v-if="!scope.obj.user">
+            <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.moderation.AccountsTable.link.local') }}
+          </a>
+        </td>
+        <td>
+          {{ scope.obj.uploads_count }}
+        </td>
+        <td>
+          <human-date :date="scope.obj.creation_date" />
+        </td>
+        <td>
+          <human-date
+            v-if="scope.obj.last_fetch_date"
+            :date="scope.obj.last_fetch_date"
+          />
+        </td>
+        <td>
+          <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ t('components.manage.moderation.AccountsTable.table.account.moderationRule') }}</span>
+        </td>
+      </template>
+    </action-table>
+  </div>
+  <div>
+    <Pagination
+      v-if="result && result.count > paginateBy"
+      v-model:current="page"
+      :paginate-by="paginateBy"
+    />
+
+    <span v-if="result && result.results.length > 0">
+      {{ t('components.manage.moderation.AccountsTable.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/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index cda9095b7..ad4e5387b 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/front/src/components/manage/moderation/DomainsTable.vue
@@ -10,7 +10,12 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Input from '~/components/ui/Input.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -120,19 +125,21 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui field">
-          <label for="domains-search">{{ t('components.manage.moderation.DomainsTable.label.search') }}</label>
-          <input
-            id="domains-search"
-            v-model="query"
-            name="search"
-            type="text"
-            :placeholder="labels.searchPlaceholder"
-          >
-        </div>
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui field">
+        <Input
+          id="domains-search"
+          v-model="query"
+          name="search"
+          search
+          :label="t('components.manage.moderation.DomainsTable.label.search')"
+          :placeholder="labels.searchPlaceholder"
+        />
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div
           v-if="allowListEnabled"
           class="field"
@@ -185,90 +192,85 @@ 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 && result.results.length > 0"
-        :objects-data="result"
-        :actions="actions"
-        action-url="manage/federation/domains/action/"
-        id-field="name"
-        :filters="actionFilters"
-        @action-launched="fetchData"
-      >
-        <template #header-cells>
-          <th>
-            {{ t('components.manage.moderation.DomainsTable.table.domain.header.name') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.DomainsTable.table.domain.header.users') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.DomainsTable.table.domain.header.receivedMessages') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.DomainsTable.table.domain.header.firstSeen') }}
-          </th>
-          <th>
-            {{ t('components.manage.moderation.DomainsTable.table.domain.header.moderationRule') }}
-          </th>
-        </template>
-        <template
-          #row-cells="scope"
-        >
-          <td>
-            <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.name }}">
-              {{ scope.obj.name }}
-              <i
-                v-if="allowListEnabled && scope.obj.allowed"
-                class="success check icon"
-                :title="labels.allowListTitle"
-              />
-            </router-link>
-          </td>
-          <td>
-            {{ scope.obj.actors_count }}
-          </td>
-          <td>
-            {{ scope.obj.outbox_activities_count }}
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date" />
-          </td>
-          <td>
-            <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ t('components.manage.moderation.DomainsTable.table.domain.moderationRule') }}</span>
-          </td>
-        </template>
-      </action-table>
-      <div
-        v-else
-        class="ui placeholder segment"
-      >
-        <div class="ui icon header">
-          <i class="server icon" />
-          {{ t('components.manage.moderation.DomainsTable.empty.noPods') }}
-        </div>
-      </div>
-    </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.moderation.DomainsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
-      </span>
+      </Layout>
     </div>
   </div>
+  <div class="dimmable">
+    <Loader v-if="isLoading" />
+    <action-table
+      v-if="result && result.results.length > 0"
+      :objects-data="result"
+      :actions="actions"
+      action-url="manage/federation/domains/action/"
+      id-field="name"
+      :filters="actionFilters"
+      @action-launched="fetchData"
+    >
+      <template #header-cells>
+        <th>
+          {{ t('components.manage.moderation.DomainsTable.table.domain.header.name') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.DomainsTable.table.domain.header.users') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.DomainsTable.table.domain.header.receivedMessages') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.DomainsTable.table.domain.header.firstSeen') }}
+        </th>
+        <th>
+          {{ t('components.manage.moderation.DomainsTable.table.domain.header.moderationRule') }}
+        </th>
+      </template>
+      <template
+        #row-cells="scope"
+      >
+        <td>
+          <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: scope.obj.name }}">
+            {{ scope.obj.name }}
+            <i
+              v-if="allowListEnabled && scope.obj.allowed"
+              class="success check icon"
+              :title="labels.allowListTitle"
+            />
+          </router-link>
+        </td>
+        <td>
+          {{ scope.obj.actors_count }}
+        </td>
+        <td>
+          {{ scope.obj.outbox_activities_count }}
+        </td>
+        <td>
+          <human-date :date="scope.obj.creation_date" />
+        </td>
+        <td>
+          <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ t('components.manage.moderation.DomainsTable.table.domain.moderationRule') }}</span>
+        </td>
+      </template>
+    </action-table>
+    <div
+      v-else
+      class="ui placeholder segment"
+    >
+      <div class="ui icon header">
+        <i class="server icon" />
+        {{ t('components.manage.moderation.DomainsTable.empty.noPods') }}
+      </div>
+    </div>
+  </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.moderation.DomainsTable.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/views/admin/CommonList.vue b/front/src/views/admin/CommonList.vue
index 68ad077ac..319fd5100 100644
--- a/front/src/views/admin/CommonList.vue
+++ b/front/src/views/admin/CommonList.vue
@@ -11,6 +11,8 @@ import TracksTable from '~/components/manage/library/TracksTable.vue'
 import UploadsTable from '~/components/manage/library/UploadsTable.vue'
 import UsersTable from '~/components/manage/users/UsersTable.vue'
 
+import Header from '~/components/ui/Header.vue'
+
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -43,55 +45,48 @@ const title = computed(() => labels.value[props.type])
 </script>
 
 <template>
-  <main v-title="title">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        {{ title }}
-      </h2>
-      <invitation-form v-if="type === 'invitations'" />
-      <div class="ui hidden divider" />
-      <accounts-table
-        v-if="type === 'accounts'"
-        :update-url="true"
-        :default-query="defaultQuery"
-      />
-      <albums-table
-        v-else-if="type === 'albums'"
-        :update-url="true"
-        :default-query="defaultQuery"
-      />
-      <artists-table
-        v-else-if="type === 'artists'"
-        :update-url="true"
-        :default-query="defaultQuery"
-      />
-      <channels-table
-        v-else-if="type === 'channels'"
-        :update-url="true"
-        :default-query="defaultQuery"
-      />
-      <invitations-table v-else-if="type === 'invitations'" />
-      <libraries-table
-        v-else-if="type === 'libraries'"
-        :update-url="true"
-        :default-query="defaultQuery"
-      />
-      <tags-table
-        v-else-if="type === 'tags'"
-        :update-url="true"
-        :default-query="defaultQuery"
-      />
-      <tracks-table
-        v-else-if="type === 'tracks'"
-        :update-url="true"
-        :default-query="defaultQuery"
-      />
-      <uploads-table
-        v-else-if="type === 'uploads'"
-        :update-url="true"
-        :default-query="defaultQuery"
-      />
-      <users-table v-else-if="type === 'users'" />
-    </section>
-  </main>
+  <Header :h1="title" />
+  <invitation-form v-if="type === 'invitations'" />
+  <accounts-table
+    v-if="type === 'accounts'"
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
+  <albums-table
+    v-else-if="type === 'albums'"
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
+  <artists-table
+    v-else-if="type === 'artists'"
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
+  <channels-table
+    v-else-if="type === 'channels'"
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
+  <invitations-table v-else-if="type === 'invitations'" />
+  <libraries-table
+    v-else-if="type === 'libraries'"
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
+  <tags-table
+    v-else-if="type === 'tags'"
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
+  <tracks-table
+    v-else-if="type === 'tracks'"
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
+  <uploads-table
+    v-else-if="type === 'uploads'"
+    :update-url="true"
+    :default-query="defaultQuery"
+  />
+  <users-table v-else-if="type === 'users'" />
 </template>
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index 694a6f2dc..2e6526413 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -10,6 +10,12 @@ import { useStore } from '~/store'
 import axios from 'axios'
 import $ from 'jquery'
 
+import Layout from '~/components/ui/Layout.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
 
@@ -146,87 +152,70 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
 </script>
 
 <template>
-  <main class="page-admin-account-detail">
-    <div
+  <Layout
+    main
+    stack
+    class="page-admin-account-detail"
+  >
+    <Loader
       v-if="isLoading"
-      class="ui vertical segment"
-    >
-      <div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
-    </div>
+    />
     <template v-if="object">
       <section
         v-title="object.full_username"
-        :class="['ui', 'head', 'vertical', 'stripe', 'segment']"
       >
-        <div class="ui stackable two column grid">
-          <div class="ui column">
-            <div class="segment-content">
-              <h2 class="ui header">
-                <i class="circular inverted user icon" />
-                <div class="content">
-                  {{ object.full_username }}
-                  <div class="sub header">
-                    <template v-if="object.user">
-                      <span class="ui tiny accent label">
-                        <i class="home icon" />
-                        {{ t('views.admin.moderation.AccountsDetail.header.localAccount') }}
-                      </span>
-                      &nbsp;
-                    </template>
-                    <a
-                      :href="object.url || object.fid"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {{ t('views.admin.moderation.AccountsDetail.link.openProfile') }}&nbsp;
-                      <i class="external icon" />
-                    </a>
-                  </div>
-                </div>
-              </h2>
-              <div class="header-buttons">
-                <div class="ui icon buttons">
-                  <a
-                    v-if="object.user && store.state.auth.profile && store.state.auth.profile.is_superuser"
-                    class="ui labeled icon button"
-                    :href="store.getters['instance/absoluteUrl'](`/api/admin/users/user/${object.user.id}`)"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <i class="wrench icon" />
-                    {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
-                  </a>
-                  <a
-                    v-else-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
-                    class="ui labeled icon button"
-                    :href="store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object.id}`)"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <i class="wrench icon" />
-                    {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
-                  </a>
-                  <button
-                    v-dropdown
-                    class="ui floating dropdown icon button"
-                  >
-                    <i class="dropdown icon" />
-                    <div class="menu">
-                      <a
-                        class="basic item"
-                        :href="object.url || object.fid"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <i class="external icon" />
-                        {{ t('views.admin.moderation.AccountsDetail.link.remoteProfile') }}&nbsp;
-                      </a>
-                    </div>
-                  </button>
-                </div>
-              </div>
+        <Layout flex>
+          <h2 class="ui header">
+            <i class="bi-person-circle" />
+              {{ object.full_username }}
+            <div class="sub header">
+              <template v-if="object.user">
+                <span class="ui tiny accent label">
+                  <i class="bi-house-fill" />
+                  {{ t('views.admin.moderation.AccountsDetail.header.localAccount') }}
+                </span>
+                &nbsp;
+              </template>
+              <a
+                :href="object.url || object.fid"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {{ t('views.admin.moderation.AccountsDetail.link.openProfile') }}&nbsp;
+                <i class="bi bi-box-arrow-up-right" />
+              </a>
             </div>
-          </div>
+          </h2>
+          <Spacer grow />
+          <Layout stack>
+            <a
+              v-if="object.user && store.state.auth.profile && store.state.auth.profile.is_superuser"
+              class="ui labeled icon button"
+              :href="store.getters['instance/absoluteUrl'](`/api/admin/users/user/${object.user.id}`)"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <i class="bi bi-wrench" />
+              {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
+            </a>
+            <a
+              v-else-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
+              :href="store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object.id}`)"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <i class="bi bi-wrench" />
+              {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
+            </a>
+            <a
+              :href="object.url || object.fid"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <i class="bi bi-box-arrow-up-right" />
+              {{ t('views.admin.moderation.AccountsDetail.link.remoteProfile') }}&nbsp;
+            </a>
+          </Layout>
           <div class="ui column">
             <div
               v-if="!object.user"
@@ -244,19 +233,19 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <template v-else-if="!policy && !showPolicyForm">
                 <header class="ui header">
                   <h3>
-                    <i class="shield icon" />
+                    <i class="bi bi-shield-fill" />
                     {{ t('views.admin.moderation.AccountsDetail.header.noPolicy') }}
                   </h3>
                 </header>
                 <p>
                   {{ t('views.admin.moderation.AccountsDetail.description.policy') }}
                 </p>
-                <button
-                  class="ui primary button"
+                <Button
+                  primary
                   @click="showPolicyForm = true"
                 >
                   {{ t('views.admin.moderation.AccountsDetail.button.addPolicy') }}
-                </button>
+                </Button>
               </template>
               <instance-policy-card
                 v-else-if="policy && !showPolicyForm"
@@ -280,359 +269,349 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               />
             </div>
           </div>
-        </div>
+        </Layout>
       </section>
-      <div class="ui vertical stripe segment">
-        <div class="ui stackable three column grid">
-          <div class="column">
-            <section>
-              <h3 class="ui header">
-                <i class="info icon" />
-                <div class="content">
-                  {{ t('views.admin.moderation.AccountsDetail.header.accountData') }}
-                </div>
-              </h3>
-              <table class="ui very basic table">
-                <tbody>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.username') }}
-                    </td>
-                    <td>
-                      {{ object.preferred_username }}
-                    </td>
-                  </tr>
-                  <tr v-if="!object.user">
-                    <td>
-                      <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
-                        {{ t('views.admin.moderation.AccountsDetail.link.domain') }}
-                      </router-link>
-                    </td>
-                    <td>
-                      {{ object.domain }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.displayName') }}
-                    </td>
-                    <td>
-                      {{ object.name }}
-                    </td>
-                  </tr>
-                  <tr v-if="object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.email') }}
-                    </td>
-                    <td>
-                      {{ object.user.email }}
-                    </td>
-                  </tr>
-                  <tr v-if="object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.label') }}
-                    </td>
-                    <td>
-                      <div
-                        v-if="object.user.username != store.state.auth.profile?.username"
-                        class="ui toggle checkbox"
-                      >
-                        <input
-                          id="is-active"
-                          v-model="object.user.is_active"
-                          type="checkbox"
-                          @change="updateUser('is_active')"
-                        >
-                        <label for="is-active">
-                          <span
-                            v-if="object.user.is_active"
-                          >{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}</span>
-                          <span
-                            v-else
-                          >{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}</span>
-                        </label>
-                      </div>
-                      <span
-                        v-else-if="object.user.is_active"
-                      >
-                        {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}
-                      </span>
-                      <span
-                        v-else
-                      >
-                        {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}
-                      </span>
-                    </td>
-                  </tr>
-                  <tr v-if="object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.permissions') }}
-                    </td>
-                    <td>
-                      <select
-                        v-model="permissions"
-                        multiple
-                        class="ui search selection dropdown"
-                        @change="updateUser('permissions')"
-                      >
-                        <option
-                          v-for="(p, key) in allPermissions"
-                          :key="key"
-                          :value="p.code"
-                        >
-                          {{ p.label }}
-                        </option>
-                      </select>
-                      <action-feedback :is-loading="updating.has('permissions')" />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.userType') }}
-                    </td>
-                    <td>
-                      {{ object.type }}
-                    </td>
-                  </tr>
-                  <tr v-if="!object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.lastChecked') }}
-                    </td>
-                    <td>
-                      <human-date
-                        v-if="object.last_fetch_date"
-                        :date="object.last_fetch_date"
+      <Layout flex>
+        <div class="column">
+          <section>
+            <h3 class="ui header">
+              <i class="bi bi-info-circle-fill" />
+              {{ t('views.admin.moderation.AccountsDetail.header.accountData') }}
+            </h3>
+            <table class="ui very basic table">
+              <tbody>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.username') }}
+                  </td>
+                  <td>
+                    {{ object.preferred_username }}
+                  </td>
+                </tr>
+                <tr v-if="!object.user">
+                  <td>
+                    <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
+                      {{ t('views.admin.moderation.AccountsDetail.link.domain') }}
+                    </router-link>
+                  </td>
+                  <td>
+                    {{ object.domain }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.displayName') }}
+                  </td>
+                  <td>
+                    {{ object.name }}
+                  </td>
+                </tr>
+                <tr v-if="object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.email') }}
+                  </td>
+                  <td>
+                    {{ object.user.email }}
+                  </td>
+                </tr>
+                <tr v-if="object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.label') }}
+                  </td>
+                  <td>
+                    <div
+                      v-if="object.user.username != store.state.auth.profile?.username"
+                      class="ui toggle checkbox"
+                    >
+                      <Input
+                        id="is-active"
+                        v-model="object.user.is_active"
+                        type="checkbox"
+                        @change="updateUser('is_active')"
                       />
-                      <span
-                        v-else
+                      <label for="is-active">
+                        <span
+                          v-if="object.user.is_active"
+                        >{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}</span>
+                        <span
+                          v-else
+                        >{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}</span>
+                      </label>
+                    </div>
+                    <span
+                      v-else-if="object.user.is_active"
+                    >
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}
+                    </span>
+                    <span
+                      v-else
+                    >
+                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}
+                    </span>
+                  </td>
+                </tr>
+                <tr v-if="object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.permissions') }}
+                  </td>
+                  <td>
+                    <select
+                      v-model="permissions"
+                      multiple
+                      class="ui search selection dropdown"
+                      @change="updateUser('permissions')"
+                    >
+                      <option
+                        v-for="(p, key) in allPermissions"
+                        :key="key"
+                        :value="p.code"
                       >
-                        {{ t('views.admin.moderation.AccountsDetail.notApplicable') }}
-                      </span>
-                    </td>
-                  </tr>
-                  <tr v-if="object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.signupDate') }}
-                    </td>
-                    <td>
-                      <human-date :date="object.user.date_joined" />
-                    </td>
-                  </tr>
-                  <tr v-if="object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.lastActivity') }}
-                    </td>
-                    <td>
-                      <human-date :date="object.user.last_activity" />
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </section>
-          </div>
-          <div class="column">
-            <section>
-              <h3 class="ui header">
-                <i class="feed icon" />
-                <div class="content">
-                  {{ t('views.admin.moderation.AccountsDetail.header.activity') }}&nbsp;
-                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
-                </div>
-              </h3>
-              <div
-                v-if="isLoadingStats"
-                class="ui placeholder"
-              >
-                <div class="full line" />
-                <div class="short line" />
-                <div class="medium line" />
-                <div class="long line" />
-              </div>
-              <table
-                v-else
-                class="ui very basic table"
-              >
-                <tbody>
-                  <tr v-if="!object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.activity.firstSeen') }}
-                    </td>
-                    <td>
-                      <human-date :date="object.creation_date" />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.activity.emittedMessages') }}
-                    </td>
-                    <td>
-                      {{ stats.outbox_activities }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.activity.receivedFollows') }}
-                    </td>
-                    <td>
-                      {{ stats.received_library_follows }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.activity.emittedFollows') }}
-                    </td>
-                    <td>
-                      {{ stats.emitted_library_follows }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `account:${object.full_username}`) }}">
-                        {{ t('views.admin.moderation.AccountsDetail.link.linkedReports') }}
-                      </router-link>
-                    </td>
-                    <td>
-                      {{ stats.reports }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <router-link :to="{name: 'manage.moderation.requests.list', query: {q: getQuery('submitter', `${object.full_username}`) }}">
-                        {{ t('views.admin.moderation.AccountsDetail.link.requests') }}
-                      </router-link>
-                    </td>
-                    <td>
-                      {{ stats.requests }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </section>
-          </div>
-          <div class="column">
-            <section>
-              <h3 class="ui header">
-                <i class="music icon" />
-                <div class="content">
-                  {{ t('views.admin.moderation.AccountsDetail.header.audioContent') }}&nbsp;
-                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
-                </div>
-              </h3>
-              <div
-                v-if="isLoadingStats"
-                class="ui placeholder"
-              >
-                <div class="full line" />
-                <div class="short line" />
-                <div class="medium line" />
-                <div class="long line" />
-              </div>
-              <table
-                v-else
-                class="ui very basic table"
-              >
-                <tbody>
-                  <tr v-if="!object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.audioContent.cachedSize') }}
-                    </td>
-                    <td>
-                      {{ humanSize(stats.media_downloaded_size) }}
-                    </td>
-                  </tr>
-                  <tr v-if="object.user">
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.audioContent.uploadQuota') }}
-                      <span :data-tooltip="labels.uploadQuota"><i class="question circle icon" /></span>
-                    </td>
-                    <td>
-                      <div class="ui right labeled input">
-                        <input
-                          v-model.number="object.user.upload_quota"
-                          step="100"
-                          name="quota"
-                          type="number"
-                          @change="updateUser('upload_quota', true)"
-                        >
-                        <div class="ui basic label">
-                          {{ t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
-                        </div>
-                        <action-feedback
-                          class="ui basic label"
-                          size="tiny"
-                          :is-loading="updating.has('upload_quota')"
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.table.audioContent.totalSize') }}
-                    </td>
-                    <td>
-                      {{ humanSize(stats.media_total_size) }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <router-link :to="{name: 'manage.channels', query: {q: getQuery('account', object.full_username) }}">
-                        {{ t('views.admin.moderation.AccountsDetail.link.channels') }}
-                      </router-link>
-                    </td>
-                    <td>
-                      {{ stats.channels }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('account', object.full_username) }}">
-                        {{ t('views.admin.moderation.AccountsDetail.link.libraries') }}
-                      </router-link>
-                    </td>
-                    <td>
-                      {{ stats.libraries }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('account', object.full_username) }}">
-                        {{ t('views.admin.moderation.AccountsDetail.link.uploads') }}
-                      </router-link>
-                    </td>
-                    <td>
-                      {{ stats.uploads }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.link.artists') }}
-                    </td>
-                    <td>
-                      {{ stats.artists }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.link.albums') }}
-                    </td>
-                    <td>
-                      {{ stats.albums }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.AccountsDetail.link.tracks') }}
-                    </td>
-                    <td>
-                      {{ stats.tracks }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </section>
-          </div>
+                        {{ p.label }}
+                      </option>
+                    </select>
+                    <action-feedback :is-loading="updating.has('permissions')" />
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.userType') }}
+                  </td>
+                  <td>
+                    {{ object.type }}
+                  </td>
+                </tr>
+                <tr v-if="!object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.lastChecked') }}
+                  </td>
+                  <td>
+                    <human-date
+                      v-if="object.last_fetch_date"
+                      :date="object.last_fetch_date"
+                    />
+                    <span
+                      v-else
+                    >
+                      {{ t('views.admin.moderation.AccountsDetail.notApplicable') }}
+                    </span>
+                  </td>
+                </tr>
+                <tr v-if="object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.signupDate') }}
+                  </td>
+                  <td>
+                    <human-date :date="object.user.date_joined" />
+                  </td>
+                </tr>
+                <tr v-if="object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.lastActivity') }}
+                  </td>
+                  <td>
+                    <human-date :date="object.user.last_activity" />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </section>
         </div>
-      </div>
+        <div class="column">
+          <section>
+            <h3 class="ui header">
+              <i class="bi bi-rss-fill" />
+              {{ t('views.admin.moderation.AccountsDetail.header.activity') }}&nbsp;
+              <span :data-tooltip="labels.statsWarning"><i class=" bi bi-question-circle-fill" /></span>
+            </h3>
+            <div
+              v-if="isLoadingStats"
+              class="ui placeholder"
+            >
+              <div class="full line" />
+              <div class="short line" />
+              <div class="medium line" />
+              <div class="long line" />
+            </div>
+            <table
+              v-else
+              class="ui very basic table"
+            >
+              <tbody>
+                <tr v-if="!object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.activity.firstSeen') }}
+                  </td>
+                  <td>
+                    <human-date :date="object.creation_date" />
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.activity.emittedMessages') }}
+                  </td>
+                  <td>
+                    {{ stats.outbox_activities }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.activity.receivedFollows') }}
+                  </td>
+                  <td>
+                    {{ stats.received_library_follows }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.activity.emittedFollows') }}
+                  </td>
+                  <td>
+                    {{ stats.emitted_library_follows }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `account:${object.full_username}`) }}">
+                      {{ t('views.admin.moderation.AccountsDetail.link.linkedReports') }}
+                    </router-link>
+                  </td>
+                  <td>
+                    {{ stats.reports }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <router-link :to="{name: 'manage.moderation.requests.list', query: {q: getQuery('submitter', `${object.full_username}`) }}">
+                      {{ t('views.admin.moderation.AccountsDetail.link.requests') }}
+                    </router-link>
+                  </td>
+                  <td>
+                    {{ stats.requests }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </section>
+        </div>
+        <div class="column">
+          <section>
+            <h3 class="ui header">
+              <i class="bi bi-music-note-beamed" />
+              {{ t('views.admin.moderation.AccountsDetail.header.audioContent') }}&nbsp;
+              <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
+            </h3>
+            <div
+              v-if="isLoadingStats"
+              class="ui placeholder"
+            >
+              <div class="full line" />
+              <div class="short line" />
+              <div class="medium line" />
+              <div class="long line" />
+            </div>
+            <table
+              v-else
+              class="ui very basic table"
+            >
+              <tbody>
+                <tr v-if="!object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.audioContent.cachedSize') }}
+                  </td>
+                  <td>
+                    {{ humanSize(stats.media_downloaded_size) }}
+                  </td>
+                </tr>
+                <tr v-if="object.user">
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.audioContent.uploadQuota') }}
+                    <span :data-tooltip="labels.uploadQuota"><i class="question circle icon" /></span>
+                  </td>
+                  <td>
+                    <Input
+                      v-model.number="object.user.upload_quota"
+                      step="100"
+                      name="quota"
+                      type="number"
+                      @change="updateUser('upload_quota', true)"
+                    />
+                    <div class="ui basic label">
+                      {{ t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
+                    </div>
+                    <action-feedback
+                      class="ui basic label"
+                      size="tiny"
+                      :is-loading="updating.has('upload_quota')"
+                    />
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.table.audioContent.totalSize') }}
+                  </td>
+                  <td>
+                    {{ humanSize(stats.media_total_size) }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <router-link :to="{name: 'manage.channels', query: {q: getQuery('account', object.full_username) }}">
+                      {{ t('views.admin.moderation.AccountsDetail.link.channels') }}
+                    </router-link>
+                  </td>
+                  <td>
+                    {{ stats.channels }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('account', object.full_username) }}">
+                      {{ t('views.admin.moderation.AccountsDetail.link.libraries') }}
+                    </router-link>
+                  </td>
+                  <td>
+                    {{ stats.libraries }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('account', object.full_username) }}">
+                      {{ t('views.admin.moderation.AccountsDetail.link.uploads') }}
+                    </router-link>
+                  </td>
+                  <td>
+                    {{ stats.uploads }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.link.artists') }}
+                  </td>
+                  <td>
+                    {{ stats.artists }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.link.albums') }}
+                  </td>
+                  <td>
+                    {{ stats.albums }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('views.admin.moderation.AccountsDetail.link.tracks') }}
+                  </td>
+                  <td>
+                    {{ stats.tracks }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </section>
+        </div>
+      </Layout>
     </template>
-  </main>
+  </Layout>
 </template>
diff --git a/front/src/views/admin/moderation/Base.vue b/front/src/views/admin/moderation/Base.vue
index 543f4d851..69c01c9b5 100644
--- a/front/src/views/admin/moderation/Base.vue
+++ b/front/src/views/admin/moderation/Base.vue
@@ -7,6 +7,11 @@ import { useRoute } from 'vue-router'
 
 import axios from 'axios'
 
+import Layout from '~/components/ui/Layout.vue'
+import Tabs from '~/components/ui/Tabs.vue'
+import Tab from '~/components/ui/Tab.vue'
+
+
 const store = useStore()
 const { t } = useI18n()
 const route = useRoute()
@@ -26,55 +31,50 @@ fetchNodeInfo()
 </script>
 
 <template>
-  <div
+<!-- TODO: Replace with Tabs component -->
+  <Layout
     v-title="labels.moderation"
-    class="main"
+    main
+    no-gap
   >
-    <nav
-      class="ui secondary pointing menu"
+    <Tabs
       role="navigation"
       :aria-label="labels.secondaryMenu"
     >
-      <router-link
-        class="ui item"
+      <Tab
+        :title="t('views.admin.moderation.Base.link.reports')"
         :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
       >
-        {{ t('views.admin.moderation.Base.link.reports') }}
         <div
           v-if="store.state.ui.notifications.pendingReviewReports > 0"
           :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
         >
           {{ store.state.ui.notifications.pendingReviewReports }}
         </div>
-      </router-link>
-      <router-link
-        class="ui item"
+      </Tab>
+      <Tab
+        :title="t('views.admin.moderation.Base.link.userRequests')"
         :to="{name: 'manage.moderation.requests.list', query: {q: 'status:pending'}}"
       >
-        {{ t('views.admin.moderation.Base.link.userRequests') }}
         <div
           v-if="store.state.ui.notifications.pendingReviewRequests > 0"
           :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
         >
           {{ store.state.ui.notifications.pendingReviewRequests }}
         </div>
-      </router-link>
-      <router-link
-        class="ui item"
+      </Tab>
+      <Tab
+        :title="t('views.admin.moderation.Base.link.domains')"
         :to="{name: 'manage.moderation.domains.list'}"
-      >
-        {{ t('views.admin.moderation.Base.link.domains') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.moderation.Base.link.accounts')"
         :to="{name: 'manage.moderation.accounts.list'}"
-      >
-        {{ t('views.admin.moderation.Base.link.accounts') }}
-      </router-link>
-    </nav>
+      />
+    </Tabs>
     <router-view
       :key="route.fullPath"
       :allow-list-enabled="allowListEnabled"
     />
-  </div>
+  </Layout>
 </template>
diff --git a/front/src/views/admin/moderation/DomainsList.vue b/front/src/views/admin/moderation/DomainsList.vue
index aa93ed71e..3f7b3e44c 100644
--- a/front/src/views/admin/moderation/DomainsList.vue
+++ b/front/src/views/admin/moderation/DomainsList.vue
@@ -9,6 +9,14 @@ import axios from 'axios'
 
 import DomainsTable from '~/components/manage/moderation/DomainsTable.vue'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Header from '~/components/ui/Header.vue'
+import Toggle from '~/components/ui/Toggle.vue'
+import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
+import Alert from '~/components/ui/Alert.vue'
+
 interface Props {
   allowListEnabled: boolean
 }
@@ -48,66 +56,59 @@ const createDomain = async () => {
 
 <template>
   <main v-title="labels.domains">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui left floated header">
-        {{ t('views.admin.moderation.DomainsList.header.domains') }}
-      </h2>
-      <form
-        class="ui right floated form"
-        @submit.prevent="createDomain"
+    <Layout
+      form
+      @submit.prevent="createDomain"
+    >
+      <Header :h1="t('views.admin.moderation.DomainsList.header.domains')" />
+      <Alert
+        v-if="errors && errors.length > 0"
+        red
       >
-        <div
-          v-if="errors && errors.length > 0"
-          role="alert"
-          class="ui negative message"
-        >
-          <h4 class="header">
-            {{ t('views.admin.moderation.DomainsList.header.failure') }}
-          </h4>
-          <ul class="list">
-            <li
-              v-for="(error, key) in errors"
-              :key="key"
-            >
-              {{ error }}
-            </li>
-          </ul>
-        </div>
-        <div class="inline fields">
-          <div class="field">
-            <label for="add-domain">{{ t('views.admin.moderation.DomainsList.label.addDomain') }}</label>
-            <input
-              id="add-domain"
-              v-model="domainName"
-              type="text"
-              name="domain"
-            >
-          </div>
-          <div
-            v-if="allowListEnabled"
-            class="field"
+        <h4 class="header">
+          {{ t('views.admin.moderation.DomainsList.header.failure') }}
+        </h4>
+        <ul class="list">
+          <li
+            v-for="(error, key) in errors"
+            :key="key"
           >
-            <input
-              id="allowed"
-              v-model="domainAllowed"
-              type="checkbox"
-              name="allowed"
-            >
-            <label for="allowed">{{ t('views.admin.moderation.DomainsList.label.addToAllowList') }}</label>
-          </div>
-          <div class="field">
-            <button
-              :class="['ui', {'loading': isCreating}, 'success', 'button']"
+            {{ error }}
+          </li>
+        </ul>
+      </Alert>
+      <div class="field">
+        <Input
+          id="add-domain"
+          v-model="domainName"
+          type="text"
+          name="domain"
+          :label="t('views.admin.moderation.DomainsList.label.addDomain')"
+        >
+          <template #input-right>
+            <Button
+              primary
+              :class="[{'loading': isCreating}, 'success']"
               type="submit"
               :disabled="isCreating"
             >
               {{ t('views.admin.moderation.DomainsList.button.add') }}
-            </button>
-          </div>
+            </Button>
+          </template>
+        </Input>
+        <div
+          v-if="allowListEnabled"
+        >
+          <Toggle
+            id="allowed"
+            v-model="domainAllowed"
+            name="allowed"
+            :label="t('views.admin.moderation.DomainsList.label.addToAllowList')"
+          />
         </div>
-      </form>
-      <div class="ui clearing hidden divider" />
-      <domains-table :allow-list-enabled="allowListEnabled" />
-    </section>
+      </div>
+    </Layout>
+    <Spacer />
+    <domains-table :allow-list-enabled="allowListEnabled" />
   </main>
 </template>
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index f51266b28..abc04e40a 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/front/src/views/admin/moderation/ReportsList.vue
@@ -13,7 +13,12 @@ import axios from 'axios'
 
 import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
 import ReportCard from '~/components/manage/moderation/ReportCard.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Header from '~/components/ui/Header.vue'
+import Input from '~/components/ui/Input.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -99,27 +104,31 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <main v-title="labels.reports">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        {{ t('views.admin.moderation.ReportsList.header.reports') }}
-      </h2>
-      <div class="ui hidden divider" />
-      <div class="ui inline form">
-        <div class="fields">
-          <div class="ui field">
-            <label for="reports-search">{{ t('views.admin.moderation.ReportsList.label.search') }}</label>
-            <form @submit.prevent="query = search.value">
-              <input
-                id="reports-search"
-                ref="search"
-                name="search"
-                type="text"
-                :value="query"
-                :placeholder="labels.searchPlaceholder"
-              >
-            </form>
-          </div>
+  <Layout
+    v-title="labels.reports"
+    stack
+  >
+    <Header :h1="t('views.admin.moderation.ReportsList.header.reports')" />
+    <div class="ui inline form">
+      <div class="fields">
+        <div class="ui field">
+          <label for="reports-search">{{ t('views.admin.moderation.ReportsList.label.search') }}</label>
+          <form @submit.prevent="query = search.value">
+            <Input
+              id="reports-search"
+              ref="search"
+              name="search"
+              search
+              :value="query"
+              :placeholder="labels.searchPlaceholder"
+            />
+          </form>
+        </div>
+        <Spacer :size="16" />
+        <Layout
+          flex
+        >
+          <Spacer grow />
           <div class="field">
             <label for="reports-status">{{ t('views.admin.moderation.ReportsList.label.status') }}</label>
             <select
@@ -177,36 +186,35 @@ const labels = computed(() => ({
               </option>
             </select>
           </div>
-        </div>
+        </Layout>
       </div>
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <div v-else-if="!result || result.count === 0">
-        <empty-state
-          :refresh="true"
-          @refresh="fetchData()"
-        />
-      </div>
-      <div v-else-if="mode === 'card'">
-        <report-card
-          v-for="obj in result.results"
-          :key="obj.uuid"
-          :init-obj="obj"
-          @handled="fetchData"
-        />
-      </div>
-      <div class="ui center aligned basic segment">
-        <pagination
-          v-if="result && result.count > paginateBy"
-          v-model:current="page"
-          :paginate-by="paginateBy"
-          :total="result.count"
-        />
-      </div>
-    </section>
-  </main>
+    </div>
+    <div
+      v-if="isLoading"
+      class="ui active inverted dimmer"
+    >
+      <div class="ui loader" />
+    </div>
+    <div v-else-if="!result || result.count === 0">
+      <empty-state
+        :refresh="true"
+        @refresh="fetchData()"
+      />
+    </div>
+    <div v-else-if="mode === 'card'">
+      <report-card
+        v-for="obj in result.results"
+        :key="obj.uuid"
+        :init-obj="obj"
+        @handled="fetchData"
+      />
+    </div>
+    <div class="ui center aligned basic segment">
+      <Pagination
+        v-if="result && result.count > paginateBy"
+        v-model:current="page"
+        :paginate-by="paginateBy"
+      />
+    </div>
+  </Layout>
 </template>
diff --git a/front/src/views/admin/moderation/RequestsList.vue b/front/src/views/admin/moderation/RequestsList.vue
index 6842a9215..13bd72dc9 100644
--- a/front/src/views/admin/moderation/RequestsList.vue
+++ b/front/src/views/admin/moderation/RequestsList.vue
@@ -12,7 +12,13 @@ import { useStore } from '~/store'
 import axios from 'axios'
 
 import UserRequestCard from '~/components/manage/moderation/UserRequestCard.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Header from '~/components/ui/Header.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -92,110 +98,102 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <main v-title="labels.reports">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        {{ t('views.admin.moderation.RequestsList.header.userRequests') }}
-      </h2>
-      <div class="ui hidden divider" />
-      <div class="ui inline form">
-        <div class="fields">
-          <div class="ui field">
-            <label for="requests-search">{{ t('views.admin.moderation.RequestsList.label.search') }}</label>
-            <form @submit.prevent="query = search.value">
-              <input
-                id="requests-search"
-                ref="search"
-                name="search"
-                type="text"
-                :value="query"
-                :placeholder="labels.searchPlaceholder"
-              >
-            </form>
-          </div>
-          <div class="field">
-            <label for="requests-status">{{ t('views.admin.moderation.RequestsList.label.status') }}</label>
-            <select
-              id="requests-status"
-              class="ui dropdown"
-              :value="getTokenValue('status', '')"
-              @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
-            >
-              <option value="">
-                {{ t('views.admin.moderation.RequestsList.option.status.all') }}
-              </option>
-              <option value="pending">
-                {{ t('views.admin.moderation.RequestsList.option.status.pending') }}
-              </option>
-              <option value="approved">
-                {{ t('views.admin.moderation.RequestsList.option.status.approved') }}
-              </option>
-              <option value="refused">
-                {{ t('views.admin.moderation.RequestsList.option.status.refused') }}
-              </option>
-            </select>
-          </div>
-          <div class="field">
-            <label for="requests-ordering">{{ t('views.admin.moderation.RequestsList.ordering.label') }}</label>
-            <select
-              id="requests-ordering"
-              v-model="ordering"
-              class="ui dropdown"
-            >
-              <option
-                v-for="(option, key) in orderingOptions"
-                :key="key"
-                :value="option[0]"
-              >
-                {{ sharedLabels.filters[option[1]] }}
-              </option>
-            </select>
-          </div>
-          <div class="field">
-            <label for="requests-ordering-direction">{{ t('views.admin.moderation.RequestsList.ordering.direction.label') }}</label>
-            <select
-              id="requests-ordering-direction"
-              v-model="orderingDirection"
-              class="ui dropdown"
-            >
-              <option value="+">
-                {{ t('views.admin.moderation.RequestsList.ordering.direction.ascending') }}
-              </option>
-              <option value="-">
-                {{ t('views.admin.moderation.RequestsList.ordering.direction.descending') }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-      <div v-else-if="!result || result.count === 0">
-        <empty-state
-          :refresh="true"
-          @refresh="fetchData()"
-        />
-      </div>
-      <template v-else>
-        <user-request-card
-          v-for="obj in result.results"
-          :key="obj.uuid"
-          :init-obj="obj"
-          @handled="fetchData"
-        />
-        <div class="ui center aligned basic segment">
-          <pagination
-            v-if="result.count > paginateBy"
-            v-model:current="page"
-            :paginate-by="paginateBy"
-            :total="result.count"
+  <Header :h1="t('views.admin.moderation.RequestsList.header.userRequests')" />
+  <Spacer />
+  <div class="ui inline form">
+    <div class="fields">
+      <div class="ui field">
+        <form @submit.prevent="query = search.value">
+          <Input
+            id="requests-search"
+            ref="search"
+            name="search"
+            search
+            :label="t('views.admin.moderation.RequestsList.label.search')"
+            :value="query"
+            :placeholder="labels.searchPlaceholder"
           />
+        </form>
+      </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
+        <div class="field">
+          <label for="requests-status">{{ t('views.admin.moderation.RequestsList.label.status') }}</label>
+          <select
+            id="requests-status"
+            class="ui dropdown"
+            :value="getTokenValue('status', '')"
+            @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
+          >
+            <option value="">
+              {{ t('views.admin.moderation.RequestsList.option.status.all') }}
+            </option>
+            <option value="pending">
+              {{ t('views.admin.moderation.RequestsList.option.status.pending') }}
+            </option>
+            <option value="approved">
+              {{ t('views.admin.moderation.RequestsList.option.status.approved') }}
+            </option>
+            <option value="refused">
+              {{ t('views.admin.moderation.RequestsList.option.status.refused') }}
+            </option>
+          </select>
         </div>
-      </template>
-    </section>
-  </main>
+        <div class="field">
+          <label for="requests-ordering">{{ t('views.admin.moderation.RequestsList.ordering.label') }}</label>
+          <select
+            id="requests-ordering"
+            v-model="ordering"
+            class="ui dropdown"
+          >
+            <option
+              v-for="(option, key) in orderingOptions"
+              :key="key"
+              :value="option[0]"
+            >
+              {{ sharedLabels.filters[option[1]] }}
+            </option>
+          </select>
+        </div>
+        <div class="field">
+          <label for="requests-ordering-direction">{{ t('views.admin.moderation.RequestsList.ordering.direction.label') }}</label>
+          <select
+            id="requests-ordering-direction"
+            v-model="orderingDirection"
+            class="ui dropdown"
+          >
+            <option value="+">
+              {{ t('views.admin.moderation.RequestsList.ordering.direction.ascending') }}
+            </option>
+            <option value="-">
+              {{ t('views.admin.moderation.RequestsList.ordering.direction.descending') }}
+            </option>
+          </select>
+        </div>
+      </Layout>
+    </div>
+  </div>
+  <Loader v-if="isLoading" />
+  <div v-else-if="!result || result.count === 0">
+    <Spacer />
+    <empty-state
+      :refresh="true"
+      @refresh="fetchData()"
+    />
+  </div>
+  <template v-else>
+    <Spacer />
+    <user-request-card
+      v-for="obj in result.results"
+      :key="obj.uuid"
+      :init-obj="obj"
+      @handled="fetchData"
+    />
+    <Pagination
+      v-if="result.count > paginateBy"
+      v-model:current="page"
+      :paginate-by="paginateBy"
+    />
+  </template>
 </template>