diff --git a/src/App.vue b/src/App.vue
index 1b2f36d060..8903ccf6f8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2529,6 +2529,14 @@ th.validation-cell {
   height: 43px;
 }
 
+// vue-date-picker's default dark border (`#2d2d2d`) is too low-contrast
+// against the picker background. Bump it just enough to read as a
+// border without dominating, and keep the library defaults for
+// everything else (background, hover/focus stay untouched).
+.dp__theme_dark {
+  --dp-border-color: #3a3a3a !important;
+}
+
 #app .v3-emoji-picker.v3-color-theme-dark .v3-sticky {
   text-transform: uppercase;
   font-size: 0.8em;
diff --git a/src/components/cells/TaskStatusCell.vue b/src/components/cells/TaskStatusCell.vue
index d0956ff04d..62e9afdf0f 100644
--- a/src/components/cells/TaskStatusCell.vue
+++ b/src/components/cells/TaskStatusCell.vue
@@ -1,5 +1,5 @@
 <template>
-  <td class="name">
+  <td>
     <div
       class="tag"
       :class="{ canceled: disable }"
diff --git a/src/components/lists/AllTaskList.vue b/src/components/lists/AllTaskList.vue
index 450757e733..63cfa8dcd2 100644
--- a/src/components/lists/AllTaskList.vue
+++ b/src/components/lists/AllTaskList.vue
@@ -142,7 +142,12 @@
           {{ $t('main.load_more') }}
         </button>
       </div>
-      <table-info :is-loading="isLoading" :is-error="isError" />
+      <table-info
+        :is-loading="isLoading"
+        :is-error="isError"
+        :cells="10"
+        :with-actions="false"
+      />
     </div>
     <p class="has-text-centered nb-tasks" v-if="!isLoading">
       {{ stats.total }}
diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index cfbbe3e28f..ccfab2bca5 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -561,7 +561,7 @@
         <p class="info">{{ $t('assets.empty_list_client') }}</p>
       </div>
 
-      <table-info :is-loading="isLoading" :is-error="isError" />
+      <table-info :is-loading="isLoading" :is-error="isError" big-cells />
     </div>
 
     <asset-list-numbers
diff --git a/src/components/lists/AssetTypeList.vue b/src/components/lists/AssetTypeList.vue
index 4889d3c274..e7137b28a1 100644
--- a/src/components/lists/AssetTypeList.vue
+++ b/src/components/lists/AssetTypeList.vue
@@ -18,25 +18,38 @@
         </thead>
         <tbody class="datatable-body" v-if="entries.length">
           <tr class="datatable-row" v-for="entry in entries" :key="entry.id">
-            <td class="name">
+            <td class="name" :data-label="$t('asset_types.fields.name')">
               {{ entry.name }}
               <span :title="entry.description" v-if="entry.description">
                 <help-circle-icon class="icon is-small" />
               </span>
             </td>
-            <td class="short-name">
+            <td
+              class="short-name"
+              :data-label="$t('asset_types.fields.short_name')"
+              v-if="entry.short_name"
+            >
               {{ entry.short_name }}
             </td>
-            <td class="task-types" v-if="entry.task_types?.length">
+            <td class="short-name" v-else></td>
+            <td
+              class="task-types"
+              :data-label="$t('asset_types.fields.task_types')"
+              v-if="entry.task_types?.length"
+            >
               <span
                 :key="taskType.id"
                 class="task-type-name flexrow-item"
-                v-for="taskType in sortTaskTypes(entry.task_types)"
+                v-for="taskType in sortedTaskTypes(entry.task_types)"
               >
                 <task-type-name :task-type="taskType" v-if="taskType.id" />
               </span>
             </td>
-            <td class="task-types" v-else>
+            <td
+              class="task-types"
+              :data-label="$t('asset_types.fields.task_types')"
+              v-else
+            >
               {{ $t('asset_types.include_all') }}
             </td>
             <row-actions-cell
@@ -48,17 +61,23 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="2"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-asset-types">
-      {{ entries.length }} {{ $tc('asset_types.number', entries.length) }}
+      {{ entries.length }} {{ $t('asset_types.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import { HelpCircleIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import { sortTaskTypes } from '@/lib/sorting'
 
@@ -66,46 +85,28 @@ import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 
-export default {
-  name: 'asset-type-list',
-
-  components: {
-    HelpCircleIcon,
-    RowActionsCell,
-    TableInfo,
-    TaskTypeName
-  },
-
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    }
-  },
+const store = useStore()
 
-  emits: ['delete-clicked', 'edit-clicked'],
+defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  computed: {
-    ...mapGetters(['taskTypeMap'])
-  },
+defineEmits(['delete-clicked', 'edit-clicked'])
 
-  methods: {
-    sortTaskTypes(taskTypeIds) {
-      const taskTypes =
-        taskTypeIds
-          ?.map(taskTypeId => this.taskTypeMap.get(taskTypeId))
-          .filter(Boolean) ?? []
-      return sortTaskTypes(taskTypes)
-    }
-  }
+// Computed
+
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+
+// Functions
+
+const sortedTaskTypes = taskTypeIds => {
+  const taskTypes =
+    taskTypeIds
+      ?.map(taskTypeId => taskTypeMap.value.get(taskTypeId))
+      .filter(Boolean) ?? []
+  return sortTaskTypes(taskTypes)
 }
 </script>
 
@@ -119,4 +120,79 @@ export default {
   width: 300px;
   padding: 1em;
 }
+
+@media screen and (max-width: 768px) {
+  // Turn each row into a card: the table head disappears, every cell is
+  // labelled via its data-label attribute, and the actions cell collapses
+  // to a footer row. Keep the wrapper's overflow-y: auto from the global
+  // .datatable-wrapper rule so the list still scrolls inside .fixed-page.
+  :deep(.datatable-wrapper) {
+    background: transparent;
+    border: 0;
+    overflow-x: visible;
+  }
+
+  .datatable,
+  .datatable-body {
+    display: block;
+    width: 100%;
+  }
+
+  .datatable-head {
+    display: none;
+  }
+
+  .datatable-row {
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    display: block;
+    margin-bottom: 0.75em;
+    padding: 0.85em 1em;
+  }
+
+  .dark .datatable-row {
+    background: var(--background-alt);
+  }
+
+  .datatable-row td {
+    border: 0;
+    display: block;
+    padding: 0.4em 0;
+    width: auto;
+  }
+
+  // Cells without a data-label are placeholders to keep the desktop
+  // table columns aligned — collapse them on mobile so empty fields
+  // don't leave gaps.
+  .datatable-row td:not([data-label]):not(.actions):not(.name) {
+    display: none;
+  }
+
+  .datatable-row td[data-label]::before {
+    color: var(--text-alt);
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75em;
+    letter-spacing: 0.06em;
+    margin-bottom: 0.2em;
+    text-transform: uppercase;
+  }
+
+  // The name doubles as the card title — drop its label and bump the
+  // font weight.
+  .datatable-row .name {
+    font-size: 1.05em;
+    font-weight: 600;
+    padding-top: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .datatable-row .actions {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/lists/BackgroundList.vue b/src/components/lists/BackgroundList.vue
index 782ae23101..bb91ef69ec 100644
--- a/src/components/lists/BackgroundList.vue
+++ b/src/components/lists/BackgroundList.vue
@@ -43,7 +43,7 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" :cells="1" />
 
     <p class="has-text-centered">
       {{ entries.length }}
diff --git a/src/components/lists/CustomActionList.vue b/src/components/lists/CustomActionList.vue
index 2f3bdbc859..049eb66411 100644
--- a/src/components/lists/CustomActionList.vue
+++ b/src/components/lists/CustomActionList.vue
@@ -57,7 +57,12 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="3"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-custom-actions">
       {{ entries.length }} {{ $t('custom_actions.number', entries.length) }}
diff --git a/src/components/lists/DayOffList.vue b/src/components/lists/DayOffList.vue
index 9c19ca73cb..70f83924e8 100644
--- a/src/components/lists/DayOffList.vue
+++ b/src/components/lists/DayOffList.vue
@@ -61,7 +61,12 @@
       <p>{{ $t('days_off.no_days_off') }}</p>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="1"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered footer-info" v-if="!isLoading">
       {{ sortedDaysOff.length }}
diff --git a/src/components/lists/DepartmentList.vue b/src/components/lists/DepartmentList.vue
index bf52dc3d22..1e90b33bea 100644
--- a/src/components/lists/DepartmentList.vue
+++ b/src/components/lists/DepartmentList.vue
@@ -21,20 +21,26 @@
         </thead>
         <tbody class="datatable-body" v-if="entries.length > 0">
           <tr class="datatable-row" v-for="entry in entries" :key="entry.id">
-            <td class="name">
+            <td class="name" :data-label="$t('departments.fields.name')">
               {{ entry.name }}
             </td>
-            <td class="color">
+            <td class="color" :data-label="$t('departments.fields.color')">
               <div>
                 <span :style="{ background: entry.color }"> </span>
               </div>
             </td>
-            <td class="items">
+            <td
+              class="items"
+              :data-label="$t('departments.hardware_used_by_artists')"
+            >
               {{
                 linkedHardwareItems[entry.id]?.map(item => item.name).join(', ')
               }}
             </td>
-            <td class="items">
+            <td
+              class="items"
+              :data-label="$t('departments.software_used_by_artists')"
+            >
               {{
                 linkedSoftwareLicenses[entry.id]
                   ?.map(item => item.name)
@@ -49,7 +55,12 @@
         </tbody>
       </table>
     </div>
-    <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="2"
+      :with-thumbnail="false"
+    />
     <p class="has-text-centered nb-departments">
       {{ entries.length }} {{ $t('departments.number', entries.length) }}
     </p>
@@ -116,4 +127,71 @@ defineEmits(['delete-clicked', 'edit-clicked'])
     padding: 0.5em;
   }
 }
+
+@media screen and (max-width: 768px) {
+  // Stack each row as a card, mirroring the AssetTypeList mobile layout.
+  :deep(.datatable-wrapper) {
+    background: transparent;
+    border: 0;
+    overflow-x: visible;
+  }
+
+  .datatable,
+  .datatable-body {
+    display: block;
+    width: 100%;
+  }
+
+  .datatable-head {
+    display: none;
+  }
+
+  .datatable-row {
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    display: block;
+    margin-bottom: 0.75em;
+    padding: 0.85em 1em;
+  }
+
+  .dark .datatable-row {
+    background: var(--background-alt);
+  }
+
+  .datatable-row td {
+    border: 0;
+    display: block;
+    height: auto;
+    max-width: none;
+    min-width: 0;
+    padding: 0.4em 0;
+    text-align: left;
+    width: auto;
+  }
+
+  .datatable-row td[data-label]::before {
+    color: var(--text-alt);
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75em;
+    letter-spacing: 0.06em;
+    margin-bottom: 0.2em;
+    text-transform: uppercase;
+  }
+
+  .datatable-row .name {
+    font-size: 1.05em;
+    font-weight: 600;
+    padding-top: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .datatable-row .actions {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index b1588ee0d9..2d238137e2 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -450,7 +450,7 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" big-cells />
 
     <div
       class="has-text-centered"
diff --git a/src/components/lists/EntityTaskList.vue b/src/components/lists/EntityTaskList.vue
index 94199d90a2..24961c3eb5 100644
--- a/src/components/lists/EntityTaskList.vue
+++ b/src/components/lists/EntityTaskList.vue
@@ -31,7 +31,12 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :with-thumbnail="false"
+      :with-actions="false"
+    />
 
     <div
       class="task-list-body"
diff --git a/src/components/lists/EpisodeList.vue b/src/components/lists/EpisodeList.vue
index 7cdfe1ce50..da6e2703e8 100644
--- a/src/components/lists/EpisodeList.vue
+++ b/src/components/lists/EpisodeList.vue
@@ -481,7 +481,7 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" big-cells />
 
     <div
       class="has-text-centered"
diff --git a/src/components/lists/EpisodeStatsList.vue b/src/components/lists/EpisodeStatsList.vue
index 2d52716040..a64f63e335 100644
--- a/src/components/lists/EpisodeStatsList.vue
+++ b/src/components/lists/EpisodeStatsList.vue
@@ -181,7 +181,12 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :with-thumbnail="false"
+      :with-actions="false"
+    />
 
     <div
       class="has-text-centered"
diff --git a/src/components/lists/HardwareItemList.vue b/src/components/lists/HardwareItemList.vue
index 4f2ae28ca4..1682e10da7 100644
--- a/src/components/lists/HardwareItemList.vue
+++ b/src/components/lists/HardwareItemList.vue
@@ -24,21 +24,31 @@
         </thead>
         <tbody class="datatable-body" v-if="entries.length > 0">
           <tr class="datatable-row" v-for="entry in entries" :key="entry.id">
-            <td class="name">
+            <td class="name" :data-label="$t('hardware_items.fields.name')">
               {{ entry.name }}
             </td>
-            <td class="short-name">
+            <td
+              class="short-name"
+              :data-label="$t('hardware_items.fields.short_name')"
+            >
               {{ entry.short_name }}
             </td>
-            <td class="monthly-cost number-cell">
+            <td
+              class="monthly-cost number-cell"
+              :data-label="$t('hardware_items.fields.monthly_cost')"
+            >
               {{ entry.monthly_cost }}
             </td>
-            <td class="inventory-amount number-cell">
+            <td
+              class="inventory-amount number-cell"
+              :data-label="$t('hardware_items.fields.inventory_amount')"
+            >
               {{ entry.inventory_amount }}
             </td>
             <td
               :class="{ negative: remainingHardwareItems[entry.id] < 0 }"
               class="remaining-amount number-cell"
+              :data-label="$t('hardware_items.fields.remaining_amount')"
             >
               {{ remainingHardwareItems[entry.id] }}
             </td>
@@ -51,7 +61,12 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="4"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-hardware-items">
       {{ entries.length }} {{ $t('hardware_items.number', entries.length) }}
@@ -90,14 +105,74 @@ defineEmits(['delete-clicked', 'edit-clicked'])
 }
 
 @media screen and (max-width: 768px) {
-  .name {
-    min-width: auto;
-    padding: 0.5em;
+  // Stack each row as a card, mirroring the AssetTypeList mobile layout.
+  :deep(.datatable-wrapper) {
+    background: transparent;
+    border: 0;
+    overflow-x: visible;
+  }
+
+  .datatable,
+  .datatable-body {
+    display: block;
+    width: 100%;
+  }
+
+  .datatable-head {
+    display: none;
+  }
+
+  // Override App.vue's global `:last-child { background: transparent !important }`
+  // rule, which would otherwise leave the last card with only its border drawn.
+  .datatable-row,
+  .datatable-row:last-child {
+    background: var(--background) !important;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    display: block;
+    margin-bottom: 0.75em;
+    padding: 0.85em 1em;
+  }
+
+  .dark .datatable-row,
+  .dark .datatable-row:last-child {
+    background: var(--background-alt) !important;
+  }
+
+  .datatable-row td {
+    background-color: transparent !important;
+    border: 0;
+    display: block;
+    height: auto;
+    max-width: none;
+    min-width: 0;
+    padding: 0.4em 0;
+    text-align: left;
+    width: auto;
+  }
+
+  .datatable-row td[data-label]::before {
+    color: var(--text-alt);
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75em;
+    letter-spacing: 0.06em;
+    margin-bottom: 0.2em;
+    text-transform: uppercase;
+  }
+
+  .datatable-row .name {
+    font-size: 1.05em;
+    font-weight: 600;
+    padding-top: 0;
+
+    &::before {
+      display: none;
+    }
   }
 
-  .datatable-body td,
-  .datatable-head th {
-    padding: 0.5em;
+  .datatable-row .actions {
+    display: none;
   }
 }
 </style>
diff --git a/src/components/lists/KanbanBoard.vue b/src/components/lists/KanbanBoard.vue
index 1c2a5b4a86..b48be164d7 100644
--- a/src/components/lists/KanbanBoard.vue
+++ b/src/components/lists/KanbanBoard.vue
@@ -107,7 +107,7 @@
         </ol>
       </li>
     </ol>
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" variant="kanban" />
     <add-preview-modal
       ref="add-preview-modal"
       :active="modals.addPreview"
diff --git a/src/components/lists/PeopleList.vue b/src/components/lists/PeopleList.vue
index f65464e9f2..94c61003a4 100644
--- a/src/components/lists/PeopleList.vue
+++ b/src/components/lists/PeopleList.vue
@@ -119,7 +119,7 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" :cells="8" />
 
     <p class="has-text-centered footer-info" v-if="!isLoading">
       {{ nbUsersDetails }}
diff --git a/src/components/lists/PeopleTimesheetList.vue b/src/components/lists/PeopleTimesheetList.vue
index 70a72ce892..95806506b9 100644
--- a/src/components/lists/PeopleTimesheetList.vue
+++ b/src/components/lists/PeopleTimesheetList.vue
@@ -166,7 +166,7 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" variant="grid" />
 
     <p class="has-text-centered footer-info" v-if="!isLoading">
       {{ people.length }} {{ $tc('people.persons', people.length) }}
diff --git a/src/components/lists/PreviewFileList.vue b/src/components/lists/PreviewFileList.vue
index 0cebc915f1..4ef6e1b216 100644
--- a/src/components/lists/PreviewFileList.vue
+++ b/src/components/lists/PreviewFileList.vue
@@ -28,7 +28,12 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="5"
+      :with-thumbnail="false"
+    />
 
     <div @scroll.passive="onBodyScroll" v-if="previewFiles.length > 0">
       <table class="datatable">
diff --git a/src/components/lists/ProductionAssetTypeList.vue b/src/components/lists/ProductionAssetTypeList.vue
index 63cc2b4f3f..c87a727930 100644
--- a/src/components/lists/ProductionAssetTypeList.vue
+++ b/src/components/lists/ProductionAssetTypeList.vue
@@ -98,7 +98,13 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="5"
+      :with-thumbnail="false"
+      :with-actions="false"
+    />
 
     <div
       class="has-text-centered"
diff --git a/src/components/lists/ProjectTemplateList.vue b/src/components/lists/ProjectTemplateList.vue
index 05f5fa7d98..ef8bfced98 100644
--- a/src/components/lists/ProjectTemplateList.vue
+++ b/src/components/lists/ProjectTemplateList.vue
@@ -48,7 +48,12 @@
         </tbody>
       </table>
     </div>
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="3"
+      :with-thumbnail="false"
+    />
     <p class="has-text-centered nb-templates">
       {{ entries.length }}
       {{
diff --git a/src/components/lists/QuotaShotList.vue b/src/components/lists/QuotaShotList.vue
index 5ea2ec4c2d..cc07f82cd9 100644
--- a/src/components/lists/QuotaShotList.vue
+++ b/src/components/lists/QuotaShotList.vue
@@ -23,7 +23,13 @@
       </tbody>
     </table>
 
-    <table-info :is-loading="isLoading" :is-error="isLoadingError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isLoadingError"
+      :cells="2"
+      :with-thumbnail="false"
+      :with-actions="false"
+    />
   </div>
 </template>
 
diff --git a/src/components/lists/SequenceList.vue b/src/components/lists/SequenceList.vue
index a651419d9b..83e5a22859 100644
--- a/src/components/lists/SequenceList.vue
+++ b/src/components/lists/SequenceList.vue
@@ -446,7 +446,7 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" big-cells />
 
     <div
       class="has-text-centered"
diff --git a/src/components/lists/SequenceStatsList.vue b/src/components/lists/SequenceStatsList.vue
index 1d89f9b961..ff2d2f265f 100644
--- a/src/components/lists/SequenceStatsList.vue
+++ b/src/components/lists/SequenceStatsList.vue
@@ -111,7 +111,13 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="5"
+      :with-thumbnail="false"
+      :with-actions="false"
+    />
 
     <div
       class="has-text-centered"
diff --git a/src/components/lists/ShotList.vue b/src/components/lists/ShotList.vue
index ecb7ee6487..e3705a0a05 100644
--- a/src/components/lists/ShotList.vue
+++ b/src/components/lists/ShotList.vue
@@ -749,7 +749,7 @@
         </template>
       </table>
     </div>
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info :is-loading="isLoading" :is-error="isError" big-cells />
 
     <div
       class="has-text-centered"
diff --git a/src/components/lists/SoftwareLicenseList.vue b/src/components/lists/SoftwareLicenseList.vue
index 837fcd3ef3..2b8563f949 100644
--- a/src/components/lists/SoftwareLicenseList.vue
+++ b/src/components/lists/SoftwareLicenseList.vue
@@ -30,31 +30,48 @@
         </thead>
         <tbody class="datatable-body" v-if="entries.length > 0">
           <tr class="datatable-row" v-for="entry in entries" :key="entry.id">
-            <td class="name">
+            <td class="name" :data-label="$t('software_licenses.fields.name')">
               {{ entry.name }}
             </td>
-            <td class="short-name">
+            <td
+              class="short-name"
+              :data-label="$t('software_licenses.fields.short_name')"
+            >
               {{ entry.short_name }}
             </td>
-            <td class="extension">
+            <td
+              class="extension"
+              :data-label="$t('software_licenses.fields.extension')"
+            >
               {{ entry.file_extension }}
             </td>
-            <td class="version">
+            <td
+              class="version"
+              :data-label="$t('software_licenses.fields.version')"
+            >
               {{ entry.version }}
             </td>
-            <td class="monthly-cost number-cell">
+            <td
+              class="monthly-cost number-cell"
+              :data-label="$t('software_licenses.fields.monthly_cost')"
+            >
               {{ entry.monthly_cost }}
             </td>
-            <td class="inventory-amount number-cell">
+            <td
+              class="inventory-amount number-cell"
+              :data-label="$t('software_licenses.fields.inventory_amount')"
+            >
               {{ entry.inventory_amount }}
             </td>
             <td
               :class="{ negative: remainingSoftwareLicenses[entry.id] < 0 }"
               class="remaining-amount number-cell"
+              :data-label="$t('hardware_items.fields.remaining_amount')"
             >
               {{ remainingSoftwareLicenses[entry.id] }}
             </td>
             <row-actions-cell
+              class="datatable-row-footer"
               @edit-clicked="$emit('edit-clicked', entry)"
               @delete-clicked="$emit('delete-clicked', entry)"
             />
@@ -63,7 +80,11 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-software-licenses">
       {{ entries.length }} {{ $t('software_licenses.number', entries.length) }}
@@ -108,20 +129,74 @@ defineEmits(['delete-clicked', 'edit-clicked'])
 }
 
 @media screen and (max-width: 768px) {
-  .name {
-    min-width: auto;
-    padding: 0.5em;
+  // Stack each row as a card, mirroring the AssetTypeList mobile layout.
+  :deep(.datatable-wrapper) {
+    background: transparent;
+    border: 0;
+    overflow-x: visible;
+  }
+
+  .datatable,
+  .datatable-body {
+    display: block;
+    width: 100%;
   }
 
-  .extension,
-  .version {
+  .datatable-head {
+    display: none;
+  }
+
+  // Override App.vue's global `:last-child { background: transparent !important }`
+  // rule, which would otherwise leave the last card with only its border drawn.
+  .datatable-row,
+  .datatable-row:last-child {
+    background: var(--background) !important;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    display: block;
+    margin-bottom: 0.75em;
+    padding: 0.85em 1em;
+  }
+
+  .dark .datatable-row,
+  .dark .datatable-row:last-child {
+    background: var(--background-alt) !important;
+  }
+
+  .datatable-row td {
+    background-color: transparent !important;
+    border: 0;
+    display: block;
+    height: auto;
+    max-width: none;
+    min-width: 0;
+    padding: 0.4em 0;
+    text-align: left;
     width: auto;
-    padding: 0.5em;
   }
 
-  .datatable-body td,
-  .datatable-head th {
-    padding: 0.5em;
+  .datatable-row td[data-label]::before {
+    color: var(--text-alt);
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75em;
+    letter-spacing: 0.06em;
+    margin-bottom: 0.2em;
+    text-transform: uppercase;
+  }
+
+  .datatable-row .name {
+    font-size: 1.05em;
+    font-weight: 600;
+    padding-top: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .datatable-row .actions {
+    display: none;
   }
 }
 </style>
diff --git a/src/components/lists/StatusAutomationList.vue b/src/components/lists/StatusAutomationList.vue
index 3be6d44065..08f94ecfc3 100644
--- a/src/components/lists/StatusAutomationList.vue
+++ b/src/components/lists/StatusAutomationList.vue
@@ -97,7 +97,11 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-status-automations">
       {{ entries.length }}
diff --git a/src/components/lists/StudioList.vue b/src/components/lists/StudioList.vue
index d85bd722fd..43708c11ea 100644
--- a/src/components/lists/StudioList.vue
+++ b/src/components/lists/StudioList.vue
@@ -29,7 +29,12 @@
         </tbody>
       </table>
     </div>
-    <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="1"
+      :with-thumbnail="false"
+    />
     <p class="has-text-centered nb-studios">
       {{ entries.length }}
       {{ $t('studios.number', entries.length, { n: entries.length }) }}
diff --git a/src/components/lists/TaskList.vue b/src/components/lists/TaskList.vue
index 6b51a6e70a..4ca14fde84 100644
--- a/src/components/lists/TaskList.vue
+++ b/src/components/lists/TaskList.vue
@@ -257,7 +257,12 @@
           </tr>
         </tbody>
       </table>
-      <table-info :is-loading="isLoading" :is-error="isError" />
+      <table-info
+        :is-loading="isLoading"
+        :is-error="isError"
+        :cells="9"
+        :with-actions="false"
+      />
     </div>
     <div
       class="list-wrapper"
diff --git a/src/components/lists/TaskStatusList.vue b/src/components/lists/TaskStatusList.vue
index df8f4b74ac..383aa2b10e 100644
--- a/src/components/lists/TaskStatusList.vue
+++ b/src/components/lists/TaskStatusList.vue
@@ -4,12 +4,12 @@
       <table class="datatable">
         <thead class="datatable-head">
           <tr>
-            <th scope="col" class="name">
-              {{ $t('task_status.fields.name') }}
-            </th>
             <th scope="col" class="short-name">
               {{ $t('task_status.fields.short_name') }}
             </th>
+            <th scope="col" class="name">
+              {{ $t('task_status.fields.name') }}
+            </th>
             <th scope="col" class="is-default">
               {{ $t('task_status.fields.is_default') }}
             </th>
@@ -38,43 +38,63 @@
           class="datatable-body"
           item-key="id"
           tag="tbody"
+          :disabled="isMobile"
           @end="updateTaskStatusPriorities"
           v-model="taskStatuses"
         >
-          <template #item="{ element: taskStatus }">
+          <template #item="{ element: status }">
             <tr class="datatable-row task-status">
-              <td class="name">
-                {{ taskStatus.name }}
-                <span
-                  :title="taskStatus.description"
-                  v-if="taskStatus.description"
-                >
+              <task-status-cell
+                class="short-name"
+                :entry="status"
+                :data-label="$t('task_status.fields.short_name')"
+              />
+              <td class="name" :data-label="$t('task_status.fields.name')">
+                {{ status.name }}
+                <span :title="status.description" v-if="status.description">
                   <help-circle-icon class="icon is-small" />
                 </span>
               </td>
-              <task-status-cell class="short-name" :entry="taskStatus" />
-              <boolean-cell class="is-default" :value="taskStatus.is_default" />
-              <boolean-cell class="is-wip" :value="taskStatus.is_wip" />
-              <boolean-cell class="is-done" :value="taskStatus.is_done" />
-              <boolean-cell class="is-retake" :value="taskStatus.is_retake" />
+              <boolean-cell
+                class="is-default"
+                :value="status.is_default"
+                :data-label="$t('task_status.fields.is_default')"
+              />
+              <boolean-cell
+                class="is-wip"
+                :value="status.is_wip"
+                :data-label="$t('task_status.fields.is_wip')"
+              />
+              <boolean-cell
+                class="is-done"
+                :value="status.is_done"
+                :data-label="$t('task_status.fields.is_done')"
+              />
+              <boolean-cell
+                class="is-retake"
+                :value="status.is_retake"
+                :data-label="$t('task_status.fields.is_retake')"
+              />
               <boolean-cell
                 class="is-artist-allowed"
-                :value="taskStatus.is_artist_allowed"
+                :value="status.is_artist_allowed"
+                :data-label="$t('task_status.fields.is_artist_allowed')"
               />
               <boolean-cell
                 class="is-client-allowed"
-                :value="taskStatus.is_client_allowed"
+                :value="status.is_client_allowed"
+                :data-label="$t('task_status.fields.is_client_allowed')"
               />
               <boolean-cell
                 class="is-feedback-request"
-                :value="taskStatus.is_feedback_request"
+                :value="status.is_feedback_request"
+                :data-label="$t('task_status.fields.is_feedback_request')"
               />
               <row-actions-cell
-                :hide-delete="
-                  taskStatus.is_default === true || taskStatus.for_concept
-                "
-                @edit-clicked="$emit('edit-clicked', taskStatus)"
-                @delete-clicked="$emit('delete-clicked', taskStatus)"
+                class="datatable-row-footer"
+                :hide-delete="status.is_default === true || status.for_concept"
+                @edit-clicked="$emit('edit-clicked', status)"
+                @delete-clicked="$emit('delete-clicked', status)"
               />
             </tr>
           </template>
@@ -82,86 +102,81 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="8"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-task-status">
-      {{ entries.length }} {{ $tc('task_status.number', entries.length) }}
+      {{ entries.length }} {{ $t('task_status.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import { HelpCircleIcon } from 'lucide-vue-next'
 import draggable from 'vuedraggable'
-
-import { formatListMixin } from '@/components/mixins/format'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import BooleanCell from '@/components/cells/BooleanCell.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
-import TableInfo from '@/components/widgets/TableInfo.vue'
 import TaskStatusCell from '@/components/cells/TaskStatusCell.vue'
+import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'task-status-list',
-
-  mixins: [formatListMixin],
-
-  components: {
-    BooleanCell,
-    draggable,
-    HelpCircleIcon,
-    RowActionsCell,
-    TableInfo,
-    TaskStatusCell
-  },
-
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    }
-  },
+const props = defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  emits: ['delete-clicked', 'edit-clicked', 'update-priorities'],
+const emit = defineEmits([
+  'delete-clicked',
+  'edit-clicked',
+  'update-priorities'
+])
 
-  data() {
-    return {
-      taskStatuses: []
-    }
-  },
-
-  mounted() {
-    this.taskStatuses = this.entries
-  },
-
-  computed: {},
-
-  methods: {
-    async updateTaskStatusPriorities() {
-      const taskStatusPriorities = this.taskStatuses.map(
-        (taskStatus, index) => ({
-          id: taskStatus.id,
-          priority: index + 1
-        })
-      )
-      this.$emit('update-priorities', taskStatusPriorities)
-    }
-  },
+// State
 
-  watch: {
-    entries() {
-      this.taskStatuses = this.entries
-    }
+const isMobile = ref(false)
+const taskStatuses = ref([...props.entries])
+
+// Functions
+
+const updateTaskStatusPriorities = () => {
+  emit(
+    'update-priorities',
+    taskStatuses.value.map((status, index) => ({
+      id: status.id,
+      priority: index + 1
+    }))
+  )
+}
+
+// Watchers
+
+watch(
+  () => props.entries,
+  entries => {
+    taskStatuses.value = [...entries]
   }
+)
+
+// Lifecycle
+
+const updateIsMobile = () => {
+  isMobile.value = window.innerWidth <= 768
 }
+
+onMounted(() => {
+  updateIsMobile()
+  window.addEventListener('resize', updateIsMobile)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateIsMobile)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -199,4 +214,77 @@ export default {
 .task-status[draggable='true'] {
   cursor: grabbing;
 }
+
+@media screen and (max-width: 768px) {
+  // Drag-and-drop is disabled on mobile, so reset the grab cursor.
+  .task-status,
+  .task-status[draggable='true'] {
+    cursor: default;
+  }
+
+  // Stack each row as a card, mirroring the AssetTypeList mobile layout.
+  :deep(.datatable-wrapper) {
+    background: transparent;
+    border: 0;
+    overflow-x: visible;
+  }
+
+  .datatable,
+  .datatable-body {
+    display: block;
+    width: 100%;
+  }
+
+  .datatable-head {
+    display: none;
+  }
+
+  .datatable-row {
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    display: block;
+    margin-bottom: 0.75em;
+    padding: 0.85em 1em;
+  }
+
+  .dark .datatable-row {
+    background: var(--background-alt);
+  }
+
+  .datatable-row td {
+    border: 0;
+    display: block;
+    height: auto;
+    max-width: none;
+    min-width: 0;
+    padding: 0.4em 0;
+    text-align: left;
+    width: auto;
+  }
+
+  .datatable-row td[data-label]::before {
+    color: var(--text-alt);
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75em;
+    letter-spacing: 0.06em;
+    margin-bottom: 0.2em;
+    text-transform: uppercase;
+  }
+
+  .datatable-row .name {
+    font-size: 1.05em;
+    font-weight: 600;
+    padding-top: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .datatable-row .actions {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/lists/TaskTypeList.vue b/src/components/lists/TaskTypeList.vue
index 560256e42d..3f25b894c5 100644
--- a/src/components/lists/TaskTypeList.vue
+++ b/src/components/lists/TaskTypeList.vue
@@ -27,29 +27,42 @@
           class="datatable-body"
           item-key="id"
           tag="tbody"
+          :disabled="isMobile"
           @end="updatePriority"
           v-model="items"
         >
           <template #item="{ element: taskType }">
             <tr class="datatable-row tasktype-item">
-              <td class="department">
+              <td
+                class="department"
+                :data-label="$t('task_types.fields.department')"
+              >
                 <department-name
                   :department="getDepartment(taskType.department_id)"
                   v-if="!isEmpty(taskType.department_id)"
                 />
               </td>
-              <task-type-cell class="name" :task-type="taskType" />
-              <td class="short_name">
+              <task-type-cell
+                class="name"
+                :task-type="taskType"
+                :data-label="$t('task_types.fields.name')"
+              />
+              <td
+                class="short_name"
+                :data-label="$t('task_types.fields.short_name')"
+              >
                 {{ taskType.short_name }}
               </td>
               <boolean-cell
                 class="allow-timelog"
                 :value="taskType.allow_timelog"
+                :data-label="$t('task_types.fields.allow_timelog')"
               />
-              <td>
+              <td :data-label="$t('task_types.fields.description')">
                 {{ taskType.description }}
               </td>
               <row-actions-cell
+                class="datatable-row-footer"
                 :task-type-id="taskType.id"
                 @delete-clicked="$emit('delete-clicked', taskType)"
                 @edit-clicked="$emit('edit-clicked', taskType)"
@@ -69,95 +82,90 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="4"
+      :with-thumbnail="false"
+    />
 
     <p class="has-text-centered nb-task-types" v-if="entries.length > 0">
-      {{ entries.length }} {{ $tc('task_types.number', entries.length) }}
+      {{ entries.length }} {{ $t('task_types.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
 import draggable from 'vuedraggable'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import BooleanCell from '@/components/cells/BooleanCell.vue'
-import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
-import TableInfo from '@/components/widgets/TableInfo.vue'
 import TaskTypeCell from '@/components/cells/TaskTypeCell.vue'
+import DepartmentName from '@/components/widgets/DepartmentName.vue'
+import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'task-type-list',
+const store = useStore()
 
-  components: {
-    draggable,
-    BooleanCell,
-    DepartmentName,
-    RowActionsCell,
-    TableInfo,
-    TaskTypeCell
-  },
+// Props / Emits
 
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    }
-  },
+const props = defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  emits: ['delete-clicked', 'edit-clicked', 'update-priorities'],
+const emit = defineEmits([
+  'delete-clicked',
+  'edit-clicked',
+  'update-priorities'
+])
 
-  data() {
-    return {
-      items: []
-    }
-  },
+// State
 
-  computed: {
-    ...mapGetters(['getDepartment'])
-  },
+const isMobile = ref(false)
+const items = ref([])
 
-  methods: {
-    updatePriority() {
-      const items = this.items
-      const forms = []
-      items.forEach((item, index) => {
-        index += 1
-        const form = {
-          id: item.id,
-          name: item.name,
-          priority: String(index)
-        }
-        item.priority = index
-        forms.push(form)
-      })
-      this.$emit('update-priorities', forms)
-    },
-
-    isEmpty(value) {
-      return value === undefined || value === null || value === ''
-    }
+// Functions
+
+const getDepartment = id => store.getters.getDepartment(id)
+
+const isEmpty = value => value === undefined || value === null || value === ''
+
+const updatePriority = () => {
+  const forms = items.value.map((item, index) => {
+    const priority = index + 1
+    item.priority = priority
+    return { id: item.id, name: item.name, priority: String(priority) }
+  })
+  emit('update-priorities', forms)
+}
+
+// Watchers
+
+watch(
+  () => props.entries,
+  entries => {
+    items.value = JSON.parse(JSON.stringify(entries))
   },
+  { deep: true, immediate: true }
+)
 
-  watch: {
-    entries: {
-      deep: true,
-      immediate: true,
-      handler() {
-        this.items = JSON.parse(JSON.stringify(this.entries))
-      }
-    }
-  }
+// Lifecycle
+
+const updateIsMobile = () => {
+  isMobile.value = window.innerWidth <= 768
 }
+
+onMounted(() => {
+  updateIsMobile()
+  window.addEventListener('resize', updateIsMobile)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateIsMobile)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -176,11 +184,6 @@ export default {
   min-width: 200px;
 }
 
-.priority {
-  width: 80px;
-  min-width: 80px;
-}
-
 .allow-timelog {
   width: 100px;
   min-width: 100px;
@@ -191,10 +194,6 @@ export default {
   min-width: 100px;
 }
 
-.color {
-  width: 100px;
-}
-
 .tasktype-item {
   cursor: grab;
 }
@@ -219,4 +218,82 @@ export default {
 .data-list {
   margin-top: 0;
 }
+
+@media screen and (max-width: 768px) {
+  // Drag-and-drop is disabled on mobile, so reset the grab cursor.
+  .tasktype-item,
+  .tasktype-item[draggable='true'] {
+    cursor: default;
+  }
+
+  // Stack each row as a card, mirroring the AssetTypeList mobile layout.
+  :deep(.datatable-wrapper) {
+    background: transparent;
+    border: 0;
+    overflow-x: visible;
+  }
+
+  .datatable,
+  .datatable-body {
+    display: block;
+    width: 100%;
+  }
+
+  .datatable-head {
+    display: none;
+  }
+
+  // Override App.vue's global `:last-child { background: transparent !important }`
+  // rule, which would otherwise leave the last card with only its border drawn.
+  .datatable-row,
+  .datatable-row:last-child {
+    background: var(--background) !important;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    display: block;
+    margin-bottom: 0.75em;
+    padding: 0.85em 1em;
+  }
+
+  .dark .datatable-row,
+  .dark .datatable-row:last-child {
+    background: var(--background-alt) !important;
+  }
+
+  .datatable-row td {
+    background-color: transparent !important;
+    border: 0;
+    display: block;
+    height: auto;
+    max-width: none;
+    min-width: 0;
+    padding: 0.4em 0;
+    text-align: left;
+    width: auto;
+  }
+
+  .datatable-row td[data-label]::before {
+    color: var(--text-alt);
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75em;
+    letter-spacing: 0.06em;
+    margin-bottom: 0.2em;
+    text-transform: uppercase;
+  }
+
+  .datatable-row .name {
+    font-size: 1.05em;
+    font-weight: 600;
+    padding-top: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .datatable-row .actions {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/lists/TimeSpentTaskList.vue b/src/components/lists/TimeSpentTaskList.vue
index c15f203f3f..ac9d28c3dc 100644
--- a/src/components/lists/TimeSpentTaskList.vue
+++ b/src/components/lists/TimeSpentTaskList.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="data-list">
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="2"
+      :with-thumbnail="false"
+      :with-actions="false"
+    />
 
     <div class="aggregated-time-spents">
       <div
diff --git a/src/components/lists/TimesheetList.vue b/src/components/lists/TimesheetList.vue
index b4453a1683..47ec78fe1d 100644
--- a/src/components/lists/TimesheetList.vue
+++ b/src/components/lists/TimesheetList.vue
@@ -176,7 +176,13 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="2"
+      :with-thumbnail="false"
+      :with-actions="false"
+    />
 
     <p class="has-text-centered footer-info" v-if="!isLoading">
       {{ tasks.length }} {{ $tc('tasks.tasks', tasks.length) }}
diff --git a/src/components/lists/TodosList.vue b/src/components/lists/TodosList.vue
index fc26c7064e..ba7e81763c 100644
--- a/src/components/lists/TodosList.vue
+++ b/src/components/lists/TodosList.vue
@@ -275,7 +275,12 @@
       </table>
     </div>
 
-    <table-info :is-loading="isLoading" :is-error="isError" />
+    <table-info
+      :is-loading="isLoading"
+      :is-error="isError"
+      :cells="10"
+      :with-actions="false"
+    />
 
     <div
       class="has-text-centered empty-list"
diff --git a/src/components/mixins/annotation.js b/src/components/mixins/annotation.js
index 1f7bbd0c60..64c30667d0 100644
--- a/src/components/mixins/annotation.js
+++ b/src/components/mixins/annotation.js
@@ -1465,26 +1465,74 @@ export const annotationMixin = {
     /*
      * Prepare the data to send to the server for persistance. Emit an event
      * suggesting that annotations should be saved.
+     *
+     * The active additions/updates/deletions arrays are *swapped* into a
+     * pendingSave buffer instead of being wiped, so the parent can call
+     * back via `restoreFailedAnnotations()` to put them back if the save
+     * action rejects (network blip, lock contention, 5xx). Drawings done
+     * during the round-trip land in fresh arrays and are saved on the
+     * next debounce cycle.
      */
     endAnnotationSaving() {
-      if (this.notSaved) {
-        const preview = this.$options.annotatedPreview
-        this.$options.changesToSave = {
-          preview,
-          additions: [...this.additions],
-          updates: [...this.updates],
-          deletions: [...this.deletions]
-        }
-        this.clearModifications()
-        clearTimeout(this.$options.annotationToSave)
-        this.notSaved = false
-        this.$emit('annotation-changed', this.$options.changesToSave)
-        if (this.onAnnotationChanged) {
-          this.onAnnotationChanged(this.$options.changesToSave)
-        }
+      if (!this.notSaved || this.$options.pendingSave) return
+      const preview = this.$options.annotatedPreview
+      const changesToSave = {
+        preview,
+        additions: this.additions,
+        updates: this.updates,
+        deletions: this.deletions
+      }
+      this.$options.pendingSave = changesToSave
+      this.$options.changesToSave = changesToSave
+      this.additions = []
+      this.updates = []
+      this.deletions = []
+      clearTimeout(this.$options.annotationToSave)
+      this.notSaved = false
+      this.$emit('annotation-changed', changesToSave)
+      if (this.onAnnotationChanged) {
+        this.onAnnotationChanged(changesToSave)
       }
     },
 
+    /*
+     * Called by the parent component once the Vuex save action has
+     * resolved successfully. Drops the in-flight buffer; if drawings
+     * accumulated in the active arrays during the round-trip, flush
+     * them immediately rather than wait for another debounce cycle.
+     */
+    confirmAnnotationsSaved() {
+      this.$options.pendingSave = null
+      if (
+        this.additions.length > 0 ||
+        this.updates.length > 0 ||
+        this.deletions.length > 0
+      ) {
+        this.notSaved = true
+        this.endAnnotationSaving()
+      }
+    },
+
+    /*
+     * Called by the parent component when the Vuex save action rejects.
+     * Pre-pends the in-flight items back to the head of the active
+     * arrays (so they take priority over anything drawn since), flips
+     * notSaved back on and schedules a retry with a longer backoff.
+     */
+    restoreFailedAnnotations() {
+      const pending = this.$options.pendingSave
+      if (!pending) return
+      this.additions = [...pending.additions, ...this.additions]
+      this.updates = [...pending.updates, ...this.updates]
+      this.deletions = [...pending.deletions, ...this.deletions]
+      this.$options.pendingSave = null
+      this.notSaved = true
+      clearTimeout(this.$options.annotationToSave)
+      this.$options.annotationToSave = setTimeout(() => {
+        this.endAnnotationSaving()
+      }, 5000)
+    },
+
     /*
      * Copy all information from the annotation into the target canvas to be
      * able to apply operations on it, without modifiying the annotation.
diff --git a/src/components/modals/ChangeAvatarModal.vue b/src/components/modals/ChangeAvatarModal.vue
index c7d16c814d..18b119be13 100644
--- a/src/components/modals/ChangeAvatarModal.vue
+++ b/src/components/modals/ChangeAvatarModal.vue
@@ -1,14 +1,11 @@
 <template>
   <base-modal :active="active" :title="title" @cancel="$emit('cancel')">
-    <p>
-      {{ $t('main.csv.select_file') }}
-    </p>
+    <p class="explanation">{{ $t('profile.avatar.intro') }}</p>
 
-    <file-upload
-      ref="uploadAvatarField"
-      :label="$t('main.csv.upload_file')"
+    <image-cropper
+      ref="cropperRef"
+      :shape="shape"
       @fileselected="onFileSelected"
-      accept=".png,.jpg,.jpeg"
     />
 
     <p class="error" v-if="isError">
@@ -18,7 +15,7 @@
     <modal-footer
       :error-text="$t('productions.metadata.error')"
       :is-loading="isLoading"
-      :is-disabled="!formData"
+      :is-disabled="!hasFile"
       @confirm="onConfirmClicked"
       @cancel="$emit('cancel')"
     />
@@ -26,45 +23,70 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, toRef, watch } from 'vue'
+
+import { useModal } from '@/composables/modal'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
-// eslint-disable-next-line no-unused-vars
-import FileUpload from '@/components/widgets/FileUpload.vue'
+import ImageCropper from '@/components/widgets/ImageCropper.vue'
 
 const props = defineProps({
   active: { type: Boolean, default: false },
   isError: { type: Boolean, default: false },
   isLoading: { type: Boolean, default: false },
+  shape: {
+    type: String,
+    default: 'circle',
+    validator: value => ['circle', 'rounded'].includes(value)
+  },
   title: { type: String, default: '' }
 })
 
 const emit = defineEmits(['cancel', 'confirm', 'fileselected'])
 
-const formData = ref(null)
-const uploadAvatarField = ref(null)
+useModal(toRef(props, 'active'), emit)
+
+const cropperRef = ref(null)
+const hasFile = ref(false)
+const lastFormData = ref(null)
 
-const onFileSelected = data => {
-  formData.value = data
-  emit('fileselected', data)
+const onFileSelected = formData => {
+  hasFile.value = true
+  lastFormData.value = formData
+  emit('fileselected', formData)
 }
 
-const onConfirmClicked = () => {
-  emit('confirm', formData.value)
+const onConfirmClicked = async () => {
+  try {
+    const cropped = await cropperRef.value?.cropToFormData()
+    emit('confirm', cropped ?? lastFormData.value)
+  } catch (err) {
+    console.error(err)
+    emit('confirm', lastFormData.value)
+  }
 }
 
 watch(
   () => props.active,
   () => {
-    formData.value = null
-    uploadAvatarField.value?.reset()
+    cropperRef.value?.reset()
+    hasFile.value = false
+    lastFormData.value = null
   }
 )
 </script>
 
 <style lang="scss" scoped>
+.explanation {
+  color: var(--text-alt);
+  margin-bottom: 1.25rem;
+  text-align: center;
+}
+
 .error {
-  margin-top: 1em;
+  color: $red;
+  margin-top: 1rem;
+  text-align: center;
 }
 </style>
diff --git a/src/components/modals/EditProductionModal.vue b/src/components/modals/EditProductionModal.vue
index 754b5b97f3..897decf4c7 100644
--- a/src/components/modals/EditProductionModal.vue
+++ b/src/components/modals/EditProductionModal.vue
@@ -64,11 +64,11 @@
             @enter="runConfirmation"
             v-model="form.resolution"
           />
-          <div>
+          <div class="picture-field">
             <label class="label">{{ $t('productions.picture') }}</label>
-            <file-upload
-              :label="$t('main.csv.upload_file')"
-              accept=".png,.jpg,.jpeg"
+            <image-cropper
+              ref="cropperRef"
+              shape="rounded"
               @fileselected="onFileSelected"
             />
           </div>
@@ -96,9 +96,9 @@ import {
   PRODUCTION_TYPE_OPTIONS
 } from '@/lib/productions'
 
-import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
-import FileUpload from '@/components/widgets/FileUpload.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
+import ImageCropper from '@/components/widgets/ImageCropper.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
 const props = defineProps({
@@ -120,6 +120,7 @@ const productionStyleOptions = PRODUCTION_STYLE_OPTIONS
 const productionTypeOptions = PRODUCTION_TYPE_OPTIONS
 
 const form = ref({})
+const cropperRef = ref(null)
 
 // Computed
 
@@ -142,7 +143,19 @@ const resetForm = () => {
   }
 }
 
-const runConfirmation = () => {
+const runConfirmation = async () => {
+  // If the cropper holds an image, crop it now so the parent uploads
+  // the framed version rather than the original file. The cropper also
+  // emits `fileselected` immediately when a file is picked, so the
+  // parent already has a fallback payload if cropping fails.
+  if (cropperRef.value?.hasFile) {
+    try {
+      const cropped = await cropperRef.value.cropToFormData()
+      if (cropped) emit('fileselected', cropped)
+    } catch (err) {
+      console.error(err)
+    }
+  }
   emit('confirm', form.value)
 }
 
@@ -159,4 +172,8 @@ watch(() => props.productionToEdit, resetForm, { immediate: true })
 .box {
   padding-bottom: 1.5em;
 }
+
+.picture-field {
+  margin-top: 1.5em;
+}
 </style>
diff --git a/src/components/modals/SharePlaylistModal.vue b/src/components/modals/SharePlaylistModal.vue
index 48ab21387f..2b4d542a15 100644
--- a/src/components/modals/SharePlaylistModal.vue
+++ b/src/components/modals/SharePlaylistModal.vue
@@ -8,12 +8,18 @@
       <p class="description">
         {{ $t('playlists.share_modal.description') }}
       </p>
-      <div v-if="shareLinks.length > 0" class="existing-links">
+      <p class="empty-links" v-if="shareLinks.length === 0">
+        {{ $t('playlists.share_modal.no_links') }}
+      </p>
+      <div v-else class="existing-links">
         <h3 class="subtitle">
           {{ $t('playlists.share_modal.active_links') }}
         </h3>
         <div class="share-link-item" v-for="link in shareLinks" :key="link.id">
-          <div class="share-link-row flexrow">
+          <div
+            class="share-link-row flexrow"
+            v-if="confirmingRevoke !== link.token"
+          >
             <input
               class="input flexrow-item"
               :value="buildShareUrl(link.token)"
@@ -38,11 +44,28 @@
             <button
               class="button flexrow-item revoke-button"
               :title="$t('playlists.share_modal.revoke')"
-              @click="revokeLink(link.token)"
+              @click="askRevoke(link.token)"
             >
               <x-icon :size="16" />
             </button>
           </div>
+          <div class="revoke-confirm flexrow" v-else>
+            <span class="revoke-confirm-text flexrow-item filler">
+              {{ $t('playlists.share_modal.revoke_confirm') }}
+            </span>
+            <button
+              class="button flexrow-item"
+              @click="confirmingRevoke = null"
+            >
+              {{ $t('main.cancel') }}
+            </button>
+            <button
+              class="button is-danger flexrow-item"
+              @click="confirmRevoke(link.token)"
+            >
+              {{ $t('playlists.share_modal.revoke') }}
+            </button>
+          </div>
           <div class="share-link-info">
             <span class="info-tag" v-if="link.expiration_date">
               {{ $t('playlists.share_modal.expires') }}
@@ -115,37 +138,55 @@
       </div>
 
       <div class="create-section">
-        <h3 class="subtitle" v-if="shareLinks.length > 0">
-          {{ $t('playlists.share_modal.create_new') }}
-        </h3>
-        <div class="field">
-          <label class="label">
-            {{ $t('playlists.share_modal.expiration') }}
-          </label>
-          <date-field
-            can-delete
-            is-dark
-            :min-date="tomorrow"
-            v-model="expirationDate"
+        <div class="add-row" v-if="!isCreateFormVisible">
+          <button-simple
+            icon="plus"
+            :text="$t('playlists.share_modal.add_link')"
+            @click="showCreateForm"
           />
         </div>
-        <div class="field">
-          <combobox-boolean
-            :label="$t('playlists.share_modal.can_comment')"
-            v-model="canComment"
-          />
+        <div class="create-card" v-else>
+          <h3 class="create-card-title">
+            {{ $t('playlists.share_modal.create_new') }}
+          </h3>
+          <div class="create-form">
+            <div class="field">
+              <checkbox
+                :toggle="true"
+                :label="$t('playlists.share_modal.can_comment')"
+                v-model="canComment"
+              />
+            </div>
+            <div class="field">
+              <label class="label">
+                {{ $t('playlists.share_modal.expiration') }}
+              </label>
+              <date-field
+                can-delete
+                is-dark
+                :min-date="tomorrow"
+                v-model="expirationDate"
+              />
+            </div>
+            <div class="form-actions">
+              <button-simple
+                :is-loading="loading.create"
+                :text="$t('playlists.share_modal.generate')"
+                @click="createLink"
+              />
+            </div>
+            <p class="create-error" v-if="errors.create">
+              {{ $t('playlists.share_modal.error') }}
+            </p>
+          </div>
         </div>
       </div>
 
-      <modal-footer
-        :confirm-label="$t('playlists.share_modal.generate')"
-        :cancel-label="$t('main.close')"
-        :is-loading="loading.create"
-        :is-error="errors.create"
-        :error-text="$t('playlists.share_modal.error')"
-        @confirm="createLink"
-        @cancel="$emit('cancel')"
-      />
+      <div class="close-row">
+        <button class="button is-link" @click="$emit('cancel')">
+          {{ $t('main.close') }}
+        </button>
+      </div>
     </div>
   </base-modal>
 </template>
@@ -164,9 +205,8 @@ import { formatSimpleDate } from '@/lib/time'
 import playlistsApi from '@/store/api/playlists'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
-import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
+import Checkbox from '@/components/widgets/Checkbox.vue'
 import DateField from '@/components/widgets/DateField.vue'
 
 const { t } = useI18n()
@@ -182,12 +222,14 @@ const emit = defineEmits(['cancel', 'links-updated'])
 
 const shareLinks = ref([])
 const expirationDate = ref(null)
-const canComment = ref('true')
+const canComment = ref(true)
 const loading = reactive({ create: false })
 const errors = reactive({ create: false })
 
 const openInviteToken = ref(null)
 const inviteState = reactive({})
+const confirmingRevoke = ref(null)
+const isCreateFormVisible = ref(false)
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 
@@ -311,6 +353,18 @@ const loadLinks = async () => {
   }
 }
 
+const showCreateForm = () => {
+  errors.create = false
+  isCreateFormVisible.value = true
+}
+
+const hideCreateForm = () => {
+  isCreateFormVisible.value = false
+  errors.create = false
+  expirationDate.value = null
+  canComment.value = true
+}
+
 const createLink = async () => {
   loading.create = true
   errors.create = false
@@ -320,9 +374,10 @@ const createLink = async () => {
       : undefined
     await playlistsApi.createShareLink(props.playlist.id, {
       expiration_date: expDate,
-      can_comment: canComment.value === 'true'
+      can_comment: canComment.value
     })
     await loadLinks()
+    hideCreateForm()
   } catch (err) {
     console.error(err)
     errors.create = true
@@ -330,9 +385,14 @@ const createLink = async () => {
   loading.create = false
 }
 
-const revokeLink = async token => {
+const askRevoke = token => {
+  confirmingRevoke.value = token
+}
+
+const confirmRevoke = async token => {
   try {
     await playlistsApi.revokeShareLink(props.playlist.id, token)
+    confirmingRevoke.value = null
     await loadLinks()
   } catch (err) {
     console.error(err)
@@ -382,57 +442,141 @@ onMounted(() => {
 }
 
 .share-link-item {
-  margin-bottom: 1em;
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin-bottom: 0.75em;
+  padding: 0.75em 0.85em;
+}
+
+.dark .share-link-item {
+  background: var(--background);
 }
 
 .share-link-row {
-  gap: 0;
+  align-items: center;
+  gap: 0.2em;
 
   .input {
-    font-size: 0.85em;
-    background: var(--background-alt);
-    color: var(--text);
+    background: var(--background);
     border: 1px solid var(--border);
-    border-radius: 10px;
+    border-radius: 8px;
+    color: var(--text);
     cursor: text;
+    flex: 1 1 auto;
+    font-size: 0.85em;
+    margin-right: 0.5em;
     padding-left: 1em;
   }
 
-  .copy-button,
-  .invite-button {
-    flex: 0 0 auto;
-    border-radius: 10px;
-    margin-left: -1px;
-  }
-
-  .invite-button {
-    margin-left: 0.5em;
-
-    &.active {
-      background: var(--background-selectable);
-    }
+  .dark & .input {
+    background: var(--background-alt);
   }
 
+  .copy-button,
+  .invite-button,
   .revoke-button {
+    border-radius: 8px;
     flex: 0 0 auto;
-    margin-left: 0.5em;
-    opacity: 0;
-    transition: opacity 0.15s;
+    margin: 0;
   }
 
-  &:hover .revoke-button {
-    opacity: 1;
+  .invite-button.active {
+    background: var(--background-selectable);
   }
 }
 
 .create-section {
-  .subtitle {
-    margin-bottom: 1em;
+  margin-top: 1.5em;
+
+  .field {
+    margin-bottom: 0;
   }
+}
+
+.add-row {
+  display: flex;
+  justify-content: center;
+}
+
+.create-card {
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.25em 1em 1em;
+}
+
+.dark .create-card {
+  background: var(--background);
+}
+
+.create-card-title {
+  color: var(--text);
+  font-size: 1.1em;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  margin: 0 0 1.25em;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.create-form {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 
   .field {
-    margin-bottom: 1em;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4em;
+    margin-bottom: 0;
+    text-align: center;
   }
+
+  .field .label {
+    margin: 0;
+  }
+}
+
+.form-actions {
+  align-items: center;
+  display: flex;
+  gap: 0.6em;
+  justify-content: center;
+  margin-top: 0.5em;
+}
+
+.revoke-confirm {
+  align-items: center;
+  gap: 0.5em;
+}
+
+.revoke-confirm-text {
+  color: $red;
+  font-size: 0.9em;
+  margin: 0;
+}
+
+.empty-links {
+  color: var(--text-alt);
+  font-size: 0.9em;
+  margin: 0 0 1.25em;
+  text-align: center;
+}
+
+.create-error {
+  color: $red;
+  font-size: 0.85em;
+  margin: 0.75em 0 0;
+  text-align: right;
+}
+
+.close-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1.5em;
 }
 
 .share-link-info {
diff --git a/src/components/modals/ViewPlaylistModal.vue b/src/components/modals/ViewPlaylistModal.vue
index 244c0efe43..d5799d63b3 100644
--- a/src/components/modals/ViewPlaylistModal.vue
+++ b/src/components/modals/ViewPlaylistModal.vue
@@ -124,14 +124,24 @@ const onPreviewChanged = async ({
   })
 }
 
-const onAnnotationChanged = ({ preview, additions, deletions, updates }) => {
-  store.dispatch('updatePreviewAnnotation', {
-    taskId: preview.task_id,
-    preview,
-    additions,
-    deletions,
-    updates
-  })
+const onAnnotationChanged = async ({
+  preview,
+  additions,
+  deletions,
+  updates
+}) => {
+  try {
+    await store.dispatch('updatePreviewAnnotation', {
+      taskId: preview.task_id,
+      preview,
+      additions,
+      deletions,
+      updates
+    })
+    playlistPlayer.value?.confirmAnnotationsSaved()
+  } catch {
+    playlistPlayer.value?.restoreFailedAnnotations()
+  }
 }
 
 const onAnnotationsRefreshed = preview => {
diff --git a/src/components/pages/AssetLibrary.vue b/src/components/pages/AssetLibrary.vue
index fd6310068a..d70ef983e5 100644
--- a/src/components/pages/AssetLibrary.vue
+++ b/src/components/pages/AssetLibrary.vue
@@ -1,5 +1,5 @@
 <template>
-  <page-layout :side="isCurrentUserManager">
+  <page-layout :side="showSidePanel">
     <template #main>
       <div class="asset-library">
         <header class="flexrow">
@@ -8,7 +8,7 @@
 
         <div class="filters flexrow">
           <search-field
-            ref="search-field"
+            ref="searchFieldRef"
             class="flexrow-item"
             @change="onSearchChange"
             :can-save="false"
@@ -96,181 +96,202 @@
   </page-layout>
 </template>
 
-<script>
+<script setup>
+import { useHead } from '@unhead/vue'
 import { firstBy } from 'thenby'
-import { mapGetters, mapActions } from 'vuex'
-
-import { searchMixin } from '@/components/mixins/search'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
+import PageLayout from '@/components/layouts/PageLayout.vue'
+import ManageLibrary from '@/components/sides/ManageLibrary.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxProduction from '@/components/widgets/ComboboxProduction.vue'
 import EntityPreview from '@/components/widgets/EntityPreview.vue'
-import ManageLibrary from '@/components/sides/ManageLibrary.vue'
-import PageLayout from '@/components/layouts/PageLayout.vue'
 import PageTitle from '@/components/widgets/PageTitle.vue'
 import ProductionName from '@/components/widgets/ProductionName.vue'
 import SearchField from '@/components/widgets/SearchField.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'asset-library',
-
-  mixins: [searchMixin],
-
-  components: {
-    Combobox,
-    ComboboxProduction,
-    EntityPreview,
-    ManageLibrary,
-    PageLayout,
-    PageTitle,
-    ProductionName,
-    SearchField,
-    TableInfo
-  },
-
-  data() {
-    return {
-      errors: {
-        sharedAssets: false
-      },
-      filters: {
-        productionId: null
-      },
-      loading: {
-        sharedAssets: false
-      },
-      sorting: {
-        current: 'name',
-        options: ['name', 'production', 'created_at', 'updated_at'].map(
-          name => ({
-            label: name,
-            value: name
-          })
-        )
-      }
-    }
-  },
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
 
-  mounted() {
-    this.filters.productionId = this.$route.query.production || undefined
-    this.searchField.setValue(this.$route.query.search || undefined)
-    this.$nextTick(() => {
-      this.onSearchChange()
+const desktopQuery = window.matchMedia('(min-width: 769px)')
+const isDesktop = ref(desktopQuery.matches)
+const onMediaChange = event => {
+  isDesktop.value = event.matches
+}
+desktopQuery.addEventListener('change', onMediaChange)
+
+// State
+
+const searchFieldRef = ref(null)
+
+const errors = reactive({ sharedAssets: false })
+const loading = reactive({ sharedAssets: false })
+const filters = reactive({ productionId: null })
+const sorting = reactive({
+  current: 'name',
+  options: ['name', 'production', 'created_at', 'updated_at'].map(name => ({
+    label: name,
+    value: name
+  }))
+})
+
+// Computed
+
+const displayedSharedAssets = computed(
+  () => store.getters.displayedSharedAssets
+)
+const displayedSharedAssetsByType = computed(
+  () => store.getters.displayedSharedAssetsByType
+)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+// Hide the side panel under the 768px breakpoint — the asset grid takes
+// the full width on mobile and the "Add to library" workflow is desktop
+// territory anyway.
+const showSidePanel = computed(
+  () => isCurrentUserManager.value && isDesktop.value
+)
+const openProductions = computed(() => store.getters.openProductions)
+const productionMap = computed(() => store.getters.productionMap)
+const selectedAssets = computed(() => store.getters.selectedAssets)
+
+const productionList = computed(() => [
+  { name: t('main.all') },
+  ...openProductions.value
+])
+
+const sortedSharedAssetsByType = computed(() => {
+  const nameFilter = (a, b) =>
+    a.name.localeCompare(b.name, undefined, { numeric: true })
+  const productionFilter = (a, b) =>
+    a.production.name.localeCompare(b.production.name, undefined, {
+      numeric: true
     })
-  },
-
-  computed: {
-    ...mapGetters([
-      'displayedSharedAssets',
-      'displayedSharedAssetsByType',
-      'isCurrentUserManager',
-      'openProductions',
-      'productionMap',
-      'selectedAssets'
-    ]),
-
-    searchField() {
-      return this.$refs['search-field']
-    },
-
-    productionList() {
-      return [{ name: this.$t('main.all') }, ...this.openProductions]
-    },
-
-    sortedSharedAssetsByType() {
-      const nameFilter = (a, b) =>
-        a.name.localeCompare(b.name, undefined, { numeric: true })
-      const productionFilter = (a, b) =>
-        a.production.name.localeCompare(b.production.name, undefined, {
-          numeric: true
-        })
-      return this.displayedSharedAssetsByType.map(type => {
-        if (this.sorting.current === 'production') {
-          return type.sort(firstBy(productionFilter).thenBy(nameFilter))
-        }
-        if (this.sorting.current === 'created_at') {
-          return type.sort(firstBy('created_at'))
-        }
-        if (this.sorting.current === 'updated_at') {
-          return type.sort(firstBy('updated_at', -1))
-        }
-        return type.sort(firstBy(nameFilter).thenBy(productionFilter))
-      })
+  return displayedSharedAssetsByType.value.map(type => {
+    if (sorting.current === 'production') {
+      return type.sort(firstBy(productionFilter).thenBy(nameFilter))
     }
-  },
-
-  methods: {
-    ...mapActions([
-      'loadSharedAssets',
-      'setAssetSelection',
-      'setSharedAssetSearch'
-    ]),
-
-    async refresh(silent = false) {
-      this.loading.sharedAssets = !silent
-      const production = this.productionMap.get(this.filters.productionId)
-      try {
-        await this.loadSharedAssets({ production })
-      } catch (error) {
-        console.error(error)
-        this.errors.sharedAssets = true
-      }
-      this.loading.sharedAssets = false
-    },
-
-    toggleEntity(entity) {
-      const selected = this.isSelected(entity)
-      this.setAssetSelection({ asset: entity, selected: !selected })
-    },
-
-    isSelected(entity) {
-      return this.selectedAssets.has(entity.id)
-    },
-
-    onSearchChange() {
-      const searchQuery = this.searchField.getValue() || ''
-      this.setSharedAssetSearch(searchQuery)
-      this.setSearchInUrl()
-    },
-
-    updateRoute({ production, search }) {
-      const query = {
-        ...this.$route.query,
-        production: production || undefined,
-        search: search || undefined
-      }
-
-      if (JSON.stringify(query) !== JSON.stringify(this.$route.query)) {
-        this.$router.push({ query })
-      }
+    if (sorting.current === 'created_at') {
+      return type.sort(firstBy('created_at'))
     }
-  },
-
-  watch: {
-    'filters.productionId'(value) {
-      this.updateRoute({ production: value })
-      this.refresh()
+    if (sorting.current === 'updated_at') {
+      return type.sort(firstBy('updated_at', -1))
     }
-  },
-
-  head() {
-    return {
-      title: `${this.$t('library.asset_library')} - Kitsu`
+    return type.sort(firstBy(nameFilter).thenBy(productionFilter))
+  })
+})
+
+// Functions
+
+const setSearchInUrl = query => {
+  const searchQuery = query ?? searchFieldRef.value?.getValue()
+  router.push({
+    query: {
+      ...route.query,
+      search: searchQuery || undefined
     }
+  })
+}
+
+const onSearchChange = () => {
+  const searchQuery = searchFieldRef.value?.getValue() || ''
+  store.dispatch('setSharedAssetSearch', searchQuery)
+  setSearchInUrl()
+}
+
+const refresh = async (silent = false) => {
+  loading.sharedAssets = !silent
+  errors.sharedAssets = false
+  const production = productionMap.value.get(filters.productionId)
+  try {
+    await store.dispatch('loadSharedAssets', { production })
+  } catch (error) {
+    console.error(error)
+    errors.sharedAssets = true
   }
+  loading.sharedAssets = false
+}
+
+const isSelected = entity => selectedAssets.value.has(entity.id)
+
+const toggleEntity = entity => {
+  store.dispatch('setAssetSelection', {
+    asset: entity,
+    selected: !isSelected(entity)
+  })
 }
+
+const updateRoute = ({ production, search }) => {
+  const query = {
+    ...route.query,
+    production: production || undefined,
+    search: search || undefined
+  }
+  if (JSON.stringify(query) !== JSON.stringify(route.query)) {
+    router.push({ query })
+  }
+}
+
+// Watchers
+
+watch(
+  () => filters.productionId,
+  value => {
+    updateRoute({ production: value })
+    refresh()
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  filters.productionId = route.query.production || undefined
+  searchFieldRef.value?.setValue(route.query.search || undefined)
+  nextTick(onSearchChange)
+})
+
+onBeforeUnmount(() => {
+  desktopQuery.removeEventListener('change', onMediaChange)
+})
+
+// Head
+
+useHead({
+  title: computed(() => `${t('library.asset_library')} - Kitsu`)
+})
 </script>
 
 <style lang="scss" scoped>
 .asset-library {
+  color: var(--text);
   display: flex;
   flex-direction: column;
-  max-height: 100%;
-  padding: 4em 2em 1em 2em;
-  color: var(--text);
   margin-left: auto;
   margin-right: auto;
+  max-height: 100%;
+  padding: 4em 2em 1em 2em;
+}
+
+.filters {
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  > .flexrow-item {
+    margin-right: 0;
+  }
 }
 
 .entities {
@@ -278,6 +299,10 @@ export default {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
+    // The global `ul { margin-left: 1em }` rule shifts the row right and
+    // breaks `justify-content: center`. Reset it here.
+    margin-left: 0;
+    padding-left: 0;
   }
 
   .item {
@@ -323,4 +348,51 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .asset-library {
+    padding: 4.5em 0.75em 1em;
+  }
+
+  // Drop the mt1 utility on the page title so the heading hugs the page
+  // top padding instead of stacking another 1em on top.
+  header {
+    margin-bottom: 1em;
+
+    :deep(.page-title) {
+      margin-top: 0;
+    }
+  }
+
+  .filters {
+    gap: 0.75em;
+    margin-bottom: 1em;
+
+    // Stretch each filter to the full width so they stack cleanly when
+    // wrapped; the spacer between them collapses to nothing.
+    > .flexrow-item {
+      flex: 1 1 100%;
+    }
+
+    > .filler {
+      display: none;
+    }
+
+    // ComboboxProduction / Combobox wrap themselves in a global .field
+    // (margin-bottom: 2em) that compounds with the row gap. SearchField
+    // doesn't, so the stacked spacing reads as tight above the
+    // production combobox and loose below it. Reset the bottom margin
+    // and let `gap` alone drive the rhythm.
+    :deep(.field) {
+      margin-bottom: 0;
+    }
+  }
+
+  .entities {
+    .items {
+      gap: 12px;
+      justify-content: center;
+    }
+  }
+}
 </style>
diff --git a/src/components/pages/AssetTypes.vue b/src/components/pages/AssetTypes.vue
index 845585a73f..516a0446f1 100644
--- a/src/components/pages/AssetTypes.vue
+++ b/src/components/pages/AssetTypes.vue
@@ -40,8 +40,12 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { useHead } from '@unhead/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
@@ -52,179 +56,147 @@ import EditAssetTypeModal from '@/components/modals/EditAssetTypeModal.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
 
-export default {
-  name: 'asset-types',
-
-  components: {
-    AssetTypeList,
-    DeleteModal,
-    EditAssetTypeModal,
-    ListPageHeader,
-    RouteTabs
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      assetTypeToDelete: null,
-      assetTypeToEdit: {},
-      choices: [],
-      errors: {
-        del: false,
-        edit: false,
-        list: false
-      },
-      modals: {
-        del: false,
-        edit: false
-      },
-      loading: {
-        del: false,
-        edit: false,
-        list: false
-      },
-      tabs: [
-        {
-          name: 'active',
-          label: this.$t('main.active')
-        },
-        {
-          name: 'archived',
-          label: this.$t('main.archived')
-        }
-      ]
-    }
-  },
-
-  mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-  },
-
-  computed: {
-    ...mapGetters([
-      'assetTypes',
-      'archivedAssetTypes',
-      'getAssetType',
-      'taskTypeMap'
-    ]),
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    assetTypesList() {
-      return this.isActiveTab ? this.assetTypes : this.archivedAssetTypes
-    },
-
-    deleteText() {
-      const assetType = this.assetTypeToDelete
-      if (assetType) {
-        return this.$t('asset_types.delete_text', { name: assetType.name })
-      } else {
-        return ''
-      }
-    }
-  },
-
-  methods: {
-    ...mapActions(['deleteAssetType', 'editAssetType', 'newAssetType']),
-
-    confirmEditAssetType(form) {
-      let action = 'newAssetType'
-      if (this.assetTypeToEdit && this.assetTypeToEdit.id) {
-        action = 'editAssetType'
-        form.id = this.assetTypeToEdit.id
-      }
-
-      this.loading.edit = true
-      this.errors.edit = false
-      this[action](form)
-        .then(() => {
-          this.loading.edit = false
-          this.modals.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.edit = false
-          this.errors.edit = true
-        })
-    },
-
-    confirmDeleteAssetType() {
-      this.loading.del = true
-      this.errors.del = false
-      this.deleteAssetType(this.assetTypeToDelete)
-        .then(() => {
-          this.loading.del = false
-          this.modals.del = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.errors.del = true
-          this.loading.del = false
-        })
-    },
-
-    onExportClicked() {
-      const name = stringHelpers.slugify(this.$t('asset_types.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('asset_types.fields.name'),
-        this.$t('asset_types.fields.short_name'),
-        this.$t('asset_types.fields.description'),
-        this.$t('asset_types.fields.task_types')
-      ]
-      const entries = [headers].concat(
-        this.assetTypes.map(assetType => [
-          assetType.type,
-          assetType.name,
-          assetType.short_name,
-          assetType.description,
-          assetType.task_types.length
-            ? assetType.task_types
-                .map(taskTypeId => this.taskTypeMap.get(taskTypeId)?.name)
-                .join(', ')
-            : this.$t('asset_types.include_all')
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
-
-    onNewClicked() {
-      this.assetTypeToEdit = {}
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onEditClicked(assetType) {
-      this.assetTypeToEdit = assetType
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onDeleteClicked(assetType) {
-      this.assetTypeToDelete = assetType
-      this.errors.del = false
-      this.modals.del = true
-    }
-  },
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
 
-  watch: {
-    '$route.query.tab'() {
-      this.activeTab = this.$route.query.tab || 'active'
-    }
-  },
+// State
+
+const activeTab = ref('active')
+const assetTypeToDelete = ref(null)
+const assetTypeToEdit = ref({})
+
+const errors = reactive({ del: false, edit: false, list: false })
+const loading = reactive({ del: false, edit: false, list: false })
+const modals = reactive({ del: false, edit: false })
+
+// Computed
+
+const archivedAssetTypes = computed(() => store.getters.archivedAssetTypes)
+const assetTypes = computed(() => store.getters.assetTypes)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
 
-  head() {
-    return {
-      title: `${this.$t('asset_types.title')} - Kitsu`
+const assetTypesList = computed(() =>
+  isActiveTab.value ? assetTypes.value : archivedAssetTypes.value
+)
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') }
+])
+
+const deleteText = computed(() => {
+  const assetType = assetTypeToDelete.value
+  return assetType ? t('asset_types.delete_text', { name: assetType.name }) : ''
+})
+
+// Functions
+
+const confirmEditAssetType = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (assetTypeToEdit.value?.id) {
+      await store.dispatch('editAssetType', {
+        ...form,
+        id: assetTypeToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newAssetType', form)
     }
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
   }
+  loading.edit = false
+}
+
+const confirmDeleteAssetType = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteAssetType', assetTypeToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
+
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('asset_types.title'))
+  const headers = [
+    t('main.type'),
+    t('asset_types.fields.name'),
+    t('asset_types.fields.short_name'),
+    t('asset_types.fields.description'),
+    t('asset_types.fields.task_types')
+  ]
+  const rows = assetTypes.value.map(assetType => [
+    assetType.type,
+    assetType.name,
+    assetType.short_name,
+    assetType.description,
+    assetType.task_types.length
+      ? assetType.task_types
+          .map(taskTypeId => taskTypeMap.value.get(taskTypeId)?.name)
+          .join(', ')
+      : t('asset_types.include_all')
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
+
+const onNewClicked = () => {
+  assetTypeToEdit.value = {}
+  errors.edit = false
+  modals.edit = true
+}
+
+const onEditClicked = assetType => {
+  assetTypeToEdit.value = assetType
+  errors.edit = false
+  modals.edit = true
 }
+
+const onDeleteClicked = assetType => {
+  assetTypeToDelete.value = assetType
+  errors.del = false
+  modals.del = true
+}
+
+// Watchers
+
+watch(
+  () => route.query.tab,
+  tab => {
+    activeTab.value = tab || 'active'
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  activeTab.value = route.query.tab || 'active'
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('asset_types.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
 .asset-type-list {
   margin-top: 0;
 }
+
+@media screen and (max-width: 768px) {
+  .asset-types {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/pages/Assets.vue b/src/components/pages/Assets.vue
index ca9a07c54f..93af608052 100644
--- a/src/components/pages/Assets.vue
+++ b/src/components/pages/Assets.vue
@@ -64,12 +64,11 @@
           </div>
           <div class="query-list">
             <search-query-list
-              :groups="assetSearchFilterGroups"
+              :groups="productionAssetFilterGroups"
               :is-group-enabled="true"
-              :queries="assetSearchQueries"
+              :queries="productionAssetSearchQueries"
               type="asset"
               @remove-search="removeSearchQuery"
-              v-if="!isAssetsLoading && !initialLoading"
             />
           </div>
         </div>
@@ -442,8 +441,6 @@ export default {
       'assetListScrollPosition',
       'assetsCsvFormData',
       'assetSearchText',
-      'assetSearchFilterGroups',
-      'assetSearchQueries',
       'assetSorting',
       'assetTypes',
       'assetValidationColumns',
@@ -467,9 +464,23 @@ export default {
       'productionAssetTaskTypes',
       'selectedAssets',
       'taskTypeMap',
-      'user'
+      'user',
+      'userFilters',
+      'userFilterGroups'
     ]),
 
+    productionAssetSearchQueries() {
+      const productionId = this.currentProduction?.id
+      if (!productionId) return []
+      return this.userFilters?.asset?.[productionId] || []
+    },
+
+    productionAssetFilterGroups() {
+      const productionId = this.currentProduction?.id
+      if (!productionId) return []
+      return this.userFilterGroups?.asset?.[productionId] || []
+    },
+
     addThumbnailsModal() {
       return this.$refs['add-thumbnails-modal']
     },
diff --git a/src/components/pages/Edit.vue b/src/components/pages/Edit.vue
index 5b89ab9e8d..1563e5bc28 100644
--- a/src/components/pages/Edit.vue
+++ b/src/components/pages/Edit.vue
@@ -909,15 +909,20 @@ export default {
       if (isDifferentPreviewFile) this.sendUpdatePlayingStatus()
     },
 
-    onAnnotationChanged({ preview, additions, deletions, updates }) {
+    async onAnnotationChanged({ preview, additions, deletions, updates }) {
       const taskId = preview.task_id
-      this.updatePreviewAnnotation({
-        taskId,
-        preview,
-        additions,
-        deletions,
-        updates
-      })
+      try {
+        await this.updatePreviewAnnotation({
+          taskId,
+          preview,
+          additions,
+          deletions,
+          updates
+        })
+        this.confirmAnnotationsSaved()
+      } catch {
+        this.restoreFailedAnnotations()
+      }
     },
 
     onVideoLoaded() {
diff --git a/src/components/pages/EntitySearch.vue b/src/components/pages/EntitySearch.vue
index 4ad82ed909..3aede6d6e9 100644
--- a/src/components/pages/EntitySearch.vue
+++ b/src/components/pages/EntitySearch.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="entity-search page">
-    <form class="search-form" @submit.prevent="onResultSelected()">
+    <form class="search-form" @submit.prevent="onResultSelected">
       <div>
         <combobox-production
           class="flexrow-item production-field"
@@ -15,7 +15,7 @@
           <search-icon :size="20" />
         </span>
         <input
-          ref="search-field"
+          ref="searchField"
           class="input"
           :placeholder="$t('search.placeholder')"
           v-model.trim="searchQuery"
@@ -191,15 +191,18 @@
   </div>
 </template>
 
-<script>
+<script setup>
 /*
  * Page to allow wide search on every entities stored in the open projects.
  */
-import { mapGetters, mapActions } from 'vuex'
-import { getEntityPath, getPersonPath } from '@/lib/path'
-
+import { useHead } from '@unhead/vue'
 import { SearchIcon } from 'lucide-vue-next'
-import stringHelpers from '@/lib/string'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+import { getEntityPath } from '@/lib/path'
 
 import Checkbox from '@/components/widgets/Checkbox.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
@@ -209,245 +212,200 @@ import Spinner from '@/components/widgets/Spinner.vue'
 
 const AVAILABLE_LIMITS = [12, 24, 48]
 
-export default {
-  name: 'entity-search',
-
-  components: {
-    Checkbox,
-    Combobox,
-    ComboboxProduction,
-    EntityPreview,
-    SearchIcon,
-    Spinner
-  },
-
-  data() {
-    return {
-      isLoading: false,
-      isLoadingMoreAssets: false,
-      isLoadingMoreShots: false,
-      limit: AVAILABLE_LIMITS[0],
-      limitOptions: AVAILABLE_LIMITS.map(value => ({ label: value, value })),
-      productionId: '',
-      selectedIndex: 0,
-      searchQuery: '',
-      searchFilter: {
-        assets: true,
-        shots: true,
-        persons: false
-      },
-      results: {
-        assets: [],
-        shots: [],
-        persons: []
-      }
-    }
-  },
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+// State
+
+const isLoading = ref(false)
+const isLoadingMoreAssets = ref(false)
+const isLoadingMoreShots = ref(false)
+const limit = ref(AVAILABLE_LIMITS[0])
+const productionId = ref('')
+const searchField = ref(null)
+const searchQuery = ref('')
+const selectedIndex = ref(0)
+
+const limitOptions = AVAILABLE_LIMITS.map(value => ({ label: value, value }))
+
+const results = reactive({ assets: [], shots: [], persons: [] })
+const searchFilter = reactive({ assets: true, shots: true, persons: false })
+
+// Computed
+
+const openProductions = computed(() => store.getters.openProductions)
+const productionMap = computed(() => store.getters.productionMap)
+
+const flattenResults = computed(() => {
+  let values = []
+  if (searchFilter.assets) values = values.concat(results.assets)
+  if (searchFilter.shots) values = values.concat(results.shots)
+  if (searchFilter.persons) values = values.concat(results.persons)
+  return values
+})
+
+const noSearchFilters = computed(
+  () => !searchFilter.assets && !searchFilter.shots
+)
+
+const productionList = computed(() => [
+  { id: '', name: t('main.all') },
+  ...openProductions.value
+])
+
+// Functions
+
+const search = () => {
+  isLoading.value = true
+  const index_names = Object.entries(searchFilter)
+    .map(([k, v]) => (v ? k : undefined))
+    .filter(Boolean)
+
+  store
+    .dispatch('searchData', {
+      query: searchQuery.value,
+      limit: limit.value,
+      productionId: productionId.value,
+      index_names
+    })
+    .then(found => {
+      delete found.persons
+      Object.assign(results, found)
+    })
+    .catch(console.error)
+    .finally(() => {
+      isLoading.value = false
+    })
+}
 
-  mounted() {
-    window.addEventListener('keydown', this.onKeyDown)
+const clearSearchResult = () => {
+  results.assets = []
+  results.shots = []
+  results.persons = []
+}
 
-    if (this.$route.query.search) {
-      this.searchQuery = this.$route.query.search
-    }
+const loadMoreResults = indexName => {
+  const loadingRef =
+    indexName === 'assets' ? isLoadingMoreAssets : isLoadingMoreShots
+  loadingRef.value = true
+
+  store
+    .dispatch('searchData', {
+      query: searchQuery.value,
+      limit: limit.value,
+      offset: results[indexName].length,
+      productionId: productionId.value,
+      index_names: [indexName]
+    })
+    .then(found => {
+      results[indexName] = results[indexName].concat(found[indexName])
+    })
+    .catch(console.error)
+    .finally(() => {
+      loadingRef.value = false
+    })
+}
 
-    this.searchField.focus()
-  },
+const scrollToSelection = () => {
+  const item = flattenResults.value[selectedIndex.value]
+  if (item) {
+    document.getElementById(`result-link-${item.id}`)?.scrollIntoView(false)
+  }
+}
 
-  beforeUnmount() {
-    window.removeEventListener('keydown', this.onKeyDown)
-  },
+const selectPrevious = () => {
+  selectedIndex.value--
+  if (selectedIndex.value < 0) {
+    selectedIndex.value = flattenResults.value.length - 1
+  }
+  scrollToSelection()
+}
 
-  computed: {
-    ...mapGetters(['openProductions', 'productionMap']),
+const selectNext = () => {
+  selectedIndex.value++
+  if (selectedIndex.value >= flattenResults.value.length) {
+    selectedIndex.value = 0
+  }
+  scrollToSelection()
+}
 
-    searchField() {
-      return this.$refs['search-field']
-    },
+const selectResultById = id => {
+  selectedIndex.value = flattenResults.value.findIndex(item => item.id === id)
+}
 
-    flattenResults() {
-      let values = []
-      if (this.searchFilter.assets) {
-        values = values.concat(this.results.assets)
-      }
-      if (this.searchFilter.shots) {
-        values = values.concat(this.results.shots)
-      }
-      if (this.searchFilter.persons) {
-        values = values.concat(this.results.persons)
-      }
-      return values
-    },
-
-    noSearchFilters() {
-      return (
-        !this.searchFilter.assets && !this.searchFilter.shots
-        // && !this.searchFilter.persons
-      )
-    },
-
-    productionList() {
-      return [
-        {
-          id: '',
-          name: this.$t('main.all')
-        }
-      ].concat([...this.openProductions])
-    }
-  },
-
-  methods: {
-    ...mapActions(['searchData']),
-
-    onKeyDown(event) {
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        event.altKey &&
-        event.code === 'KeyF'
-      ) {
-        this.searchField?.focus()
-      } else if (event.key === 'ArrowDown') {
-        this.selectNext()
-      } else if (event.key === 'ArrowUp') {
-        this.selectPrevious()
-      }
-    },
-
-    search() {
-      this.isLoading = true
-      const index_names = Object.entries(this.searchFilter)
-        .map(([k, v]) => (v ? k : undefined))
-        .filter(Boolean)
-
-      this.searchData({
-        query: this.searchQuery,
-        limit: this.limit,
-        productionId: this.productionId,
-        index_names
-      })
-        .then(results => {
-          delete results.persons
-          this.results = results
-        })
-        .catch(console.error)
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-
-    loadMoreResults(indexName) {
-      const index_names = [indexName]
-      const loadingField = `isLoadingMore${stringHelpers.capitalize(indexName)}`
-      this[loadingField] = true
-
-      this.searchData({
-        query: this.searchQuery,
-        limit: this.limit,
-        offset: this.results[indexName].length,
-        productionId: this.productionId,
-        index_names
-      })
-        .then(results => {
-          this.results[indexName] = this.results[indexName].concat(
-            results[indexName]
-          )
-        })
-        .catch(console.error)
-        .finally(() => {
-          this[loadingField] = false
-        })
-    },
-
-    selectPrevious() {
-      this.selectedIndex--
-      if (this.selectedIndex < 0) {
-        this.selectedIndex = this.flattenResults.length - 1
-      }
-      this.scrollToSelection()
-    },
+const onResultSelected = () => {
+  const item = flattenResults.value[selectedIndex.value]
+  if (item) {
+    document.getElementById(`result-link-${item.id}`)?.click()
+  }
+}
 
-    selectNext() {
-      this.selectedIndex++
-      if (this.selectedIndex >= this.flattenResults.length) {
-        this.selectedIndex = 0
-      }
-      this.scrollToSelection()
-    },
+const entityPath = (entity, section) => {
+  const project = productionMap.value.get(entity.project_id)
+  const isTVShow = project.production_type === 'tvshow'
+  let episodeId = null
+  if (isTVShow) episodeId = entity.episode_id || 'main'
+  return getEntityPath(entity.id, entity.project_id, section, episodeId)
+}
 
-    scrollToSelection() {
-      const item = this.flattenResults[this.selectedIndex]
-      if (item) {
-        document.getElementById(`result-link-${item.id}`)?.scrollIntoView(false)
-      }
-    },
+const getMatchDetails = entity =>
+  t('search.match_details', { target: entity.matched_terms.join(', ') })
+
+const onKeyDown = event => {
+  if (
+    (event.ctrlKey || event.metaKey) &&
+    event.altKey &&
+    event.code === 'KeyF'
+  ) {
+    searchField.value?.focus()
+  } else if (event.key === 'ArrowDown') {
+    selectNext()
+  } else if (event.key === 'ArrowUp') {
+    selectPrevious()
+  }
+}
 
-    selectResultById(id) {
-      this.selectedIndex = this.flattenResults.findIndex(item => item.id === id)
-    },
+// Watchers
 
-    onResultSelected() {
-      const item = this.flattenResults[this.selectedIndex]
-      if (item) {
-        document.getElementById(`result-link-${item.id}`)?.click()
-      }
-    },
+watch(productionId, search)
 
-    clearSearchResult() {
-      this.results = {
-        assets: [],
-        shots: [],
-        persons: []
-      }
-    },
-
-    entityPath(entity, section) {
-      const project = this.productionMap.get(entity.project_id)
-      const isTVShow = project.production_type === 'tvshow'
-      let episodeId = null
-      if (isTVShow) episodeId = entity.episode_id || 'main'
-      return getEntityPath(entity.id, entity.project_id, section, episodeId)
-    },
-
-    personPath(person) {
-      return getPersonPath(person.id)
-    },
-
-    getMatchDetails(entity) {
-      const target = entity.matched_terms.join(', ')
-      return this.$t('search.match_details', {
-        target
-      })
-    }
-  },
-
-  watch: {
-    productionId() {
-      this.search()
-    },
-
-    searchQuery() {
-      if (this.searchQuery.length) {
-        this.$router.push({ query: { search: this.searchQuery } })
-      } else {
-        this.$router.push({ query: {} })
-      }
+watch(searchQuery, () => {
+  if (searchQuery.value.length) {
+    router.push({ query: { search: searchQuery.value } })
+  } else {
+    router.push({ query: {} })
+  }
 
-      if (this.searchQuery.length > 2) {
-        this.search()
-      } else {
-        this.clearSearchResult()
-      }
+  if (searchQuery.value.length > 2) {
+    search()
+  } else {
+    clearSearchResult()
+  }
 
-      this.selectedIndex = 0
-    }
-  },
+  selectedIndex.value = 0
+})
 
-  head() {
-    return {
-      title: `${this.$t('search.title')} - Kitsu`
-    }
+// Lifecycle
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeyDown)
+
+  if (route.query.search) {
+    searchQuery.value = route.query.search
   }
-}
+
+  searchField.value?.focus()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeyDown)
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('search.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
@@ -510,6 +468,10 @@ export default {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
+
+    @media screen and (max-width: 768px) {
+      justify-content: center;
+    }
   }
 
   .result {
diff --git a/src/components/pages/HardwareItems.vue b/src/components/pages/HardwareItems.vue
index de333caa10..1032510d44 100644
--- a/src/components/pages/HardwareItems.vue
+++ b/src/components/pages/HardwareItems.vue
@@ -51,6 +51,7 @@ import { useStore } from 'vuex'
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
 
+// eslint-disable-next-line no-unused-vars
 import HardwareItemList from '@/components/lists/HardwareItemList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditHardwareItemModal from '@/components/modals/EditHardwareItemModal.vue'
diff --git a/src/components/pages/Login2FA.vue b/src/components/pages/Login2FA.vue
index f58bb3d2d7..30a953bc9f 100644
--- a/src/components/pages/Login2FA.vue
+++ b/src/components/pages/Login2FA.vue
@@ -9,7 +9,7 @@
         <p class="has-text-centered mandatory-message">
           {{ $t('profile.two_factor_authentication.mandatory') }}
         </p>
-        <two-factor-authentication-setup show-cancel-button />
+        <two-factor-authentication-setup />
         <hr />
         <button
           class="button save-button is-medium mt1"
diff --git a/src/components/pages/Notifications.vue b/src/components/pages/Notifications.vue
index 4821a09bd4..82e81c7b83 100644
--- a/src/components/pages/Notifications.vue
+++ b/src/components/pages/Notifications.vue
@@ -1,72 +1,79 @@
 <template>
   <div class="columns fixed-page">
     <div class="column main-column">
-      <div class="notifications page" @scroll.passive="onBodyScroll" ref="body">
-        <div class="flexrow">
-          <combobox-task-type
-            class="flexrow-item selector"
-            :label="$t('news.task_type')"
-            :task-type-list="taskTypeList"
-            v-model="parameters.taskTypeId"
-          />
-          <combobox-status
-            class="flexrow-item selector"
-            :label="$t('news.task_status')"
-            :task-status-list="taskStatusList"
-            v-model="parameters.taskStatusId"
-          />
-          <combobox-styled
-            class="flexrow-item selector field"
-            :label="$t('main.type')"
-            :options="typeOptions"
-            v-model="parameters.typeMode"
-          />
-          <combobox-styled
-            class="flexrow-item selector field"
-            :label="$t('main.status')"
-            :options="statusOptions"
-            v-model="parameters.statusMode"
-          />
-          <combobox-styled
-            class="flexrow-item selector field"
-            :label="$t('notifications.watching')"
-            :options="watchingOptions"
-            v-model="parameters.watchingMode"
-          />
-        </div>
-        <div class="flexrow mb1">
-          <button-simple
-            class="flexrow-item"
-            :text="$t('notifications.show_comments')"
-            :active="parameters.showComments"
-            @click="parameters.showComments = !parameters.showComments"
-          />
-          <span class="filler"></span>
-          <button-simple
-            class="flexrow-item"
-            :is-loading="loading.markAll"
-            :text="$t('notifications.mark_all_as_read')"
-            @click="markAllNotificationsRead"
-            v-if="
-              parameters.taskTypeId === '' &&
-              parameters.taskStatusId === '' &&
-              parameters.typeMode === '' &&
-              [null, 'unread'].includes(parameters.statusMode) &&
-              parameters.watchingMode === null
-            "
-          />
+      <div ref="body" class="notifications page" @scroll.passive="onBodyScroll">
+        <div class="filter-bar">
+          <div class="filter-bar-row flexrow">
+            <combobox-task-type
+              class="flexrow-item selector"
+              :label="$t('news.task_type')"
+              :task-type-list="taskTypeList"
+              v-model="parameters.taskTypeId"
+            />
+            <combobox-status
+              class="flexrow-item selector"
+              :label="$t('news.task_status')"
+              :task-status-list="taskStatusList"
+              v-model="parameters.taskStatusId"
+            />
+            <combobox-styled
+              class="flexrow-item selector field"
+              :label="$t('main.type')"
+              :options="typeOptions"
+              v-model="parameters.typeMode"
+            />
+            <combobox-styled
+              class="flexrow-item selector field"
+              :label="$t('main.status')"
+              :options="statusOptions"
+              v-model="parameters.statusMode"
+            />
+            <combobox-styled
+              class="flexrow-item selector field"
+              :label="$t('notifications.watching')"
+              :options="watchingOptions"
+              v-model="parameters.watchingMode"
+            />
+          </div>
+          <div class="filter-bar-row flexrow">
+            <button-simple
+              class="flexrow-item"
+              :text="$t('notifications.show_comments')"
+              :active="parameters.showComments"
+              @click="parameters.showComments = !parameters.showComments"
+            />
+            <span class="filler"></span>
+            <button-simple
+              class="flexrow-item"
+              :is-loading="loading.markAll"
+              :text="$t('notifications.mark_all_as_read')"
+              @click="markAllNotificationsRead"
+              v-if="canMarkAllAsRead"
+            />
+          </div>
         </div>
         <div
-          class="empty-list has-text-centered"
+          class="empty-state"
           v-if="
             !loading.notifications &&
             (!notifications || notifications.length === 0)
           "
         >
-          {{ $t('notifications.no_notifications') }}
+          <inbox-icon class="empty-state-icon" :size="48" :stroke-width="1.5" />
+          <p class="empty-state-text">
+            {{ $t('notifications.no_notifications') }}
+          </p>
         </div>
-        <div class="has-text-centered" v-if="loading.notifications">
-          <spinner />
+        <div class="loading-skeleton" v-if="loading.notifications">
+          <div
+            class="skeleton-card"
+            :style="{
+              '--row-index': i - 1,
+              '--fadeout-delay': `${fadeoutDelayMs}ms`
+            }"
+            :key="`skeleton-${skeletonCycle}-${i}`"
+            v-for="i in SKELETON_ROWS"
+          ></div>
         </div>
         <div
           :class="{
@@ -90,10 +97,9 @@
                 />
                 <people-avatar
                   class="flexrow-item"
-                  :person="personMap.get(notification.author_id)"
+                  :person="notificationAuthor(notification)"
                   :size="30"
                   :is-link="false"
-                  v-if="personMap.get(notification.author_id)"
                 />
                 <production-name
                   class="flexrow-item"
@@ -110,10 +116,10 @@
                     {{ notification.playlist_name }}
                   </router-link>
                 </span>
+                <div class="filler"></div>
                 <span class="date flexrow-item">
                   {{ formatDate(notification.created_at) }}
                 </span>
-                <div class="filler"></div>
                 <div class="has-text-right flexrow-item mr0">
                   <boolean-field
                     class="selector"
@@ -128,7 +134,7 @@
               </div>
             </template>
             <template v-else>
-              <div class="flexrow notification-header">
+              <div class="flexrow notification-context-row">
                 <at-sign-icon
                   class="icon flexrow-item"
                   :title="$t('notifications.mention')"
@@ -154,44 +160,36 @@
                   :title="$t('notifications.comment')"
                   v-else-if="isComment(notification)"
                 />
-                <people-avatar
+                <production-name
                   class="flexrow-item"
-                  :person="personMap.get(notification.author_id)"
-                  :size="30"
-                  :is-link="false"
-                  v-if="personMap.get(notification.author_id)"
+                  :production="productionMap.get(notification.project_id)"
+                  :size="22"
+                  :with-avatar="true"
+                  :only-avatar="true"
+                  :title="notification.project_name"
                 />
-                <div class="flexrow-item">
-                  <entity-thumbnail
-                    :entity="{
-                      preview_file_id: notification.entity_preview_file_id
-                    }"
-                    :height="40"
-                  />
-                </div>
-                <div class="flexrow-item">
-                  <task-type-name
-                    class="task-type-name"
-                    :task-type="buildTaskTypeFromNotification(notification)"
-                    :production-id="notification.project_id"
-                  />
-                </div>
-                <router-link
+                <task-type-name
+                  class="task-type-name flexrow-item"
+                  :task-type="buildTaskTypeFromNotification(notification)"
+                  :production-id="notification.project_id"
+                />
+                <entity-thumbnail
                   class="flexrow-item"
+                  :entity="{
+                    preview_file_id: notification.entity_preview_file_id
+                  }"
+                  :height="30"
+                />
+                <router-link
+                  class="flexrow-item entity-link"
                   :to="entityPath(notification)"
                 >
-                  {{ notification.project_name }} /
                   {{ notification.full_entity_name }}
                 </router-link>
-                <validation-tag
-                  class="validation-tag flexrow-item"
-                  :task="buildTaskFromNotification(notification)"
-                  v-if="notification.change"
-                />
+                <div class="filler"></div>
                 <span class="date flexrow-item">
                   {{ formatDate(notification.created_at) }}
                 </span>
-                <div class="filler"></div>
                 <div class="has-text-right flexrow-item mr0">
                   <boolean-field
                     class="selector"
@@ -205,26 +203,27 @@
                 </div>
               </div>
 
-              <div class="flexrow-item comment-content">
-                <div
-                  class="notification-info flexrow"
-                  v-if="parameters.showComments || isSelected(notification)"
-                >
-                  <span class="person-name flexrow-item ml0">
-                    {{ personName(notification) }}
-                  </span>
-
-                  <div class="flexrow-item">
+              <div
+                class="flexrow notification-actor-row"
+                v-if="parameters.showComments || isSelected(notification)"
+              >
+                <people-avatar
+                  class="flexrow-item actor-avatar"
+                  :person="notificationAuthor(notification)"
+                  :size="30"
+                  :is-link="false"
+                />
+                <div class="actor-line flexrow-item">
+                  <span class="actor-name">{{ personName(notification) }}</span>
+                  <span class="verb">
                     <template v-if="isPublish(notification)">
                       {{ $t('notifications.published') }}
                     </template>
-
                     <template
                       v-if="isComment(notification) && !isPublish(notification)"
                     >
                       {{ $t('notifications.commented_on') }}
                     </template>
-
                     <template
                       v-if="
                         (isComment(notification) || isPublish(notification)) &&
@@ -233,15 +232,12 @@
                     >
                       {{ $t('notifications.and_change_status') }}
                     </template>
-
                     <template v-if="isReply(notification)">
                       {{ $t('notifications.replied_on') }}
                     </template>
-
                     <template v-if="isAssignation(notification)">
                       {{ $t('notifications.assigned_you') }}
                     </template>
-
                     <template
                       v-if="
                         isMention(notification) || isReplyMention(notification)
@@ -249,11 +245,24 @@
                     >
                       {{ $t('notifications.mention_you_on') }}
                       <template v-if="isReplyMention(notification)">
-                        ({{ $t('main.reply').toLowerCase() }})
+                        ({{ $t('main.reply') }})
                       </template>
                     </template>
-                  </div>
+                  </span>
+                  <template v-if="notification.change">
+                    <span class="to">{{ $t('notifications.to_status') }}</span>
+                    <validation-tag
+                      class="validation-tag"
+                      :task="buildTaskFromNotification(notification)"
+                    />
+                  </template>
                 </div>
+              </div>
+
+              <div
+                class="flexrow-item comment-content"
+                v-if="parameters.showComments || isSelected(notification)"
+              >
                 <div
                   class="comment-text content reply-text"
                   v-html="
@@ -319,23 +328,37 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { useHead } from '@unhead/vue'
 import {
   AtSignIcon,
   CornerUpLeftIcon,
   ImageIcon,
+  InboxIcon,
   MessageSquareIcon,
   MonitorPlayIcon,
   UserIcon
 } from 'lucide-vue-next'
 import moment from 'moment-timezone'
-
-import { parametersMixin } from '@/components/mixins/parameters'
-
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+import { useSkeletonCycle } from '@/composables/skeleton'
 import { pluralizeEntityType } from '@/lib/path'
+import preferences from '@/lib/preferences'
 import { renderComment } from '@/lib/render'
 
+import TaskInfo from '@/components/sides/TaskInfo.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
@@ -344,438 +367,367 @@ import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import ProductionName from '@/components/widgets/ProductionName.vue'
-import Spinner from '@/components/widgets/Spinner.vue'
-import TaskInfo from '@/components/sides/TaskInfo.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 import ValidationTag from '@/components/widgets/ValidationTag.vue'
 
-export default {
-  name: 'notifications',
-
-  mixins: [parametersMixin],
-
-  components: {
-    AtSignIcon,
-    BooleanField,
-    ButtonSimple,
-    ComboboxStatus,
-    ComboboxStyled,
-    ComboboxTaskType,
-    CornerUpLeftIcon,
-    EntityThumbnail,
-    ImageIcon,
-    MessageSquareIcon,
-    MonitorPlayIcon,
-    PeopleAvatar,
-    ProductionName,
-    Spinner,
-    TaskInfo,
-    TaskTypeName,
-    UserIcon,
-    ValidationTag
-  },
-
-  data() {
-    return {
-      currentTask: null,
-      currentNotificationId: null,
-      errors: {
-        notifications: false
-      },
-      loading: {
-        currentTask: true,
-        markAll: false,
-        more: false,
-        notifications: false
-      },
-      parameterNamespace: 'notifications',
-      parameters: {
-        taskTypeId: '',
-        taskStatusId: '',
-        typeMode: '',
-        showComments: false,
-        statusMode: null,
-        watchingMode: null
-      },
-      statusOptions: [
-        {
-          label: this.$t('notifications.all_statuses'),
-          value: null
-        },
-        {
-          label: this.$t('notifications.only_read'),
-          value: 'read'
-        },
-        {
-          label: this.$t('notifications.only_unread'),
-          value: 'unread'
-        }
-      ],
-      typeOptions: [
-        {
-          label: this.$t('notifications.all_types'),
-          value: ''
-        },
-        {
-          label: this.$t('notifications.only_comments'),
-          value: 'comment'
-        },
-        {
-          label: this.$t('notifications.only_mentions'),
-          value: 'mention'
-        },
-        {
-          label: this.$t('notifications.only_assignations'),
-          value: 'assignation'
-        },
-        {
-          label: this.$t('notifications.only_replies'),
-          value: 'reply'
-        },
-        {
-          label: this.$t('notifications.only_playlists_ready'),
-          value: 'playlist-ready'
-        }
-      ],
-      watchingOptions: [
-        {
-          label: this.$t('notifications.all_notifications'),
-          value: null
-        },
-        {
-          label: this.$t('notifications.only_watching'),
-          value: 'watching'
-        },
-        {
-          label: this.$t('notifications.only_non_watching'),
-          value: 'non-watching'
-        }
-      ]
-    }
-  },
-
-  created() {
-    this.clearNotifications()
-  },
-
-  mounted() {
-    const params = this.getParametersFromPreferences(this.parameters) || {}
-    this.applyQueryParameters(params)
-    if (params.showComments === 'true' || params.showComments === true) {
-      params.showComments = true
-    } else {
-      params.showComments = false
-    }
-    this.parameters = params
-    this.reloadData()
-  },
-
-  computed: {
-    ...mapGetters([
-      'departmentMap',
-      'notifications',
-      'personMap',
-      'productionMap',
-      'taskStatus',
-      'taskTypes',
-      'taskTypeMap',
-      'user'
-    ]),
-
-    taskStatusList() {
-      return [
-        {
-          id: '',
-          color: '#999',
-          short_name: this.$t('news.all')
-        }
-      ].concat([...this.taskStatus])
-    },
-
-    taskTypeList() {
-      return [
-        {
-          id: '',
-          color: '#999',
-          name: this.$t('news.all')
-        }
-      ].concat([...this.taskTypes])
-    }
-  },
-
-  methods: {
-    ...mapActions([
-      'clearNotifications',
-      'loadMoreNotifications',
-      'loadNotification',
-      'loadNotifications',
-      'loadTask',
-      'markAllNotificationsAsRead',
-      'toggleNotificationReadStatus'
-    ]),
-
-    reloadData() {
-      this.loading.notifications = true
-      this.errors.notifications = false
-      this.currentTask = null
-      const params = {
-        task_status_id: this.parameters.taskStatusId,
-        task_type_id: this.parameters.taskTypeId,
-        type: this.parameters.typeMode
-      }
-      if (this.parameters.statusMode) {
-        params.read = this.parameters.statusMode === 'read'
-      }
-      if (this.parameters.watchingMode !== null) {
-        params.watching = this.parameters.watchingMode === 'watching'
-      }
-      this.loadNotifications(params)
-        .then(() => {
-          this.loading.notifications = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.errors.notifications = true
-        })
-    },
-
-    onBodyScroll(event) {
-      if (!this.$refs.body) return
-      const position = event.target
-      const maxHeight =
-        this.$refs.body.scrollHeight - this.$refs.body.offsetHeight
-      if (maxHeight < position.scrollTop + 100) {
-        this.loadFollowingNotifications()
-      }
-    },
-
-    async loadFollowingNotifications() {
-      if (!this.loading.more && !this.loading.notifications) {
-        this.loading.more = true
-        const params = {
-          task_status_id: this.parameters.taskStatusId,
-          task_type_id: this.parameters.taskTypeId,
-          type: this.parameters.typeMode
-        }
-        if (this.parameters.statusMode) {
-          params.read = this.parameters.statusMode === 'read'
-        }
-        if (this.parameters.watchingMode) {
-          params.watching = this.parameters.watchingMode === 'watching'
-        }
-        await this.loadMoreNotifications(params).catch(console.error)
-        this.loading.more = false
-      }
-    },
-
-    entityPath(notification) {
-      const taskType = this.taskTypeMap.get(notification.task_type_id)
-
-      if (!taskType) {
-        return this.$router.currentRoute
-      }
-
-      const route = {
-        name: 'task',
-        params: {
-          production_id: notification.project_id,
-          task_id: notification.task_id,
-          type: pluralizeEntityType(taskType.for_entity)
-        }
-      }
-
-      if (notification.episode_id) {
-        route.name = 'episode-task'
-        route.params.episode_id = notification.episode_id
-      }
-      return route
-    },
-
-    formatDate(date) {
-      const utcDate = moment.tz(date, 'UTC')
-      date = moment(utcDate.format()).fromNow()
-      return date[0].toUpperCase() + date.slice(1)
-    },
-
-    personName(notification) {
-      const person = this.personMap.get(notification.author_id)
-      return person ? person.full_name : ''
-    },
-
-    playlistPath(notification) {
-      const production = this.productionMap.get(notification.project_id)
-      const params = {
-        production_id: notification.project_id,
-        playlist_id: notification.playlist_id
-      }
-
-      const isTVShow = production.production_type === 'tvshow'
-      if (isTVShow) {
-        if (notification.episode_id) {
-          params.episode_id = notification.episode_id
-        }
-        if (notification.playlist_for_entity === 'asset') {
-          params.episode_id = notification.playlist_is_for_all ? 'all' : 'main'
-        }
-      }
-
-      return {
-        name: isTVShow ? 'episode-playlist' : 'playlist',
-        params
-      }
-    },
-
-    buildTaskFromNotification(notification) {
-      return {
-        id: notification.task_id,
-        task_status_id: notification.task_status_id,
-        task_type_id: notification.task_type_id,
-        episode_id: notification.episode_id
-      }
-    },
-
-    buildTaskTypeFromNotification(notification) {
-      return {
-        ...this.taskTypeMap.get(notification.task_type_id),
-        episode_id: notification.episode_id
-      }
-    },
-
-    onNotificationSelected(event, notification) {
-      if (this.isPlaylistReady(notification)) return
-      if (
-        event.target.classList.contains('bool-field') ||
-        event.target.parentElement?.classList.contains('bool-field') ||
-        event.target.parentElement?.parentElement?.classList.contains(
-          'bool-field'
-        )
-      ) {
-        return
-      }
-      if (this.currentNotificationId !== notification.id) {
-        this.loading.currentTask = true
-        this.loadTask({
-          taskId: notification.task_id
-        })
-          .then(task => {
-            this.loading.currentTask = false
-            this.currentTask = task
-            this.currentNotificationId = notification.id
-          })
-          .catch(console.error)
-      } else {
-        this.currentTask = null
-        this.currentNotificationId = null
-      }
-    },
-
-    renderComment,
-
-    isAssignation: notification => {
-      return notification.notification_type === 'assignation'
-    },
-
-    isComment: notification => {
-      return (
-        !notification.notification_type ||
-        (notification.notification_type === 'comment' &&
-          !notification.preview_file_id)
-      )
-    },
-
-    isMention: notification => notification.notification_type === 'mention',
-
-    isPlaylistReady: notification =>
-      notification.notification_type === 'playlist-ready',
-
-    isReplyMention: notification =>
-      notification.notification_type === 'reply-mention',
-
-    isReply: notification => notification.notification_type === 'reply',
-
-    isPublish(notification) {
-      return (
-        notification &&
-        notification.preview_file_id &&
-        !this.isMention(notification) &&
-        !this.isReply(notification) &&
-        !this.isReplyMention(notification)
-      )
-    },
-
-    isSelected(notification) {
-      return notification.id === this.currentNotificationId
-    },
-
-    toggleNotificationRead(notification, value) {
-      if (value !== notification.read) {
-        this.toggleNotificationReadStatus(notification)
-      }
-    },
-
-    async markAllNotificationsRead() {
-      this.loading.markAll = true
-      await this.markAllNotificationsAsRead().catch(console.error)
-      this.loading.markAll = false
-    }
-  },
-
-  socket: {
-    events: {
-      'notification:new'(eventData) {
-        if (this.user.id === eventData.person_id) {
-          const notificationId = eventData.notification_id
-          this.loadNotification(notificationId).catch(console.error)
-        }
-      },
-
-      'preview-file:add-file'(eventData) {
-        const commentId = eventData.comment_id
-        const previewId = eventData.preview_file_id
-        this.$store.commit('NOTIFICATION_ADD_PREVIEW', {
-          previewId,
-          commentId
-        })
-      }
+const PARAMETER_NAMESPACE = 'notifications'
+const FILTER_KEYS = [
+  'taskTypeId',
+  'taskStatusId',
+  'typeMode',
+  'statusMode',
+  'watchingMode'
+]
+const SKELETON_ROWS = 6
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+const instance = getCurrentInstance()
+const { cycle: skeletonCycle, fadeoutDelayMs } = useSkeletonCycle(
+  ref(SKELETON_ROWS)
+)
+const socket = instance.appContext.config.globalProperties.$socket
+
+// State
+
+const body = ref(null)
+const currentTask = ref(null)
+const currentNotificationId = ref(null)
+
+const errors = reactive({ notifications: false })
+const loading = reactive({
+  currentTask: true,
+  markAll: false,
+  more: false,
+  notifications: false
+})
+
+const parameters = reactive({
+  taskTypeId: '',
+  taskStatusId: '',
+  typeMode: '',
+  showComments: false,
+  statusMode: null,
+  watchingMode: null
+})
+
+// Computed
+
+const departmentMap = computed(() => store.getters.departmentMap)
+const notifications = computed(() => store.getters.notifications)
+const personMap = computed(() => store.getters.personMap)
+const productionMap = computed(() => store.getters.productionMap)
+const taskStatus = computed(() => store.getters.taskStatus)
+const taskTypes = computed(() => store.getters.taskTypes)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+const user = computed(() => store.getters.user)
+
+const taskStatusList = computed(() => [
+  { id: '', color: '#999', short_name: t('news.all') },
+  ...taskStatus.value
+])
+
+const taskTypeList = computed(() => [
+  { id: '', color: '#999', name: t('news.all') },
+  ...taskTypes.value
+])
+
+const canMarkAllAsRead = computed(
+  () =>
+    parameters.taskTypeId === '' &&
+    parameters.taskStatusId === '' &&
+    parameters.typeMode === '' &&
+    [null, 'unread'].includes(parameters.statusMode) &&
+    parameters.watchingMode === null
+)
+
+const statusOptions = computed(() => [
+  { label: t('notifications.all_statuses'), value: null },
+  { label: t('notifications.only_read'), value: 'read' },
+  { label: t('notifications.only_unread'), value: 'unread' }
+])
+const typeOptions = computed(() => [
+  { label: t('notifications.all_types'), value: '' },
+  { label: t('notifications.only_comments'), value: 'comment' },
+  { label: t('notifications.only_mentions'), value: 'mention' },
+  { label: t('notifications.only_assignations'), value: 'assignation' },
+  { label: t('notifications.only_replies'), value: 'reply' },
+  { label: t('notifications.only_playlists_ready'), value: 'playlist-ready' }
+])
+const watchingOptions = computed(() => [
+  { label: t('notifications.all_notifications'), value: null },
+  { label: t('notifications.only_watching'), value: 'watching' },
+  { label: t('notifications.only_non_watching'), value: 'non-watching' }
+])
+
+// Functions
+
+const buildLoadParams = () => {
+  const params = {
+    task_status_id: parameters.taskStatusId,
+    task_type_id: parameters.taskTypeId,
+    type: parameters.typeMode
+  }
+  if (parameters.statusMode) {
+    params.read = parameters.statusMode === 'read'
+  }
+  if (parameters.watchingMode !== null) {
+    params.watching = parameters.watchingMode === 'watching'
+  }
+  return params
+}
+
+const reloadData = () => {
+  loading.notifications = true
+  errors.notifications = false
+  currentTask.value = null
+  store
+    .dispatch('loadNotifications', buildLoadParams())
+    .then(() => {
+      loading.notifications = false
+    })
+    .catch(err => {
+      console.error(err)
+      errors.notifications = true
+    })
+}
+
+const loadFollowingNotifications = async () => {
+  if (loading.more || loading.notifications) return
+  loading.more = true
+  await store
+    .dispatch('loadMoreNotifications', buildLoadParams())
+    .catch(console.error)
+  loading.more = false
+}
+
+const onBodyScroll = event => {
+  if (!body.value) return
+  const maxHeight = body.value.scrollHeight - body.value.offsetHeight
+  if (maxHeight < event.target.scrollTop + 100) {
+    loadFollowingNotifications()
+  }
+}
+
+const entityPath = notification => {
+  const taskType = taskTypeMap.value.get(notification.task_type_id)
+  if (!taskType) return router.currentRoute
+  const params = {
+    production_id: notification.project_id,
+    task_id: notification.task_id,
+    type: pluralizeEntityType(taskType.for_entity)
+  }
+  if (notification.episode_id) {
+    params.episode_id = notification.episode_id
+    return { name: 'episode-task', params }
+  }
+  return { name: 'task', params }
+}
+
+const formatDate = date => {
+  const utcDate = moment.tz(date, 'UTC')
+  const formatted = moment(utcDate.format()).fromNow()
+  return formatted[0].toUpperCase() + formatted.slice(1)
+}
+
+const personName = notification =>
+  personMap.value.get(notification.author_id)?.full_name || ''
+
+// Returns the notification's author when known, or a placeholder so the
+// avatar slot always renders something instead of disappearing when the
+// person hasn't loaded into personMap (deactivated / deleted user, or a
+// notification that arrived before the people cache was hydrated).
+const notificationAuthor = notification => {
+  const known = personMap.value.get(notification.author_id)
+  if (known) return known
+  return {
+    id: notification.author_id || 'unknown',
+    full_name: t('main.unknown'),
+    initials: '?',
+    color: '#999',
+    has_avatar: false,
+    is_bot: false
+  }
+}
+
+const playlistPath = notification => {
+  const production = productionMap.value.get(notification.project_id)
+  const params = {
+    production_id: notification.project_id,
+    playlist_id: notification.playlist_id
+  }
+  const isTVShow = production.production_type === 'tvshow'
+  if (isTVShow) {
+    if (notification.episode_id) {
+      params.episode_id = notification.episode_id
     }
-  },
-
-  watch: {
-    'parameters.taskTypeId'() {
-      this.reloadData()
-    },
-    'parameters.taskStatusId'() {
-      this.reloadData()
-    },
-    'parameters.typeMode'() {
-      this.reloadData()
-    },
-    'parameters.statusMode'() {
-      this.reloadData()
-    },
-    'parameters.watchingMode'() {
-      this.reloadData()
+    if (notification.playlist_for_entity === 'asset') {
+      params.episode_id = notification.playlist_is_for_all ? 'all' : 'main'
     }
-  },
+  }
+  return { name: isTVShow ? 'episode-playlist' : 'playlist', params }
+}
 
-  head() {
-    return {
-      title: `${this.$t('notifications.title')} - Kitsu`
+const buildTaskFromNotification = notification => ({
+  id: notification.task_id,
+  task_status_id: notification.task_status_id,
+  task_type_id: notification.task_type_id,
+  episode_id: notification.episode_id
+})
+
+const buildTaskTypeFromNotification = notification => ({
+  ...taskTypeMap.value.get(notification.task_type_id),
+  episode_id: notification.episode_id
+})
+
+const isAssignation = notification =>
+  notification.notification_type === 'assignation'
+
+const isComment = notification =>
+  !notification.notification_type ||
+  (notification.notification_type === 'comment' &&
+    !notification.preview_file_id)
+
+const isMention = notification => notification.notification_type === 'mention'
+
+const isPlaylistReady = notification =>
+  notification.notification_type === 'playlist-ready'
+
+const isReplyMention = notification =>
+  notification.notification_type === 'reply-mention'
+
+const isReply = notification => notification.notification_type === 'reply'
+
+const isPublish = notification =>
+  notification &&
+  notification.preview_file_id &&
+  !isMention(notification) &&
+  !isReply(notification) &&
+  !isReplyMention(notification)
+
+const isSelected = notification =>
+  notification.id === currentNotificationId.value
+
+const onNotificationSelected = (event, notification) => {
+  if (isPlaylistReady(notification)) return
+  if (
+    event.target.classList.contains('bool-field') ||
+    event.target.parentElement?.classList.contains('bool-field') ||
+    event.target.parentElement?.parentElement?.classList.contains('bool-field')
+  ) {
+    return
+  }
+  if (currentNotificationId.value !== notification.id) {
+    loading.currentTask = true
+    store
+      .dispatch('loadTask', { taskId: notification.task_id })
+      .then(task => {
+        loading.currentTask = false
+        currentTask.value = task
+        currentNotificationId.value = notification.id
+      })
+      .catch(console.error)
+  } else {
+    currentTask.value = null
+    currentNotificationId.value = null
+  }
+}
+
+const toggleNotificationRead = (notification, value) => {
+  if (value !== notification.read) {
+    store.dispatch('toggleNotificationReadStatus', notification)
+  }
+}
+
+const markAllNotificationsRead = async () => {
+  loading.markAll = true
+  await store.dispatch('markAllNotificationsAsRead').catch(console.error)
+  loading.markAll = false
+}
+
+// Parameters persistence (URL query string + local preferences).
+
+const applyParametersToUrl = () => {
+  const query = Object.keys(parameters).reduce((acc, key) => {
+    if (parameters[key]) {
+      let value = parameters[key]
+      if (value === 'true') value = true
+      else if (value === 'false') value = false
+      acc[key] = value
     }
+    return acc
+  }, {})
+  router.replace({ query })
+}
+
+const saveParametersToPreferences = () => {
+  preferences.setObjectPreference(`parameters:${PARAMETER_NAMESPACE}`, {
+    ...parameters
+  })
+}
+
+const restoreParameters = () => {
+  const stored =
+    preferences.getObjectPreference(`parameters:${PARAMETER_NAMESPACE}`) || {}
+  Object.assign(parameters, stored, route.query)
+  parameters.showComments =
+    parameters.showComments === 'true' || parameters.showComments === true
+}
+
+// Socket handlers
+
+const onNewNotification = eventData => {
+  if (user.value?.id === eventData.person_id) {
+    store
+      .dispatch('loadNotification', eventData.notification_id)
+      .catch(console.error)
   }
 }
+
+const onPreviewFileAdd = eventData => {
+  store.commit('NOTIFICATION_ADD_PREVIEW', {
+    previewId: eventData.preview_file_id,
+    commentId: eventData.comment_id
+  })
+}
+
+// Watchers
+
+watch(parameters, () => {
+  applyParametersToUrl()
+  saveParametersToPreferences()
+})
+
+watch(() => FILTER_KEYS.map(key => parameters[key]), reloadData)
+
+// Lifecycle
+
+onMounted(() => {
+  store.dispatch('clearNotifications')
+  restoreParameters()
+  reloadData()
+  socket.on('notification:new', onNewNotification)
+  socket.on('preview-file:add-file', onPreviewFileAdd)
+})
+
+onBeforeUnmount(() => {
+  socket.off('notification:new', onNewNotification)
+  socket.off('preview-file:add-file', onPreviewFileAdd)
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('notifications.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
 .dark {
-  .page {
-    background: $dark-grey-light;
-  }
-
   .notification {
     background: $dark-grey-lighter;
     color: $white-grey;
-    box-shadow: 0 1px 1px 1px $dark-grey;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
   }
 
   .icon,
@@ -786,14 +738,6 @@ export default {
   a {
     color: $light-grey-light;
   }
-
-  .notification.unread {
-    border: 4px solid #906571;
-
-    &:hover {
-      border: 4px solid #6065a1; //;var(--background-selectable);
-    }
-  }
 }
 
 a {
@@ -805,45 +749,211 @@ a {
   margin-right: 1em;
 }
 
+.filter-bar {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 0.75em;
+  margin: 1em 0;
+  padding: 1em 1em 0.75em;
+}
+
+.dark .filter-bar {
+  background: var(--background-alt);
+}
+
+.filter-bar-row {
+  align-items: flex-end;
+
+  // The Combobox / ButtonSimple inside use the global .field rule
+  // (margin-bottom: 2em) which is too loud inside the filter bar.
+  :deep(.field) {
+    margin-bottom: 0;
+  }
+
+  // Match the heights of ComboboxTaskType / ComboboxStatus to
+  // ComboboxStyled so all five filters line up on the same baseline.
+  // The task-type / status widgets have tight internal padding
+  // (0.15em + 0.4em) and end up ~32px tall, while ComboboxStyled's
+  // `.combo` renders ~38px from its 0.5em padding.
+  :deep(.task-type-combo),
+  :deep(.status-combo),
+  :deep(.combo) {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex !important;
+    height: 38px;
+    padding: 0 0.5em;
+  }
+
+  // The click handler in ComboboxTaskType / ComboboxStatus lives on the
+  // inner .flexrow, not the outer .*-combo box. Stretch it so the whole
+  // 38px width is clickable and the chevron is pushed to the right edge.
+  :deep(.task-type-combo) > .flexrow,
+  :deep(.status-combo) > .flexrow {
+    flex: 1;
+  }
+
+  & + .filter-bar-row {
+    margin-top: 0.75em;
+  }
+}
+
+.empty-state {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75em;
+  padding: 4em 1em;
+}
+
+.empty-state-icon {
+  color: $grey;
+  opacity: 0.6;
+}
+
+.empty-state-text {
+  color: var(--text-alt);
+  margin: 0;
+}
+
+.loading-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.skeleton-card {
+  animation:
+    skeleton-card-in 0.4s ease-out forwards,
+    skeleton-card-out 0.35s ease-in forwards;
+  animation-delay: calc(var(--row-index) * 150ms), var(--fadeout-delay);
+  background: rgba(var(--skeleton-rgb), 0.45);
+  border-radius: 1em;
+  height: 72px;
+  opacity: 0;
+}
+
+.dark .skeleton-card {
+  background: rgba(var(--skeleton-rgb), 0.15);
+}
+
+@keyframes skeleton-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes skeleton-card-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-card {
+    animation: none;
+    opacity: 1;
+  }
+}
+
 .notification {
   align-items: flex-start;
   background: white;
-  border: 4px solid transparent;
+  border: 3px solid transparent;
   border-radius: 1em;
-  box-shadow: 0 0 4px $light-grey;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   cursor: pointer;
   margin-bottom: 0.5em;
-  padding: 1rem;
-  transition: all 0.2s ease-in-out;
   overflow-x: auto;
+  padding: 1rem;
+  transition: border-color 0.15s ease-in-out;
 
   &.unread {
-    border: 4px solid #f0c5d1;
+    border-color: var(--unread-border);
   }
 
   &:hover {
-    border: 4px solid var(--background-selectable);
+    background-color: var(--background-hover);
+    border-color: var(--background-selectable);
 
-    .dark & {
-      border: 4px solid #6065a1; //;var(--background-selectable);
+    &.playlist-ready-notification {
+      border-color: var(--unread-border);
     }
 
-    &.playlist-ready-notification {
-      border: 4px solid #f0c5d1;
+    .icon {
+      opacity: 1;
     }
   }
-}
 
-.dark {
-  .notification.playlist-ready-notification:hover {
-    border: 4px solid transparent;
+  &.playlist-ready-notification {
+    border-left: 3px solid $green;
+  }
+
+  .icon {
+    opacity: 0.7;
+    transition: opacity 0.15s ease-in-out;
   }
 
-  .notification.playlist-ready-notification.unread:hover {
-    border: 4px solid #906571;
+  .actor-avatar :deep(.avatar) {
+    border: 1px solid var(--border);
+  }
+
+  :deep(.validation-tag) {
+    font-size: 0.85em;
+    padding: 0.15em 0.5em;
+  }
+}
+
+.notifications {
+  --unread-border: #f0c5d1;
+}
+.dark .notifications {
+  --unread-border: #906571;
+}
+
+.notification-actor-row,
+.notification-context-row,
+.notification-header {
+  align-items: center;
+  gap: 0.6em;
+  width: 100%;
+
+  // The flexrow-item global rule adds margin-right: 1rem; reset it inside
+  // the header so the single `gap` controls horizontal spacing and every
+  // element stays aligned to the same rhythm.
+  .flexrow-item {
+    margin-right: 0;
   }
 }
 
+.notification-actor-row {
+  margin-top: 0.5em;
+}
+
+.actor-line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35em;
+  min-width: 0;
+}
+
+.actor-name {
+  font-weight: 600;
+}
+
+.verb {
+  color: var(--text-alt);
+}
+
 .person-name {
   font-weight: bold;
   margin-left: 0.5em;
@@ -869,10 +979,10 @@ a {
 }
 
 .icon {
-  width: 20px;
-  margin-right: 0;
-  font-size: 0.8em;
   color: $grey;
+  height: 20px;
+  margin-right: 0;
+  width: 20px;
 }
 
 .thumbnail-picture-wrapper {
@@ -880,14 +990,22 @@ a {
 }
 
 .date {
-  font-size: 0.9em;
+  align-items: center;
   color: $grey;
+  display: inline-flex;
+  font-size: 0.9em;
+  line-height: 1;
 
   span {
     margin-left: 0;
   }
 }
 
+.notification-context-row .has-text-right {
+  align-items: center;
+  display: inline-flex;
+}
+
 .notification-line {
   border-radius: 1em;
   align-items: start;
@@ -904,6 +1022,7 @@ a {
 
 .comment-content {
   flex: 1;
+  margin-top: 1em;
 
   .flexrow-item {
     margin-right: 0.5em;
@@ -918,7 +1037,6 @@ a {
 .selected,
 .selected:hover {
   border: 4px solid var(--background-selected);
-  // transform: scale(1.01);
 }
 
 .columns {
@@ -934,13 +1052,13 @@ a {
 .main-column {
   flex: 1 1 auto;
   padding-top: 60px;
-  background: $white-grey-light;
+  background: var(--background-page);
   overflow-y: hidden;
   height: 100%;
 }
 
 .notifications {
-  background: $white-grey-light;
+  background: var(--background-page);
   width: 100%;
   padding: 1em 1.5em;
   overflow-y: auto;
@@ -958,16 +1076,12 @@ a {
 }
 
 .comment-text {
-  background: $white-grey;
+  background: var(--background-tag);
   border: 1px solid var(--border);
   border-radius: 0.5em;
   padding: 1em 1em 0 1em;
   margin-top: 0.3em;
   margin-bottom: 0;
-
-  .dark & {
-    background: var(--background);
-  }
 }
 
 .notification.mention-notification,
@@ -980,4 +1094,65 @@ a {
 .person-name.ml0 {
   margin-left: 0;
 }
+
+@media screen and (max-width: 768px) {
+  .notifications {
+    padding: 0.5em;
+  }
+
+  .filter-bar {
+    padding: 0.75em 0.75em 0.5em;
+  }
+
+  // Wrap the 5 selectors across multiple lines instead of overflowing
+  // the row on narrow screens.
+  .filter-bar-row {
+    flex-wrap: wrap;
+    gap: 0.5em;
+
+    > .flexrow-item {
+      flex: 1 1 calc(50% - 0.5em);
+      margin-right: 0;
+      min-width: 0;
+    }
+
+    // ComboboxTaskType pins itself to 200px (`min-width: 200px;
+    // width: 200px`), and ComboboxStyled caps at 400px — both ignore
+    // the flex layout above. Reset them so the wrapping behaves.
+    :deep(.task-type-combo),
+    :deep(.status-combo),
+    :deep(.combo) {
+      max-width: none;
+      min-width: 0;
+      width: 100%;
+    }
+  }
+
+  // Strip non-essential elements on narrow screens (date, entity
+  // thumbnail, read toggle) and breathe the remaining content with
+  // more padding.
+  .notification {
+    padding: 1.25rem 1.5rem;
+
+    .date,
+    .thumbnail-wrapper,
+    .has-text-right,
+    .actor-name,
+    .verb {
+      display: none;
+    }
+  }
+
+  .notification-header {
+    flex-wrap: wrap;
+    row-gap: 0.4em;
+  }
+
+  // The fixed-width side column is already hidden via .is-hidden-mobile
+  // on the markup; this keeps the main column from inheriting padding
+  // that assumes the side column is visible.
+  .main-column {
+    padding-top: 50px;
+  }
+}
 </style>
diff --git a/src/components/pages/Playlist.vue b/src/components/pages/Playlist.vue
index 680462f517..ad67d6f44a 100644
--- a/src/components/pages/Playlist.vue
+++ b/src/components/pages/Playlist.vue
@@ -1254,15 +1254,21 @@ export default {
       this.clearSilent()
     },
 
-    onAnnotationChanged({ preview, additions, deletions, updates }) {
+    async onAnnotationChanged({ preview, additions, deletions, updates }) {
       const taskId = preview.task_id
-      this.updatePreviewAnnotation({
-        taskId,
-        preview,
-        additions,
-        deletions,
-        updates
-      })
+      const playlistPlayer = this.$refs['playlist-player']
+      try {
+        await this.updatePreviewAnnotation({
+          taskId,
+          preview,
+          additions,
+          deletions,
+          updates
+        })
+        playlistPlayer?.confirmAnnotationsSaved()
+      } catch {
+        playlistPlayer?.restoreFailedAnnotations()
+      }
     },
 
     // Search
diff --git a/src/components/pages/ProductionNewsFeed.vue b/src/components/pages/ProductionNewsFeed.vue
index 3c274cfa75..2abb1af61a 100644
--- a/src/components/pages/ProductionNewsFeed.vue
+++ b/src/components/pages/ProductionNewsFeed.vue
@@ -3,258 +3,53 @@
     <div class="column main-column">
       <div class="news page" ref="body" @scroll.passive="onBodyScroll">
         <div class="timeline-wrapper">
-          <div class="has-text-right filler filter-button">
-            <button-simple
-              icon="filter"
-              :active="isFiltersDisplayed"
-              :title="$t('main.more_filters')"
-              @click="toggleFilters"
-            />
-          </div>
-
-          <div class="filters flexrow">
-            <combobox
-              class="flexrow-item selector"
-              :label="$t('shots.fields.episode')"
-              :options="runningEpisodeOptions"
-              v-model="episodeId"
-              v-if="!isStudio && isTVShow"
-            />
-            <combobox-status
-              class="flexrow-item selector nowrap"
-              :label="$t('news.task_status')"
-              :task-status-list="taskStatusList"
-              v-model="taskStatusId"
-            />
-            <combobox-task-type
-              class="flexrow-item selector nowrap"
-              :label="$t('news.task_type')"
-              :task-type-list="taskTypeList"
-              v-model="taskTypeId"
-            />
-            <div class="flexrow-item selector">
-              <label class="label person-label">
-                {{ $t('main.person') }}
-              </label>
-              <people-field
-                class="person-field"
-                :people="isStudio ? displayedPeople : team"
-                v-model="person"
-              />
-            </div>
-          </div>
-
-          <div class="filters flexrow mt1" v-if="isFiltersDisplayed">
-            <date-field
-              class="flexrow-item"
-              :max-date="today"
-              :label="$t('main.from')"
-              :with-margin="false"
-              v-model="after"
-            />
-            <date-field
-              class="flexrow-item"
-              :max-date="today"
-              :label="$t('main.to')"
-              :with-margin="false"
-              v-model="before"
-            />
-            <combobox
-              class="flexrow-item selector"
-              :label="$t('news.infos')"
-              :options="previewOptions"
-              v-model="previewMode"
-            />
-          </div>
-
-          <div class="timeline">
+          <news-filters
+            :is-studio="isStudio"
+            v-model:episode-id="episodeId"
+            v-model:task-status-id="taskStatusId"
+            v-model:task-type-id="taskTypeId"
+            v-model:person="person"
+            v-model:before="before"
+            v-model:after="after"
+            v-model:preview-mode="previewMode"
+          />
+
+          <div :class="{ timeline: true, 'timeline-blank': isTimelineBlank }">
             <div
-              class="empty-list has-text-centered"
+              class="empty-state"
               v-if="!loading.news && (!newsList || newsList.length === 0)"
             >
-              {{ $t('news.no_news') }}
-            </div>
-            <div class="has-text-centered mt2" v-if="loading.news">
-              <spinner />
+              <newspaper-icon class="empty-icon" :size="48" />
+              <p class="empty-title">{{ $t('news.no_news') }}</p>
+              <p class="empty-hint">{{ $t('news.no_news_hint') }}</p>
             </div>
+            <news-skeleton v-if="loading.news" />
 
             <template v-if="!loading.news">
               <div
                 :key="dayList.length > 0 ? dayList[0].created_at : ''"
                 v-for="dayList in newsListByDay(timezone)"
               >
-                <div class="has-text-centered subtitle timeline-entry">
+                <div
+                  class="has-text-centered subtitle timeline-entry day-sticky"
+                >
                   <span class="big-dot"></span>
                   {{
                     dayList.length > 0 ? formatDay(dayList[0].created_at) : ''
                   }}
                 </div>
-                <div
+                <news-row
                   :key="`news-${news.id}`"
-                  :ref="`news-${news.id}`"
+                  :ref="el => setNewsRef(news.id, el?.root)"
+                  :canvas-id="`annotation-canvas-${dayList[0].created_at.substring(0, 10)}-${index}`"
+                  :is-new="recentNewsIds.has(news.id)"
+                  :is-selected="news.id === currentNewsId"
+                  :is-studio="isStudio"
+                  :news="news"
+                  :preview-mode="previewMode"
+                  @select="onNewsSelected"
                   v-for="(news, index) in dayList"
-                >
-                  <div v-if="previewMode === 'comments'">
-                    <div
-                      :class="{
-                        'news-line': true,
-                        'timeline-entry': true,
-                        flexrow: true,
-                        selected: news.id === currentNewsId
-                      }"
-                      @click.prevent="onNewsSelected(news)"
-                    >
-                      <span
-                        :class="{
-                          dot: true,
-                          red: hasRetakeValue(news),
-                          green: hasDoneValue(news)
-                        }"
-                      ></span>
-                      <span class="date flexrow-item">
-                        {{ formatTime(news.created_at) }}
-                      </span>
-
-                      <div
-                        class="flexrow-item production-name-wrapper"
-                        v-if="isStudio"
-                      >
-                        <production-name
-                          :production="productionMap.get(news.project_id)"
-                          only-avatar
-                        />
-                      </div>
-
-                      <people-avatar
-                        class="flexrow-item"
-                        :person="personMap.get(news.author_id)"
-                        :size="30"
-                        :font-size="14"
-                        :is-link="false"
-                        v-if="personMap.get(news.author_id)"
-                      />
-
-                      <div class="flexrow-item task-type-wrapper">
-                        <task-type-name
-                          class="task-type-name"
-                          :task-type="buildTaskTypeFromNews(news)"
-                          :production-id="news.project_id"
-                          :is-static="true"
-                        />
-                      </div>
-
-                      <div class="flexrow-item validation-wrapper">
-                        <validation-tag
-                          class="validation-tag"
-                          :task="buildTaskFromNews(news)"
-                          :is-static="true"
-                          :thin="!news.change"
-                        />
-                      </div>
-
-                      <div class="flexrow-item comment-content">
-                        <div class="news-info flexrow">
-                          <span class="flexrow-item flexrow">
-                            <entity-thumbnail
-                              class="ml1 entity-thumbnail mr1 flexrow-item"
-                              :entity="{
-                                id: news.task_entity_id,
-                                preview_file_id: news.entity_preview_file_id
-                              }"
-                              :with-link="false"
-                            />
-                            <span class="strong ml05">
-                              {{ news.full_entity_name }}
-                            </span>
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div
-                    class="preview"
-                    v-if="news.preview_file_id && previewMode === 'previews'"
-                  >
-                    <div
-                      :class="{
-                        'news-line': true,
-                        'timeline-entry': true,
-                        flexrow: true,
-                        selected: news.id === currentNewsId
-                      }"
-                      @click.prevent="onNewsSelected(news)"
-                    >
-                      <span
-                        :class="{
-                          dot: true,
-                          red: hasRetakeValue(news),
-                          green: hasDoneValue(news)
-                        }"
-                      ></span>
-                      <span class="date flexrow-item">
-                        {{ formatTime(news.created_at) }}
-                      </span>
-
-                      <people-avatar
-                        class="flexrow-item"
-                        :person="personMap.get(news.author_id)"
-                        :size="30"
-                        :no-link="true"
-                        v-if="personMap.get(news.author_id)"
-                      />
-
-                      <div class="flexrow-item task-type-wrapper">
-                        <task-type-name
-                          class="task-type-name"
-                          :task-type="buildTaskTypeFromNews(news)"
-                          :production-id="news.project_id"
-                        />
-                      </div>
-
-                      <div class="flexrow-item comment-content">
-                        <div class="news-info flexrow">
-                          <span class="flexrow-item flexrow">
-                            <entity-thumbnail
-                              class="ml1"
-                              :entity="{
-                                id: news.task_entity_id,
-                                preview_file_id: news.entity_preview_file_id
-                              }"
-                              :with-link="false"
-                              v-if="news.entity_preview_file_id"
-                            />
-                            <span class="strong ml05 flexrow-item">
-                              {{ news.full_entity_name }}
-                            </span>
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div
-                      class="has-text-centered"
-                      v-if="previewMode === 'previews'"
-                    >
-                      <preview-player
-                        :canvas-id="`annotation-canvas-${dayList[0].created_at.substring(
-                          0,
-                          10
-                        )}-${index}`"
-                        :previews="news.preview_files"
-                        :task="{
-                          id: news.task_id,
-                          project_id: news.project_id,
-                          task_type_id: news.task_type_id,
-                          assignees: []
-                        }"
-                        :read-only="true"
-                        :light="true"
-                        :big="true"
-                      />
-                    </div>
-                  </div>
-                </div>
+                />
               </div>
             </template>
           </div>
@@ -262,7 +57,24 @@
       </div>
     </div>
 
-    <div id="side-column" class="column side-column">
+    <div
+      class="drawer-backdrop"
+      :class="{ 'is-open': isDrawerOpen }"
+      @click="closeTask"
+    ></div>
+
+    <div
+      id="side-column"
+      :class="{ column: true, 'side-column': true, 'is-open': isDrawerOpen }"
+    >
+      <button
+        class="drawer-close"
+        type="button"
+        :title="$t('main.close')"
+        @click="closeTask"
+      >
+        <x-icon :size="20" />
+      </button>
       <task-info
         :entity-type="currentEntityType"
         :is-loading="loading.currentTask"
@@ -273,502 +85,339 @@
   </div>
 </template>
 
-<script>
+<script setup>
 /*
- * This modules aims at displaying what happened on the production during the
- * last few days.
- * News entry are fetched by page of 50. Loading of older news is done via
+ * This module displays what happened on the production during the last few
+ * days. News entries are fetched by page of 50; older entries load via
  * infinite scrolling.
  */
-import { mapGetters, mapActions } from 'vuex'
+import { useHead } from '@unhead/vue'
+import { NewspaperIcon, XIcon } from 'lucide-vue-next'
 import moment from 'moment-timezone'
-
-import { sortByName, sortPeople } from '@/lib/sorting'
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+import { useTime } from '@/composables/time'
 import { formatFullDateWithRevertedTimezone } from '@/lib/time'
-import { timeMixin } from '@/components/mixins/time'
-
-import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
-import Combobox from '@/components/widgets/Combobox.vue'
-import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
-import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
-import DateField from '@/components/widgets/DateField.vue'
-import PeopleField from '@/components/widgets/PeopleField.vue'
-import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
-import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
-import PreviewPlayer from '@/components/previews/PreviewPlayer.vue'
-import ProductionName from '@/components/widgets/ProductionName.vue'
+
+import NewsFilters from '@/components/pages/news/NewsFilters.vue'
+import NewsRow from '@/components/pages/news/NewsRow.vue'
+import NewsSkeleton from '@/components/pages/news/NewsSkeleton.vue'
 import TaskInfo from '@/components/sides/TaskInfo.vue'
-import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
-import Spinner from '@/components/widgets/Spinner.vue'
-import ValidationTag from '@/components/widgets/ValidationTag.vue'
-
-export default {
-  name: 'production-news-feed',
-
-  mixins: [timeMixin],
-
-  components: {
-    ButtonSimple,
-    Combobox,
-    ComboboxStatus,
-    ComboboxTaskType,
-    DateField,
-    EntityThumbnail,
-    PeopleAvatar,
-    PeopleField,
-    PreviewPlayer,
-    ProductionName,
-    TaskTypeName,
-    ValidationTag,
-    Spinner,
-    TaskInfo
-  },
-
-  data() {
-    return {
-      after: null,
-      before: null,
-      currentNewsId: null,
-      currentPage: 1,
-      currentTask: null,
-      episodeId: '',
-      isFiltersDisplayed: false,
-      isStatsDisplayed: false,
-      errors: {
-        news: false
-      },
-      loading: {
-        more: false,
-        news: false,
-        currentTask: true
-      },
-      person: null,
-      previewMode: 'comments',
-      previewOptions: [
-        {
-          label: this.$t('news.only_comments'),
-          value: 'comments'
-        },
-        {
-          label: this.$t('news.only_previews'),
-          value: 'previews'
-        }
-      ],
-      taskStatusId: '',
-      taskTypeId: ''
-    }
-  },
-
-  mounted() {
-    this.$options.silent = true
-    this.previewMode = localStorage.getItem('news:preview-mode') || 'comments'
-    this.taskTypeId = localStorage.getItem('news:task-type-id') || ''
-    if (this.$route && this.$route.query && this.$route.query.task_type_id) {
-      this.taskTypeId = this.$route.query.task_type_id
-    }
-    this.taskStatusId = localStorage.getItem('news:task-status-id') || ''
-    if (this.$route && this.$route.query && this.$route.query.task_status_id) {
-      this.taskStatusId = this.$route.query.task_status_id
-    }
-    this.before = null
-    this.after = null
-    this.$options.silent = false
-    window.addEventListener('keydown', this.onKeyDown, false)
 
-    if (!this.loading.news) {
-      this.init()
-    }
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('keydown', this.onKeyDown)
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'displayedPeople',
-      'isTVShow',
-      'newsList',
-      'newsTotal',
-      'newsStats',
-      'newsListByDay',
-      'personMap',
-      'productionMap',
-      'productionTaskStatuses',
-      'productionTaskTypes',
-      'runningEpisodes',
-      'taskStatusMap',
-      'taskTypeMap',
-      'taskStatusMap'
-    ]),
-
-    currentEntityType() {
-      return this.currentTask?.task_type?.for_entity
-    },
-
-    statMax() {
-      if (this.newsStats) {
-        return Object.keys(this.newsStats).reduce((max, stat) => {
-          return Math.max(this.newsStats[stat], max)
-        }, 0)
-      } else {
-        return 0
-      }
-    },
-
-    isStudio() {
-      return !this.$route.path.includes('productions')
-    },
-
-    params() {
-      return {
-        isStudio: this.isStudio || undefined,
-        productionId: !this.isStudio ? this.currentProduction?.id : undefined,
-        only_preview: this.previewMode === 'previews',
-        page_size: this.previewMode === 'previews' ? 6 : 50,
-        task_type_id: this.taskTypeId !== '' ? this.taskTypeId : undefined,
-        task_status_id:
-          this.taskStatusId !== '' ? this.taskStatusId : undefined,
-        person_id: this.person ? this.person.id : undefined,
-        page: this.currentPage,
-        episode_id: this.episodeId !== 'all' ? this.episodeId : undefined,
-        before: formatFullDateWithRevertedTimezone(this.before, this.timezone),
-        after: formatFullDateWithRevertedTimezone(this.after, this.timezone)
-      }
-    },
-
-    taskStatusList() {
-      return [
-        {
-          id: '',
-          color: '#999',
-          short_name: this.$t('news.all')
-        }
-      ].concat(sortByName([...this.productionTaskStatuses]))
-    },
-
-    taskTypeList() {
-      return [
-        {
-          id: '',
-          color: '#999',
-          name: this.$t('news.all')
-        }
-      ].concat(sortByName([...this.productionTaskTypes]))
-    },
-
-    runningEpisodeOptions() {
-      return [
-        {
-          value: 'all',
-          label: this.$t('news.all')
-        }
-      ].concat(
-        this.runningEpisodes.map(episode => {
-          return {
-            label: episode.name,
-            value: episode.id
-          }
-        })
-      )
-    },
-
-    team() {
-      return sortPeople(
-        this.currentProduction?.team
-          .map(personId => this.personMap.get(personId))
-          .filter(Boolean) ?? []
-      )
-    },
-
-    renderedStats() {
-      if (this.newsStats) {
-        return Object.keys(this.newsStats)
-          .map(taskStatusId => {
-            const { color, short_name } = this.taskStatusMap.get(taskStatusId)
-            return {
-              id: taskStatusId,
-              name: short_name.toUpperCase(),
-              color,
-              value: this.newsStats[taskStatusId]
-            }
-          })
-          .sort((a, b) => b.value - a.value)
-      } else {
-        return ''
-      }
-    }
-  },
-
-  methods: {
-    ...mapActions(['loadNews', 'loadSingleNews', 'loadMoreNews', 'loadTask']),
-
-    onKeyDown(event) {
-      if (this.newsList && this.newsList.length > 0 && event.altKey) {
-        let index = this.lastSelection ? this.lastSelection : 0
-        if ([37, 38].includes(event.keyCode)) {
-          index = index - 1 < 0 ? this.newsList.length - 1 : index - 1
-          this.onNewsSelected(this.newsList[index])
-        } else if ([39, 40].includes(event.keyCode)) {
-          index = index + 1 >= this.newsList.length ? 0 : index + 1
-          this.onNewsSelected(this.newsList[index])
-        }
-      }
-    },
-
-    loadFollowingNews() {
-      if (!this.loading.more && !this.loading.news) {
-        this.loading.more = true
-        this.currentPage += 1
-        this.loadMoreNews(this.params).then(() => {
-          this.loading.more = false
-        })
-      }
-    },
-
-    formatDay(date) {
-      const utcDate = moment.tz(date, 'UTC').tz(this.timezone)
-      return utcDate.format('LL')
-    },
-
-    formatTime(date) {
-      const utcDate = moment.tz(date, 'UTC').tz(this.timezone)
-      return utcDate.format('HH:mm')
-    },
-
-    personName(news) {
-      const person = this.personMap.get(news.author_id)
-      return person ? person.full_name : ''
-    },
-
-    buildTaskFromNews(news) {
-      return {
-        id: news.task_id,
-        task_status_id: news.task_status_id,
-        task_type_id: news.task_type_id,
-        episode_id: news.episode_id
-      }
-    },
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+const { timezone } = useTime()
+
+const instance = getCurrentInstance()
+const socket = instance.appContext.config.globalProperties.$socket
+
+// State
+
+const after = ref(null)
+const before = ref(null)
+const body = ref(null)
+const currentNewsId = ref(null)
+const currentPage = ref(1)
+const currentTask = ref(null)
+const episodeId = ref('')
+const person = ref(null)
+const previewMode = ref('comments')
+const recentNewsIds = ref(new Set())
+const taskStatusId = ref('')
+const taskTypeId = ref('')
+
+const errors = reactive({ news: false })
+const loading = reactive({ more: false, news: false, currentTask: true })
+
+// Non-reactive scheduling/selection state.
+const newsRefs = new Map()
+let lastSelection = null
+let silent = false
+
+const setNewsRef = (id, el) => {
+  if (el) newsRefs.set(id, el)
+  else newsRefs.delete(id)
+}
 
-    buildTaskTypeFromNews(news) {
-      return {
-        ...this.taskTypeMap.get(news.task_type_id),
-        episode_id: news.episode_id
-      }
-    },
-
-    onNewsSelected(news) {
-      this.loading.currentTask = true
-      const index = this.newsList.findIndex(n => n.id === news.id)
-      if (this.lastSelection !== index) {
-        this.lastSelection = index
-        this.loadTask({
-          taskId: news.task_id
-        })
-          .then(task => {
-            this.loading.currentTask = false
-            this.currentTask = task
-            this.currentNewsId = news.id
-          })
-          .catch(console.error)
-        this.scrollToLine(news)
-      } else {
-        this.lastSelection = -1
-        this.currentTask = null
-        this.currentNewsId = ''
-      }
-    },
-
-    scrollToLine(news) {
-      const newsLine = this.$refs[`news-${news.id}`]
-      if (newsLine && this.$refs.body) {
-        const margin = 30
-        const rect = newsLine[0].getBoundingClientRect()
-        const listRect = this.$refs.body.getBoundingClientRect()
-        const isBelow = rect.bottom > listRect.bottom - margin
-        const isAbove = rect.top < listRect.top + margin
-
-        if (isBelow) {
-          const scrollingRequired = rect.bottom - listRect.bottom + margin
-          this.setScrollPosition(this.$refs.body.scrollTop + scrollingRequired)
-        } else if (isAbove) {
-          const scrollingRequired = listRect.top - rect.top + margin
-          this.setScrollPosition(this.$refs.body.scrollTop - scrollingRequired)
-        }
-      }
-    },
+// Computed
 
-    setScrollPosition(scrollPosition) {
-      if (this.$refs.body) {
-        this.$refs.body.scrollTop = scrollPosition
-      }
-    },
-
-    init() {
-      if (this.loading.news) return
-      if (!this.$options.silent) {
-        this.currentPage = 1
-        this.loading.news = true
-        this.errors.news = false
-        this.currentTask = null
-        const query = {
-          task_status_id: this.params.task_status_id,
-          task_type_id: this.params.task_type_id
-        }
-        this.$router.push({ query })
-        this.loadNews(this.params)
-          .then(() => {
-            this.loading.news = false
-          })
-          .catch(err => {
-            console.error(err)
-            this.loading.news = false
-            this.errors.news = true
-          })
-      }
-    },
-
-    onBodyScroll(event) {
-      if (!this.$refs.body) return
-      const position = event.target
-      const maxHeight =
-        this.$refs.body.scrollHeight - this.$refs.body.offsetHeight
-      if (maxHeight < position.scrollTop + 200) {
-        this.loadFollowingNews()
-      }
-    },
-
-    getPreviewPath(news) {
-      const previewId = news.preview_file_id
-      const extension = news.preview_file_extension
-      return `/api/pictures/originals/preview-files/${previewId}.${extension}`
-    },
-
-    getPreviewDlPath(news) {
-      const previewId = news.preview_file_id
-      return `/api/pictures/originals/preview-files/${previewId}/download`
-    },
-
-    hasRetakeValue(news) {
-      const taskStatus = this.taskStatusMap.get(news.task_status_id)
-      return taskStatus ? news.change && taskStatus.is_retake : false
-    },
-
-    hasDoneValue(news) {
-      const taskStatus = this.taskStatusMap.get(news.task_status_id)
-      return taskStatus ? news.change && taskStatus.is_done : false
-    },
-
-    toggleFilters() {
-      this.isFiltersDisplayed = !this.isFiltersDisplayed
-    },
-
-    toggleStats() {
-      this.isStatsDisplayed = !this.isStatsDisplayed
-    }
-  },
-
-  socket: {
-    events: {
-      'preview-file:add-file'(eventData) {
-        const commentId = eventData.comment_id
-        const previewId = eventData.preview_file_id
-        const extension = eventData.extension
-        this.$store.commit('NEWS_ADD_PREVIEW', {
-          previewId,
-          commentId,
-          extension
-        })
-      },
-
-      'news:new'(eventData) {
-        if (
-          (this.isStudio ||
-            eventData.project_id === this.currentProduction.id) &&
-          (!this.taskTypeId || this.taskTypeId === eventData.task_type_id) &&
-          (!this.taskStatusId || this.taskStatusId === eventData.task_status_id)
-        ) {
-          this.loadSingleNews({
-            productionId: eventData.project_id,
-            newsId: eventData.news_id
-          })
-        }
-      },
-
-      'task:update'(eventData) {
-        const relatedNews = this.newsList.find(
-          news =>
-            news.project_id === eventData.project_id &&
-            news.task_id === eventData.task_id
-        )
-        if (relatedNews) {
-          this.loadSingleNews({
-            productionId: relatedNews.project_id,
-            newsId: relatedNews.id
-          })
-        }
-      }
-    }
-  },
-
-  watch: {
-    currentProduction() {
-      this.init()
-    },
-
-    isStudio() {
-      this.init()
-    },
-
-    previewMode() {
-      localStorage.setItem('news:preview-mode', this.previewMode)
-      this.init()
-    },
-
-    taskTypeId() {
-      localStorage.setItem('news:task-type-id', this.taskTypeId)
-      this.init()
-    },
-
-    taskStatusId() {
-      localStorage.setItem('news:task-status-id', this.taskStatusId)
-      this.init()
-    },
-
-    person() {
-      this.init()
-    },
-
-    before() {
-      this.init()
-    },
-
-    after() {
-      this.init()
-    },
-
-    $route() {
-      this.init()
-    },
-
-    episodeId() {
-      this.init()
+const currentProduction = computed(() => store.getters.currentProduction)
+const newsList = computed(() => store.getters.newsList)
+const newsListByDay = computed(() => store.getters.newsListByDay)
+
+const isStudio = computed(() => !route.path.includes('productions'))
+
+const currentEntityType = computed(
+  () => currentTask.value?.task_type?.for_entity
+)
+
+const isTimelineBlank = computed(
+  () => loading.news || !newsList.value || newsList.value.length === 0
+)
+
+const isDrawerOpen = computed(() => Boolean(currentNewsId.value))
+
+const params = computed(() => ({
+  isStudio: isStudio.value || undefined,
+  productionId: !isStudio.value ? currentProduction.value?.id : undefined,
+  only_preview: previewMode.value === 'previews',
+  page_size: previewMode.value === 'previews' ? 6 : 50,
+  task_type_id: taskTypeId.value !== '' ? taskTypeId.value : undefined,
+  task_status_id: taskStatusId.value !== '' ? taskStatusId.value : undefined,
+  person_id: person.value ? person.value.id : undefined,
+  page: currentPage.value,
+  episode_id: episodeId.value !== 'all' ? episodeId.value : undefined,
+  before: formatFullDateWithRevertedTimezone(before.value, timezone.value),
+  after: formatFullDateWithRevertedTimezone(after.value, timezone.value)
+}))
+
+// Functions
+
+const formatDay = date => moment.tz(date, 'UTC').tz(timezone.value).format('LL')
+
+const setScrollPosition = scrollPosition => {
+  if (body.value) {
+    body.value.scrollTop = scrollPosition
+  }
+}
+
+const scrollToLine = news => {
+  const newsLine = newsRefs.get(news.id)
+  if (newsLine && body.value) {
+    const margin = 30
+    const rect = newsLine.getBoundingClientRect()
+    const listRect = body.value.getBoundingClientRect()
+    const isBelow = rect.bottom > listRect.bottom - margin
+    const isAbove = rect.top < listRect.top + margin
+
+    if (isBelow) {
+      const scrollingRequired = rect.bottom - listRect.bottom + margin
+      setScrollPosition(body.value.scrollTop + scrollingRequired)
+    } else if (isAbove) {
+      const scrollingRequired = listRect.top - rect.top + margin
+      setScrollPosition(body.value.scrollTop - scrollingRequired)
     }
-  },
+  }
+}
 
-  head() {
-    if (this.currentProduction) {
-      return {
-        title: `${this.currentProduction.name} | ${this.$t('news.title')} - Kitsu`
-      }
-    } else {
-      return {
-        title: `${this.$t('news.title')} - Kitsu`
+const closeTask = () => {
+  lastSelection = -1
+  currentTask.value = null
+  currentNewsId.value = ''
+}
+
+const onNewsSelected = news => {
+  loading.currentTask = true
+  const index = newsList.value.findIndex(n => n.id === news.id)
+  if (lastSelection !== index) {
+    lastSelection = index
+    store
+      .dispatch('loadTask', { taskId: news.task_id })
+      .then(task => {
+        loading.currentTask = false
+        currentTask.value = task
+        currentNewsId.value = news.id
+      })
+      .catch(console.error)
+    scrollToLine(news)
+  } else {
+    closeTask()
+  }
+}
+
+const init = () => {
+  if (loading.news) return
+  if (!silent) {
+    currentPage.value = 1
+    loading.news = true
+    errors.news = false
+    currentTask.value = null
+    router.push({
+      query: {
+        task_status_id: params.value.task_status_id,
+        task_type_id: params.value.task_type_id
       }
+    })
+    store
+      .dispatch('loadNews', params.value)
+      .then(() => {
+        loading.news = false
+      })
+      .catch(err => {
+        console.error(err)
+        loading.news = false
+        errors.news = true
+      })
+  }
+}
+
+const loadFollowingNews = () => {
+  if (!loading.more && !loading.news) {
+    loading.more = true
+    currentPage.value += 1
+    store.dispatch('loadMoreNews', params.value).then(() => {
+      loading.more = false
+    })
+  }
+}
+
+const onBodyScroll = event => {
+  if (!body.value) return
+  const position = event.target
+  const maxHeight = body.value.scrollHeight - body.value.offsetHeight
+  if (maxHeight < position.scrollTop + 200) {
+    loadFollowingNews()
+  }
+}
+
+const onKeyDown = event => {
+  if (event.key === 'Escape' && isDrawerOpen.value) {
+    closeTask()
+    return
+  }
+  if (newsList.value && newsList.value.length > 0 && event.altKey) {
+    let index = lastSelection ? lastSelection : 0
+    if ([37, 38].includes(event.keyCode)) {
+      index = index - 1 < 0 ? newsList.value.length - 1 : index - 1
+      onNewsSelected(newsList.value[index])
+    } else if ([39, 40].includes(event.keyCode)) {
+      index = index + 1 >= newsList.value.length ? 0 : index + 1
+      onNewsSelected(newsList.value[index])
     }
   }
 }
+
+// Socket event handlers
+
+const onPreviewFileAddFile = eventData => {
+  store.commit('NEWS_ADD_PREVIEW', {
+    previewId: eventData.preview_file_id,
+    commentId: eventData.comment_id,
+    extension: eventData.extension
+  })
+}
+
+const markRecent = newsId => {
+  const next = new Set(recentNewsIds.value)
+  next.add(newsId)
+  recentNewsIds.value = next
+  setTimeout(() => {
+    const after = new Set(recentNewsIds.value)
+    after.delete(newsId)
+    recentNewsIds.value = after
+  }, 3000)
+}
+
+const onNewsNew = eventData => {
+  if (
+    (isStudio.value || eventData.project_id === currentProduction.value.id) &&
+    (!taskTypeId.value || taskTypeId.value === eventData.task_type_id) &&
+    (!taskStatusId.value || taskStatusId.value === eventData.task_status_id)
+  ) {
+    store
+      .dispatch('loadSingleNews', {
+        productionId: eventData.project_id,
+        newsId: eventData.news_id
+      })
+      .then(() => markRecent(eventData.news_id))
+  }
+}
+
+const onTaskUpdate = eventData => {
+  const relatedNews = newsList.value.find(
+    news =>
+      news.project_id === eventData.project_id &&
+      news.task_id === eventData.task_id
+  )
+  if (relatedNews) {
+    store.dispatch('loadSingleNews', {
+      productionId: relatedNews.project_id,
+      newsId: relatedNews.id
+    })
+  }
+}
+
+// Watchers
+
+watch(currentProduction, init)
+watch(isStudio, init)
+watch(person, init)
+watch(before, init)
+watch(after, init)
+watch(episodeId, init)
+watch(() => route.fullPath, init)
+
+watch(previewMode, value => {
+  localStorage.setItem('news:preview-mode', value)
+  init()
+})
+
+watch(taskTypeId, value => {
+  localStorage.setItem('news:task-type-id', value)
+  init()
+})
+
+watch(taskStatusId, value => {
+  localStorage.setItem('news:task-status-id', value)
+  init()
+})
+
+// Lifecycle
+
+onMounted(() => {
+  silent = true
+  previewMode.value = localStorage.getItem('news:preview-mode') || 'comments'
+  taskTypeId.value = localStorage.getItem('news:task-type-id') || ''
+  if (route.query?.task_type_id) {
+    taskTypeId.value = route.query.task_type_id
+  }
+  taskStatusId.value = localStorage.getItem('news:task-status-id') || ''
+  if (route.query?.task_status_id) {
+    taskStatusId.value = route.query.task_status_id
+  }
+  before.value = null
+  after.value = null
+  silent = false
+
+  window.addEventListener('keydown', onKeyDown, false)
+  socket.on('preview-file:add-file', onPreviewFileAddFile)
+  socket.on('news:new', onNewsNew)
+  socket.on('task:update', onTaskUpdate)
+
+  if (!loading.news) {
+    init()
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeyDown)
+  socket.off('preview-file:add-file', onPreviewFileAddFile)
+  socket.off('news:new', onNewsNew)
+  socket.off('task:update', onTaskUpdate)
+})
+
+// Head
+
+useHead({
+  title: computed(() =>
+    currentProduction.value
+      ? `${currentProduction.value.name} | ${t('news.title')} - Kitsu`
+      : `${t('news.title')} - Kitsu`
+  )
+})
 </script>
 
 <style lang="scss" scoped>
@@ -793,17 +442,9 @@ export default {
   .timeline {
     border-color: $blue;
 
-    .dot {
-      background: $blue;
-    }
-
     .big-dot {
       background: $blue;
     }
-
-    .selected .date {
-      color: $light-grey;
-    }
   }
 }
 
@@ -847,6 +488,7 @@ export default {
   border-left: 4px solid $blue-light;
   padding-left: 25px;
   padding-bottom: 2em;
+  transition: border-left-color 0.2s ease;
 
   .subtitle {
     margin-top: 2em;
@@ -865,78 +507,54 @@ export default {
       height: 12px;
       border-radius: 6px;
     }
-
-    .dot {
-      position: absolute;
-      display: block;
-      left: -34px;
-      background: $blue-light;
-      width: 9px;
-      height: 9px;
-      border-radius: 4px;
-
-      &.red {
-        background: $red;
-      }
-
-      &.green {
-        background: $light-green;
-      }
-    }
-  }
-
-  .task-type-wrapper {
-    min-width: 100px;
   }
+}
 
-  .validation-wrapper {
-    min-width: 80px;
-  }
+// Sticky day header: keep the original centered subtitle styling but pin
+// it to the top of the scroll container so the date stays visible while
+// scrolling long feeds. The compound `.timeline-entry.day-sticky` selector
+// is needed to outrank `.timeline .timeline-entry { position: relative }`,
+// which would otherwise win on specificity and disable sticky entirely.
+// `position: sticky` still establishes a positioning context for the
+// absolutely-placed `.big-dot`, so the dot keeps sitting on the rail.
+.timeline-entry.day-sticky {
+  background: $white;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  position: sticky;
+  top: 0;
+  z-index: 2;
 
-  .date {
-    min-width: 30px;
+  .dark & {
+    background: $dark-grey;
   }
 }
 
-.date {
-  font-size: 0.8em;
-  color: $grey;
+.empty-state {
+  align-items: center;
+  color: var(--text-alt);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  padding: 3em 1em;
+  text-align: center;
 }
 
-.news-info {
-  vertical-align: middle;
-
-  span,
-  a {
-    vertical-align: middle;
-    display: inline-flex;
-    align-items: center;
-  }
+.empty-icon {
+  color: var(--text-alt);
+  opacity: 0.5;
 }
 
-.news-line {
-  padding-left: 1em;
-  align-items: middle;
-  border: 3px solid transparent;
-  cursor: pointer;
-  margin-bottom: 1px;
-  padding-top: 0.3em;
-  padding-bottom: 0.3em;
-  border-radius: 0.5em;
-  transition: border 0.1s linear;
-
-  &:hover {
-    border: 3px solid var(--background-selectable);
-  }
-
-  &.selected {
-    border: 3px solid var(--background-selected);
-  }
+.empty-title {
+  color: var(--text);
+  font-size: 1.1em;
+  font-weight: 600;
+  margin: 0;
 }
 
-.preview {
-  margin: 0 auto 2em auto;
-  max-width: 800px;
+.empty-hint {
+  margin: 0;
+  max-width: 380px;
 }
 
 .side-column {
@@ -945,62 +563,114 @@ export default {
   max-width: 450px;
 }
 
-.selector {
-  margin-bottom: 0;
-  margin-right: 1em;
+.drawer-close {
+  display: none;
 }
 
-.person-label {
-  margin-top: 5px;
-  margin-bottom: 4px;
+.drawer-backdrop {
+  display: none;
 }
 
-.filter-button {
-  color: $grey;
-  cursor: pointer;
-  float: right;
-  text-transform: lowercase;
+.timeline.timeline-blank {
+  border-left-color: transparent;
 }
 
-.stats {
-  text-align: left;
-  width: 100%;
-  flex: 1;
-
-  .news-number {
-    font-weight: bold;
-    border-bottom: 1px solid var(--border-alt);
-    padding: 0.6em;
+// Mobile: drop the timeline rail + big-dot — the chronological grouping
+// still reads via the sticky day headers, and the rail is visual noise
+// at narrow widths.
+@media screen and (max-width: 768px) {
+  .timeline {
+    border-left: 0;
+    padding-left: 0;
   }
 
-  .stat-tag {
-    border-radius: 6px;
-    border-bottom: 1px solid var(--border);
-    box-shadow: 0 0 2px var(--box-shadow);
-    display: inline-block;
-    font-size: 0.8em;
-    height: 32px;
-    padding-left: 4px;
-    margin-right: 1em;
-    margin-top: 0;
-    margin-bottom: 0.4em;
-    font-weight: bold;
-    width: 100%;
+  .timeline .timeline-entry .big-dot {
+    display: none;
   }
 
-  .stat-text {
-    display: inline-block;
-    background: rgba(255, 255, 255, 0.8);
-    font-weight: bold;
-    padding: 4px 8px;
-    margin-top: 3px;
-    color: $black;
-    border-radius: 6px;
-    white-space: nowrap;
+  .timeline-wrapper {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
   }
 }
 
-.preview .news-line .dot {
-  left: -54px;
+// Mobile / tablet drawer: under 1024px the side panel slides in from
+// the right when a news is selected. Backdrop catches outside taps to
+// close.
+@media (max-width: 1024px) {
+  // Override App.vue's global `.side-column { max-width: 400px; width: 400px;
+  // margin-top: 60px }` — the drawer needs to span the full viewport and
+  // sit ABOVE the topbar (z-index 204), so no top offset and no width cap.
+  .side-column {
+    background: $white;
+    bottom: 0;
+    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
+    margin-top: 0 !important;
+    max-width: min(100vw, 420px) !important;
+    min-width: 0 !important;
+    overflow-y: auto;
+    padding-top: 56px;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transform: translateX(100%);
+    transition: transform 0.25s ease;
+    width: min(100vw, 420px) !important;
+    z-index: 250;
+
+    &.is-open {
+      transform: translateX(0);
+    }
+  }
+
+  .dark .side-column {
+    background: $dark-grey-light;
+  }
+
+  .drawer-close {
+    align-items: center;
+    align-self: flex-end;
+    background: var(--background);
+    border: 0;
+    border-radius: 50%;
+    color: var(--text);
+    cursor: pointer;
+    display: flex;
+    height: 36px;
+    justify-content: center;
+    margin: -44px 12px 8px 0;
+    padding: 6px;
+    position: sticky;
+    top: 12px;
+    width: 36px;
+    z-index: 2;
+
+    &:hover {
+      background: var(--background-hover);
+    }
+  }
+
+  // The drawer needs to be a flex column so the sticky close button can
+  // align itself to the right edge.
+  .side-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .drawer-backdrop {
+    background: rgba(0, 0, 0, 0.4);
+    display: block;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    transition: opacity 0.25s ease;
+    z-index: 249;
+
+    &.is-open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
 }
 </style>
diff --git a/src/components/pages/Profile.vue b/src/components/pages/Profile.vue
index 09c2893f50..816982beca 100644
--- a/src/components/pages/Profile.vue
+++ b/src/components/pages/Profile.vue
@@ -1,166 +1,140 @@
 <template>
   <div class="profile page">
     <div class="profile-content">
-      <div class="has-text-centered profile-header">
-        <div class="profile-header-content has-text-centered">
-          <people-avatar
-            :is-lazy="false"
-            :person="user"
-            :size="150"
-            :font-size="60"
-          />
-
-          <p>
-            <button
-              class="button is-link change-avatar-button"
-              @click="showAvatarModal"
-            >
-              {{ $t('profile.change_avatar') }}
-            </button>
-          </p>
-          <p>
-            <button
-              class="button is-link clear-avatar-button"
-              @click="removeAvatar"
-            >
-              {{ $t('profile.clear_avatar') }}
-            </button>
-          </p>
-          <h1>
-            {{ $t('profile.title') }}
-          </h1>
-        </div>
-      </div>
-
-      <div class="profile-body">
-        <h2>
-          {{ $t('profile.info_title') }}
-        </h2>
-        <text-field
-          :label="$t('people.fields.first_name')"
-          :disabled="user.is_generated_from_ldap"
-          v-model="form.first_name"
-        />
-        <text-field
-          :label="$t('people.fields.last_name')"
-          :disabled="user.is_generated_from_ldap"
-          v-model="form.last_name"
-        />
-        <text-field
-          :label="$t('people.fields.email')"
-          :disabled="user.is_generated_from_ldap"
-          v-model="form.email"
+      <header class="profile-header">
+        <people-avatar
+          :is-lazy="false"
+          :person="user"
+          :size="120"
+          :font-size="48"
         />
-        <text-field :label="$t('people.fields.phone')" v-model="form.phone" />
-        <div class="field">
-          <label class="label">
-            {{ $t('profile.timezone') }}
-          </label>
-          <span class="select is-medium">
-            <select v-model="form.timezone">
-              <option :key="timezone" v-for="timezone in timezones">
-                {{ timezone }}
-              </option>
-            </select>
-          </span>
+        <h1 class="profile-name">{{ user.full_name }}</h1>
+        <p class="profile-role" v-if="user.role">
+          {{ $t(`people.role.${user.role}`) }}
+        </p>
+        <div class="profile-avatar-actions">
+          <button class="link-button" @click="showAvatarModal">
+            {{ $t('profile.change_avatar') }}
+          </button>
+          <span class="dot">·</span>
+          <button class="link-button muted" @click="removeAvatar">
+            {{ $t('profile.clear_avatar') }}
+          </button>
         </div>
-        <div class="field">
-          <label class="label">
-            {{ $t('profile.language') }}
-          </label>
-          <span class="select is-medium">
-            <select
-              v-model="form.locale"
-              :value="form.locale"
-              @change="localeChanged"
-            >
-              <option value="zh_Hans_CN">Chinese</option>
-              <option value="zh_Hant_TW">Chinese (TC)</option>
-              <option value="da_DA">Danish</option>
-              <option value="nl_NL">Dutch</option>
-              <option value="en_US">English</option>
-              <option value="fr_FR">French</option>
-              <option value="de_DE">German</option>
-              <option value="hu_HU">Hungarian</option>
-              <option value="ja_JP">Japanese</option>
-              <option value="ko_KR">Korean</option>
-              <option value="pt_BR">Portuguese (Brazilian)</option>
-              <option value="fa_IR">Persian</option>
-              <option value="es_ES">Spanish</option>
-              <option value="ru_RU">Russian</option>
-            </select>
-          </span>
+      </header>
+
+      <card
+        :title="$t('profile.info_title')"
+        :error="errors.info ? $t('profile.save.error') : ''"
+        :save-label="$t('profile.save.button')"
+        :loading="loading.info"
+        @save="saveInfo"
+      >
+        <div class="grid-two">
+          <text-field
+            :label="$t('people.fields.first_name')"
+            :disabled="user.is_generated_from_ldap"
+            v-model="form.first_name"
+          />
+          <text-field
+            :label="$t('people.fields.last_name')"
+            :disabled="user.is_generated_from_ldap"
+            v-model="form.last_name"
+          />
+          <text-field
+            :label="$t('people.fields.email')"
+            :disabled="user.is_generated_from_ldap"
+            v-model="form.email"
+          />
+          <text-field :label="$t('people.fields.phone')" v-model="form.phone" />
         </div>
-
-        <div class="field">
-          <combobox-boolean
+        <div class="grid-two">
+          <combobox
+            :label="$t('profile.timezone')"
+            :options="timezoneOptions"
+            v-model="form.timezone"
+          />
+          <combobox
+            :label="$t('profile.language')"
+            :options="localeOptions"
+            v-model="form.locale"
+            @update:model-value="localeChanged"
+          />
+        </div>
+      </card>
+
+      <card
+        :title="$t('profile.notifications_title')"
+        :error="errors.notifications ? $t('profile.save.error') : ''"
+        :save-label="$t('profile.save.button')"
+        :loading="loading.notifications"
+        @save="saveNotifications"
+      >
+        <div class="toggle-row">
+          <checkbox
+            :toggle="true"
             :label="$t('profile.notifications_enabled')"
             v-model="form.notifications_enabled"
           />
         </div>
 
-        <div class="field">
-          <combobox-boolean
+        <div class="channel">
+          <checkbox
+            :toggle="true"
             :label="$t('profile.notifications_slack_enabled')"
             v-model="form.notifications_slack_enabled"
           />
+          <text-field
+            :label="$t('profile.notifications_slack_user')"
+            v-model="form.notifications_slack_userid"
+            v-if="form.notifications_slack_enabled"
+          />
         </div>
 
-        <text-field
-          :label="$t('profile.notifications_slack_user')"
-          v-model="form.notifications_slack_userid"
-          v-if="form.notifications_slack_enabled === 'true'"
-        />
-
-        <div class="field">
-          <combobox-boolean
+        <div class="channel">
+          <checkbox
+            :toggle="true"
             :label="$t('profile.notifications_mattermost_enabled')"
             v-model="form.notifications_mattermost_enabled"
           />
+          <text-field
+            :label="$t('profile.notifications_mattermost_user')"
+            v-model="form.notifications_mattermost_userid"
+            v-if="form.notifications_mattermost_enabled"
+          />
         </div>
 
-        <text-field
-          :label="$t('profile.notifications_mattermost_user')"
-          v-model="form.notifications_mattermost_userid"
-          v-if="form.notifications_mattermost_enabled === 'true'"
-        />
-
-        <div class="field">
-          <combobox-boolean
+        <div class="channel">
+          <checkbox
+            :toggle="true"
             :label="$t('profile.notifications_discord_enabled')"
             v-model="form.notifications_discord_enabled"
           />
+          <text-field
+            :label="$t('profile.notifications_discord_user')"
+            v-model="form.notifications_discord_userid"
+            v-if="form.notifications_discord_enabled"
+          />
         </div>
-
-        <text-field
-          :label="$t('profile.notifications_discord_user')"
-          v-model="form.notifications_discord_userid"
-          v-if="form.notifications_discord_enabled === 'true'"
-        />
-
-        <button
-          :class="{
-            button: true,
-            'save-button': true,
-            'is-medium': true,
-            'is-loading': isSaveProfileLoading
-          }"
-          @click="saveProfile({ form: form })"
-        >
-          {{ $t('profile.save.button') }}
-        </button>
-        <p
-          :class="{
-            error: true,
-            'is-hidden': !isSaveProfileLoadingError
-          }"
-        >
-          {{ $t('profile.save.error') }}
-        </p>
-
-        <h2>
-          {{ $t('profile.password_title') }}
-        </h2>
+      </card>
+
+      <card
+        :title="$t('profile.password_title')"
+        :error="
+          !changePassword.isValid
+            ? $t('profile.change_password.unvalid')
+            : changePassword.isError
+              ? $t('profile.change_password.error')
+              : ''
+        "
+        :success="
+          changePassword.isSuccess ? $t('profile.change_password.success') : ''
+        "
+        :save-label="$t('profile.change_password.button')"
+        :loading="changePassword.isLoading"
+        :disabled="user.is_generated_from_ldap"
+        @save="passwordChangeRequested"
+      >
         <text-field
           autocomplete="current-password"
           :label="$t('people.fields.old_password')"
@@ -183,52 +157,13 @@
           v-model="passwordForm.password2"
         />
 
-        <button
-          :class="{
-            button: true,
-            'save-button': true,
-            'is-medium': true,
-            'is-loading': changePassword.isLoading
-          }"
-          :disabled="user.is_generated_from_ldap"
-          @click="passwordChangeRequested()"
-        >
-          {{ $t('profile.change_password.button') }}
-        </button>
-
-        <p
-          :class="{
-            'show-message': true,
-            error: true,
-            'is-hidden': changePassword.isValid
-          }"
-        >
-          {{ $t('profile.change_password.unvalid') }}
-        </p>
-
-        <p
-          :class="{
-            'show-message': true,
-            success: true,
-            'is-hidden': !changePassword.isSuccess
-          }"
-        >
-          {{ $t('profile.change_password.success') }}
-        </p>
-
-        <p
-          :class="{
-            'show-message': true,
-            error: true,
-            'is-hidden': !changePassword.isError
-          }"
-        >
-          {{ $t('profile.change_password.error') }}
-        </p>
-
-        <h2>{{ $t('profile.two_factor_authentication.title') }}</h2>
-        <two-factor-authentication-setup show-cancel-button />
-      </div>
+        <div class="two-factor">
+          <h3 class="card-subtitle">
+            {{ $t('profile.two_factor_authentication.title') }}
+          </h3>
+          <two-factor-authentication-setup />
+        </div>
+      </card>
     </div>
 
     <change-avatar-modal
@@ -244,281 +179,299 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import moment from 'moment-timezone'
-import { mapGetters, mapActions } from 'vuex'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useHead } from '@unhead/vue'
+import { useStore } from 'vuex'
 
 import lang from '@/lib/lang'
 
-import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import ChangeAvatarModal from '@/components/modals/ChangeAvatarModal.vue'
+import Card from '@/components/widgets/Card.vue'
+import Checkbox from '@/components/widgets/Checkbox.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TwoFactorAuthenticationSetup from '@/components/widgets/TwoFactorAuthenticationSetup.vue'
 
-export default {
-  name: 'profile',
-
-  components: {
-    ComboboxBoolean,
-    PeopleAvatar,
-    ChangeAvatarModal,
-    TextField,
-    TwoFactorAuthenticationSetup
-  },
-
-  data() {
-    return {
-      form: {
-        first_name: '',
-        last_name: '',
-        notifications_enabled: 'false',
-        notifications_slack_enabled: 'false',
-        notifications_slack_userid: '',
-        notifications_mattermost_enabled: 'false',
-        notifications_mattermost_userid: '',
-        notifications_discord_enabled: 'false',
-        notifications_discord_userid: '',
-        email: '',
-        phone: '',
-        timezone: 'Europe/Paris',
-        locale: 'French'
-      },
-      passwordForm: {
-        oldPassword: '',
-        password: '',
-        password2: ''
-      },
-      changeAvatar: {
-        isModalShown: false,
-        isLoading: false,
-        isLoadingError: false,
-        formData: null
-      }
-    }
-  },
-
-  watch: {
-    user() {
-      Object.assign(this.form, this.user)
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'changePassword',
-      'isSaveProfileLoading',
-      'isSaveProfileLoadingError',
-      'user'
-    ]),
-
-    timezones() {
-      return moment.tz.names().filter(timezone => {
-        return timezone.indexOf('/') > 0 && timezone.indexOf('Etc') < 0
-      })
-    }
-  },
-
-  methods: {
-    ...mapActions([
-      'checkNewPasswordValidityAndSave',
-      'clearAvatar',
-      'saveProfile',
-      'uploadAvatar'
-    ]),
-
-    localeChanged() {
-      lang.setLocale(this.form.locale)
-    },
-
-    async passwordChangeRequested() {
-      await this.checkNewPasswordValidityAndSave({
-        form: this.passwordForm
-      })
-      if (this.changePassword.isSuccess) {
-        this.passwordForm = {
-          oldPassword: '',
-          password: '',
-          password2: ''
-        }
-      }
-    },
-
-    selectFile(formData) {
-      this.$store.commit('CHANGE_AVATAR_FILE', formData)
-    },
-
-    uploadAvatarFile() {
-      this.changeAvatar.isLoading = true
-      this.changeAvatar.isError = false
-      this.uploadAvatar()
-        .catch(err => {
-          console.error(err)
-          this.changeAvatar.isError = true
-        })
-        .finally(() => {
-          this.changeAvatar.isLoading = false
-          this.hideAvatarModal()
-        })
-    },
-
-    hideAvatarModal() {
-      this.changeAvatar.isModalShown = false
-    },
-
-    showAvatarModal() {
-      this.changeAvatar.isModalShown = true
-    },
-
-    removeAvatar() {
-      this.clearAvatar()
-    }
-  },
-
-  mounted() {
-    this.form = Object.assign(this.form, this.user)
-    this.form.notifications_enabled = this.form.notifications_enabled
-      ? 'true'
-      : 'false'
-    this.form.notifications_slack_enabled = this.form
-      .notifications_slack_enabled
-      ? 'true'
-      : 'false'
-    this.form.notifications_mattermost_enabled = this.form
-      .notifications_mattermost_enabled
-      ? 'true'
-      : 'false'
-    this.form.notifications_discord_enabled = this.form
-      .notifications_discord_enabled
-      ? 'true'
-      : 'false'
-  },
-
-  head() {
-    return {
-      title: `${this.$t('profile.title')} - Kitsu`
-    }
-  }
+const { t } = useI18n()
+const store = useStore()
+
+// State
+
+const form = ref({
+  first_name: '',
+  last_name: '',
+  notifications_enabled: false,
+  notifications_slack_enabled: false,
+  notifications_slack_userid: '',
+  notifications_mattermost_enabled: false,
+  notifications_mattermost_userid: '',
+  notifications_discord_enabled: false,
+  notifications_discord_userid: '',
+  email: '',
+  phone: '',
+  timezone: 'Europe/Paris',
+  locale: 'en_US'
+})
+
+const passwordForm = ref({
+  oldPassword: '',
+  password: '',
+  password2: ''
+})
+
+const changeAvatar = reactive({
+  isModalShown: false,
+  isLoading: false,
+  isLoadingError: false,
+  formData: null
+})
+
+const loading = reactive({ info: false, notifications: false })
+const errors = reactive({ info: false, notifications: false })
+
+// Locale list — alphabetical by the English name (as in the original page),
+// with the native name in parentheses so it stays recognizable when the UI
+// language doesn't match.
+const localeOptions = [
+  { label: 'Chinese (简体中文)', value: 'zh_Hans_CN' },
+  { label: 'Chinese TC (繁體中文)', value: 'zh_Hant_TW' },
+  { label: 'Danish (Dansk)', value: 'da_DA' },
+  { label: 'Dutch (Nederlands)', value: 'nl_NL' },
+  { label: 'English', value: 'en_US' },
+  { label: 'French (Français)', value: 'fr_FR' },
+  { label: 'German (Deutsch)', value: 'de_DE' },
+  { label: 'Hungarian (Magyar)', value: 'hu_HU' },
+  { label: 'Japanese (日本語)', value: 'ja_JP' },
+  { label: 'Korean (한국어)', value: 'ko_KR' },
+  { label: 'Portuguese Brazilian (Português)', value: 'pt_BR' },
+  { label: 'Persian (فارسی)', value: 'fa_IR' },
+  { label: 'Spanish (Español)', value: 'es_ES' },
+  { label: 'Russian (Русский)', value: 'ru_RU' }
+]
+
+// Computed
+
+const user = computed(() => store.getters.user)
+const changePassword = computed(() => store.getters.changePassword)
+
+const timezoneOptions = computed(() =>
+  moment.tz
+    .names()
+    .filter(tz => tz.indexOf('/') > 0 && tz.indexOf('Etc') < 0)
+    .map(tz => ({ label: tz, value: tz }))
+)
+
+// Functions
+
+const syncFormFromUser = () => {
+  Object.assign(form.value, user.value)
+  form.value.notifications_enabled = Boolean(user.value.notifications_enabled)
+  form.value.notifications_slack_enabled = Boolean(
+    user.value.notifications_slack_enabled
+  )
+  form.value.notifications_mattermost_enabled = Boolean(
+    user.value.notifications_mattermost_enabled
+  )
+  form.value.notifications_discord_enabled = Boolean(
+    user.value.notifications_discord_enabled
+  )
 }
-</script>
 
-<style lang="scss" scoped>
-.dark .profile {
-  background: #36393f;
-  color: $white-grey;
+const saveSection = async section => {
+  loading[section] = true
+  errors[section] = false
+  try {
+    await store.dispatch('saveProfile', { form: form.value })
+  } catch {
+    errors[section] = true
+  }
+  loading[section] = false
 }
 
-.dark .profile-content {
-  background: $dark-grey-lighter;
-  color: $white-grey;
-}
+const saveInfo = () => saveSection('info')
+const saveNotifications = () => saveSection('notifications')
 
-.profile {
-  background: $white-grey;
-  width: 100%;
-  flex: 1 1 auto;
-  height: 100%;
+const localeChanged = value => {
+  form.value.locale = value
+  lang.setLocale(value)
 }
 
-.profile-content {
-  background: white;
-  max-width: 500px;
-  margin: auto;
-  margin-top: 6em;
-  margin-bottom: 2em;
-  box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px 2px;
+const passwordChangeRequested = async () => {
+  await store.dispatch('checkNewPasswordValidityAndSave', {
+    form: passwordForm.value
+  })
+  if (changePassword.value.isSuccess) {
+    passwordForm.value = { oldPassword: '', password: '', password2: '' }
+  }
 }
 
-.profile-body {
-  padding: 2em;
+const selectFile = formData => {
+  store.commit('CHANGE_AVATAR_FILE', formData)
 }
 
-input,
-select,
-span.select {
-  width: 100%;
+const uploadAvatarFile = formData => {
+  changeAvatar.isLoading = true
+  changeAvatar.isLoadingError = false
+  store
+    .dispatch('uploadAvatar', formData)
+    .catch(err => {
+      console.error(err)
+      changeAvatar.isLoadingError = true
+    })
+    .finally(() => {
+      changeAvatar.isLoading = false
+      hideAvatarModal()
+    })
 }
 
-.field {
-  margin-bottom: 2em;
+const hideAvatarModal = () => {
+  changeAvatar.isModalShown = false
 }
 
-.profile-header {
-  background: $light-green;
-  padding: 2em;
-  max-height: 170px;
+const showAvatarModal = () => {
+  changeAvatar.isModalShown = true
 }
 
-.profile-content,
-.profile-header {
-  border-top-left-radius: 1em;
-  border-top-right-radius: 1em;
+const removeAvatar = () => {
+  store.dispatch('clearAvatar')
 }
 
-.profile-content {
-  border-bottom-left-radius: 1em;
-  border-bottom-right-radius: 1em;
+// Watchers
+
+watch(user, syncFormFromUser)
+
+// Lifecycle
+
+onMounted(syncFormFromUser)
+
+// Head
+
+useHead({ title: computed(() => `${t('profile.title')} - Kitsu`) })
+</script>
+
+<style lang="scss" scoped>
+.profile {
+  background: var(--background-page);
+  color: var(--text);
+  flex: 1 1 auto;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
 }
 
-.profile-header-content {
-  position: relative;
-  top: -8em;
+.profile-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin: 3rem auto;
+  max-width: 720px;
+  padding: 0 1.5rem;
 }
 
-.profile-header h1 {
-  font-size: 2em;
-  margin-top: 0;
+.profile-header {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 0 0.5rem;
+  text-align: center;
 }
 
-.profile-header,
-.profile-header a {
-  color: white;
+.profile-name {
+  color: var(--text);
+  font-size: 1.6rem;
+  font-weight: 600;
+  margin: 1rem 0 0.25rem;
 }
 
-h2:first-child {
-  margin-top: 0;
+.profile-role {
+  color: var(--text-alt);
+  font-size: 0.95rem;
+  letter-spacing: 0.02em;
+  margin: 0;
+  text-transform: uppercase;
 }
 
-.big-number {
-  font-size: 3em;
+.profile-avatar-actions {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
 }
 
-.select:after {
-  border-color: $light-green;
+.dot {
+  color: var(--text-alt);
 }
 
-.save-button {
-  width: 100%;
-  background: $green;
-  border-color: $green;
-  color: $white;
+.link-button {
+  background: none;
+  border: none;
+  color: $green;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0;
 
   &:hover {
-    background: $light-green;
-    border-color: $light-green;
+    text-decoration: underline;
+  }
+
+  &.muted {
+    color: var(--text-alt);
   }
 }
 
-.avatar {
-  margin: auto;
-  border: 5px solid white;
+// Combobox wraps its <select> in a Bulma .select span that is
+// inline-block by default; force it block so the dropdown stretches to
+// the same width as the TextField inputs above it.
+.profile-content {
+  :deep(.select) {
+    display: block;
+  }
+  :deep(.combobox.select-input) {
+    width: 100%;
+  }
+}
+
+.card-subtitle {
+  color: var(--text);
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 1.5rem 0 0.75rem;
 }
 
-.change-avatar-button {
-  color: white;
+.grid-two {
+  display: grid;
+  gap: 0 1rem;
+  grid-template-columns: 1fr 1fr;
 }
 
-.show-message {
-  margin-top: 1em;
+.toggle-row {
+  margin-bottom: 1rem;
 }
 
-.clear-avatar-button {
-  color: white;
-  font-size: 0.7em;
-  text-transform: lowercase;
+.channel {
+  border-top: 1px solid var(--border);
+  padding-top: 1rem;
+  margin-top: 0.5rem;
 }
 
-select {
-  height: 3em;
+.two-factor {
+  border-top: 1px solid var(--border);
+  margin-top: 1.5rem;
+  padding-top: 0.5rem;
+}
+
+@media screen and (max-width: 768px) {
+  .profile-content {
+    margin: 1.5rem auto;
+    padding: 0 0.75rem;
+  }
+
+  .grid-two {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/src/components/pages/STUDIO_REVIEW.md b/src/components/pages/STUDIO_REVIEW.md
new file mode 100644
index 0000000000..e6325f1495
--- /dev/null
+++ b/src/components/pages/STUDIO_REVIEW.md
@@ -0,0 +1,97 @@
+# Studio Page — Code Review
+
+Date: 2026-04-13
+
+Fichiers analyses :
+- `src/components/pages/Studios.vue`
+- `src/components/lists/StudioList.vue`
+- `src/components/modals/EditStudiosModal.vue`
+- `src/components/widgets/ComboboxStudio.vue`
+- `src/components/widgets/StudioName.vue`
+- `src/store/modules/studios.js`
+- `src/store/api/studios.js`
+
+---
+
+## 1. Clarte du code
+
+### Options API → Composition API
+
+Les 3 composants principaux (`Studios.vue`, `StudioList.vue`, `EditStudiosModal.vue`) sont encore en Options API alors que la convention du projet est `<script setup>`. `ComboboxStudio.vue` et `StudioName.vue` sont deja convertis.
+
+### StudioList.vue
+
+- **Props non typees** (ligne 46) : `props: ['entries', 'isLoading', 'isError']` — pas de types, pas de defaults.
+- **Classe CSS `nb-asset-types`** (ligne 33) : nom copie-colle d'un autre composant, devrait etre `nb-studios`.
+- **`$tc` deprecie** (ligne 34) : `$tc('studios.number', entries.length)` — `$tc` est deprecie dans vue-i18n 10+, utiliser `$t` avec un parametre `count`.
+
+### EditStudiosModal.vue
+
+- **Mixin `modalMixin`** (ligne 54) : les mixins sont deconseilles en Vue 3. Un composable `useModal()` serait plus propre.
+- **`setTimeout` pour le focus** (lignes 110-113) : `setTimeout(() => this.$refs.nameField.focus(), 100)` — fragile. `nextTick` serait plus fiable.
+- **Donnees du formulaire dupliquees** : le watcher `studioToEdit` (lignes 116-132) et `data()` (lignes 84-92) dupliquent la structure du formulaire. Un computed ou un `watch` avec `immediate: true` simplifierait.
+
+### Studios.vue
+
+- **Pattern try/catch repetitif** : `confirmEditStudio` et `confirmDeleteStudio` ont exactement le meme pattern loading/error/try/catch. Un composable `useAsyncAction()` factoriserait ca.
+- **`tabs` dans `data()`** (lignes 85-94) : utilise `this.$t()` dans `data()`, ce qui ne se met pas a jour si la locale change. Devrait etre un `computed`.
+
+### studios.js (store)
+
+- **`EDIT_STUDIOS_END` ne retrie pas** (lignes 64-71) : apres un edit ou un ajout, la liste n'est pas re-triee par nom. `LOAD_STUDIOS_END` trie, mais pas `EDIT_STUDIOS_END`.
+- **`getStudio` getter** (lignes 25-27) : fait un `find()` O(n) alors que `studioMap` existe deja. Pourrait etre `id => cache.studioMap.get(id)`.
+
+---
+
+## 2. Styles CSS
+
+### StudioList.vue
+
+- **`.name` : largeur fixe** (ligne 63) : `width: 300px` — ne s'adapte pas. Devrait etre `min-width` ou un ratio flex.
+- **`.color` : `height` sur un `<td>`** (lignes 69-70) : `height: 20px` sur un `<td>` ne fonctionne pas comme prevu, c'est le `<span>` qui porte la taille.
+- **Pas de styles `dark`** : toutes les autres listes du projet en ont.
+
+### ComboboxStudio.vue
+
+- **Backgrounds en dur** (lignes 144, 159, 165) : `background: $white` au lieu de `var(--background)`. Casse le dark mode.
+- **`max-height` doublon** (ligne 191) : propriete CSS `max-height: 200px` en dur alors qu'elle est aussi passee en prop `maxHeightSelectInput` et appliquee en inline style. Les deux entrent en conflit.
+- **`.opened` manque le radius haut** : quand la dropdown s'ouvre, les coins bas sont retires mais le style est incomplet compare aux autres combobox.
+
+### EditStudiosModal.vue
+
+- **`.is-danger` couleur en dur** (ligne 143) : `color: #ff3860` au lieu de `$red` ou une variable CSS.
+- **Styles non utilises** : `.modal-content .box p.text` (ligne 138) — aucun element avec la classe `text` dans le template.
+
+---
+
+## 3. Responsive
+
+- **Aucun style responsive** dans aucun des composants. La table de `StudioList.vue` avec `width: 300px` en dur deborde sur mobile.
+- **`ComboboxStudio.vue` : largeur fixe** en prop (`width: 250px` par defaut) passee en inline style. Pas de `max-width: 100%` pour les petits ecrans.
+- **Modal `EditStudiosModal.vue`** : utilise les classes Bulma `.modal` qui sont responsive par defaut, mais le contenu interne n'a pas de padding adaptatif.
+
+---
+
+## 4. Performance
+
+- **Pas de probleme majeur** — page admin simple avec peu de donnees.
+- **`studioMap` dans le cache** (store ligne 11) : le `Map` est hors du state reactif (dans `cache`), ce qui est bien pour la perf, mais le getter `studioMap` (ligne 23) retourne toujours la meme reference — les composants qui dependent du contenu de la map ne seront pas re-rendus si elle change.
+- **`getStudio` getter** : `find()` au lieu de `Map.get()`.
+
+---
+
+## Resume par priorite
+
+| Priorite | Element | Fichier |
+|----------|---------|---------|
+| Haute | Backgrounds `$white` en dur (dark mode casse) | `ComboboxStudio.vue` |
+| Haute | `$tc` deprecie | `StudioList.vue` |
+| Moyenne | Conversion Composition API | `Studios.vue`, `StudioList.vue`, `EditStudiosModal.vue` |
+| Moyenne | Props non typees | `StudioList.vue` |
+| Moyenne | `tabs` dans `data()` au lieu de `computed` | `Studios.vue` |
+| Moyenne | `EDIT_STUDIOS_END` ne retrie pas | `studios.js` |
+| Basse | Classe CSS `nb-asset-types` -> `nb-studios` | `StudioList.vue` |
+| Basse | Mixin -> composable | `EditStudiosModal.vue` |
+| Basse | `setTimeout` -> `nextTick` | `EditStudiosModal.vue` |
+| Basse | Style `.is-danger` couleur en dur | `EditStudiosModal.vue` |
+| Basse | Responsive table/combobox | `StudioList.vue`, `ComboboxStudio.vue` |
diff --git a/src/components/pages/Settings.vue b/src/components/pages/Settings.vue
index bd06f0a4dc..e7b8158715 100644
--- a/src/components/pages/Settings.vue
+++ b/src/components/pages/Settings.vue
@@ -1,120 +1,138 @@
 <template>
   <div class="settings page">
-    <div class="settings-form">
-      <form class="settings-header" @submit.prevent>
-        <h2>
-          {{ $t('main.studio') }}
-        </h2>
-        <div class="field">
-          <label class="label">
-            {{ $t('settings.logo') }}
-          </label>
-          <div class="logo-wrapper" v-if="form.has_avatar">
-            <img :src="organisationLogoPath" />
-          </div>
-          <p class="no-logo" v-else>
-            <em>{{ $t('settings.no_logo') }}</em>
-          </p>
-          <p>
-            <button
-              type="button"
-              class="button set-logo-button"
-              @click="showAvatarModal"
-            >
-              {{ $t('settings.set_logo') }}
-            </button>
-          </p>
-          <p v-if="form.has_avatar">
+    <div class="settings-content">
+      <header class="settings-header">
+        <div class="logo-frame" v-if="form.has_avatar">
+          <img class="logo-image" :src="organisationLogoPath" alt="" />
+        </div>
+        <div class="logo-frame logo-frame--empty" v-else>
+          <span class="logo-initial">{{ logoInitial }}</span>
+        </div>
+        <h1 class="settings-name">
+          {{ organisation.name || $t('main.studio') }}
+        </h1>
+        <div class="settings-logo-actions">
+          <button class="link-button" type="button" @click="showAvatarModal">
+            {{
+              form.has_avatar
+                ? $t('settings.change_logo')
+                : $t('settings.set_logo')
+            }}
+          </button>
+          <template v-if="form.has_avatar">
+            <span class="dot">·</span>
             <button
+              class="link-button muted"
               type="button"
-              class="button is-link remove-logo-button"
               @click="removeAvatar"
             >
               {{ $t('settings.remove_logo') }}
             </button>
-          </p>
+          </template>
         </div>
-      </form>
-      <form ref="formRef" @submit.prevent="saveSettings">
-        <h2>
-          {{ $t('settings.title') }}
-        </h2>
-        <text-field
-          class="mt2"
-          :label="$t('settings.fields.name')"
-          :required="true"
-          v-model.trim="form.name"
-        />
-        <text-field
-          :label="$t('settings.fields.hours_by_day')"
-          :min="1"
-          :max="24"
-          :required="true"
-          type="number"
-          v-model="form.hours_by_day"
-        />
-        <combobox-boolean
-          :label="$t('settings.fields.use_original_name')"
-          v-model="form.use_original_file_name"
-        />
-        <combobox-boolean
-          :label="$t('settings.fields.show_hd_default')"
-          v-model="form.hd_by_default"
-        />
-        <combobox-boolean
-          :label="$t('settings.fields.timesheets_locked')"
-          v-model="form.timesheets_locked"
-        />
-        <combobox-boolean
-          :label="$t('settings.fields.format_duration_in_hours')"
-          v-model="form.format_duration_in_hours"
-        />
-        <combobox-boolean
-          :label="$t('settings.fields.dark_theme_by_default')"
-          v-model="form.dark_theme_by_default"
-        />
-        <h2>
-          {{ $t('settings.integrations') }}
-        </h2>
-        <text-field
-          :label="$t('settings.fields.slack_token')"
-          v-model.trim="form.chat_token_slack"
-        />
-        <text-field
-          :label="$t('settings.fields.discord_token')"
-          v-model.trim="form.chat_token_discord"
-        />
-        <div class="mattermost_integrations">
+      </header>
+
+      <div class="cards">
+        <card
+          :title="$t('settings.title')"
+          :error="errors.studio ? $t('settings.save.error') : ''"
+          :save-label="$t('settings.save.button')"
+          :loading="loading.studio"
+          @save="saveStudio"
+        >
           <text-field
-            :label="$t('settings.fields.mattermost_webhook')"
-            v-model.trim="form.chat_webhook_mattermost"
+            :label="$t('settings.fields.name')"
+            :required="true"
+            v-model.trim="form.name"
+          />
+          <text-field
+            :label="$t('settings.fields.hours_by_day')"
+            :min="1"
+            :max="24"
+            :required="true"
+            type="number"
+            v-model="form.hours_by_day"
           />
-          <div
-            class="error has-text-centered"
-            v-if="errors.webhook_error === true"
-          >
-            <em>{{ $t('settings.webhook_error') }}</em>
+        </card>
+
+        <card
+          :title="$t('settings.preferences_title')"
+          :error="errors.preferences ? $t('settings.save.error') : ''"
+          :save-label="$t('settings.save.button')"
+          :loading="loading.preferences"
+          @save="savePreferences"
+        >
+          <div class="toggle-row">
+            <checkbox
+              :toggle="true"
+              :label="$t('settings.fields.use_original_name')"
+              v-model="form.use_original_file_name"
+            />
           </div>
-        </div>
-        <button
-          class="button save-button is-medium"
-          :class="{
-            'is-loading': loading.save
-          }"
-          :disabled="loading.save || !formRef?.checkValidity()"
+          <div class="toggle-row">
+            <checkbox
+              :toggle="true"
+              :label="$t('settings.fields.show_hd_default')"
+              v-model="form.hd_by_default"
+            />
+          </div>
+          <div class="toggle-row">
+            <checkbox
+              :toggle="true"
+              :label="$t('settings.fields.timesheets_locked')"
+              v-model="form.timesheets_locked"
+            />
+          </div>
+          <div class="toggle-row">
+            <checkbox
+              :toggle="true"
+              :label="$t('settings.fields.format_duration_in_hours')"
+              v-model="form.format_duration_in_hours"
+            />
+          </div>
+          <div class="toggle-row">
+            <checkbox
+              :toggle="true"
+              :label="$t('settings.fields.dark_theme_by_default')"
+              v-model="form.dark_theme_by_default"
+            />
+          </div>
+        </card>
+
+        <card
+          :title="$t('settings.integrations')"
+          :error="
+            errors.webhook_error
+              ? $t('settings.webhook_error')
+              : errors.integrations
+                ? $t('settings.save.error')
+                : ''
+          "
+          :save-label="$t('settings.save.button')"
+          :loading="loading.integrations"
+          @save="saveIntegrations"
         >
-          {{ $t('settings.save.button') }}
-        </button>
-        <p class="error has-text-centered mt2" v-if="errors.save">
-          <em>{{ $t('settings.save.error') }}</em>
-        </p>
-      </form>
+          <text-field
+            :label="$t('settings.fields.slack_token')"
+            v-model.trim="form.chat_token_slack"
+          />
+          <text-field
+            :label="$t('settings.fields.discord_token')"
+            v-model.trim="form.chat_token_discord"
+          />
+          <text-field
+            :label="$t('settings.fields.mattermost_webhook')"
+            v-model.trim="form.chat_webhook_mattermost"
+          />
+        </card>
+      </div>
     </div>
 
     <change-avatar-modal
       :active="modals.avatar"
       :is-loading="loading.saveAvatar"
       :is-error="errors.saveAvatar"
+      shape="rounded"
       :title="$t('settings.change_logo')"
       @confirm="uploadAvatarFile"
       @cancel="hideAvatarModal"
@@ -123,13 +141,14 @@
 </template>
 
 <script setup>
-import { ref, computed, reactive, watch, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useHead } from '@unhead/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import ChangeAvatarModal from '@/components/modals/ChangeAvatarModal.vue'
-import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
+import Card from '@/components/widgets/Card.vue'
+import Checkbox from '@/components/widgets/Checkbox.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
 const { t } = useI18n()
@@ -142,34 +161,41 @@ const form = reactive({
   chat_token_slack: '',
   chat_webhook_mattermost: '',
   has_avatar: false,
-  hd_by_default: 'false',
+  hd_by_default: false,
   hours_by_day: 0,
   name: '',
-  timesheets_locked: 'false',
-  use_original_file_name: 'false',
-  format_duration_in_hours: 'false',
-  dark_theme_by_default: 'false'
+  timesheets_locked: false,
+  use_original_file_name: false,
+  format_duration_in_hours: false,
+  dark_theme_by_default: false
 })
 const errors = reactive({
-  save: false,
+  studio: false,
+  preferences: false,
+  integrations: false,
   saveAvatar: false,
   webhook_error: false
 })
 const loading = reactive({
-  save: false,
+  studio: false,
+  preferences: false,
+  integrations: false,
   saveAvatar: false
 })
 const modals = reactive({
   avatar: false
 })
 
-const formRef = ref(null)
 const organisationLogoPath = ref('')
 
 // Computed
 
 const organisation = computed(() => store.getters.organisation)
 
+const logoInitial = computed(
+  () => organisation.value?.name?.slice(0, 1).toUpperCase() || '?'
+)
+
 // Functions
 
 const checkWebhook = () => {
@@ -179,10 +205,9 @@ const checkWebhook = () => {
   ) {
     errors.webhook_error = false
     return true
-  } else {
-    errors.webhook_error = true
-    return false
   }
+  errors.webhook_error = true
+  return false
 }
 
 const hideAvatarModal = () => {
@@ -193,29 +218,23 @@ const showAvatarModal = () => {
   modals.avatar = true
 }
 
-const saveSettings = () => {
-  if (!checkWebhook()) return
-  loading.save = true
-  errors.save = false
-  const data = {
-    ...form,
-    hd_by_default: form.hd_by_default === 'true',
-    timesheets_locked: form.timesheets_locked === 'true',
-    use_original_file_name: form.use_original_file_name === 'true',
-    format_duration_in_hours: form.format_duration_in_hours === 'true',
-    dark_theme_by_default: form.dark_theme_by_default === 'true'
+const saveSection = async (section, validate = null) => {
+  if (validate && !validate()) return
+  loading[section] = true
+  errors[section] = false
+  try {
+    await store.dispatch('saveOrganisation', { ...form })
+  } catch (err) {
+    console.error(err)
+    errors[section] = true
   }
-  store
-    .dispatch('saveOrganisation', data)
-    .catch(err => {
-      console.error(err)
-      errors.save = true
-    })
-    .finally(() => {
-      loading.save = false
-    })
+  loading[section] = false
 }
 
+const saveStudio = () => saveSection('studio')
+const savePreferences = () => saveSection('preferences')
+const saveIntegrations = () => saveSection('integrations', checkWebhook)
+
 const uploadAvatarFile = formData => {
   loading.saveAvatar = true
   errors.saveAvatar = false
@@ -238,16 +257,16 @@ const uploadAvatarFile = formData => {
 }
 
 const removeAvatar = () => {
-  loading.save = true
-  errors.save = false
+  loading.saveAvatar = true
+  errors.saveAvatar = false
   store
     .dispatch('deleteOrganisationLogo')
     .catch(err => {
       console.error(err)
-      errors.save = true
+      errors.saveAvatar = true
     })
     .finally(() => {
-      loading.save = false
+      loading.saveAvatar = false
     })
 }
 
@@ -261,21 +280,17 @@ watch(
       chat_token_slack: organisation.value.chat_token_slack,
       chat_webhook_mattermost: organisation.value.chat_webhook_mattermost,
       has_avatar: organisation.value.has_avatar,
-      hd_by_default: organisation.value.hd_by_default ? 'true' : 'false',
+      hd_by_default: Boolean(organisation.value.hd_by_default),
       hours_by_day: organisation.value.hours_by_day,
       name: organisation.value.name,
-      timesheets_locked: organisation.value.timesheets_locked
-        ? 'true'
-        : 'false',
-      use_original_file_name: organisation.value.use_original_file_name
-        ? 'true'
-        : 'false',
-      format_duration_in_hours: organisation.value.format_duration_in_hours
-        ? 'true'
-        : 'false',
-      dark_theme_by_default: organisation.value.dark_theme_by_default
-        ? 'true'
-        : 'false'
+      timesheets_locked: Boolean(organisation.value.timesheets_locked),
+      use_original_file_name: Boolean(
+        organisation.value.use_original_file_name
+      ),
+      format_duration_in_hours: Boolean(
+        organisation.value.format_duration_in_hours
+      ),
+      dark_theme_by_default: Boolean(organisation.value.dark_theme_by_default)
     })
   },
   { immediate: true }
@@ -293,90 +308,115 @@ useHead({ title: computed(() => `${t('settings.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
-.dark {
-  .settings {
-    background: $dark-grey-2;
-    color: $white-grey;
-  }
+.settings {
+  background: var(--background-page);
+  color: var(--text);
+  flex: 1 1 auto;
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+}
 
-  .settings-form {
-    background: $dark-grey-lighter;
-    color: $white-grey;
-  }
+.settings-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin: 3rem auto;
+  max-width: 720px;
+  padding: 0 1.5rem;
+}
 
-  .set-logo-button {
-    background-color: $grey;
-    color: $dark-grey;
-  }
+.settings-header {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 0 0.5rem;
+  text-align: center;
 }
 
-.mattermost_integrations {
-  margin-bottom: 4em;
-  .field {
-    margin-bottom: 0;
-  }
+.logo-frame {
+  align-items: center;
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  display: flex;
+  height: 120px;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0.75rem;
+  width: 120px;
 }
 
-.settings {
-  background: $white-grey;
-  height: 100%;
+.dark .logo-frame {
+  background: var(--background-alt);
 }
 
-.settings-form {
-  background: white;
-  max-width: 500px;
-  margin: auto;
-  margin-top: 2em;
-  margin-bottom: 2em;
-  padding: 2em;
-  box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px 2px;
-  border-radius: 1em;
+.logo-image {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
 }
 
-@media screen and (max-width: 768px) {
-  .settings-form {
-    margin: 1em 0.5em;
-    padding: 1em;
-  }
+.logo-frame--empty {
+  border-style: dashed;
 }
 
-input,
-select,
-span.select {
-  width: 100%;
+.logo-initial {
+  color: var(--text-alt);
+  font-size: 3rem;
+  font-weight: 600;
 }
 
-h2:first-child {
-  margin-top: 0;
+.settings-name {
+  color: var(--text);
+  font-size: 1.6rem;
+  font-weight: 600;
+  margin: 1rem 0 0.25rem;
 }
 
-.save-button {
-  background: $green;
-  border-radius: 10px;
-  border-color: $green;
-  color: white;
-  width: 100%;
+.settings-logo-actions {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
 }
 
-.save-button:hover {
-  background: $light-green;
-  border-color: $light-green;
+.dot {
+  color: var(--text-alt);
 }
 
-.logo-wrapper {
+.link-button {
+  background: none;
+  border: none;
+  color: $green;
+  cursor: pointer;
+  font-size: 0.9rem;
   padding: 0;
 
-  img {
-    width: 100px;
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &.muted {
+    color: var(--text-alt);
   }
 }
 
-.no-logo {
-  margin-bottom: 1em;
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 
-.remove-logo-button {
-  margin-top: 0.5rem;
-  font-size: 0.7em;
+.toggle-row {
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .settings-content {
+    margin: 1.5rem auto;
+    padding: 0 0.75rem;
+  }
 }
 </style>
diff --git a/src/components/pages/SoftwareLicenses.vue b/src/components/pages/SoftwareLicenses.vue
index becf8613f6..b40698fd3c 100644
--- a/src/components/pages/SoftwareLicenses.vue
+++ b/src/components/pages/SoftwareLicenses.vue
@@ -51,6 +51,7 @@ import { useStore } from 'vuex'
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
 
+// eslint-disable-next-line no-unused-vars
 import SoftwareLicenseList from '@/components/lists/SoftwareLicenseList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditSoftwareLicenseModal from '@/components/modals/EditSoftwareLicenseModal.vue'
diff --git a/src/components/pages/Task.vue b/src/components/pages/Task.vue
index c744d07daa..8a0de126c9 100644
--- a/src/components/pages/Task.vue
+++ b/src/components/pages/Task.vue
@@ -1394,15 +1394,21 @@ export default {
       return route
     },
 
-    onAnnotationChanged({ preview, additions, deletions, updates }) {
+    async onAnnotationChanged({ preview, additions, deletions, updates }) {
       const taskId = this.task.id
-      this.updatePreviewAnnotation({
-        taskId,
-        preview,
-        additions,
-        deletions,
-        updates
-      })
+      const previewPlayer = this.$refs['preview-player']
+      try {
+        await this.updatePreviewAnnotation({
+          taskId,
+          preview,
+          additions,
+          deletions,
+          updates
+        })
+        previewPlayer?.confirmAnnotationsSaved()
+      } catch {
+        previewPlayer?.restoreFailedAnnotations()
+      }
     },
 
     onAddExtraPreviewClicked() {
diff --git a/src/components/pages/TaskStatus.vue b/src/components/pages/TaskStatus.vue
index d1b9830bfc..6b1567bb15 100644
--- a/src/components/pages/TaskStatus.vue
+++ b/src/components/pages/TaskStatus.vue
@@ -46,7 +46,7 @@
       :active="modals.del"
       :is-loading="loading.del"
       :is-error="errors.del"
-      :text="deleteText()"
+      :text="deleteText"
       :error-text="$t('task_status.delete_error')"
       @cancel="modals.del = false"
       @confirm="confirmDeleteTaskStatus"
@@ -54,234 +54,207 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { useHead } from '@unhead/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
 
+// eslint-disable-next-line no-unused-vars
+import TaskStatusList from '@/components/lists/TaskStatusList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditTaskStatusModal from '@/components/modals/EditTaskStatusModal.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
-import TaskStatusList from '@/components/lists/TaskStatusList.vue'
 
-export default {
-  name: 'task-status',
-
-  components: {
-    DeleteModal,
-    EditTaskStatusModal,
-    ListPageHeader,
-    RouteTabs,
-    TaskStatusList
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      entityTab: 'entities',
-      entityTabs: [
-        {
-          name: 'entities',
-          label: this.$t('entities.title')
-        },
-        {
-          name: 'concepts',
-          label: this.$t('concepts.title')
-        }
-      ],
-      taskStatusToDelete: null,
-      taskStatusToEdit: { color: '#000000' },
-      modals: {
-        edit: false,
-        del: false
-      },
-      loading: {
-        edit: false,
-        del: false,
-        list: false
-      },
-      errors: {
-        edit: false,
-        del: false,
-        list: false
-      },
-      tabs: [
-        {
-          name: 'active',
-          label: this.$t('main.active')
-        },
-        {
-          name: 'archived',
-          label: this.$t('main.archived')
-        }
-      ]
-    }
-  },
-
-  mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-    this.entityTab = this.$route.query.entity || 'entities'
-  },
-
-  computed: {
-    ...mapGetters(['archivedTaskStatus', 'taskStatus']),
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    activeTaskStatuses() {
-      return this.isActiveTab ? this.taskStatus : this.archivedTaskStatus
-    },
-
-    taskStatusList() {
-      return this.activeTaskStatuses
-        .filter(taskStatus => !taskStatus.for_concept)
-        .sort((a, b) => a.priority - b.priority)
-    },
-
-    conceptStatusList() {
-      return this.activeTaskStatuses
-        .filter(taskStatus => taskStatus.for_concept)
-        .sort((a, b) => a.priority - b.priority)
-    }
-  },
-
-  methods: {
-    ...mapActions(['deleteTaskStatus', 'updateTaskStatusPriority']),
-
-    async updatePriorities(taskStatuses) {
-      for (const taskStatus of taskStatuses) {
-        await this.updateTaskStatusPriority(taskStatus)
-      }
-    },
-
-    confirmEditTaskStatus(form) {
-      const isNew = !(this.taskStatusToEdit && this.taskStatusToEdit.id)
-      let action = 'newTaskStatus'
-      if (!isNew) {
-        action = 'saveTaskStatus'
-        form.id = this.taskStatusToEdit.id
-      }
-
-      this.loading.edit = true
-      this.errors.edit = false
-      this.$store
-        .dispatch(action, form)
-        .then(() => {
-          this.loading.edit = false
-          this.modals.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.edit = false
-          this.errors.edit = true
-        })
-    },
-
-    confirmDeleteTaskStatus() {
-      this.loading.del = true
-      this.errors.del = false
-      this.deleteTaskStatus(this.taskStatusToDelete)
-        .then(() => {
-          this.loading.del = false
-          this.modals.del = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.del = false
-          this.errors.del = true
-        })
-    },
-
-    deleteText() {
-      const taskStatus = this.taskStatusToDelete
-      if (taskStatus) {
-        return this.$t('task_status.delete_text', { name: taskStatus.name })
-      } else {
-        return ''
-      }
-    },
-
-    onExportClicked() {
-      const name = stringHelpers.slugify(this.$t('task_status.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('task_status.fields.name'),
-        this.$t('task_status.fields.short_name'),
-        this.$t('task_status.fields.description'),
-        this.$t('task_status.fields.color'),
-        this.$t('task_status.fields.is_default'),
-        this.$t('task_status.fields.is_wip'),
-        this.$t('task_status.fields.is_done'),
-        this.$t('task_status.fields.is_retake'),
-        this.$t('task_status.fields.is_artist_allowed'),
-        this.$t('task_status.fields.is_client_allowed'),
-        this.$t('task_status.fields.is_feedback_request')
-      ]
-      const entries = [headers].concat(
-        this.taskStatus.map(taskStatus => [
-          taskStatus.type,
-          taskStatus.name,
-          taskStatus.short_name,
-          taskStatus.description,
-          taskStatus.color,
-          taskStatus.is_default,
-          taskStatus.is_wip,
-          taskStatus.is_done,
-          taskStatus.is_retake,
-          taskStatus.is_artist_allowed,
-          taskStatus.is_client_allowed,
-          taskStatus.is_feedback_request
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
-
-    onNewClicked() {
-      this.taskStatusToEdit = { color: '#000000' }
-      this.modals.edit = true
-    },
-
-    onEditClicked(taskStatus) {
-      this.taskStatusToEdit = taskStatus
-      this.modals.edit = true
-    },
-
-    onDeleteClicked(taskStatus) {
-      this.taskStatusToDelete = taskStatus
-      this.modals.del = true
-    }
-  },
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
 
-  watch: {
-    '$route.query'() {
-      this.activeTab = this.$route.query.tab || 'active'
-      this.entityTab = this.$route.query.entity || 'entities'
-    }
-  },
+// State
+
+const activeTab = ref('active')
+const entityTab = ref('entities')
+const taskStatusToDelete = ref(null)
+const taskStatusToEdit = ref({ color: '#000000' })
+
+const errors = reactive({ del: false, edit: false, list: false })
+const loading = reactive({ del: false, edit: false, list: false })
+const modals = reactive({ del: false, edit: false })
+
+// Computed
+
+const archivedTaskStatus = computed(() => store.getters.archivedTaskStatus)
+const taskStatus = computed(() => store.getters.taskStatus)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
+
+const activeTaskStatuses = computed(() =>
+  isActiveTab.value ? taskStatus.value : archivedTaskStatus.value
+)
 
-  head() {
-    return {
-      title: `${this.$t('task_status.title')} - Kitsu`
+const taskStatusList = computed(() =>
+  activeTaskStatuses.value
+    .filter(status => !status.for_concept)
+    .sort((a, b) => a.priority - b.priority)
+)
+
+const conceptStatusList = computed(() =>
+  activeTaskStatuses.value
+    .filter(status => status.for_concept)
+    .sort((a, b) => a.priority - b.priority)
+)
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') }
+])
+
+const entityTabs = computed(() => [
+  { name: 'entities', label: t('entities.title') },
+  { name: 'concepts', label: t('concepts.title') }
+])
+
+const deleteText = computed(() =>
+  taskStatusToDelete.value
+    ? t('task_status.delete_text', { name: taskStatusToDelete.value.name })
+    : ''
+)
+
+// Functions
+
+const updatePriorities = async taskStatuses => {
+  for (const status of taskStatuses) {
+    await store.dispatch('updateTaskStatusPriority', status)
+  }
+}
+
+const confirmEditTaskStatus = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (taskStatusToEdit.value?.id) {
+      await store.dispatch('saveTaskStatus', {
+        ...form,
+        id: taskStatusToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newTaskStatus', form)
     }
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
   }
+  loading.edit = false
 }
+
+const confirmDeleteTaskStatus = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteTaskStatus', taskStatusToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
+
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('task_status.title'))
+  const headers = [
+    t('main.type'),
+    t('task_status.fields.name'),
+    t('task_status.fields.short_name'),
+    t('task_status.fields.description'),
+    t('task_status.fields.color'),
+    t('task_status.fields.is_default'),
+    t('task_status.fields.is_wip'),
+    t('task_status.fields.is_done'),
+    t('task_status.fields.is_retake'),
+    t('task_status.fields.is_artist_allowed'),
+    t('task_status.fields.is_client_allowed'),
+    t('task_status.fields.is_feedback_request')
+  ]
+  const rows = taskStatus.value.map(status => [
+    status.type,
+    status.name,
+    status.short_name,
+    status.description,
+    status.color,
+    status.is_default,
+    status.is_wip,
+    status.is_done,
+    status.is_retake,
+    status.is_artist_allowed,
+    status.is_client_allowed,
+    status.is_feedback_request
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
+
+const onNewClicked = () => {
+  taskStatusToEdit.value = { color: '#000000' }
+  modals.edit = true
+}
+
+const onEditClicked = status => {
+  taskStatusToEdit.value = status
+  modals.edit = true
+}
+
+const onDeleteClicked = status => {
+  taskStatusToDelete.value = status
+  modals.del = true
+}
+
+// Watchers
+
+watch(
+  () => route.query,
+  () => {
+    activeTab.value = route.query.tab || 'active'
+    entityTab.value = route.query.entity || 'entities'
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  activeTab.value = route.query.tab || 'active'
+  entityTab.value = route.query.entity || 'entities'
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('task_status.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
 .help-tooltip {
+  margin-left: 0.25rem;
   opacity: 0.5;
   transition: opacity 0.3s ease;
-  margin-left: 0.25rem;
 
   &:hover {
     opacity: 1;
   }
+
   .icon.is-small {
     vertical-align: baseline;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .task-status {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/pages/TaskTypes.vue b/src/components/pages/TaskTypes.vue
index 6124377876..d257e1ccdc 100644
--- a/src/components/pages/TaskTypes.vue
+++ b/src/components/pages/TaskTypes.vue
@@ -35,7 +35,7 @@
       :active="modals.del"
       :is-loading="loading.del"
       :is-error="errors.del"
-      :text="deleteText()"
+      :text="deleteText"
       :error-text="$t('task_types.delete_error')"
       @cancel="modals.del = false"
       @confirm="confirmDeleteTaskType"
@@ -43,265 +43,228 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { useHead } from '@unhead/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import csv from '@/lib/csv'
 import func from '@/lib/func'
 import stringHelpers from '@/lib/string'
 
+// eslint-disable-next-line no-unused-vars
+import TaskTypeList from '@/components/lists/TaskTypeList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditTaskTypeModal from '@/components/modals/EditTaskTypeModal.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
-import TaskTypeList from '@/components/lists/TaskTypeList.vue'
 
-export default {
-  name: 'task-types',
-
-  components: {
-    DeleteModal,
-    EditTaskTypeModal,
-    ListPageHeader,
-    RouteTabs,
-    TaskTypeList
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      entityTab: 'assets',
-      errors: {
-        taskTypes: false,
-        departments: false,
-        edit: false,
-        del: false
-      },
-      loading: {
-        taskTypes: false,
-        departments: false,
-        edit: false,
-        del: false
-      },
-      modals: {
-        del: false,
-        edit: false
-      },
-      tabs: [
-        {
-          name: 'active',
-          label: this.$t('main.active')
-        },
-        {
-          name: 'archived',
-          label: this.$t('main.archived')
-        }
-      ],
-      entityTabs: [
-        {
-          name: 'assets',
-          label: this.$t('assets.title')
-        },
-        {
-          name: 'shots',
-          label: this.$t('shots.title')
-        },
-        {
-          name: 'sequences',
-          label: this.$t('sequences.title')
-        },
-        {
-          name: 'episodes',
-          label: this.$t('episodes.title')
-        },
-        {
-          name: 'edits',
-          label: this.$t('edits.title')
-        }
-      ],
-      taskTypeToDelete: { color: '#999999' },
-      taskTypeToEdit: null
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+// State
+
+const activeTab = ref('active')
+const entityTab = ref('assets')
+const taskTypeToDelete = ref({ color: '#999999' })
+const taskTypeToEdit = ref(null)
+
+const errors = reactive({
+  taskTypes: false,
+  departments: false,
+  edit: false,
+  del: false
+})
+const loading = reactive({
+  taskTypes: false,
+  departments: false,
+  edit: false,
+  del: false
+})
+const modals = reactive({ del: false, edit: false })
+
+// Non-reactive scheduling state for savePriorities throttling.
+let isSaving = false
+let lastCall = 0
+let newSaveCall = false
+
+// Computed
+
+const archivedTaskTypes = computed(() => store.getters.archivedTaskTypes)
+const departmentMap = computed(() => store.getters.departmentMap)
+const taskTypes = computed(() => store.getters.taskTypes)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
+
+const forEntity = computed(() =>
+  stringHelpers.capitalize(entityTab.value.slice(0, -1))
+)
+
+const listTaskTypes = computed(() => {
+  const source = isActiveTab.value ? taskTypes.value : archivedTaskTypes.value
+  const entity = entityTab.value.slice(0, -1)
+  return source.filter(taskType => taskType.for_entity.toLowerCase() === entity)
+})
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') }
+])
+
+const entityTabs = computed(() => [
+  { name: 'assets', label: t('assets.title') },
+  { name: 'shots', label: t('shots.title') },
+  { name: 'sequences', label: t('sequences.title') },
+  { name: 'episodes', label: t('episodes.title') },
+  { name: 'edits', label: t('edits.title') }
+])
+
+const deleteText = computed(() =>
+  taskTypeToDelete.value
+    ? t('task_types.delete_text', { name: taskTypeToDelete.value.name })
+    : ''
+)
+
+// Functions
+
+const confirmEditTaskType = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (taskTypeToEdit.value?.id) {
+      await store.dispatch('editTaskType', {
+        ...form,
+        id: taskTypeToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newTaskType', form)
     }
-  },
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
+  }
+  loading.edit = false
+}
 
-  computed: {
-    ...mapGetters(['archivedTaskTypes', 'departmentMap', 'taskTypes']),
+const confirmDeleteTaskType = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteTaskType', taskTypeToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
 
-    forEntity() {
-      return stringHelpers.capitalize(
-        this.entityTab.substring(0, this.entityTab.length - 1)
+const savePriorities = forms => {
+  const now = Date.now()
+  if (now - lastCall > 1000 && !isSaving) {
+    lastCall = now
+    isSaving = true
+    func
+      .runPromiseMapAsSeries(forms, form =>
+        store.dispatch('editTaskType', form)
       )
-    },
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    listTaskTypes() {
-      const taskTypes = this.isActiveTab
-        ? this.taskTypes
-        : this.archivedTaskTypes
-      const forEntity = this.entityTab.substring(0, this.entityTab.length - 1)
-      return taskTypes.filter(
-        taskType => taskType.for_entity.toLowerCase() === forEntity
-      )
-    }
-  },
-
-  mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-    this.entityTab = this.$route.query.entity || 'assets'
-    this.loading.taskTypes = true
-    this.errors.taskTypes = false
-    this.loading.departments = true
-    this.errors.departments = false
-    this.loadDepartments()
-      .then(() => {
-        this.loading.departments = false
-      })
-      .catch(err => {
-        console.error(err)
-        this.loading.departments = false
-        this.errors.departments = true
-      })
-    this.loadTaskTypes()
       .then(() => {
-        this.loading.taskTypes = false
-      })
-      .catch(err => {
-        console.error(err)
-        this.loading.taskTypes = false
-        this.errors.taskTypes = true
-      })
-  },
-
-  methods: {
-    ...mapActions([
-      'editTaskType',
-      'deleteTaskType',
-      'loadTaskTypes',
-      'loadDepartments'
-    ]),
-
-    confirmEditTaskType(form) {
-      let action = 'newTaskType'
-      if (this.taskTypeToEdit && this.taskTypeToEdit.id) {
-        action = 'editTaskType'
-        form.id = this.taskTypeToEdit.id
-      }
-      this.loading.edit = true
-      this.errors.edit = false
-      this.$store
-        .dispatch(action, form)
-        .then(() => {
-          this.loading.edit = false
-          this.modals.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.edit = false
-          this.errors.edit = true
-        })
-    },
-
-    updatePriorities(forms) {
-      forms.forEach(form => {
-        this.$store.commit('EDIT_TASK_TYPE_END', form)
+        isSaving = false
+        if (newSaveCall) {
+          newSaveCall = false
+          savePriorities(forms)
+        }
       })
-      this.savePriorities(forms)
-    },
-
-    savePriorities(forms) {
-      const now = new Date().getTime()
-      this.lastCall = this.lastCall || 0
-      if (now - this.lastCall > 1000 && !this.isSaving) {
-        this.lastCall = now
-        this.isSaving = true
-        func.runPromiseMapAsSeries(forms, this.editTaskType).then(() => {
-          this.isSaving = false
-          if (this.newSaveCall) this.savePriorities(forms)
-        })
-      } else {
-        this.newSaveCall = true
-      }
-    },
-
-    confirmDeleteTaskType() {
-      this.loading.del = true
-      this.errors.del = false
-      this.deleteTaskType(this.taskTypeToDelete)
-        .then(() => {
-          this.loading.del = false
-          this.modals.del = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.del = false
-          this.errors.del = true
-        })
-    },
-
-    deleteText() {
-      const taskType = this.taskTypeToDelete
-      if (taskType) {
-        return this.$t('task_types.delete_text', { name: taskType.name })
-      } else {
-        return ''
-      }
-    },
-
-    onDeleteClicked(taskType) {
-      this.taskTypeToDelete = taskType
-      this.modals.del = true
-    },
-
-    onEditClicked(taskType) {
-      this.taskTypeToEdit = taskType
-      this.modals.edit = true
-    },
-
-    onExportClicked() {
-      const name = stringHelpers.slugify(this.$t('task_types.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('task_types.fields.dedicated_to'),
-        this.$t('task_types.fields.department'),
-        this.$t('task_types.fields.name'),
-        this.$t('task_types.fields.description'),
-        this.$t('task_types.fields.color'),
-        this.$t('task_types.fields.allow_timelog')
-      ]
-      const entries = [headers].concat(
-        this.taskTypes.map(taskType => [
-          taskType.type,
-          taskType.for_entity,
-          this.departmentMap.get(taskType.department_id)?.name,
-          taskType.name,
-          taskType.description,
-          taskType.color,
-          taskType.allow_timelog
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
+  } else {
+    newSaveCall = true
+  }
+}
 
-    onNewClicked() {
-      this.taskTypeToEdit = { color: '#999999' }
-      this.modals.edit = true
-    }
-  },
+const updatePriorities = forms => {
+  forms.forEach(form => store.commit('EDIT_TASK_TYPE_END', form))
+  savePriorities(forms)
+}
 
-  watch: {
-    '$route.query'() {
-      this.activeTab = this.$route.query.tab || 'active'
-      this.entityTab = this.$route.query.entity || 'assets'
-    }
-  },
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('task_types.title'))
+  const headers = [
+    t('main.type'),
+    t('task_types.fields.dedicated_to'),
+    t('task_types.fields.department'),
+    t('task_types.fields.name'),
+    t('task_types.fields.description'),
+    t('task_types.fields.color'),
+    t('task_types.fields.allow_timelog')
+  ]
+  const rows = taskTypes.value.map(taskType => [
+    taskType.type,
+    taskType.for_entity,
+    departmentMap.value.get(taskType.department_id)?.name,
+    taskType.name,
+    taskType.description,
+    taskType.color,
+    taskType.allow_timelog
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
 
-  head() {
-    return {
-      title: `${this.$t('task_types.title')} - Kitsu`
-    }
-  }
+const onNewClicked = () => {
+  taskTypeToEdit.value = { color: '#999999' }
+  modals.edit = true
+}
+
+const onEditClicked = taskType => {
+  taskTypeToEdit.value = taskType
+  modals.edit = true
 }
+
+const onDeleteClicked = taskType => {
+  taskTypeToDelete.value = taskType
+  modals.del = true
+}
+
+// Watchers
+
+watch(
+  () => route.query,
+  () => {
+    activeTab.value = route.query.tab || 'active'
+    entityTab.value = route.query.entity || 'assets'
+  }
+)
+
+// Lifecycle
+
+onMounted(async () => {
+  activeTab.value = route.query.tab || 'active'
+  entityTab.value = route.query.entity || 'assets'
+
+  loading.departments = true
+  errors.departments = false
+  try {
+    await store.dispatch('loadDepartments')
+  } catch (err) {
+    console.error(err)
+    errors.departments = true
+  }
+  loading.departments = false
+
+  loading.taskTypes = true
+  errors.taskTypes = false
+  try {
+    await store.dispatch('loadTaskTypes')
+  } catch (err) {
+    console.error(err)
+    errors.taskTypes = true
+  }
+  loading.taskTypes = false
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('task_types.title')} - Kitsu`) })
 </script>
diff --git a/src/components/pages/budget/SalaryScale.vue b/src/components/pages/budget/SalaryScale.vue
index ace3c2301d..3bd105e1a4 100644
--- a/src/components/pages/budget/SalaryScale.vue
+++ b/src/components/pages/budget/SalaryScale.vue
@@ -1,12 +1,12 @@
 <template>
-  <page-layout>
+  <page-layout :side="false">
     <template #main>
       <div class="flexcolumn page">
         <page-title class="mt1" :text="$t('budget.salary_scale_title')" />
         <div class="has-text-centered" v-if="isLoading">
           <spinner />
         </div>
-        <div class="data-list" v-else>
+        <div class="data-list desktop-only" v-else>
           <div class="datatable-wrapper">
             <table class="datatable">
               <thead class="datatable-head">
@@ -65,6 +65,53 @@
             </table>
           </div>
         </div>
+
+        <div class="mobile-list" v-if="!isLoading">
+          <div
+            class="department-card"
+            v-for="department in departments"
+            :key="department.id"
+          >
+            <h3 class="department-header">
+              <department-name :department="department" no-padding />
+            </h3>
+            <div
+              class="position-block"
+              v-for="position in positions"
+              :key="position"
+            >
+              <h4 class="position-header">
+                {{ $t(`budget.positions.${position}`) }}
+              </h4>
+              <div
+                class="seniority-row"
+                v-for="seniority in seniorities"
+                :key="seniority"
+              >
+                <label class="seniority-label">
+                  {{ $t(`budget.seniorities.${seniority}`) }}
+                </label>
+                <input
+                  type="number"
+                  class="input-editor"
+                  @input="
+                    event =>
+                      modifySalaryScale(
+                        department.id,
+                        position,
+                        seniority,
+                        event
+                      )
+                  "
+                  :value="
+                    salaryScale[department.id]?.[position][seniority].salary ||
+                    0
+                  "
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </template>
   </page-layout>
@@ -122,4 +169,100 @@ input[type='number']::-webkit-inner-spin-button {
 input[type='number'] {
   -moz-appearance: textfield;
 }
+
+// Make the desktop table fill the full content width — the global
+// `.datatable` rule is `width: auto`, which leaves big empty space on
+// the right with this narrow column set.
+.desktop-only :deep(.datatable) {
+  width: 100%;
+}
+
+.mobile-list {
+  display: none;
+}
+
+.department-card {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  margin-bottom: 1em;
+  padding: 1em;
+}
+
+.dark .department-card {
+  background: var(--background-alt);
+}
+
+.department-header {
+  font-size: 1.05em;
+  font-weight: 600;
+  margin: 0 0 1em;
+}
+
+.position-block + .position-block {
+  margin-top: 0.75em;
+  padding-top: 0.75em;
+  border-top: 1px solid var(--border);
+}
+
+.position-header {
+  color: var(--text-alt);
+  font-size: 0.85em;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  margin: 0 0 0.4em;
+  text-transform: uppercase;
+}
+
+.seniority-row {
+  align-items: center;
+  display: flex;
+  gap: 0.75em;
+  margin-bottom: 0.4em;
+}
+
+.seniority-label {
+  color: var(--text);
+  flex: 0 0 5em;
+  font-size: 0.95em;
+}
+
+// Match the global `td .input-editor` styling — the mobile rendering
+// places inputs inside divs, not table cells, so those rules don't reach.
+.seniority-row .input-editor {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  flex: 1;
+  height: 2.25em;
+  min-width: 0;
+  padding: 0.4em 0.6em;
+  text-align: right;
+
+  &:hover {
+    border-color: $light-green;
+  }
+
+  &:active,
+  &:focus {
+    border-color: $green;
+    outline: none;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-list {
+    display: block;
+    padding: 0 0.5em;
+  }
+
+  .page :deep(.title) {
+    margin-bottom: 1em;
+  }
+}
 </style>
diff --git a/src/components/pages/departments/DepartmentLinks.vue b/src/components/pages/departments/DepartmentLinks.vue
index e2e8817133..fe7ae64d20 100644
--- a/src/components/pages/departments/DepartmentLinks.vue
+++ b/src/components/pages/departments/DepartmentLinks.vue
@@ -165,4 +165,15 @@ ul.element-list {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .columns {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .column-hardware {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/pages/news/NewsFilters.vue b/src/components/pages/news/NewsFilters.vue
new file mode 100644
index 0000000000..7931083bf5
--- /dev/null
+++ b/src/components/pages/news/NewsFilters.vue
@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div class="has-text-right filler filter-button">
+      <button-simple
+        icon="filter"
+        :active="isFiltersDisplayed"
+        :title="$t('main.more_filters')"
+        @click="toggleFilters"
+      />
+    </div>
+
+    <div class="filters flexrow">
+      <combobox
+        class="flexrow-item selector filter-episode"
+        :label="$t('shots.fields.episode')"
+        :options="runningEpisodeOptions"
+        v-model="episodeId"
+        v-if="!isStudio && isTVShow"
+      />
+      <combobox-status
+        class="flexrow-item selector nowrap"
+        :label="$t('news.task_status')"
+        :task-status-list="taskStatusList"
+        v-model="taskStatusId"
+      />
+      <combobox-task-type
+        class="flexrow-item selector nowrap"
+        :label="$t('news.task_type')"
+        :task-type-list="taskTypeList"
+        v-model="taskTypeId"
+      />
+      <div class="flexrow-item selector filter-person">
+        <label class="label person-label">
+          {{ $t('main.person') }}
+        </label>
+        <people-field
+          class="person-field"
+          :people="isStudio ? displayedPeople : team"
+          v-model="person"
+        />
+      </div>
+    </div>
+
+    <div class="filters flexrow mt1" v-if="isFiltersDisplayed">
+      <date-field
+        class="flexrow-item"
+        :max-date="today"
+        :label="$t('main.from')"
+        :with-margin="false"
+        v-model="after"
+      />
+      <date-field
+        class="flexrow-item"
+        :max-date="today"
+        :label="$t('main.to')"
+        :with-margin="false"
+        v-model="before"
+      />
+      <combobox
+        class="flexrow-item selector"
+        :label="$t('news.infos')"
+        :options="previewOptions"
+        v-model="previewMode"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import { useTime } from '@/composables/time'
+import { sortByName, sortPeople } from '@/lib/sorting'
+
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
+import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
+import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
+import DateField from '@/components/widgets/DateField.vue'
+import PeopleField from '@/components/widgets/PeopleField.vue'
+
+const { t } = useI18n()
+const store = useStore()
+const { today } = useTime()
+
+defineProps({
+  isStudio: { type: Boolean, default: false }
+})
+
+const episodeId = defineModel('episodeId', { type: String, default: '' })
+const taskStatusId = defineModel('taskStatusId', { type: String, default: '' })
+const taskTypeId = defineModel('taskTypeId', { type: String, default: '' })
+const person = defineModel('person', { type: Object, default: null })
+const before = defineModel('before', { default: null })
+const after = defineModel('after', { default: null })
+const previewMode = defineModel('previewMode', {
+  type: String,
+  default: 'comments'
+})
+
+// State
+
+const isFiltersDisplayed = ref(false)
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const displayedPeople = computed(() => store.getters.displayedPeople)
+const isTVShow = computed(() => store.getters.isTVShow)
+const personMap = computed(() => store.getters.personMap)
+const productionTaskStatuses = computed(
+  () => store.getters.productionTaskStatuses
+)
+const productionTaskTypes = computed(() => store.getters.productionTaskTypes)
+const runningEpisodes = computed(() => store.getters.runningEpisodes)
+
+const previewOptions = computed(() => [
+  { label: t('news.only_comments'), value: 'comments' },
+  { label: t('news.only_previews'), value: 'previews' }
+])
+
+const taskStatusList = computed(() => [
+  { id: '', color: '#999', short_name: t('news.all') },
+  ...sortByName([...productionTaskStatuses.value])
+])
+
+const taskTypeList = computed(() => [
+  { id: '', color: '#999', name: t('news.all') },
+  ...sortByName([...productionTaskTypes.value])
+])
+
+const runningEpisodeOptions = computed(() => [
+  { value: 'all', label: t('news.all') },
+  ...runningEpisodes.value.map(episode => ({
+    label: episode.name,
+    value: episode.id
+  }))
+])
+
+const team = computed(() =>
+  sortPeople(
+    currentProduction.value?.team
+      .map(personId => personMap.value.get(personId))
+      .filter(Boolean) ?? []
+  )
+)
+
+// Functions
+
+const toggleFilters = () => {
+  isFiltersDisplayed.value = !isFiltersDisplayed.value
+}
+</script>
+
+<style lang="scss" scoped>
+.selector {
+  margin-bottom: 0;
+  margin-right: 1em;
+}
+
+.person-label {
+  margin-top: 5px;
+  margin-bottom: 4px;
+}
+
+.filter-button {
+  color: $grey;
+  cursor: pointer;
+  float: right;
+  text-transform: lowercase;
+}
+
+// Mobile: keep only task-status + task-type filters, drop the advanced
+// filter toggle and the episode/person fields to fit the narrow width.
+@media screen and (max-width: 768px) {
+  .filter-button,
+  .filter-episode,
+  .filter-person {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/pages/news/NewsRow.vue b/src/components/pages/news/NewsRow.vue
new file mode 100644
index 0000000000..7ff6b5b303
--- /dev/null
+++ b/src/components/pages/news/NewsRow.vue
@@ -0,0 +1,383 @@
+<template>
+  <div ref="root" class="news-entry">
+    <div v-if="previewMode === 'comments'">
+      <div
+        :class="{
+          'news-line': true,
+          'timeline-entry': true,
+          flexrow: true,
+          selected: isSelected,
+          'is-new': isNew
+        }"
+        @click.prevent="$emit('select', news)"
+      >
+        <span
+          :class="{
+            dot: true,
+            red: hasRetakeValue,
+            green: hasDoneValue
+          }"
+        ></span>
+        <span class="date flexrow-item">
+          {{ formatTime(news.created_at) }}
+        </span>
+
+        <div class="flexrow-item production-name-wrapper" v-if="isStudio">
+          <production-name
+            :production="productionMap.get(news.project_id)"
+            only-avatar
+          />
+        </div>
+
+        <people-avatar
+          class="flexrow-item"
+          :person="personMap.get(news.author_id)"
+          :size="30"
+          :font-size="14"
+          :is-link="false"
+          v-if="personMap.get(news.author_id)"
+        />
+
+        <div class="flexrow-item task-type-wrapper">
+          <task-type-name
+            class="task-type-name"
+            :task-type="taskType"
+            :production-id="news.project_id"
+            :is-static="true"
+          />
+        </div>
+
+        <div class="flexrow-item validation-wrapper">
+          <validation-tag
+            class="validation-tag"
+            :task="task"
+            :is-static="true"
+            :thin="!news.change"
+          />
+        </div>
+
+        <div class="flexrow-item comment-content">
+          <div class="news-info flexrow">
+            <span class="flexrow-item flexrow">
+              <entity-thumbnail
+                class="ml1 entity-thumbnail mr1 flexrow-item"
+                :entity="{
+                  id: news.task_entity_id,
+                  preview_file_id: news.entity_preview_file_id
+                }"
+                :with-link="false"
+              />
+              <span class="strong ml05">
+                {{ news.full_entity_name }}
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="preview"
+      v-if="news.preview_file_id && previewMode === 'previews'"
+    >
+      <div
+        :class="{
+          'news-line': true,
+          'timeline-entry': true,
+          flexrow: true,
+          selected: isSelected,
+          'is-new': isNew
+        }"
+        @click.prevent="$emit('select', news)"
+      >
+        <span
+          :class="{
+            dot: true,
+            red: hasRetakeValue,
+            green: hasDoneValue
+          }"
+        ></span>
+        <span class="date flexrow-item">
+          {{ formatTime(news.created_at) }}
+        </span>
+
+        <people-avatar
+          class="flexrow-item"
+          :person="personMap.get(news.author_id)"
+          :size="30"
+          :no-link="true"
+          v-if="personMap.get(news.author_id)"
+        />
+
+        <div class="flexrow-item task-type-wrapper">
+          <task-type-name
+            class="task-type-name"
+            :task-type="taskType"
+            :production-id="news.project_id"
+          />
+        </div>
+
+        <div class="flexrow-item comment-content">
+          <div class="news-info flexrow">
+            <span class="flexrow-item flexrow">
+              <entity-thumbnail
+                class="ml1"
+                :entity="{
+                  id: news.task_entity_id,
+                  preview_file_id: news.entity_preview_file_id
+                }"
+                :with-link="false"
+                v-if="news.entity_preview_file_id"
+              />
+              <span class="strong ml05 flexrow-item">
+                {{ news.full_entity_name }}
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="has-text-centered">
+        <preview-player
+          :canvas-id="canvasId"
+          :previews="news.preview_files"
+          :task="previewPlayerTask"
+          :read-only="true"
+          :light="true"
+          :big="true"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import moment from 'moment-timezone'
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+
+import { useTime } from '@/composables/time'
+
+import PreviewPlayer from '@/components/previews/PreviewPlayer.vue'
+import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
+import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
+import ProductionName from '@/components/widgets/ProductionName.vue'
+import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
+import ValidationTag from '@/components/widgets/ValidationTag.vue'
+
+const store = useStore()
+const { timezone } = useTime()
+
+const props = defineProps({
+  canvasId: { type: String, required: true },
+  isNew: { type: Boolean, default: false },
+  isSelected: { type: Boolean, default: false },
+  isStudio: { type: Boolean, default: false },
+  news: { type: Object, required: true },
+  previewMode: { type: String, default: 'comments' }
+})
+
+defineEmits(['select'])
+
+// Template refs
+
+const root = ref(null)
+defineExpose({ root })
+
+// Computed
+
+const personMap = computed(() => store.getters.personMap)
+const productionMap = computed(() => store.getters.productionMap)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+
+const task = computed(() => ({
+  id: props.news.task_id,
+  task_status_id: props.news.task_status_id,
+  task_type_id: props.news.task_type_id,
+  episode_id: props.news.episode_id
+}))
+
+const taskType = computed(() => ({
+  ...taskTypeMap.value.get(props.news.task_type_id),
+  episode_id: props.news.episode_id
+}))
+
+const previewPlayerTask = computed(() => ({
+  id: props.news.task_id,
+  project_id: props.news.project_id,
+  task_type_id: props.news.task_type_id,
+  assignees: []
+}))
+
+const hasRetakeValue = computed(() => {
+  const status = taskStatusMap.value.get(props.news.task_status_id)
+  return status ? props.news.change && status.is_retake : false
+})
+
+const hasDoneValue = computed(() => {
+  const status = taskStatusMap.value.get(props.news.task_status_id)
+  return status ? props.news.change && status.is_done : false
+})
+
+// Functions
+
+const formatTime = date =>
+  moment.tz(date, 'UTC').tz(timezone.value).format('HH:mm')
+</script>
+
+<style lang="scss" scoped>
+.timeline-entry {
+  position: relative;
+}
+
+.timeline-entry .dot {
+  position: absolute;
+  display: block;
+  left: -34px;
+  background: $blue-light;
+  width: 9px;
+  height: 9px;
+  border-radius: 4px;
+
+  &.red {
+    background: $red;
+  }
+
+  &.green {
+    background: $light-green;
+  }
+}
+
+.task-type-wrapper {
+  min-width: 100px;
+}
+
+.validation-wrapper {
+  min-width: 80px;
+}
+
+.date {
+  min-width: 30px;
+  font-size: 0.8em;
+  color: $grey;
+}
+
+.news-info {
+  vertical-align: middle;
+
+  span,
+  a {
+    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.news-line {
+  padding-left: 1em;
+  align-items: middle;
+  border: 3px solid transparent;
+  cursor: pointer;
+  margin-bottom: 1px;
+  padding-top: 0.3em;
+  padding-bottom: 0.3em;
+  border-radius: 0.5em;
+  transition: border 0.1s linear;
+
+  &:hover,
+  &:active {
+    border: 3px solid var(--background-selectable);
+  }
+
+  &.selected {
+    border: 3px solid var(--background-selected);
+  }
+
+  // Real-time arrival highlight: slide in + pulse fade.
+  &.is-new {
+    animation:
+      news-arrival-slide 0.35s ease-out forwards,
+      news-arrival-pulse 2.4s ease-out 0.35s forwards;
+  }
+}
+
+@keyframes news-arrival-slide {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes news-arrival-pulse {
+  0% {
+    background: rgba($light-green, 0.18);
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .news-line.is-new {
+    animation: none;
+  }
+}
+
+.preview {
+  margin: 0 auto 2em auto;
+  max-width: 800px;
+}
+
+.preview .news-line .dot {
+  left: -54px;
+}
+
+.dark {
+  .dot,
+  .big-dot {
+    background: $blue;
+  }
+
+  .selected .date {
+    color: $light-grey;
+  }
+}
+
+// Mobile: hide the timeline dot — the rail is also gone in
+// ProductionNewsFeed under 768px, so the orphan dot adds nothing.
+// Reset the min-widths on task-type / validation / date so short tags
+// (e.g. "WIP", "DONE") hug their content instead of floating in 100px /
+// 80px reserved space. The .comment-content (entity thumbnail + name)
+// wraps to a second line via `flex-basis: 100%`.
+@media screen and (max-width: 768px) {
+  .timeline-entry .dot {
+    display: none;
+  }
+
+  .news-line {
+    flex-wrap: wrap;
+    padding-left: 0.5em;
+    row-gap: 0.4em;
+  }
+
+  .task-type-wrapper,
+  .validation-wrapper,
+  .date {
+    min-width: 0;
+  }
+
+  .comment-content {
+    flex-basis: 100%;
+    margin-top: 0.1em;
+    // Align the entity thumbnail with the avatar on the first line
+    // (production-avatar in studio mode, people-avatar in project mode).
+    // Approx = `.date` width (~30px) + `.flexrow-item` margin-right (1rem).
+    padding-left: calc(30px + 1rem);
+  }
+}
+</style>
diff --git a/src/components/pages/news/NewsSkeleton.vue b/src/components/pages/news/NewsSkeleton.vue
new file mode 100644
index 0000000000..ec2e869820
--- /dev/null
+++ b/src/components/pages/news/NewsSkeleton.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="loading-skeleton">
+    <div
+      class="skeleton-card timeline-entry"
+      :style="{
+        '--row-index': i - 1,
+        '--fadeout-delay': `${fadeoutDelayMs}ms`
+      }"
+      :key="`skeleton-${cycle}-${i}`"
+      v-for="i in rows"
+    >
+      <span class="dot"></span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+import { useSkeletonCycle } from '@/composables/skeleton'
+
+const props = defineProps({
+  rows: { type: Number, default: 6 }
+})
+
+const { cycle, fadeoutDelayMs } = useSkeletonCycle(ref(props.rows))
+</script>
+
+<style lang="scss" scoped>
+.loading-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75em;
+  margin-top: 2em;
+  padding-top: 1em;
+}
+
+.skeleton-card {
+  animation:
+    skeleton-card-in 0.4s ease-out forwards,
+    skeleton-card-out 0.35s ease-in forwards;
+  animation-delay: calc(var(--row-index) * 150ms), var(--fadeout-delay);
+  background: rgba(var(--skeleton-rgb), 0.45);
+  border-radius: 0.5em;
+  height: 48px;
+  opacity: 0;
+  position: relative;
+}
+
+.skeleton-card .dot {
+  background: $blue-light;
+  border-radius: 4px;
+  height: 9px;
+  left: -34px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 9px;
+}
+
+.dark .skeleton-card {
+  background: rgba(var(--skeleton-rgb), 0.15);
+}
+
+.dark .skeleton-card .dot {
+  background: $blue;
+}
+
+@keyframes skeleton-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes skeleton-card-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-card {
+    animation: none;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/previews/PictureViewer.vue b/src/components/previews/PictureViewer.vue
index 70ce108d18..1d2514f09b 100644
--- a/src/components/previews/PictureViewer.vue
+++ b/src/components/previews/PictureViewer.vue
@@ -192,15 +192,24 @@ export default {
     },
 
     getDimensions() {
-      let ratio = 1
       const dimensions = this.getNaturalDimensions()
-      if (dimensions.width > 0) ratio = dimensions.height / dimensions.width
+      const ratio =
+        dimensions.width > 0 ? dimensions.height / dimensions.width : 1
+      const containerWidth = this.container ? this.container.offsetWidth : 0
+
+      if (this.fullScreen) {
+        let width = containerWidth
+        let height = Math.floor(width * ratio)
+        if (height > this.defaultHeight) {
+          height = this.defaultHeight
+          width = Math.floor(height / ratio)
+        }
+        return { width, height }
+      }
+
       let width = dimensions.width
-      if (
-        width > this.container.offsetWidth &&
-        this.container.offsetWidth > 0
-      ) {
-        width = this.container.offsetWidth
+      if (width > containerWidth && containerWidth > 0) {
+        width = containerWidth
       }
       let height = Math.floor(width * ratio)
       if (height > this.defaultHeight) {
diff --git a/src/components/previews/SharedPlaylistPlayer.vue b/src/components/previews/SharedPlaylistPlayer.vue
index 4009cbb8c9..475a4e53fb 100644
--- a/src/components/previews/SharedPlaylistPlayer.vue
+++ b/src/components/previews/SharedPlaylistPlayer.vue
@@ -368,7 +368,7 @@ const isOtherFile = computed(
 const downloadUrl = computed(() => {
   if (!currentPreview.value) return ''
   if (props.token) {
-    return `/api/shared/playlists/${props.token}/movies/originals/preview-files/${currentPreview.value.id}.${extension.value}`
+    return `/api/shared/playlists/${props.token}/preview-files/${currentPreview.value.id}/download`
   }
   return `/api/pictures/originals/preview-files/${currentPreview.value.id}/download`
 })
diff --git a/src/components/sides/Sidebar.vue b/src/components/sides/Sidebar.vue
index 4aa590382f..ced954de20 100644
--- a/src/components/sides/Sidebar.vue
+++ b/src/components/sides/Sidebar.vue
@@ -132,7 +132,12 @@
                   params: { plugin_id: plugin.plugin_id }
                 }"
               >
-                <icon :name="plugin.icon" />
+                <icon
+                  class="nav-icon"
+                  :name="plugin.icon"
+                  :size="20"
+                  :stroke-width="1.5"
+                />
                 {{ plugin.name }}
               </router-link>
             </p>
diff --git a/src/components/tops/TopbarSectionList.vue b/src/components/tops/TopbarSectionList.vue
index 0c4eaf51c3..f0b86513bb 100644
--- a/src/components/tops/TopbarSectionList.vue
+++ b/src/components/tops/TopbarSectionList.vue
@@ -14,6 +14,8 @@
           <icon
             class="section-icon"
             :name="currentSection.icon"
+            :size="20"
+            :stroke-width="1.5"
             v-if="currentSection.type === 'plugin'"
           />
           <kitsu-icon
@@ -45,6 +47,8 @@
             <icon
               class="section-icon"
               :name="section.icon"
+              :size="20"
+              :stroke-width="1.5"
               v-if="section.type === 'plugin'"
             />
             <span class="flexrow-item">{{ section.label }}</span>
@@ -288,4 +292,12 @@ hr {
   margin-right: 0.8em;
   width: 20px;
 }
+
+svg.section-icon {
+  color: #515151;
+}
+
+.dark svg.section-icon {
+  color: #ffffff;
+}
 </style>
diff --git a/src/components/widgets/Card.vue b/src/components/widgets/Card.vue
new file mode 100644
index 0000000000..6b030e909a
--- /dev/null
+++ b/src/components/widgets/Card.vue
@@ -0,0 +1,101 @@
+<template>
+  <section class="card">
+    <h2 class="card-title" v-if="title">{{ title }}</h2>
+    <slot />
+    <div
+      class="card-actions"
+      v-if="$slots.actions || error || success || saveLabel"
+    >
+      <p class="error" v-if="error">{{ error }}</p>
+      <p class="success" v-else-if="success">{{ success }}</p>
+      <slot name="actions" />
+      <button
+        class="button save-button"
+        :class="{ 'is-loading': loading }"
+        :disabled="disabled || loading"
+        type="button"
+        @click="$emit('save')"
+        v-if="saveLabel"
+      >
+        {{ saveLabel }}
+      </button>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, default: '' },
+  error: { type: String, default: '' },
+  success: { type: String, default: '' },
+  saveLabel: { type: String, default: '' },
+  loading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
+})
+
+defineEmits(['save'])
+</script>
+
+<style lang="scss" scoped>
+.card {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  color: var(--text);
+  padding: 1.75rem 2rem;
+
+  :deep(label.label) {
+    color: var(--text);
+  }
+}
+
+.dark .card {
+  background: var(--background-alt);
+}
+
+.card-title {
+  border-bottom: none;
+  color: var(--text);
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  margin: 0 0 2.5rem;
+  text-transform: uppercase;
+}
+
+.card-actions {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+
+  .error,
+  .success {
+    flex: 1;
+    margin: 0;
+  }
+
+  .success {
+    color: $green;
+  }
+}
+
+.save-button {
+  background: $green;
+  border-color: $green;
+  color: $white;
+  min-width: 8rem;
+
+  &:hover:not([disabled]) {
+    background: $light-green;
+    border-color: $light-green;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .card {
+    padding: 1.25rem;
+  }
+}
+</style>
diff --git a/src/components/widgets/Checkbox.vue b/src/components/widgets/Checkbox.vue
index beab9fa7b3..76e8d9ab0b 100644
--- a/src/components/widgets/Checkbox.vue
+++ b/src/components/widgets/Checkbox.vue
@@ -118,8 +118,9 @@ const onChange = event => {
       transition: background-color 200ms ease-in;
     }
     &:after {
-      width: 1.3rem;
-      height: 1.3rem;
+      left: 0.15rem;
+      width: 1.2rem;
+      height: 1.2rem;
       background-color: $white;
       border-radius: 50%;
       transition: left 150ms ease-in;
@@ -131,7 +132,7 @@ const onChange = event => {
     }
     &:after {
       content: '';
-      left: 1.3rem;
+      left: 1.25rem;
     }
   }
 }
diff --git a/src/components/widgets/ComboboxProduction.vue b/src/components/widgets/ComboboxProduction.vue
index 05d3ddeb17..5731e2671a 100644
--- a/src/components/widgets/ComboboxProduction.vue
+++ b/src/components/widgets/ComboboxProduction.vue
@@ -157,4 +157,13 @@ const currentProduction = computed(() => {
   padding-top: 0;
   margin-bottom: 5px;
 }
+
+// Force the production name back on under 768px — ProductionName hides
+// its .avatar-name by default to save space, but inside this combobox
+// the name is the whole point of the selection.
+@media screen and (max-width: 768px) {
+  .production-combo :deep(.avatar-name) {
+    display: inline;
+  }
+}
 </style>
diff --git a/src/components/widgets/GridLoadingSkeleton.vue b/src/components/widgets/GridLoadingSkeleton.vue
new file mode 100644
index 0000000000..206389da0f
--- /dev/null
+++ b/src/components/widgets/GridLoadingSkeleton.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="grid-loading-skeleton">
+    <div
+      class="skeleton-row"
+      :style="{
+        '--row-index': i - 1,
+        '--fadeout-delay': `${fadeoutDelayMs}ms`,
+        '--peak-opacity': peakOpacity(i)
+      }"
+      :key="`skeleton-row-${cycle}-${i}`"
+      v-for="i in rows"
+    >
+      <div class="row-header">
+        <span class="skeleton-block avatar" v-if="withAvatar" />
+        <span class="skeleton-block name" />
+      </div>
+      <span
+        class="skeleton-block daytime"
+        :key="`d-${i}-${j}`"
+        v-for="j in cells"
+      />
+      <span class="skeleton-block actions" v-if="withActions" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRef } from 'vue'
+
+import { useSkeletonCycle } from '@/composables/skeleton'
+
+const props = defineProps({
+  rows: { type: Number, default: 8 },
+  cells: { type: Number, default: 7 },
+  withAvatar: { type: Boolean, default: true },
+  withActions: { type: Boolean, default: true }
+})
+
+const { cycle, fadeoutDelayMs } = useSkeletonCycle(toRef(props, 'rows'))
+
+const peakOpacity = i => {
+  const fromEnd = props.rows - i
+  if (fromEnd === 0) return 0.25
+  if (fromEnd === 1) return 0.5
+  if (fromEnd === 2) return 0.75
+  return 1
+}
+</script>
+
+<style lang="scss" scoped>
+.grid-loading-skeleton {
+  display: flex;
+  flex-direction: column;
+}
+
+.skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(var(--border-rgb), 0.4);
+  opacity: 0;
+  animation:
+    skeleton-row-in 0.4s ease-out forwards,
+    skeleton-row-out 0.35s ease-in forwards;
+  animation-delay: calc(var(--row-index) * 150ms), var(--fadeout-delay);
+}
+
+.row-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 220px;
+  flex-shrink: 0;
+}
+
+.skeleton-block {
+  display: inline-block;
+  height: 12px;
+  border-radius: 8px;
+  background: rgba(var(--skeleton-rgb), 0.45);
+
+  &.avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &.name {
+    flex: 1;
+  }
+
+  &.daytime {
+    width: 36px;
+    height: 28px;
+    border-radius: 6px;
+    flex-shrink: 0;
+  }
+
+  &.actions {
+    width: 60px;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+}
+
+@keyframes skeleton-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: var(--peak-opacity, 1);
+    transform: translateY(0);
+  }
+}
+
+@keyframes skeleton-row-out {
+  from {
+    opacity: var(--peak-opacity, 1);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-row {
+    animation: none;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/widgets/ImageCropper.vue b/src/components/widgets/ImageCropper.vue
new file mode 100644
index 0000000000..5362453678
--- /dev/null
+++ b/src/components/widgets/ImageCropper.vue
@@ -0,0 +1,460 @@
+<template>
+  <div class="image-cropper">
+    <input
+      ref="fileInputRef"
+      class="hidden-input"
+      type="file"
+      accept=".png,.jpg,.jpeg"
+      @change="onFileChange"
+    />
+
+    <div
+      class="cropper-frame"
+      :class="[
+        `shape-${shape}`,
+        {
+          dragging: isDragging,
+          'drag-over': isDragOver,
+          empty: !previewUrl
+        }
+      ]"
+      :style="{ width: `${size}px`, height: `${size}px` }"
+      :tabindex="previewUrl ? -1 : 0"
+      @mousedown="onPointerDown"
+      @touchstart.passive="onPointerDown"
+      @click="onFrameClick"
+      @keydown.enter.prevent="openFilePicker"
+      @keydown.space.prevent="openFilePicker"
+      @dragenter.prevent="isDragOver = true"
+      @dragover.prevent="isDragOver = true"
+      @dragleave.prevent="isDragOver = false"
+      @drop.prevent="onDrop"
+    >
+      <img
+        ref="imageRef"
+        class="cropper-image"
+        :src="previewUrl"
+        alt=""
+        draggable="false"
+        :style="imageStyle"
+        @load="onImageLoad"
+        v-if="previewUrl"
+      />
+      <div class="cropper-placeholder" v-else>
+        <upload-icon class="placeholder-icon" :size="32" :stroke-width="1.5" />
+        <span class="placeholder-text">
+          {{ $t('profile.avatar.drop_or_click') }}
+        </span>
+      </div>
+    </div>
+
+    <div class="cropper-controls" v-if="previewUrl">
+      <div class="zoom-row">
+        <span class="zoom-icon" aria-hidden="true">−</span>
+        <input
+          class="zoom-slider"
+          type="range"
+          :min="minScale"
+          :max="maxScale"
+          step="0.001"
+          v-model.number="scale"
+        />
+        <span class="zoom-icon" aria-hidden="true">+</span>
+      </div>
+      <button class="replace-button" type="button" @click="openFilePicker">
+        {{ $t('profile.avatar.replace') }}
+      </button>
+      <p class="cropper-hint">{{ $t('profile.avatar.preview_hint') }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { UploadIcon } from 'lucide-vue-next'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+const props = defineProps({
+  shape: {
+    type: String,
+    default: 'circle',
+    validator: value => ['circle', 'rounded'].includes(value)
+  },
+  size: { type: Number, default: 180 },
+  outputSize: { type: Number, default: 400 },
+  outputType: { type: String, default: 'image/jpeg' },
+  outputQuality: { type: Number, default: 0.92 }
+})
+
+const emit = defineEmits(['fileselected'])
+
+const fileInputRef = ref(null)
+const imageRef = ref(null)
+const originalFile = ref(null)
+const formData = ref(null)
+const previewUrl = ref(null)
+const naturalSize = ref({ width: 0, height: 0 })
+const scale = ref(1)
+const offset = ref({ x: 0, y: 0 })
+const isDragging = ref(false)
+const isDragOver = ref(false)
+const dragStart = ref({ pointerX: 0, pointerY: 0, offsetX: 0, offsetY: 0 })
+
+const minScale = computed(() => {
+  const { width, height } = naturalSize.value
+  if (!width || !height) return 1
+  return Math.max(props.size / width, props.size / height)
+})
+
+const maxScale = computed(() => minScale.value * 4)
+
+const imageStyle = computed(() => {
+  const { width, height } = naturalSize.value
+  return {
+    width: `${width * scale.value}px`,
+    height: `${height * scale.value}px`,
+    transform: `translate(${offset.value.x}px, ${offset.value.y}px)`
+  }
+})
+
+const clampOffset = (x, y) => {
+  const { width, height } = naturalSize.value
+  const scaled = { w: width * scale.value, h: height * scale.value }
+  const minX = props.size - scaled.w
+  const minY = props.size - scaled.h
+  return {
+    x: Math.min(0, Math.max(minX, x)),
+    y: Math.min(0, Math.max(minY, y))
+  }
+}
+
+const centerOffset = () => {
+  const { width, height } = naturalSize.value
+  offset.value = {
+    x: (props.size - width * scale.value) / 2,
+    y: (props.size - height * scale.value) / 2
+  }
+}
+
+const releasePreview = () => {
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value)
+    previewUrl.value = null
+  }
+}
+
+const reset = () => {
+  releasePreview()
+  formData.value = null
+  originalFile.value = null
+  naturalSize.value = { width: 0, height: 0 }
+  scale.value = 1
+  offset.value = { x: 0, y: 0 }
+  isDragOver.value = false
+  if (fileInputRef.value) fileInputRef.value.value = ''
+}
+
+const acceptFile = file => {
+  if (!file || !file.type?.startsWith('image/')) return
+  releasePreview()
+  originalFile.value = file
+  const data = new FormData()
+  data.append('file', file, file.name)
+  formData.value = data
+  previewUrl.value = URL.createObjectURL(file)
+  emit('fileselected', data)
+}
+
+const onFileChange = event => {
+  acceptFile(event.target.files?.[0])
+}
+
+const onDrop = event => {
+  isDragOver.value = false
+  acceptFile(event.dataTransfer?.files?.[0])
+}
+
+const openFilePicker = () => fileInputRef.value?.click()
+
+const onFrameClick = event => {
+  if (previewUrl.value) return
+  if (event.target.closest('.replace-button')) return
+  openFilePicker()
+}
+
+const onImageLoad = event => {
+  naturalSize.value = {
+    width: event.target.naturalWidth,
+    height: event.target.naturalHeight
+  }
+  scale.value = minScale.value
+  centerOffset()
+}
+
+const pointerCoords = event => {
+  const touch = event.touches?.[0] || event.changedTouches?.[0]
+  return {
+    x: touch ? touch.clientX : event.clientX,
+    y: touch ? touch.clientY : event.clientY
+  }
+}
+
+const onPointerDown = event => {
+  if (!previewUrl.value) return
+  if (event.button !== undefined && event.button !== 0) return
+  if (!naturalSize.value.width) return
+  isDragging.value = true
+  const { x, y } = pointerCoords(event)
+  dragStart.value = {
+    pointerX: x,
+    pointerY: y,
+    offsetX: offset.value.x,
+    offsetY: offset.value.y
+  }
+  window.addEventListener('mousemove', onPointerMove)
+  window.addEventListener('mouseup', onPointerUp)
+  window.addEventListener('touchmove', onPointerMove, { passive: false })
+  window.addEventListener('touchend', onPointerUp)
+}
+
+const onPointerMove = event => {
+  if (!isDragging.value) return
+  if (event.cancelable) event.preventDefault()
+  const { x, y } = pointerCoords(event)
+  offset.value = clampOffset(
+    dragStart.value.offsetX + (x - dragStart.value.pointerX),
+    dragStart.value.offsetY + (y - dragStart.value.pointerY)
+  )
+}
+
+const onPointerUp = () => {
+  isDragging.value = false
+  window.removeEventListener('mousemove', onPointerMove)
+  window.removeEventListener('mouseup', onPointerUp)
+  window.removeEventListener('touchmove', onPointerMove)
+  window.removeEventListener('touchend', onPointerUp)
+}
+
+watch(scale, (value, previous) => {
+  if (!naturalSize.value.width) return
+  if (!previous || previous === value) {
+    offset.value = clampOffset(offset.value.x, offset.value.y)
+    return
+  }
+  const ratio = value / previous
+  const centerX = props.size / 2
+  const centerY = props.size / 2
+  const newX = centerX - (centerX - offset.value.x) * ratio
+  const newY = centerY - (centerY - offset.value.y) * ratio
+  offset.value = clampOffset(newX, newY)
+})
+
+onBeforeUnmount(() => {
+  releasePreview()
+  onPointerUp()
+})
+
+// Public API — render the visible region of the frame onto an off-screen
+// canvas at outputSize x outputSize and return a fresh FormData. Falls back
+// to the original FormData when no image has been loaded.
+const cropToFormData = () =>
+  new Promise((resolve, reject) => {
+    if (!imageRef.value || !naturalSize.value.width) {
+      resolve(formData.value)
+      return
+    }
+    const canvas = document.createElement('canvas')
+    canvas.width = props.outputSize
+    canvas.height = props.outputSize
+    const ctx = canvas.getContext('2d')
+    const sourceSize = props.size / scale.value
+    const sourceX = -offset.value.x / scale.value
+    const sourceY = -offset.value.y / scale.value
+    ctx.drawImage(
+      imageRef.value,
+      sourceX,
+      sourceY,
+      sourceSize,
+      sourceSize,
+      0,
+      0,
+      props.outputSize,
+      props.outputSize
+    )
+    canvas.toBlob(
+      blob => {
+        if (!blob) {
+          reject(new Error('Cropping failed'))
+          return
+        }
+        const name = originalFile.value?.name || 'image.jpg'
+        const file = new File([blob], name, { type: blob.type })
+        const data = new FormData()
+        data.append('file', file, file.name)
+        resolve(data)
+      },
+      props.outputType,
+      props.outputQuality
+    )
+  })
+
+defineExpose({
+  reset,
+  cropToFormData,
+  hasFile: computed(() => Boolean(formData.value))
+})
+</script>
+
+<style lang="scss" scoped>
+.image-cropper {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.hidden-input {
+  display: none;
+}
+
+.cropper-frame {
+  background: var(--background-page);
+  border: 1px solid var(--border);
+  cursor: grab;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  touch-action: none;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+  user-select: none;
+
+  &.shape-circle {
+    border-radius: 50%;
+  }
+
+  &.shape-rounded {
+    border-radius: 16px;
+  }
+
+  &.dragging {
+    cursor: grabbing;
+  }
+
+  &.empty {
+    border-style: dashed;
+    border-width: 2px;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &.drag-over {
+      background: var(--background-hover);
+      border-color: $green;
+    }
+  }
+}
+
+.cropper-image {
+  display: block;
+  max-width: none;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+}
+
+.cropper-placeholder {
+  align-items: center;
+  color: var(--text-alt);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  height: 100%;
+  justify-content: center;
+  padding: 0 1rem;
+  text-align: center;
+}
+
+.placeholder-icon {
+  color: var(--text-alt);
+  opacity: 0.7;
+}
+
+.placeholder-text {
+  font-size: 0.9rem;
+}
+
+.cropper-controls {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  max-width: 260px;
+  width: 100%;
+}
+
+.zoom-row {
+  align-items: center;
+  display: flex;
+  gap: 0.6rem;
+  width: 100%;
+}
+
+.zoom-icon {
+  color: var(--text-alt);
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.zoom-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--border);
+  border-radius: 999px;
+  flex: 1;
+  height: 4px;
+  outline: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: $green;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 16px;
+    width: 16px;
+  }
+
+  &::-moz-range-thumb {
+    background: $green;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 16px;
+    width: 16px;
+  }
+}
+
+.replace-button {
+  background: none;
+  border: none;
+  color: $green;
+  cursor: pointer;
+  font-size: 0.9rem;
+  padding: 0;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.cropper-hint {
+  color: var(--text-alt);
+  font-size: 0.8rem;
+  margin: 0;
+  text-align: center;
+}
+</style>
diff --git a/src/components/widgets/KanbanLoadingSkeleton.vue b/src/components/widgets/KanbanLoadingSkeleton.vue
new file mode 100644
index 0000000000..f7f0d47822
--- /dev/null
+++ b/src/components/widgets/KanbanLoadingSkeleton.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="kanban-loading-skeleton">
+    <div
+      class="skeleton-column"
+      :key="`skeleton-col-${cycle}-${c}`"
+      v-for="c in columns"
+    >
+      <span class="skeleton-block column-header" />
+      <div
+        class="skeleton-card"
+        :style="{
+          '--row-index': i - 1,
+          '--fadeout-delay': `${fadeoutDelayMs}ms`,
+          '--peak-opacity': peakOpacity(i)
+        }"
+        :key="`skeleton-card-${cycle}-${c}-${i}`"
+        v-for="i in cards"
+      >
+        <div class="card-header">
+          <span class="skeleton-block avatar" />
+          <span class="skeleton-block name" />
+        </div>
+        <span class="skeleton-block desc" />
+        <span class="skeleton-block badge" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRef } from 'vue'
+
+import { useSkeletonCycle } from '@/composables/skeleton'
+
+const props = defineProps({
+  columns: { type: Number, default: 4 },
+  cards: { type: Number, default: 3 }
+})
+
+const { cycle, fadeoutDelayMs } = useSkeletonCycle(toRef(props, 'cards'))
+
+const peakOpacity = i => {
+  const fromEnd = props.cards - i
+  if (fromEnd === 0) return 0.5
+  if (fromEnd === 1) return 0.75
+  return 1
+}
+</script>
+
+<style lang="scss" scoped>
+.kanban-loading-skeleton {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  align-items: flex-start;
+}
+
+.skeleton-column {
+  flex: 1;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background: rgba(var(--border-rgb), 0.15);
+  border-radius: 8px;
+}
+
+.skeleton-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(var(--border-rgb), 0.2);
+  opacity: 0;
+  animation:
+    skeleton-card-in 0.4s ease-out forwards,
+    skeleton-card-out 0.35s ease-in forwards;
+  animation-delay: calc(var(--row-index) * 150ms), var(--fadeout-delay);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.skeleton-block {
+  display: inline-block;
+  height: 12px;
+  border-radius: 8px;
+  background: rgba(var(--skeleton-rgb), 0.45);
+
+  &.column-header {
+    width: 60%;
+    margin-bottom: 4px;
+  }
+
+  &.avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &.name {
+    flex: 1;
+    height: 10px;
+  }
+
+  &.desc {
+    width: 80%;
+    height: 8px;
+  }
+
+  &.badge {
+    width: 50px;
+    height: 14px;
+  }
+}
+
+@keyframes skeleton-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: var(--peak-opacity, 1);
+    transform: translateY(0);
+  }
+}
+
+@keyframes skeleton-card-out {
+  from {
+    opacity: var(--peak-opacity, 1);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-card {
+    animation: none;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/widgets/ListLoadingSkeleton.vue b/src/components/widgets/ListLoadingSkeleton.vue
new file mode 100644
index 0000000000..e7e049c00d
--- /dev/null
+++ b/src/components/widgets/ListLoadingSkeleton.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="list-loading-skeleton">
+    <div
+      class="skeleton-row"
+      :style="{
+        '--row-index': i - 1,
+        '--fadeout-delay': `${fadeoutDelayMs}ms`,
+        '--peak-opacity': peakOpacity(i)
+      }"
+      :key="`skeleton-row-${cycle}-${i}`"
+      v-for="i in rows"
+    >
+      <span class="skeleton-block thumbnail" v-if="withThumbnail" />
+      <span class="skeleton-block name" />
+      <span
+        class="skeleton-block cell"
+        :class="{ big: bigCells }"
+        :key="`c-${i}-${j}`"
+        v-for="j in cells"
+      />
+      <span class="skeleton-block actions" v-if="withActions" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRef } from 'vue'
+
+import { useSkeletonCycle } from '@/composables/skeleton'
+
+const props = defineProps({
+  rows: { type: Number, default: 8 },
+  cells: { type: Number, default: 6 },
+  withThumbnail: { type: Boolean, default: true },
+  withActions: { type: Boolean, default: true },
+  bigCells: { type: Boolean, default: false }
+})
+
+const { cycle, fadeoutDelayMs } = useSkeletonCycle(toRef(props, 'rows'))
+
+const peakOpacity = i => {
+  const fromEnd = props.rows - i
+  if (fromEnd === 0) return 0.25
+  if (fromEnd === 1) return 0.5
+  if (fromEnd === 2) return 0.75
+  return 1
+}
+</script>
+
+<style lang="scss" scoped>
+.list-loading-skeleton {
+  display: flex;
+  flex-direction: column;
+}
+
+.skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(var(--border-rgb), 0.4);
+  opacity: 0;
+  animation:
+    skeleton-row-in 0.4s ease-out forwards,
+    skeleton-row-out 0.35s ease-in forwards;
+  animation-delay: calc(var(--row-index) * 150ms), var(--fadeout-delay);
+}
+
+.skeleton-block {
+  display: inline-block;
+  height: 12px;
+  border-radius: 8px;
+  background: rgba(var(--skeleton-rgb), 0.45);
+
+  &.thumbnail {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+  }
+
+  &.name {
+    width: 220px;
+    flex-shrink: 0;
+  }
+
+  &.cell {
+    width: 100px;
+    flex-shrink: 0;
+
+    &.big {
+      width: 130px;
+      height: 22px;
+    }
+  }
+
+  &.actions {
+    width: 60px;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+}
+
+@keyframes skeleton-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: var(--peak-opacity, 1);
+    transform: translateY(0);
+  }
+}
+
+@keyframes skeleton-row-out {
+  from {
+    opacity: var(--peak-opacity, 1);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-row {
+    animation: none;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/widgets/TableInfo.vue b/src/components/widgets/TableInfo.vue
index d884ab85c8..eec438b818 100644
--- a/src/components/widgets/TableInfo.vue
+++ b/src/components/widgets/TableInfo.vue
@@ -1,10 +1,17 @@
 <template>
   <div>
-    <spinner
-      class="table-info"
-      :is-stylish="true"
-      v-if="isLoading && !isError"
+    <list-loading-skeleton
+      :rows="rows"
+      :cells="cells"
+      :with-thumbnail="withThumbnail"
+      :with-actions="withActions"
+      :big-cells="bigCells"
+      v-if="isLoading && variant === 'list' && !isError"
     />
+    <kanban-loading-skeleton
+      v-if="isLoading && variant === 'kanban' && !isError"
+    />
+    <grid-loading-skeleton v-if="isLoading && variant === 'grid' && !isError" />
     <div class="has-text-centered table-info" v-if="isError">
       <span class="tag is-danger">
         {{ $t('main.loading_error') }}
@@ -14,16 +21,22 @@
 </template>
 
 <script setup>
-import Spinner from '@/components/widgets/Spinner.vue'
+import GridLoadingSkeleton from '@/components/widgets/GridLoadingSkeleton.vue'
+import KanbanLoadingSkeleton from '@/components/widgets/KanbanLoadingSkeleton.vue'
+import ListLoadingSkeleton from '@/components/widgets/ListLoadingSkeleton.vue'
 
 defineProps({
-  isLoading: {
-    type: Boolean,
-    default: false
+  isLoading: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  variant: {
+    type: String,
+    default: 'list',
+    validator: v => ['list', 'kanban', 'grid'].includes(v)
   },
-  isError: {
-    type: Boolean,
-    default: false
-  }
+  rows: { type: Number, default: 8 },
+  cells: { type: Number, default: 6 },
+  withThumbnail: { type: Boolean, default: true },
+  withActions: { type: Boolean, default: true },
+  bigCells: { type: Boolean, default: false }
 })
 </script>
diff --git a/src/components/widgets/TwoFactorAuthenticationSetup.vue b/src/components/widgets/TwoFactorAuthenticationSetup.vue
index 9d919de13e..dd6b1539ab 100644
--- a/src/components/widgets/TwoFactorAuthenticationSetup.vue
+++ b/src/components/widgets/TwoFactorAuthenticationSetup.vue
@@ -1,58 +1,11 @@
 <template>
   <div class="two-factor-authentication-setup">
     <p
-      class="mb2 has-text-centered"
+      class="mb2"
       v-html="$t('profile.two_factor_authentication.description')"
     />
-    <p
-      v-if="showCancelButton && twoFAButtonsDisabled"
-      class="cancel-two-factor-action"
-    >
-      <x-circle-icon
-        class="action-icon"
-        :size="20"
-        @click="cancelCurrentTwoFactorAuthAction"
-      />
-    </p>
-
-    <div v-if="twoFA.TOTPPreEnabled" class="qrcode-informations">
-      <p>
-        {{ $t('profile.two_factor_authentication.scan_qrcode') }}
-      </p>
 
-      <qrcode-vue
-        class="qrcode"
-        :value="twoFA.TOTPProvisionningUri"
-        :size="300"
-        level="M"
-      />
-
-      <text-field
-        :label="$t('profile.two_factor_authentication.otp_secret')"
-        :readonly="true"
-        type="text"
-        v-model.trim="twoFA.OTPSecret"
-        v-if="twoFA.OTPSecret"
-      />
-    </div>
-
-    <div class="field" v-if="twoFA.TOTPPreEnabled || twoFA.emailOTPPreEnabled">
-      <p class="control has-icon">
-        <input
-          class="input is-medium otp-input"
-          type="text"
-          v-model.trim="twoFA.validationOTP"
-          @keyup.enter="nextEnable"
-          :placeholder="placeholderInputEnableOTP"
-          v-focus
-        />
-        <span class="icon">
-          <lock-icon :size="20" />
-        </span>
-      </p>
-    </div>
-
-    <div v-if="twoFA.OTPRecoveryCodes">
+    <div v-if="twoFA.OTPRecoveryCodes" class="recovery-codes-panel">
       <label class="label label-recovery-codes">
         {{ $t('profile.two_factor_authentication.recovery_codes.title') }}
       </label>
@@ -83,10 +36,10 @@
     </div>
 
     <two-factor-authentication
-      v-else-if="twoFAVerificationNeeded"
+      v-else-if="twoFA.newRecoveryCodesNeedTwoFA"
       :preferred-two-fa="user.preferred_two_factor_authentication"
       :two-fas-enabled="twoFAsEnabled"
-      :is-loading="twoFA.isLoading"
+      :is-loading="twoFA.loadingAction === 'newRecoveryCodes'"
       :email="user.email"
       :text-validate-button="textValidateTwoFA"
       :is-disable-button="validateTwoFAIsDisable"
@@ -96,155 +49,317 @@
       @changed-two-fa="changedTwoFA"
     />
 
-    <button
-      v-if="twoFA.TOTPPreEnabled || twoFA.emailOTPPreEnabled"
-      class="two-fa-button button save-button is-medium"
-      :class="{ 'is-loading': twoFA.isLoading }"
-      @click="nextEnable()"
-    >
-      {{ textValidateNewTwoFA }}
-    </button>
-
-    <p
-      class="show-message-2fa error"
-      :class="{
-        'is-hidden': !(
-          twoFA.error.isWrongOTP &&
-          (twoFA.TOTPPreEnabled || twoFA.emailOTPPreEnabled)
-        )
-      }"
-    >
-      {{ textWrongOTPError }}
-    </p>
-
-    <div class="field" v-if="twoFA.FIDOPreRegistered">
-      <p class="control has-icon">
-        <input
-          class="input is-medium otp-input"
-          type="text"
-          v-model.trim="twoFA.FIDONewDeviceName"
-          @keyup.enter="registerFIDORequested"
-          :placeholder="
-            $t('profile.two_factor_authentication.fido.device_name')
-          "
-          v-focus
+    <div class="two-fa-methods">
+      <div class="two-fa-card">
+        <div class="two-fa-card-head">
+          <smartphone-icon class="two-fa-card-icon" :size="22" />
+          <span class="two-fa-card-title">
+            {{ $t('profile.two_factor_authentication.totp.name') }}
+          </span>
+          <span
+            class="status-badge"
+            :class="user.totp_enabled ? 'is-enabled' : 'is-disabled'"
+          >
+            <span class="status-dot" />
+            {{
+              user.totp_enabled
+                ? $t('profile.two_factor_authentication.status_enabled')
+                : $t('profile.two_factor_authentication.status_disabled')
+            }}
+          </span>
+        </div>
+        <p class="two-fa-card-description">
+          {{ $t('profile.two_factor_authentication.totp.description') }}
+        </p>
+
+        <div v-if="twoFA.TOTPPreEnabled" class="two-fa-flow">
+          <div class="qrcode-block">
+            <p class="qrcode-instruction">
+              {{ $t('profile.two_factor_authentication.scan_qrcode') }}
+            </p>
+            <div class="qrcode-frame">
+              <qrcode-vue
+                :value="twoFA.TOTPProvisionningUri"
+                :size="240"
+                level="M"
+              />
+            </div>
+          </div>
+          <text-field
+            v-if="twoFA.OTPSecret"
+            :label="$t('profile.two_factor_authentication.otp_secret')"
+            :readonly="true"
+            type="text"
+            v-model.trim="twoFA.OTPSecret"
+          />
+          <div class="field">
+            <p class="control has-icon">
+              <input
+                class="input is-medium otp-input"
+                type="text"
+                v-model.trim="twoFA.validationOTP"
+                @keyup.enter="nextEnable"
+                :placeholder="placeholderInputEnableOTP"
+                v-focus
+              />
+              <span class="icon">
+                <lock-icon :size="20" />
+              </span>
+            </p>
+          </div>
+          <p class="show-message-2fa error" v-if="twoFA.error.isWrongOTP">
+            {{ textWrongOTPError }}
+          </p>
+          <div class="two-fa-flow-actions">
+            <button
+              class="button cancel-flow-button is-medium"
+              @click="cancelCurrentTwoFactorAuthAction"
+            >
+              {{ $t('main.cancel') }}
+            </button>
+            <button
+              class="button save-button is-medium"
+              :class="{ 'is-loading': twoFA.loadingAction === 'enableTOTP' }"
+              @click="nextEnable()"
+            >
+              {{ textValidateNewTwoFA }}
+            </button>
+          </div>
+        </div>
+
+        <two-factor-authentication
+          v-else-if="twoFA.TOTPNeedTwoFA"
+          :preferred-two-fa="user.preferred_two_factor_authentication"
+          :two-fas-enabled="twoFAsEnabled"
+          :is-loading="twoFA.loadingAction === 'disableTOTP'"
+          :email="user.email"
+          :text-validate-button="textValidateTwoFA"
+          :is-disable-button="validateTwoFAIsDisable"
+          :is-wrong-otp="twoFA.error.isWrongOTP"
+          :is-profile="true"
+          @validate="nextWithPayload"
+          @changed-two-fa="changedTwoFA"
         />
-        <span class="icon">
-          <key-icon :size="20" />
-        </span>
-      </p>
-    </div>
-
-    <button
-      v-if="twoFA.FIDOPreRegistered"
-      class="two-fa-button button save-button is-medium"
-      :class="{ 'is-loading': twoFA.isLoading }"
-      @click="registerFIDORequested()"
-    >
-      {{ $t('profile.two_factor_authentication.fido.button_register') }}
-    </button>
-
-    <p
-      class="show-message-2fa error"
-      :class="{ 'is-hidden': !twoFA.error.registerFIDO }"
-    >
-      {{ $t('profile.two_factor_authentication.fido.error_register') }}
-    </p>
-
-    <button
-      v-if="!user.totp_enabled && !twoFA.TOTPPreEnabled"
-      class="two-fa-button button save-button is-medium"
-      :class="{
-        'is-disabled': twoFAButtonsDisabled,
-        'is-loading': twoFA.isLoading
-      }"
-      @click="preEnableTOTPRequested()"
-    >
-      {{ $t('profile.two_factor_authentication.totp.button_enable') }}
-    </button>
-
-    <button
-      v-else-if="!twoFA.TOTPNeedTwoFA && !twoFA.TOTPPreEnabled"
-      class="two-fa-button button disable-button is-medium"
-      :class="{
-        'is-disabled': twoFAButtonsDisabled,
-        'is-loading': twoFA.isLoading
-      }"
-      @click="disableTOTPRequested()"
-    >
-      {{ $t('profile.two_factor_authentication.totp.button_disable') }}
-    </button>
-
-    <p
-      class="show-message-2fa error"
-      :class="{ 'is-hidden': !twoFA.error.enableTOTP }"
-    >
-      {{ $t('profile.two_factor_authentication.totp.error_enable') }}
-    </p>
-
-    <p
-      class="show-message-2fa error"
-      :class="{ 'is-hidden': !twoFA.error.disableTOTP }"
-    >
-      {{ $t('profile.two_factor_authentication.totp.error_disable') }}
-    </p>
-
-    <button
-      v-if="!user.email_otp_enabled && !twoFA.emailOTPPreEnabled"
-      class="two-fa-button button save-button is-medium"
-      :class="{
-        'is-disabled': twoFAButtonsDisabled,
-        'is-loading': twoFA.isLoading
-      }"
-      @click="preEnableEmailOTPRequested()"
-    >
-      {{ $t('profile.two_factor_authentication.email_otp.button_enable') }}
-    </button>
-
-    <button
-      v-else-if="!twoFA.emailOTPNeedTwoFA && !twoFA.emailOTPPreEnabled"
-      class="two-fa-button button disable-button is-medium"
-      :class="{
-        'is-disabled': twoFAButtonsDisabled,
-        'is-loading': twoFA.isLoading
-      }"
-      @click="disableEmailOTPRequested()"
-    >
-      {{ $t('profile.two_factor_authentication.email_otp.button_disable') }}
-    </button>
-
-    <p
-      class="show-message-2fa error"
-      :class="{ 'is-hidden': !twoFA.error.enableEmailOTP }"
-    >
-      {{ $t('profile.two_factor_authentication.email_otp.error_enable') }}
-    </p>
 
-    <p
-      class="show-message-2fa error"
-      :class="{ 'is-hidden': !twoFA.error.disableEmailOTP }"
-    >
-      {{ $t('profile.two_factor_authentication.email_otp.error_disable') }}
-    </p>
+        <div v-else class="two-fa-card-actions">
+          <button
+            v-if="!user.totp_enabled"
+            class="button two-fa-action enable-action is-medium"
+            :class="{
+              'is-disabled': twoFAButtonsDisabled,
+              'is-loading': twoFA.loadingAction === 'preEnableTOTP'
+            }"
+            @click="preEnableTOTPRequested()"
+          >
+            {{ $t('profile.two_factor_authentication.totp.button_enable') }}
+          </button>
+          <button
+            v-else
+            class="button two-fa-action disable-action is-medium"
+            :class="{
+              'is-disabled': twoFAButtonsDisabled
+            }"
+            @click="disableTOTPRequested()"
+          >
+            {{ $t('profile.two_factor_authentication.totp.button_disable') }}
+          </button>
+        </div>
+        <p class="card-error error" v-if="twoFA.error.enableTOTP">
+          {{ $t('profile.two_factor_authentication.totp.error_enable') }}
+        </p>
+        <p class="card-error error" v-if="twoFA.error.disableTOTP">
+          {{ $t('profile.two_factor_authentication.totp.error_disable') }}
+        </p>
+      </div>
+
+      <div class="two-fa-card">
+        <div class="two-fa-card-head">
+          <mail-icon class="two-fa-card-icon" :size="22" />
+          <span class="two-fa-card-title">
+            {{ $t('profile.two_factor_authentication.email_otp.name') }}
+          </span>
+          <span
+            class="status-badge"
+            :class="user.email_otp_enabled ? 'is-enabled' : 'is-disabled'"
+          >
+            <span class="status-dot" />
+            {{
+              user.email_otp_enabled
+                ? $t('profile.two_factor_authentication.status_enabled')
+                : $t('profile.two_factor_authentication.status_disabled')
+            }}
+          </span>
+        </div>
+        <p class="two-fa-card-description">
+          {{ $t('profile.two_factor_authentication.email_otp.description') }}
+        </p>
+
+        <div v-if="twoFA.emailOTPPreEnabled" class="two-fa-flow">
+          <div class="field">
+            <p class="control has-icon">
+              <input
+                class="input is-medium otp-input"
+                type="text"
+                v-model.trim="twoFA.validationOTP"
+                @keyup.enter="nextEnable"
+                :placeholder="placeholderInputEnableOTP"
+                v-focus
+              />
+              <span class="icon">
+                <lock-icon :size="20" />
+              </span>
+            </p>
+          </div>
+          <p class="show-message-2fa error" v-if="twoFA.error.isWrongOTP">
+            {{ textWrongOTPError }}
+          </p>
+          <div class="two-fa-flow-actions">
+            <button
+              class="button cancel-flow-button is-medium"
+              @click="cancelCurrentTwoFactorAuthAction"
+            >
+              {{ $t('main.cancel') }}
+            </button>
+            <button
+              class="button save-button is-medium"
+              :class="{
+                'is-loading': twoFA.loadingAction === 'enableEmailOTP'
+              }"
+              @click="nextEnable()"
+            >
+              {{ textValidateNewTwoFA }}
+            </button>
+          </div>
+        </div>
+
+        <two-factor-authentication
+          v-else-if="twoFA.emailOTPNeedTwoFA"
+          :preferred-two-fa="user.preferred_two_factor_authentication"
+          :two-fas-enabled="twoFAsEnabled"
+          :is-loading="twoFA.loadingAction === 'disableEmailOTP'"
+          :email="user.email"
+          :text-validate-button="textValidateTwoFA"
+          :is-disable-button="validateTwoFAIsDisable"
+          :is-wrong-otp="twoFA.error.isWrongOTP"
+          :is-profile="true"
+          @validate="nextWithPayload"
+          @changed-two-fa="changedTwoFA"
+        />
 
-    <button
-      v-if="!twoFA.FIDOPreRegistered"
-      class="two-fa-button button save-button is-medium"
-      :class="{
-        'is-disabled': twoFAButtonsDisabled,
-        'is-loading': twoFA.isLoading
-      }"
-      @click="preRegisterFIDORequested()"
-    >
-      {{ $t('profile.two_factor_authentication.fido.button_register') }}
-    </button>
+        <div v-else class="two-fa-card-actions">
+          <button
+            v-if="!user.email_otp_enabled"
+            class="button two-fa-action enable-action is-medium"
+            :class="{
+              'is-disabled': twoFAButtonsDisabled,
+              'is-loading': twoFA.loadingAction === 'preEnableEmailOTP'
+            }"
+            @click="preEnableEmailOTPRequested()"
+          >
+            {{
+              $t('profile.two_factor_authentication.email_otp.button_enable')
+            }}
+          </button>
+          <button
+            v-else
+            class="button two-fa-action disable-action is-medium"
+            :class="{
+              'is-disabled': twoFAButtonsDisabled
+            }"
+            @click="disableEmailOTPRequested()"
+          >
+            {{
+              $t('profile.two_factor_authentication.email_otp.button_disable')
+            }}
+          </button>
+        </div>
+        <p class="card-error error" v-if="twoFA.error.enableEmailOTP">
+          {{ $t('profile.two_factor_authentication.email_otp.error_enable') }}
+        </p>
+        <p class="card-error error" v-if="twoFA.error.disableEmailOTP">
+          {{ $t('profile.two_factor_authentication.email_otp.error_disable') }}
+        </p>
+      </div>
+
+      <div class="two-fa-card">
+        <div class="two-fa-card-head">
+          <key-round-icon class="two-fa-card-icon" :size="22" />
+          <span class="two-fa-card-title">
+            {{ $t('profile.two_factor_authentication.fido.name') }}
+          </span>
+          <span
+            class="status-badge"
+            :class="user.fido_enabled ? 'is-enabled' : 'is-disabled'"
+          >
+            <span class="status-dot" />
+            {{
+              user.fido_enabled
+                ? $t('profile.two_factor_authentication.status_enabled')
+                : $t('profile.two_factor_authentication.status_disabled')
+            }}
+          </span>
+        </div>
+        <p class="two-fa-card-description">
+          {{ $t('profile.two_factor_authentication.fido.description') }}
+        </p>
+
+        <div v-if="twoFA.FIDOPreRegistered" class="two-fa-flow">
+          <div class="field">
+            <p class="control has-icon">
+              <input
+                class="input is-medium otp-input"
+                type="text"
+                v-model.trim="twoFA.FIDONewDeviceName"
+                @keyup.enter="registerFIDORequested"
+                :placeholder="
+                  $t('profile.two_factor_authentication.fido.device_name')
+                "
+                v-focus
+              />
+              <span class="icon">
+                <key-icon :size="20" />
+              </span>
+            </p>
+          </div>
+          <p class="show-message-2fa error" v-if="twoFA.error.registerFIDO">
+            {{ $t('profile.two_factor_authentication.fido.error_register') }}
+          </p>
+          <div class="two-fa-flow-actions">
+            <button
+              class="button cancel-flow-button is-medium"
+              @click="cancelCurrentTwoFactorAuthAction"
+            >
+              {{ $t('main.cancel') }}
+            </button>
+            <button
+              class="button save-button is-medium"
+              :class="{ 'is-loading': twoFA.loadingAction === 'registerFIDO' }"
+              @click="registerFIDORequested()"
+            >
+              {{ $t('profile.two_factor_authentication.fido.button_register') }}
+            </button>
+          </div>
+        </div>
+
+        <div v-else class="two-fa-card-actions">
+          <button
+            class="button two-fa-action enable-action is-medium"
+            :class="{
+              'is-disabled': twoFAButtonsDisabled
+            }"
+            @click="preRegisterFIDORequested()"
+          >
+            {{ $t('profile.two_factor_authentication.fido.button_register') }}
+          </button>
+        </div>
+      </div>
+    </div>
 
     <button
       v-if="twoFAEnabled && !twoFA.newRecoveryCodesNeedTwoFA"
       class="two-fa-button button save-button is-medium"
       :class="{
-        'is-disabled': twoFAButtonsDisabled,
-        'is-loading': twoFA.isLoading
+        'is-disabled': twoFAButtonsDisabled
       }"
       @click="newRecoveryCodesRequested()"
     >
@@ -295,8 +410,11 @@ import QrcodeVue from 'qrcode.vue'
 import {
   CopyIcon,
   KeyIcon,
+  KeyRoundIcon,
   LockIcon,
+  MailIcon,
   SaveIcon,
+  SmartphoneIcon,
   TrashIcon,
   XCircleIcon
 } from 'lucide-vue-next'
@@ -304,13 +422,6 @@ import {
 import TextField from '@/components/widgets/TextField.vue'
 import TwoFactorAuthentication from '@/components/widgets/TwoFactorAuthentication.vue'
 
-defineProps({
-  showCancelButton: {
-    type: Boolean,
-    default: false
-  }
-})
-
 const { t } = useI18n()
 const store = useStore()
 
@@ -320,7 +431,10 @@ const twoFA = reactive({
   TOTPProvisionningUri: '',
   OTPSecret: '',
   OTPRecoveryCodes: null,
-  isLoading: false,
+  // Name of the action currently in flight (e.g. 'enableTOTP',
+  // 'preEnableEmailOTP') or null when idle. Each button checks for its own
+  // name so clicking on one TOTP action doesn't spin the rest.
+  loadingAction: null,
   TOTPPreEnabled: false,
   TOTPNeedTwoFA: false,
   emailOTPPreEnabled: false,
@@ -359,13 +473,6 @@ const twoFAEnabled = computed(
     user.value.fido_enabled
 )
 
-const twoFAVerificationNeeded = computed(
-  () =>
-    twoFA.TOTPNeedTwoFA ||
-    twoFA.emailOTPNeedTwoFA ||
-    twoFA.newRecoveryCodesNeedTwoFA
-)
-
 const twoFAButtonsDisabled = computed(
   () =>
     twoFA.TOTPPreEnabled ||
@@ -430,7 +537,7 @@ const removeTwoFactorErrors = () => {
 
 const enableTOTPRequested = () => {
   removeTwoFactorErrors()
-  twoFA.isLoading = true
+  twoFA.loadingAction = 'enableTOTP'
   store
     .dispatch('enableTOTP', twoFA.validationOTP)
     .then(OTPRecoveryCodes => {
@@ -445,13 +552,13 @@ const enableTOTPRequested = () => {
       else twoFA.error.enableTOTP = true
     })
     .finally(() => {
-      twoFA.isLoading = false
+      twoFA.loadingAction = null
     })
 }
 
 const preEnableTOTPRequested = () => {
   removeTwoFactorErrors()
-  twoFA.isLoading = true
+  twoFA.loadingAction = 'preEnableTOTP'
   twoFA.TOTPPreEnabled = false
   store
     .dispatch('preEnableTOTP')
@@ -464,7 +571,7 @@ const preEnableTOTPRequested = () => {
       twoFA.error.enableTOTP = true
     })
     .finally(() => {
-      twoFA.isLoading = false
+      twoFA.loadingAction = null
     })
 }
 
@@ -473,7 +580,7 @@ const disableTOTPRequested = payload => {
   if (!twoFA.TOTPNeedTwoFA) {
     twoFA.TOTPNeedTwoFA = true
   } else {
-    twoFA.isLoading = true
+    twoFA.loadingAction = 'disableTOTP'
     store
       .dispatch('disableTOTP', payload)
       .then(() => {
@@ -486,14 +593,14 @@ const disableTOTPRequested = payload => {
         else twoFA.error.disableTOTP = true
       })
       .finally(() => {
-        twoFA.isLoading = false
+        twoFA.loadingAction = null
       })
   }
 }
 
 const enableEmailOTPRequested = () => {
   removeTwoFactorErrors()
-  twoFA.isLoading = true
+  twoFA.loadingAction = 'enableEmailOTP'
   store
     .dispatch('enableEmailOTP', twoFA.validationOTP)
     .then(OTPRecoveryCodes => {
@@ -507,13 +614,13 @@ const enableEmailOTPRequested = () => {
       else twoFA.error.enableEmailOTP = true
     })
     .finally(() => {
-      twoFA.isLoading = false
+      twoFA.loadingAction = null
     })
 }
 
 const preEnableEmailOTPRequested = () => {
   removeTwoFactorErrors()
-  twoFA.isLoading = true
+  twoFA.loadingAction = 'preEnableEmailOTP'
   twoFA.emailOTPPreEnabled = false
   twoFA.OTPRecoveryCodes = null
   store
@@ -525,7 +632,7 @@ const preEnableEmailOTPRequested = () => {
       twoFA.error.enableEmailOTP = true
     })
     .finally(() => {
-      twoFA.isLoading = false
+      twoFA.loadingAction = null
     })
 }
 
@@ -535,7 +642,7 @@ const disableEmailOTPRequested = payload => {
   if (!twoFA.emailOTPNeedTwoFA) {
     twoFA.emailOTPNeedTwoFA = true
   } else {
-    twoFA.isLoading = true
+    twoFA.loadingAction = 'disableEmailOTP'
     store
       .dispatch('disableEmailOTP', payload)
       .then(() => {
@@ -548,7 +655,7 @@ const disableEmailOTPRequested = payload => {
         else twoFA.error.disableEmailOTP = true
       })
       .finally(() => {
-        twoFA.isLoading = false
+        twoFA.loadingAction = null
       })
   }
 }
@@ -562,7 +669,7 @@ const registerFIDORequested = () => {
   if (!twoFA.FIDONewDeviceName) return
 
   removeTwoFactorErrors()
-  twoFA.isLoading = true
+  twoFA.loadingAction = 'registerFIDO'
   store
     .dispatch('preRegisterFIDO')
     .then(publicKey => navigator.credentials.create({ publicKey }))
@@ -581,14 +688,14 @@ const registerFIDORequested = () => {
     })
     .finally(() => {
       twoFA.FIDOPreRegistered = false
-      twoFA.isLoading = false
+      twoFA.loadingAction = null
       twoFA.FIDONewDeviceName = ''
     })
 }
 
 const unregisterFIDORequested = deviceName => {
   removeTwoFactorErrors()
-  twoFA.isLoading = true
+  twoFA.loadingAction = 'unregisterFIDO'
   store
     .dispatch('unregisterFIDO', { deviceName })
     .then(() => {
@@ -600,7 +707,7 @@ const unregisterFIDORequested = deviceName => {
       else twoFA.error.unregisterFIDO = true
     })
     .finally(() => {
-      twoFA.isLoading = false
+      twoFA.loadingAction = null
     })
 }
 
@@ -609,7 +716,7 @@ const newRecoveryCodesRequested = payload => {
   if (!twoFA.newRecoveryCodesNeedTwoFA) {
     twoFA.newRecoveryCodesNeedTwoFA = true
   } else {
-    twoFA.isLoading = true
+    twoFA.loadingAction = 'newRecoveryCodes'
     store
       .dispatch('newRecoveryCodes', payload)
       .then(OTPRecoveryCodes => {
@@ -623,7 +730,7 @@ const newRecoveryCodesRequested = payload => {
         else twoFA.error.newRecoveryCodes = true
       })
       .finally(() => {
-        twoFA.isLoading = false
+        twoFA.loadingAction = null
       })
   }
 }
@@ -666,7 +773,7 @@ const cancelCurrentTwoFactorAuthAction = () => {
   twoFA.newRecoveryCodesNeedTwoFA = false
   twoFA.FIDOPreRegistered = false
   twoFA.FIDONewDeviceName = ''
-  twoFA.isLoading = false
+  twoFA.loadingAction = null
   twoFA.validationOTP = ''
   twoFA.error.isWrongOTP = false
   twoFA.error.enableTOTP = false
@@ -716,13 +823,23 @@ onUnmounted(() => {
   }
 }
 
-.qrcode {
+.qrcode-block {
+  text-align: center;
   margin-bottom: 1em;
-  margin-top: 1em;
 }
 
-.qrcode-informations {
-  text-align: center;
+.qrcode-frame {
+  display: inline-block;
+  margin: 0.5em 0;
+  padding: 1em;
+  background: $white;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  line-height: 0;
+}
+
+.qrcode-instruction {
+  margin-bottom: 0.5em;
 }
 
 .recovery-codes {
@@ -752,29 +869,149 @@ onUnmounted(() => {
   }
 }
 
-.cancel-two-factor-action {
-  text-align: right;
-  margin-bottom: 0.2em;
+.label-recovery-codes {
+  float: left;
+}
 
-  .action-icon {
-    float: none;
+.recovery-codes-panel {
+  margin-bottom: 1.5em;
+}
+
+.two-fa-flow {
+  border-top: 1px dashed var(--border);
+  margin-top: 0.5em;
+  padding-top: 1em;
+
+  .field {
+    margin-bottom: 1em;
   }
 }
 
-.label-recovery-codes {
-  float: left;
+.two-fa-flow-actions {
+  display: flex;
+  gap: 0.6em;
+  justify-content: flex-end;
+
+  .button {
+    flex: 0 0 auto;
+  }
+
+  .save-button {
+    width: auto;
+    min-width: 140px;
+  }
+}
+
+.cancel-flow-button {
+  border-radius: 8px;
+  background: transparent;
+  border-color: var(--border);
+  color: var(--text);
+
+  &:hover {
+    background: var(--background-hover);
+  }
 }
 
 .recovery-codes-warning {
   margin-bottom: 1em;
 }
 
-.disable-button {
-  border-radius: 2em;
-  width: 100%;
-  background: $red;
-  border-color: $red;
-  color: white;
+.two-fa-methods {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75em;
+  margin-bottom: 1.5em;
+}
+
+.two-fa-card {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1em 1.2em;
+  background: var(--background);
+}
+
+.two-fa-card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.7em;
+  margin-bottom: 0.4em;
+}
+
+.two-fa-card-icon {
+  color: var(--text);
+  flex-shrink: 0;
+}
+
+.two-fa-card-title {
+  font-weight: 600;
+  color: var(--text-strong);
+  flex: 1;
+  min-width: 0;
+}
+
+.two-fa-card-description {
+  color: var(--text);
+  font-size: 0.9em;
+  margin: 0 0 1em;
+}
+
+.two-fa-card-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: 0.8em;
+  color: var(--text);
+
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: $light-grey;
+  }
+
+  &.is-enabled .status-dot {
+    background: $green;
+  }
+}
+
+.two-fa-action {
+  border-radius: 8px;
+  font-weight: 500;
+  min-width: 140px;
+
+  &.enable-action {
+    background: $green;
+    border-color: $green;
+    color: $white;
+
+    &:hover:not(.is-disabled) {
+      background: $light-green;
+      border-color: $light-green;
+    }
+  }
+
+  &.disable-action {
+    background: transparent;
+    border-color: $red;
+    color: $red;
+
+    &:hover:not(.is-disabled) {
+      background: $red;
+      color: $white;
+    }
+  }
+}
+
+.card-error {
+  margin-top: 0.6em;
+  margin-bottom: 0;
+  font-size: 0.85em;
 }
 
 .show-message {
diff --git a/src/composables/skeleton.js b/src/composables/skeleton.js
new file mode 100644
index 0000000000..bcafdd509a
--- /dev/null
+++ b/src/composables/skeleton.js
@@ -0,0 +1,29 @@
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const STAGGER_MS = 150
+const APPEAR_MS = 400
+const HOLD_MS = 300
+const FADEOUT_MS = 350
+const GAP_MS = 150
+
+export const useSkeletonCycle = countRef => {
+  const fadeoutDelayMs = computed(
+    () => (countRef.value - 1) * STAGGER_MS + APPEAR_MS + HOLD_MS
+  )
+  const cycleMs = computed(() => fadeoutDelayMs.value + FADEOUT_MS + GAP_MS)
+
+  const cycle = ref(0)
+  let timer = null
+
+  onMounted(() => {
+    timer = setInterval(() => {
+      cycle.value++
+    }, cycleMs.value)
+  })
+
+  onBeforeUnmount(() => {
+    if (timer) clearInterval(timer)
+  })
+
+  return { cycle, fadeoutDelayMs }
+}
diff --git a/src/locales/en.js b/src/locales/en.js
index f8fd77dd8d..d7444a0a90 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -848,6 +848,7 @@ export default {
     tutorials: 'Tutorials',
     type: 'Type',
     unassigned: 'Unassigned',
+    unknown: 'Unknown',
     unstick: 'Unstick',
     user: 'User',
     week: 'Week',
@@ -940,6 +941,7 @@ export default {
     hide_stats: 'Hide stats',
     news: 'news',
     no_news: 'There is no news.',
+    no_news_hint: 'Try widening the filters or come back later.',
     set_preview_on: 'set preview on',
     show_stats: 'Show stats',
     task_status: 'Task status',
@@ -977,6 +979,7 @@ export default {
     only_unread: 'Only unread',
     only_watching: 'Only watching',
     read: 'read',
+    to_status: 'to',
     reply: 'Reply',
     replied_on: 'replied to a comment',
     playlist_is_ready: 'Playlist is ready',
@@ -1140,6 +1143,9 @@ export default {
       generate: 'Generate a new link',
       copy: 'Copy link',
       revoke: 'Revoke link',
+      revoke_confirm: 'Revoke this link? Anyone using it will lose access.',
+      no_links: 'No share links yet. Create one below to give external reviewers access.',
+      add_link: 'Add a new link',
       invite: 'Invite by email',
       invite_recipients: 'Recipients',
       invite_placeholder: 'Type an email and press Enter, or pick a client',
@@ -1418,6 +1424,7 @@ export default {
     clear_avatar: 'Remove avatar',
     info_title: 'Information',
     language: 'Language',
+    notifications_title: 'Notifications',
     notifications_enabled: 'Email notifications enabled',
     notifications_slack_enabled: 'Slack notifications enabled',
     notifications_slack_user: 'Slack member ID',
@@ -1432,6 +1439,11 @@ export default {
     avatar: {
       title: 'Change avatar',
       error_upload: 'There was an error while uploading picture.',
+      intro: 'Pick a photo, then drag and zoom to frame it.',
+      drop_or_click: 'Click or drop a photo here',
+      preview: 'Preview',
+      preview_hint: 'Drag to reposition, use the slider to zoom.',
+      replace: 'Choose another photo',
       updating: 'Updating...',
       removing: 'Removing...'
     },
@@ -1446,9 +1458,13 @@ export default {
       description: 'Two-factor authentication (<abbr title="Two-Factor Authentication">2FA</abbr>) adds an extra layer of security to your account. When enabled, you will need to provide a second form of verification in addition to your password each time you log in. You can use an authenticator app (<abbr title="Time-based One-Time Password">TOTP</abbr>), email verification (<abbr title="One-Time Password">OTP</abbr>), or a hardware security key (<abbr title="Fast IDentity Online">FIDO</abbr>) as your second factor.',
       mandatory: 'Your organization requires two-factor authentication. Please enable at least one method to continue.',
       enabled: 'Two-factor authentication enabled',
+      status_enabled: 'Enabled',
+      status_disabled: 'Disabled',
       scan_qrcode: 'Please scan this QR code in your TOTP application.',
       otp_secret: 'OTP secret',
       totp: {
+        name: 'Authenticator app',
+        description: 'Use a TOTP app like Google Authenticator, Authy or 1Password.',
         button_enable: 'Enable TOTP',
         button_disable: 'Disable TOTP',
         button_validate_disable: 'Validate and disable TOTP',
@@ -1457,6 +1473,8 @@ export default {
         error_disable: 'An error occurred while disabling TOTP.'
       },
       email_otp: {
+        name: 'Email',
+        description: 'Receive a one-time code by email each time you sign in.',
         button_enable: 'Enable OTP via email',
         button_disable: 'Disable OTP via email',
         button_validate_disable: 'Validate and disable OTP via email',
@@ -1465,6 +1483,8 @@ export default {
         error_disable: 'An error occurred while disabling OTP via email.'
       },
       fido: {
+        name: 'Security key',
+        description: 'Use a hardware key (YubiKey) or a platform authenticator (Touch ID, Windows Hello).',
         device_name: 'FIDO device name',
         registered_devices_title: 'Registered FIDO devices:',
         button_register: 'Register new FIDO device',
@@ -1492,6 +1512,7 @@ export default {
     import_from_production: 'Import from another production',
     logo: 'Studio logo',
     no_logo: 'There is no logo set.',
+    preferences_title: 'Preferences',
     no_more_available_items: 'There are no more items available to add.',
     remove_logo: 'Remove studio logo',
     set_logo: 'Set studio logo',
diff --git a/src/locales/fr.json b/src/locales/fr.json
index fe5383d001..fde68c50e2 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -462,6 +462,7 @@
       "stick": "Coller",
       "timeSpent": "Temps passé",
       "unstick": "Décoller",
+      "unknown": "Inconnu",
       "all_edits": "Tous les edits",
       "attach_snapshots": "Attacher les snapshots de vos annotations",
       "reply": "Répondre",
@@ -577,6 +578,7 @@
       "commented_on": "a commenté sur",
       "infos": "Info",
       "no_news": "Il n'y a pas d'actualités.",
+      "no_news_hint": "Essayez d'élargir les filtres ou revenez plus tard.",
       "only_comments": "Seulement les commentaires",
       "only_previews": "Seulement les previews",
       "set_preview_on": "a mis un preview sur",
@@ -619,6 +621,7 @@
       "only_unread": "Uniquement non lu",
       "only_watching": "Ne faire que regarder",
       "read": "lire",
+      "to_status": "à",
       "reply": "Répondre",
       "publish": "Publier",
       "published": "a publié un aperçu",
@@ -1001,6 +1004,7 @@
       "change_avatar": "Changer Avatar",
       "info_title": "Informations",
       "language": "Langue",
+      "notifications_title": "Notifications",
       "notifications_enabled": "Notifications email activées",
       "notifications_slack_enabled": "Notifications Slack activées",
       "notifications_slack_user": "ID member Slack",
@@ -1010,6 +1014,11 @@
       "avatar": {
         "title": "Changer votre avatar",
         "error_upload": "Une erreur est survenue en envoyant l'image.",
+        "intro": "Choisissez une photo, puis glissez et zoomez pour la cadrer.",
+        "drop_or_click": "Cliquez ou déposez une photo ici",
+        "preview": "Aperçu",
+        "preview_hint": "Glissez pour repositionner, utilisez le curseur pour zoomer.",
+        "replace": "Choisir une autre photo",
         "updating": "Mise à jour...",
         "removing": "Enlever..."
       },
@@ -1031,9 +1040,13 @@
       "clear_avatar": "Effacer avatar",
       "two_factor_authentication": {
         "title": "Authentification double facteur",
+        "status_enabled": "Activée",
+        "status_disabled": "Désactivée",
         "scan_qrcode": "Scannez le code QR dans votre application TOTP.",
         "otp_secret": "Secret OPT",
         "totp": {
+          "name": "Application d'authentification",
+          "description": "Utilisez une application TOTP comme Google Authenticator, Authy ou 1Password.",
           "button_enable": "Activer TOTP",
           "button_disable": "Désactiver TOTP",
           "button_validate_disable": "Valider et désactiver TOTP",
@@ -1042,6 +1055,8 @@
           "error_disable": "Une erreur est survenue en désactivant TOTP."
         },
         "email_otp": {
+          "name": "E-mail",
+          "description": "Recevez un code à usage unique par e-mail à chaque connexion.",
           "button_enable": "Activez l'authentification OTP par email",
           "button_disable": "Désactivez l'authentification OTP par email",
           "button_validate_disable": "Validez et désactivez l'authentification OTP par email",
@@ -1057,6 +1072,8 @@
           "error_new": "Une erreur est survenue en générant les nouveaux codes de récupération."
         },
         "fido": {
+          "name": "Clé de sécurité",
+          "description": "Utilisez une clé matérielle (YubiKey) ou un authentificateur intégré (Touch ID, Windows Hello).",
           "device_name": "Nom de l'appareil FIDO",
           "registered_devices_title": "Appareils FIDO enregistrés",
           "button_register": "Enregistrer un nouvel appareil FIDO",
@@ -1073,6 +1090,7 @@
       "integrations": "Intégrations",
       "logo": "Logo du studio",
       "no_logo": "Aucun logo n' a été positionné.",
+      "preferences_title": "Préférences",
       "set_logo": "Changer le logo",
       "title": "Paramètres",
       "fields": {
diff --git a/src/store/api/people.js b/src/store/api/people.js
index bc5f44667d..3fd6c2f0ca 100644
--- a/src/store/api/people.js
+++ b/src/store/api/people.js
@@ -1,6 +1,8 @@
 import client from '@/store/api/client'
 import { buildQueryString } from '@/lib/query'
 
+const toBool = value => value === true || value === 'true'
+
 export default {
   getOrganisations() {
     return client.pget('/api/data/organisations')
@@ -93,15 +95,16 @@ export default {
       position: person.position,
       seniority: person.seniority,
       daily_salary: person.daily_salary,
-      notifications_enabled: person.notifications_enabled === 'true',
-      notifications_slack_enabled:
-        person.notifications_slack_enabled === 'true',
+      notifications_enabled: toBool(person.notifications_enabled),
+      notifications_slack_enabled: toBool(person.notifications_slack_enabled),
       notifications_slack_userid: person.notifications_slack_userid,
-      notifications_mattermost_enabled:
-        person.notifications_mattermost_enabled === 'true',
+      notifications_mattermost_enabled: toBool(
+        person.notifications_mattermost_enabled
+      ),
       notifications_mattermost_userid: person.notifications_mattermost_userid,
-      notifications_discord_enabled:
-        person.notifications_discord_enabled === 'true',
+      notifications_discord_enabled: toBool(
+        person.notifications_discord_enabled
+      ),
       notifications_discord_userid: person.notifications_discord_userid,
       departments: person.departments,
       studio_id: person.studio_id
diff --git a/src/store/modules/tasks.js b/src/store/modules/tasks.js
index 31f1e79204..f8d0fe9f38 100644
--- a/src/store/modules/tasks.js
+++ b/src/store/modules/tasks.js
@@ -1,3 +1,5 @@
+import * as Sentry from '@sentry/vue'
+
 import tasksApi from '@/store/api/tasks'
 import peopleApi from '@/store/api/people'
 import playlistsApi from '@/store/api/playlists'
@@ -638,10 +640,18 @@ const actions = {
         return preview
       })
       .catch(err => {
-        console.error(err)
-        alert(
-          'An error occurred while saving your annotation, please wait 3s for another try.'
-        )
+        Sentry.captureException(err, {
+          tags: { feature: 'annotations' },
+          extra: {
+            previewId: preview?.id,
+            taskId,
+            additionsCount: additions?.length || 0,
+            updatesCount: updates?.length || 0,
+            deletionsCount: deletions?.length || 0,
+            status: err?.response?.status
+          }
+        })
+        throw err
       })
   },
 
@@ -1083,7 +1093,9 @@ const mutations = {
           }
         })
         if (p.id === preview.id) {
-          p.annotations = annotations
+          if (annotations) {
+            p.annotations = annotations
+          }
           p.status = preview.status
         }
       })
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 0a2f1e2e7a..7965544142 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -173,7 +173,7 @@ const getters = {
 const actions = {
   saveProfile({ commit, state }, payload) {
     commit(USER_SAVE_PROFILE_LOADING)
-    peopleApi
+    return peopleApi
       .updatePerson(payload.form)
       .then(() => {
         payload.form.id = state.user.id
@@ -182,6 +182,7 @@ const actions = {
       .catch(err => {
         console.error(err)
         commit(USER_SAVE_PROFILE_ERROR)
+        throw err
       })
   },
 
@@ -312,8 +313,8 @@ const actions = {
     return tasks
   },
 
-  async uploadAvatar({ commit, state }) {
-    await peopleApi.postAvatar(state.user.id, state.avatarFormData)
+  async uploadAvatar({ commit, state }, formData) {
+    await peopleApi.postAvatar(state.user.id, formData || state.avatarFormData)
     commit(UPLOAD_AVATAR_END, state.user.id)
   },
 
diff --git a/src/variables.scss b/src/variables.scss
index 8bad40507b..631232fece 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -1,107 +1,108 @@
 $black: #202225;
-$dark-grey-lightest: #5E6169;
-$dark-grey-lighter: #4E5159;
-$dark-grey-lightmore: #46494F;
-$dark-grey-light: #3D4048;
-$dark-grey: #25282E;
-$dark-grey-2: #36393F;
+$dark-grey-lightest: #5e6169;
+$dark-grey-lighter: #4e5159;
+$dark-grey-lightmore: #46494f;
+$dark-grey-light: #3d4048;
+$dark-grey: #25282e;
+$dark-grey-2: #36393f;
 $dark-grey-strong: #222427;
 $dark-grey-stronger: #121417;
-$purple-grey: #4A4A6F;
-$white-grey: #EEE;
-$white-grey-light: #F9F9F9;
-$white: #FEFEFE;
-$light-grey-light: #DDD;
-$light-grey: #CCC;
-$light-grey-2: #BBB;
-$mid-grey: #56595F;
-$orange: #F57F77;
-$orange-carrot: #E67E22;
-$orange-light: #FFEAEA;
+$purple-grey: #4a4a6f;
+$white-grey: #eee;
+$white-grey-light: #f9f9f9;
+$white: #fefefe;
+$light-grey-light: #ddd;
+$light-grey: #ccc;
+$light-grey-2: #bbb;
+$mid-grey: #56595f;
+$orange: #f57f77;
+$orange-carrot: #e67e22;
+$orange-light: #ffeaea;
 $grey: #999;
 $grey-strong: #666;
-$green: #00B242;
+$green: #00b242;
 $dark-green: #008732;
-$light-green: #67BE4B;
-$light-green-light: #CCFFCC;
-$light-green-lightest: #F0FFF0;
-$red: #FF3860;
-$dark-red: #DA002C;
-$pink-light: #FFC9D0;
-$pink: #FF69C0;
-$pink-strong: #FF49A0;
-$light-purple: #F1E4FF;
-$purple: #CFD1FF;
-$purple-strong: #8F91EB;
-$dark-purple: #5E60BA;
-$dark-purple-strong: #4A4A6F;
-$blue-light: #92A9FA;
-$blue: #7289DA;
-$yellow: #FFC107;
-
+$light-green: #67be4b;
+$light-green-light: #ccffcc;
+$light-green-lightest: #f0fff0;
+$red: #ff3860;
+$dark-red: #da002c;
+$pink-light: #ffc9d0;
+$pink: #ff69c0;
+$pink-strong: #ff49a0;
+$light-purple: #f1e4ff;
+$purple: #cfd1ff;
+$purple-strong: #8f91eb;
+$dark-purple: #5e60ba;
+$dark-purple-strong: #4a4a6f;
+$blue-light: #92a9fa;
+$blue: #7289da;
+$yellow: #ffc107;
 
 :root {
-  --background: #FFFFFF;
+  --background: #ffffff;
   --background-rgb: 255, 255, 255;
-  --background-alt: #F6F6F6;
-  --background-alt-2: #FFF;
+  --background-alt: #f6f6f6;
+  --background-alt-2: #fff;
   --background-alt-rgb: 246, 246, 246;
-  --background-block: #FFFFFF;
-  --background-page: #F6F6F6;
-  --background-hover: #EFEFEF;
+  --background-block: #ffffff;
+  --background-page: #f6f6f6;
+  --background-hover: #efefef;
   --background-hover-rgb: 240, 255, 240;
-  --background-tag:  #EEE;
-  --background-tag-button: #F9F9F9;
-  --background-selectable: #E3E6FF;
+  --background-tag: #eee;
+  --background-tag-button: #f9f9f9;
+  --background-selectable: #e3e6ff;
   --background-selectable-rgb: 227, 230, 255;
-  --background-selected: #CECEFE;
-  --background-disabled: #DDD;
-  --background-panel: #F4F4F4;
-  --border: #DBDBDB;
+  --background-selected: #cecefe;
+  --background-disabled: #ddd;
+  --background-panel: #f4f4f4;
+  --border: #dbdbdb;
   --border-rgb: 219, 219, 219;
-  --border-alt: #DBDBDB;
-  --box-shadow: #DDD;
-  --box-shadow-alt: #EEE;
-  --text: #7A7A7A;
+  --border-alt: #dbdbdb;
+  --skeleton-rgb: 200, 200, 200;
+  --box-shadow: #ddd;
+  --box-shadow-alt: #eee;
+  --text: #7a7a7a;
   --text-alt: #888;
   --text-strong: $black;
-  --text-selectable: #9FA2FB;
-  --text-selected: #8F91EB;
+  --text-selectable: #9fa2fb;
+  --text-selected: #8f91eb;
   --poster-color: #000;
-  --purple: #CFD1FF;
-  --shared-color: #F9E04B;
+  --purple: #cfd1ff;
+  --shared-color: #f9e04b;
 }
 
 .dark {
-  --background: #36393F;
+  --background: #36393f;
   --background-rgb: 54, 57, 63;
-  --background-alt: #46494F;
-  --background-alt-2: #46494F;
+  --background-alt: #46494f;
+  --background-alt-2: #46494f;
   --background-alt-rgb: 70, 73, 79;
-  --background-block: #46494F;
-  --background-hover: #4F525A;
+  --background-block: #46494f;
+  --background-hover: #4f525a;
   --background-hover-rgb: 94, 97, 105;
-  --background-page: #36393F;
-  --background-tag:  #36393F;
-  --background-tag-button: #4E5159;
-  --background-selectable: #7375BC;
-  --background-selectable-alt: #878B97;
-  --background-selected: #5E60BA;
-  --background-disabled: #25282E;
-  --background-panel: #25282E;
-  --border: #25282E;
+  --background-page: #36393f;
+  --background-tag: #36393f;
+  --background-tag-button: #4e5159;
+  --background-selectable: #7375bc;
+  --background-selectable-alt: #878b97;
+  --background-selected: #5e60ba;
+  --background-disabled: #25282e;
+  --background-panel: #25282e;
+  --border: #25282e;
   --border-rgb: 37, 40, 46;
   --border-alt: #666666;
+  --skeleton-rgb: 170, 170, 170;
   --box-shadow: #2226;
   --box-shadow-alt: #2226;
-  --text: #EEEEEE;
-  --text-alt: #EEEEEE;
-  --text-strong: #FEFEFE;
-  --text-selectable: #BEC0FA;
-  --text-selected: #9EA0FA;
-  --purple: #5E60BA;
+  --text: #eeeeee;
+  --text-alt: #eeeeee;
+  --text-strong: #fefefe;
+  --text-selectable: #bec0fa;
+  --text-selected: #9ea0fa;
+  --purple: #5e60ba;
 }
 
 .dp__theme_dark {
-  --dp-background-color: #26292F;
+  --dp-background-color: #26292f;
 }