diff --git a/src/App.vue b/src/App.vue
index f1bfbea668..4119dcf6c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1649,7 +1649,17 @@ tbody:last-child .empty-line:last-child {
     text-transform: uppercase;
     top: 0;
     vertical-align: middle;
-    z-index: 2;
+    // Header z-index hierarchy is built around the body taglist metadata
+    // cells which bump their own z-index up to 1000 so the open combo
+    // dropdown can spill over the next row (see td.metadata-descriptor
+    // inline z-index in AssetList.vue / ShotList.vue):
+    //   body taglist               ≤ 1000
+    //   body sticky-left            1001  (.datatable-row-header)
+    //   header non-sticky           1002  (this rule)
+    //   header sticky-left          1003  (.datatable-head .datatable-row-header)
+    // The +1 between body sticky-left and header non-sticky breaks the
+    // document-order tie at the vertical-scroll seam.
+    z-index: 1002;
 
     a {
       color: var(--text-alt);
@@ -1700,7 +1710,7 @@ tbody:last-child .empty-line:last-child {
   }
 
   .datatable-row-header {
-    z-index: 4;
+    z-index: 1003;
   }
   .header-icon {
     visibility: hidden;
@@ -1894,7 +1904,7 @@ tbody:last-child .empty-line:last-child {
 .datatable-row-header {
   position: sticky;
   left: 0;
-  z-index: 1;
+  z-index: 1001;
   border-right: 1px solid rgba(var(--border-rgb), 0.5);
 
   &::after {
diff --git a/src/components/cells/BooleanCell.vue b/src/components/cells/BooleanCell.vue
index f80242e805..fbb3c80950 100644
--- a/src/components/cells/BooleanCell.vue
+++ b/src/components/cells/BooleanCell.vue
@@ -4,23 +4,12 @@
   </td>
 </template>
 
-<script>
+<script setup>
 import BooleanRep from '@/components/widgets/BooleanRep.vue'
 
-export default {
-  name: 'boolean-cell',
-
-  components: {
-    BooleanRep
-  },
-
-  props: {
-    value: {
-      default: false,
-      type: Boolean
-    }
-  }
-}
+defineProps({
+  value: { type: Boolean, default: false }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/DepartmentNamesCell.vue b/src/components/cells/DepartmentNamesCell.vue
index 01b33106c4..a166ce7ba7 100644
--- a/src/components/cells/DepartmentNamesCell.vue
+++ b/src/components/cells/DepartmentNamesCell.vue
@@ -8,37 +8,27 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import { sortByName } from '@/lib/sorting'
 
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 
-export default {
-  name: 'department-names-cell',
+const store = useStore()
 
-  components: {
-    DepartmentName
-  },
+const props = defineProps({
+  departments: { type: Array, default: () => [] }
+})
 
-  props: {
-    departments: {
-      type: Array,
-      default: () => []
-    }
-  },
+const departmentMap = computed(() => store.getters.departmentMap)
 
-  computed: {
-    ...mapGetters(['departmentMap']),
-
-    sortedDepartments() {
-      return sortByName(
-        this.departments
-          .map(departmentId => this.departmentMap.get(departmentId))
-          .filter(Boolean)
-      )
-    }
-  }
-}
+const sortedDepartments = computed(() =>
+  sortByName(
+    props.departments
+      .map(departmentId => departmentMap.value.get(departmentId))
+      .filter(Boolean)
+  )
+)
 </script>
diff --git a/src/components/cells/DescriptionCell.vue b/src/components/cells/DescriptionCell.vue
index 195ff8fc0a..623285617e 100644
--- a/src/components/cells/DescriptionCell.vue
+++ b/src/components/cells/DescriptionCell.vue
@@ -47,98 +47,73 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, nextTick, ref } from 'vue'
+import { useStore } from 'vuex'
 
 import { renderMarkdown } from '@/lib/render'
 import stringHelpers from '@/lib/string'
 
-export default {
-  name: 'description-cell',
-
-  data() {
-    return {
-      isEditing: false,
-      isOpen: false,
-      tooltipPosition: { top: 0, left: 0 }
-    }
-  },
-
-  props: {
-    editable: {
-      type: Boolean,
-      default: false
-    },
-    entry: {
-      type: Object,
-      default: () => {}
-    },
-    full: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['description-changed'],
-
-  computed: {
-    ...mapGetters(['isDarkTheme']),
-
-    tooltipStyle() {
-      return {
-        top: this.tooltipPosition.top + 'px',
-        left: this.tooltipPosition.left + 'px'
-      }
-    }
-  },
-
-  methods: {
-    renderMarkdown,
-
-    shortenText: stringHelpers.shortenText,
-
-    onClick(event) {
-      if (
-        (event.currentTarget.classList.contains('description-cell') &&
-          !event.target.closest('.description-cell .tooltip')) ||
-        event.keyCode === 27
-      ) {
-        this.isOpen = !this.isOpen
-        if (this.isOpen) {
-          const td = event.currentTarget
-          const rect = td.getBoundingClientRect()
-          const scrollTop =
-            window.pageYOffset || document.documentElement.scrollTop
-          const scrollLeft =
-            window.pageXOffset || document.documentElement.scrollLeft
-          this.tooltipPosition = {
-            top: rect.top + scrollTop - 105,
-            left: rect.left + scrollLeft + rect.width / 2 - 160
-          }
-        } else if (this.isEditing) {
-          this.isEditing = false
-          const val = this.$refs.text.value
-          this.$emit('description-changed', val)
-        }
-      }
-    },
-
-    onDoubleClick() {
-      if (this.editable) {
-        if (this.isEditing) {
-          const val = this.$refs.text.value
-          this.$emit('description-changed', val)
-        }
-        this.isEditing = !this.isEditing
-        if (this.isEditing) {
-          this.$nextTick(() => {
-            this.$refs.text.focus()
-          })
-        }
+const store = useStore()
+
+const props = defineProps({
+  editable: { type: Boolean, default: false },
+  entry: { type: Object, default: () => ({}) },
+  full: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['description-changed'])
+
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+
+const isEditing = ref(false)
+const isOpen = ref(false)
+const text = ref(null)
+const tooltipPosition = ref({ top: 0, left: 0 })
+
+const tooltipStyle = computed(() => ({
+  top: tooltipPosition.value.top + 'px',
+  left: tooltipPosition.value.left + 'px'
+}))
+
+const shortenText = stringHelpers.shortenText
+
+const onClick = event => {
+  if (
+    (event.currentTarget.classList.contains('description-cell') &&
+      !event.target.closest('.description-cell .tooltip')) ||
+    event.keyCode === 27
+  ) {
+    isOpen.value = !isOpen.value
+    if (isOpen.value) {
+      const td = event.currentTarget
+      const rect = td.getBoundingClientRect()
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      const scrollLeft =
+        window.pageXOffset || document.documentElement.scrollLeft
+      tooltipPosition.value = {
+        top: rect.top + scrollTop - 105,
+        left: rect.left + scrollLeft + rect.width / 2 - 160
       }
+    } else if (isEditing.value) {
+      isEditing.value = false
+      emit('description-changed', text.value.value)
     }
   }
 }
+
+const onDoubleClick = () => {
+  if (!props.editable) return
+  if (isEditing.value) {
+    emit('description-changed', text.value.value)
+  }
+  isEditing.value = !isEditing.value
+  if (isEditing.value) {
+    nextTick(() => {
+      text.value.focus()
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/LastCommentCell.vue b/src/components/cells/LastCommentCell.vue
index 21d9bee208..d4ca01ca4f 100644
--- a/src/components/cells/LastCommentCell.vue
+++ b/src/components/cells/LastCommentCell.vue
@@ -27,49 +27,25 @@
   </td>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+
 import { renderMarkdown } from '@/lib/render'
 
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 
-export default {
-  name: 'last-comment-cell',
-
-  emits: ['click'],
-
-  components: {
-    PeopleAvatar
-  },
+const props = defineProps({
+  task: { type: Object, required: true }
+})
 
-  data() {
-    return {
-      timeout: null
-    }
-  },
+defineEmits(['click'])
 
-  props: {
-    task: {
-      type: Object,
-      required: true
-    }
-  },
-
-  computed: {
-    commentText() {
-      const text = this.task.last_comment.text
-      const maxLength = 140
-      let result = text || ''
-      if (text !== undefined && text.length > maxLength) {
-        result = text.slice(0, maxLength) + '...'
-      }
-      return result
-    }
-  },
-
-  methods: {
-    renderMarkdown
-  }
-}
+const commentText = computed(() => {
+  const text = props.task.last_comment.text
+  const maxLength = 140
+  if (text === undefined) return ''
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/MetadataInput.vue b/src/components/cells/MetadataInput.vue
index 3a985cd2d1..a188cfd808 100644
--- a/src/components/cells/MetadataInput.vue
+++ b/src/components/cells/MetadataInput.vue
@@ -292,6 +292,16 @@ const onNumberFieldKeyDown = event => {
     width: 1.15rem;
   }
 
+  &[type='number'] {
+    -moz-appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
   &:active,
   &:focus,
   &:hover {
diff --git a/src/components/cells/PeopleNameCell.vue b/src/components/cells/PeopleNameCell.vue
index 5aae820af7..91700f087b 100644
--- a/src/components/cells/PeopleNameCell.vue
+++ b/src/components/cells/PeopleNameCell.vue
@@ -7,25 +7,13 @@
   </td>
 </template>
 
-<script>
+<script setup>
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 
-export default {
-  name: 'people-name-cell',
-
-  components: {
-    PeopleAvatar,
-    PeopleName
-  },
-
-  props: {
-    person: {
-      type: Object,
-      required: true
-    }
-  }
-}
+defineProps({
+  person: { type: Object, required: true }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/StatsCell.vue b/src/components/cells/StatsCell.vue
index 1b9daa7c24..82b45e2e2d 100644
--- a/src/components/cells/StatsCell.vue
+++ b/src/components/cells/StatsCell.vue
@@ -40,7 +40,7 @@
   </td>
 </template>
 
-<script>
+<script setup>
 /**
  * Components to display statistics as a pie or as text depending on the
  * selected display mode. Stats are based on count data (nb of shots or assets)
@@ -48,75 +48,32 @@
  * Data format:
  * [['name', count, 'color'], ...  ]
  */
-export default {
-  name: 'stats-cell',
+import { computed } from 'vue'
 
-  props: {
-    colors: {
-      type: Array,
-      required: true
-    },
-    countMode: {
-      type: String,
-      default: 'count'
-    },
-    data: {
-      type: Array,
-      default: () => []
-    },
-    displayMode: {
-      type: String,
-      default: 'pie'
-    },
-    drawingsData: {
-      type: Array,
-      default: () => []
-    },
-    framesData: {
-      type: Array,
-      default: () => []
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    labelColor: {
-      type: String,
-      default: '#e67e22'
-    }
-  },
+const props = defineProps({
+  colors: { type: Array, required: true },
+  countMode: { type: String, default: 'count' },
+  data: { type: Array, default: () => [] },
+  displayMode: { type: String, default: 'pie' },
+  drawingsData: { type: Array, default: () => [] },
+  framesData: { type: Array, default: () => [] },
+  label: { type: String, default: '' },
+  labelColor: { type: String, default: '#e67e22' }
+})
 
-  computed: {
-    selectedData() {
-      if (this.countMode === 'frames') {
-        return this.framesData
-      } else if (this.countMode === 'drawings') {
-        return this.drawingsData
-      } else {
-        return this.data
-      }
-    },
+const selectedData = computed(() => {
+  if (props.countMode === 'frames') return props.framesData
+  if (props.countMode === 'drawings') return props.drawingsData
+  return props.data
+})
 
-    total() {
-      return this.selectedData.reduce((acc, entry) => {
-        if (entry[1]) {
-          return acc + entry[1]
-        } else {
-          return acc
-        }
-      }, 0)
-    }
-  },
+const total = computed(() =>
+  selectedData.value.reduce((acc, entry) => acc + (entry[1] || 0), 0)
+)
 
-  methods: {
-    percent(value) {
-      let percent = 0
-      if (this.total > 0) {
-        percent = (value / this.total) * 100
-      }
-      return percent.toFixed(2)
-    }
-  }
+const percent = value => {
+  if (total.value === 0) return '0.00'
+  return ((value / total.value) * 100).toFixed(2)
 }
 </script>
 
diff --git a/src/components/cells/TaskStatusCell.vue b/src/components/cells/TaskStatusCell.vue
index 5972185458..d0956ff04d 100644
--- a/src/components/cells/TaskStatusCell.vue
+++ b/src/components/cells/TaskStatusCell.vue
@@ -14,43 +14,28 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'task-status-cell',
+const store = useStore()
 
-  props: {
-    entry: {
-      type: Object,
-      default: () => {}
-    },
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  },
+const props = defineProps({
+  disable: { type: Boolean, default: false },
+  entry: { type: Object, default: () => ({}) }
+})
 
-  computed: {
-    ...mapGetters(['isDarkTheme']),
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
 
-    color() {
-      if (this.entry.name === 'Todo' && this.isDarkTheme) {
-        return '#5F626A'
-      } else {
-        return this.entry.color
-      }
-    },
+const color = computed(() =>
+  props.entry.name === 'Todo' && isDarkTheme.value
+    ? '#5F626A'
+    : props.entry.color
+)
 
-    textColor() {
-      if (this.entry.name === 'Todo' && !this.isDarkTheme) {
-        return '#333'
-      } else {
-        return 'white'
-      }
-    }
-  }
-}
+const textColor = computed(() =>
+  props.entry.name === 'Todo' && !isDarkTheme.value ? '#333' : 'white'
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/TaskTypeCell.vue b/src/components/cells/TaskTypeCell.vue
index bb1309a816..fd51542a89 100644
--- a/src/components/cells/TaskTypeCell.vue
+++ b/src/components/cells/TaskTypeCell.vue
@@ -10,35 +10,15 @@
   </td>
 </template>
 
-<script>
+<script setup>
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 
-export default {
-  name: 'task-type-cell',
-
-  components: {
-    TaskTypeName
-  },
-
-  props: {
-    taskId: {
-      type: String,
-      default: null
-    },
-    taskType: {
-      type: Object,
-      default: null
-    },
-    productionId: {
-      type: String,
-      default: null
-    },
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
+defineProps({
+  disable: { type: Boolean, default: false },
+  productionId: { type: String, default: null },
+  taskId: { type: String, default: null },
+  taskType: { type: Object, default: null }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/TimeSliderCell.vue b/src/components/cells/TimeSliderCell.vue
index c0148f98bd..15aae04bd4 100644
--- a/src/components/cells/TimeSliderCell.vue
+++ b/src/components/cells/TimeSliderCell.vue
@@ -29,91 +29,51 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
 import VueSlider from 'vue-3-slider-component'
+import { computed, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'time-slider-cell',
+const store = useStore()
 
-  data() {
-    return {
-      value: this.duration,
-      marks: {
-        0: {
-          label: '0',
-          labelStyle: { fontSize: '.6em', top: '3px', left: '1px' }
-        },
-        2: { label: '' },
-        4: {
-          label: '4',
-          labelStyle: { fontSize: '.6em', top: '3px', left: '1px' }
-        },
-        6: { label: '' },
-        8: {
-          label: '8',
-          labelStyle: { fontSize: '.6em', top: '3px', left: '1px' }
-        },
-        10: { label: '' },
-        12: {
-          label: '12',
-          labelStyle: { fontSize: '.6em', top: '3px', left: '1px' }
-        }
-      }
-    }
-  },
+const props = defineProps({
+  duration: { type: Number, default: 0 },
+  taskId: { type: String, default: '' }
+})
 
-  components: {
-    VueSlider
-  },
+const emit = defineEmits(['change'])
 
-  props: {
-    taskId: {
-      type: String,
-      default: ''
-    },
-    duration: {
-      type: Number,
-      default: 0
-    }
-  },
-
-  emits: ['change'],
-
-  computed: {
-    ...mapGetters(['organisation']),
-
-    hoursByDay() {
-      return this.organisation.hours_by_day || 8
-    },
+const labelStyle = { fontSize: '.6em', top: '3px', left: '1px' }
+const marks = {
+  0: { label: '0', labelStyle },
+  2: { label: '' },
+  4: { label: '4', labelStyle },
+  6: { label: '' },
+  8: { label: '8', labelStyle },
+  10: { label: '' },
+  12: { label: '12', labelStyle }
+}
+const stepStyle = {
+  display: 'block',
+  borderRadius: 0,
+  height: '10px',
+  width: '4px',
+  top: '-1px',
+  backgroundColor: 'gray'
+}
 
-    stepStyle() {
-      return {
-        display: 'block',
-        borderRadius: 0,
-        height: '10px',
-        width: '4px',
-        top: '-1px',
-        backgroundColor: 'gray'
-      }
-    }
-  },
+const value = ref(props.duration)
 
-  methods: {
-    setValue(value) {
-      this.value = value || 0
-    }
-  },
+const organisation = computed(() => store.getters.organisation)
+const hoursByDay = computed(() => organisation.value.hours_by_day || 8)
 
-  watch: {
-    value() {
-      this.$emit('change', {
-        taskId: this.taskId,
-        duration: this.value
-      })
-    }
-  }
+const setValue = v => {
+  value.value = v || 0
 }
+
+watch(value, v => {
+  emit('change', { taskId: props.taskId, duration: v })
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/ValidationCell.vue b/src/components/cells/ValidationCell.vue
index 1394c7f957..2dbc2869b1 100644
--- a/src/components/cells/ValidationCell.vue
+++ b/src/components/cells/ValidationCell.vue
@@ -75,241 +75,153 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
 import { EyeIcon } from 'lucide-vue-next'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
+import { useFormat } from '@/composables/format'
 import colors from '@/lib/colors'
 import { sortPeople } from '@/lib/sorting'
-import { formatListMixin } from '@/components/mixins/format'
 
-export default {
-  name: 'validation-cell',
-
-  mixins: [formatListMixin],
-
-  data() {
-    return {
-      task: null
-    }
-  },
-
-  components: {
-    EyeIcon
-  },
-
-  props: {
-    column: {
-      default: null,
-      type: Object
-    },
-    entity: {
-      default: null,
-      type: Object
-    },
-    taskTest: {
-      default: null,
-      type: Object
-    },
-    isCastingReady: {
-      default: false,
-      type: Boolean
-    },
-    castingTitle: {
-      default: '',
-      type: String
-    },
-    isBorder: {
-      default: true,
-      type: Boolean
-    },
-    // FIXME: property no longer used in component
-    isStatic: {
-      default: false,
-      type: Boolean
-    },
-    isAssignees: {
-      default: true,
-      type: Boolean
-    },
-    minimized: {
-      default: false,
-      type: Boolean
-    },
-    selectable: {
-      default: true,
-      type: Boolean
-    },
-    clickable: {
-      default: true,
-      type: Boolean
-    },
-    selected: {
-      default: false,
-      type: Boolean
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    rowX: {
-      default: 0,
-      type: Number
-    },
-    columnY: {
-      default: 0,
-      type: Number
-    },
-    left: {
-      type: String,
-      default: '0px'
-    },
-    sticked: {
-      default: false,
-      type: Boolean
-    },
-    canceled: {
-      default: false,
-      type: Boolean
-    },
-    contactSheet: {
-      default: false,
-      type: Boolean
-    }
-  },
+const store = useStore()
+const { formatPriority, formatPrioritySymbol } = useFormat()
+
+const props = defineProps({
+  canceled: { type: Boolean, default: false },
+  castingTitle: { type: String, default: '' },
+  clickable: { type: Boolean, default: true },
+  column: { type: Object, default: null },
+  columnY: { type: Number, default: 0 },
+  contactSheet: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  entity: { type: Object, default: null },
+  isAssignees: { type: Boolean, default: true },
+  isBorder: { type: Boolean, default: true },
+  isCastingReady: { type: Boolean, default: false },
+  left: { type: String, default: '0px' },
+  minimized: { type: Boolean, default: false },
+  rowX: { type: Number, default: 0 },
+  selectable: { type: Boolean, default: true },
+  selected: { type: Boolean, default: false },
+  sticked: { type: Boolean, default: false },
+  taskTest: { type: Object, default: null }
+})
+
+const emit = defineEmits(['select', 'unselect'])
+
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+const personMap = computed(() => store.getters.personMap)
+const taskMap = computed(() => store.getters.taskMap)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
+
+const task = ref(null)
+
+const resolveTask = () => {
+  if (props.taskTest) {
+    task.value = props.taskTest
+  } else if (props.column && props.entity?.validations) {
+    task.value = taskMap.value.get(
+      props.entity.validations.get(props.column.id)
+    )
+  }
+}
 
-  mounted() {
-    if (this.taskTest) {
-      this.task = this.taskTest
-    } else if (this.column && this.entity?.validations) {
-      this.task = this.taskMap.get(this.entity.validations.get(this.column.id))
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'isCurrentUserClient',
-      'isDarkTheme',
-      'personMap',
-      'taskMap',
-      'taskStatusMap'
-    ]),
-
-    assignees() {
-      return sortPeople(
-        this.task?.assignees
-          .map(personId => this.personMap.get(personId))
-          .filter(Boolean) ?? []
-      )
-    },
-
-    priority() {
-      return this.formatPrioritySymbol(this.task.priority)
-    },
-
-    cellStyle() {
-      let backgroundColor
-      if (this.isBorder && !this.sticked) {
-        const opacity = this.isDarkTheme ? 0.15 : 0.08
-        backgroundColor = colors.hexToRGBa(this.column.color, opacity)
-      }
-
-      return {
-        borderLeft: this.isBorder ? `1px solid ${this.column.color}` : 'none',
-        backgroundColor: backgroundColor,
-        left: this.left
-      }
-    },
-
-    tagStyle() {
-      const isTodo = this.taskStatus.name === 'Todo'
-      let backgroundColor
-      if (isTodo) {
-        backgroundColor = this.isDarkTheme ? '#5F626A' : '#ECECEC'
-      } else if (this.taskStatus.color) {
-        backgroundColor = this.isDarkTheme
-          ? colors.darkenColor(this.taskStatus.color)
-          : this.taskStatus.color
-      } else {
-        backgroundColor = 'transparent'
-      }
-      const color = !isTodo || this.isDarkTheme ? 'white' : '#333'
-      return {
-        backgroundColor,
-        color
-      }
-    },
-
-    wrapperStyle() {
-      if (!this.task || !this.contactSheet) return {}
-      const path =
-        '/api/pictures/thumbnails/preview-files/' +
-        this.task.last_preview_file_id +
-        '.png'
-      return {
-        'background-image': 'url(' + path + ')',
-        'background-color': this.taskStatus.color + '44',
-        height: '100px',
-        width: '150px',
-        display: 'flex',
-        'flex-direction': this.contactSheet ? 'column' : 'row'
-      }
-    },
-
-    statusWrapperStyle() {
-      if (!this.task || !this.contactSheet)
-        return {
-          padding: '6px'
-        }
-      return {
-        width: '150px',
-        padding: '6px',
-        'text-align:': 'right'
-      }
-    },
-
-    taskStatus() {
-      const taskStatusId = this.task?.task_status_id
-      return this.taskStatusMap?.get(taskStatusId) || {}
-    }
-  },
-
-  methods: {
-    onClick(event) {
-      if (this.clickable) {
-        this.select(event)
-      }
-    },
-
-    select(event) {
-      if (!this.selectable) {
-        return
-      }
-      this.$emit(!this.selected ? 'select' : 'unselect', {
-        entity: this.entity,
-        column: this.column,
-        task: this.task,
-        x: this.rowX,
-        y: this.columnY,
-        isCtrlKey: event.ctrlKey || event.metaKey,
-        isShiftKey: event.shiftKey,
-        isUserClick: event.isUserClick !== false
-      })
-    }
-  },
-
-  watch: {
-    taskTest() {
-      if (this.taskTest) {
-        this.task = this.taskTest
-      } else if (this.entity?.validations) {
-        this.task = this.taskMap.get(
-          this.entity.validations.get(this.column.id)
-        )
-      }
-    }
+const taskStatus = computed(
+  () => taskStatusMap.value?.get(task.value?.task_status_id) || {}
+)
+
+const assignees = computed(() =>
+  sortPeople(
+    task.value?.assignees
+      .map(personId => personMap.value.get(personId))
+      .filter(Boolean) ?? []
+  )
+)
+
+const priority = computed(() => formatPrioritySymbol(task.value.priority))
+
+const cellStyle = computed(() => {
+  let backgroundColor
+  if (props.isBorder && !props.sticked) {
+    const opacity = isDarkTheme.value ? 0.15 : 0.08
+    backgroundColor = colors.hexToRGBa(props.column.color, opacity)
   }
+  return {
+    borderLeft: props.isBorder ? `1px solid ${props.column.color}` : 'none',
+    backgroundColor,
+    left: props.left
+  }
+})
+
+const tagStyle = computed(() => {
+  const isTodo = taskStatus.value.name === 'Todo'
+  let backgroundColor
+  if (isTodo) {
+    backgroundColor = isDarkTheme.value ? '#5F626A' : '#ECECEC'
+  } else if (taskStatus.value.color) {
+    backgroundColor = isDarkTheme.value
+      ? colors.darkenColor(taskStatus.value.color)
+      : taskStatus.value.color
+  } else {
+    backgroundColor = 'transparent'
+  }
+  const color = !isTodo || isDarkTheme.value ? 'white' : '#333'
+  return { backgroundColor, color }
+})
+
+const wrapperStyle = computed(() => {
+  if (!task.value || !props.contactSheet) return {}
+  const path =
+    '/api/pictures/thumbnails/preview-files/' +
+    task.value.last_preview_file_id +
+    '.png'
+  return {
+    'background-image': 'url(' + path + ')',
+    'background-color': taskStatus.value.color + '44',
+    height: '100px',
+    width: '150px',
+    display: 'flex',
+    'flex-direction': props.contactSheet ? 'column' : 'row'
+  }
+})
+
+const statusWrapperStyle = computed(() => {
+  if (!task.value || !props.contactSheet) return { padding: '6px' }
+  return {
+    width: '150px',
+    padding: '6px',
+    'text-align:': 'right'
+  }
+})
+
+const select = event => {
+  if (!props.selectable) return
+  const payload = {
+    entity: props.entity,
+    column: props.column,
+    task: task.value,
+    x: props.rowX,
+    y: props.columnY,
+    isCtrlKey: event.ctrlKey || event.metaKey,
+    isShiftKey: event.shiftKey,
+    isUserClick: event.isUserClick !== false
+  }
+  if (props.selected) {
+    emit('unselect', payload)
+  } else {
+    emit('select', payload)
+  }
+}
+
+const onClick = event => {
+  if (props.clickable) select(event)
 }
+
+watch(() => props.taskTest, resolveTask)
+
+onMounted(resolveTask)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/ValidationHeader.vue b/src/components/cells/ValidationHeader.vue
index 0039314e20..36c02048ca 100644
--- a/src/components/cells/ValidationHeader.vue
+++ b/src/components/cells/ValidationHeader.vue
@@ -41,90 +41,66 @@
   </th>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
 import { ChevronDownIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 
-export default {
-  name: 'validation-header',
+const store = useStore()
 
-  components: {
-    ChevronDownIcon,
-    DepartmentName
-  },
+const props = defineProps({
+  columnId: { type: String, default: null },
+  hiddenColumns: { type: Object, default: () => ({}) },
+  isStick: { type: Boolean, default: false },
+  left: { type: String, default: null },
+  type: { type: String, default: 'assets' },
+  validationStyle: { type: Object, default: () => ({}) }
+})
 
-  props: {
-    hiddenColumns: Object,
-    columnId: String,
-    validationStyle: Object,
-    isStick: {
-      type: Boolean,
-      default: false
-    },
-    left: {
-      type: String
-    },
-    type: {
-      type: String,
-      default: 'assets'
-    }
-  },
-
-  emits: ['show-header-menu'],
+defineEmits(['show-header-menu'])
 
-  computed: {
-    ...mapGetters([
-      'currentEpisode',
-      'currentProduction',
-      'isCurrentUserClient',
-      'isTVShow',
-      'departmentMap',
-      'taskTypeMap'
-    ]),
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const departmentMap = computed(() => store.getters.departmentMap)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const isTVShow = computed(() => store.getters.isTVShow)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
 
-    currentDepartment() {
-      return this.departmentMap.get(this.currentTaskType.department_id)
-    },
+const currentTaskType = computed(
+  () => taskTypeMap.value.get(props.columnId) ?? {}
+)
 
-    currentTaskType() {
-      return this.taskTypeMap.get(this.columnId) ?? {}
-    },
+const currentDepartment = computed(() =>
+  departmentMap.value.get(currentTaskType.value.department_id)
+)
 
-    isHiddenColumn() {
-      return this.hiddenColumns[this.columnId]
-    }
-  },
-  methods: {
-    taskTypePath(taskTypeId) {
-      if (this.currentTaskType.for_entity === 'Episode') {
-        const route = {
-          name: 'episodes-task-type',
-          params: {
-            production_id: this.currentProduction.id,
-            task_type_id: taskTypeId
-          }
-        }
-        return route
-      } else {
-        const route = {
-          name: 'task-type',
-          params: {
-            production_id: this.currentProduction.id,
-            task_type_id: taskTypeId,
-            type: this.type
-          }
-        }
+const isHiddenColumn = computed(() => props.hiddenColumns[props.columnId])
 
-        if (this.isTVShow && this.currentEpisode) {
-          route.name = 'episode-task-type'
-          route.params.episode_id = this.currentEpisode.id
-        }
-        return route
+const taskTypePath = taskTypeId => {
+  if (currentTaskType.value.for_entity === 'Episode') {
+    return {
+      name: 'episodes-task-type',
+      params: {
+        production_id: currentProduction.value.id,
+        task_type_id: taskTypeId
       }
     }
   }
+  const route = {
+    name: 'task-type',
+    params: {
+      production_id: currentProduction.value.id,
+      task_type_id: taskTypeId,
+      type: props.type
+    }
+  }
+  if (isTVShow.value && currentEpisode.value) {
+    route.name = 'episode-task-type'
+    route.params.episode_id = currentEpisode.value.id
+  }
+  return route
 }
 </script>
 
diff --git a/src/components/layouts/PageLayout.vue b/src/components/layouts/PageLayout.vue
index b16f17f999..2ab9c9ad16 100644
--- a/src/components/layouts/PageLayout.vue
+++ b/src/components/layouts/PageLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="page" class="columns fixed-page">
+  <div class="columns fixed-page">
     <div class="column main-column">
       <slot name="main" />
     </div>
@@ -9,15 +9,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'page-layout',
-
-  props: {
-    side: {
-      type: Boolean,
-      default: true
-    }
-  }
-}
+<script setup>
+defineProps({
+  side: { type: Boolean, default: true }
+})
 </script>
diff --git a/src/components/layouts/PageLeftSideLayout.vue b/src/components/layouts/PageLeftSideLayout.vue
index d651864cd4..371e70ab80 100644
--- a/src/components/layouts/PageLeftSideLayout.vue
+++ b/src/components/layouts/PageLeftSideLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="page" class="columns fixed-page">
+  <div class="columns fixed-page">
     <div class="column left-side-column">
       <slot name="side" />
     </div>
@@ -9,8 +9,4 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'page-left-side-layout'
-}
-</script>
+<script setup></script>
diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index 18d6ecda1a..10f8625a5f 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -72,9 +72,6 @@
                 offsets['editor-' + j] ? `${offsets['editor-' + j]}px` : '0'
               "
               is-stick
-              :style="{
-                'z-index': 1001
-              }"
               @show-metadata-header-menu="
                 event => showMetadataHeaderMenu(descriptor.id, event)
               "
diff --git a/src/components/lists/DepartmentList.vue b/src/components/lists/DepartmentList.vue
index d0cb590900..bf52dc3d22 100644
--- a/src/components/lists/DepartmentList.vue
+++ b/src/components/lists/DepartmentList.vue
@@ -7,7 +7,9 @@
             <th scope="col" class="name">
               {{ $t('departments.fields.name') }}
             </th>
-            <th scope="col">{{ $t('departments.fields.color') }}</th>
+            <th scope="col" class="color">
+              {{ $t('departments.fields.color') }}
+            </th>
             <th scope="col">
               {{ $t('departments.hardware_used_by_artists') }}
             </th>
@@ -48,60 +50,40 @@
       </table>
     </div>
     <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
-    <p class="has-text-centered nb-asset-types">
-      {{ entries.length }} {{ $tc('departments.number', entries.length) }}
+    <p class="has-text-centered nb-departments">
+      {{ entries.length }} {{ $t('departments.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'department-list',
-
-  emits: ['delete-clicked', 'edit-clicked'],
-
-  components: {
-    RowActionsCell,
-    TableInfo
-  },
+defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  linkedHardwareItems: { type: Object, default: () => ({}) },
+  linkedSoftwareLicenses: { type: Object, default: () => ({}) }
+})
 
-  props: {
-    entries: {
-      type: Array,
-      required: true
-    },
-    isLoading: {
-      type: Boolean,
-      required: true
-    },
-    isError: {
-      type: Boolean,
-      required: true
-    },
-    linkedHardwareItems: {
-      type: Object,
-      required: true
-    },
-    linkedSoftwareLicenses: {
-      type: Object,
-      required: true
-    }
-  }
-}
+defineEmits(['delete-clicked', 'edit-clicked'])
 </script>
 
 <style lang="scss" scoped>
+.datatable-body tr:first-child th,
+.datatable-body tr:first-child td {
+  border-top: 0;
+}
+
 .name {
-  width: 300px;
+  min-width: 300px;
   padding: 1em;
 }
 
 .color {
-  width: 20px;
-  height: 20px;
+  width: 60px;
   text-align: center;
 
   span {
@@ -113,13 +95,25 @@ export default {
 }
 
 .items {
-  padding: 1em;
   min-width: 200px;
   max-width: 200px;
+  padding: 1em;
 }
 
-.datatable-body tr:first-child th,
-.datatable-body tr:first-child td {
-  border-top: 0;
+@media screen and (max-width: 768px) {
+  .name {
+    min-width: auto;
+    padding: 0.5em;
+  }
+
+  .items {
+    min-width: auto;
+    padding: 0.5em;
+  }
+
+  .datatable-body td,
+  .datatable-head th {
+    padding: 0.5em;
+  }
 }
 </style>
diff --git a/src/components/lists/HardwareItemList.vue b/src/components/lists/HardwareItemList.vue
index 63244f8c4a..4f2ae28ca4 100644
--- a/src/components/lists/HardwareItemList.vue
+++ b/src/components/lists/HardwareItemList.vue
@@ -54,44 +54,23 @@
     <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
 
     <p class="has-text-centered nb-hardware-items">
-      {{ entries.length }} {{ $tc('hardware_items.number', entries.length) }}
+      {{ entries.length }} {{ $t('hardware_items.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'hardware-item-list',
+defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  remainingHardwareItems: { type: Object, default: () => ({}) }
+})
 
-  components: {
-    RowActionsCell,
-    TableInfo
-  },
-
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    remainingHardwareItems: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['delete-clicked', 'edit-clicked']
-}
+defineEmits(['delete-clicked', 'edit-clicked'])
 </script>
 
 <style lang="scss" scoped>
@@ -100,8 +79,25 @@ export default {
   border-top: 0;
 }
 
+.name {
+  min-width: 200px;
+  padding: 1em;
+}
+
 .remaining-amount.negative {
   color: $red;
   font-weight: bold;
 }
+
+@media screen and (max-width: 768px) {
+  .name {
+    min-width: auto;
+    padding: 0.5em;
+  }
+
+  .datatable-body td,
+  .datatable-head th {
+    padding: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/lists/ShotList.vue b/src/components/lists/ShotList.vue
index 1238c39dd5..05a52188e1 100644
--- a/src/components/lists/ShotList.vue
+++ b/src/components/lists/ShotList.vue
@@ -61,9 +61,6 @@
                 event => showMetadataHeaderMenu(descriptor.id, event)
               "
               is-stick
-              :style="{
-                'z-index': 1001
-              }"
               v-for="(descriptor, j) in stickedVisibleMetadataDescriptors"
             />
 
diff --git a/src/components/lists/SoftwareLicenseList.vue b/src/components/lists/SoftwareLicenseList.vue
index 89b7ebfa6a..837fcd3ef3 100644
--- a/src/components/lists/SoftwareLicenseList.vue
+++ b/src/components/lists/SoftwareLicenseList.vue
@@ -66,44 +66,23 @@
     <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
 
     <p class="has-text-centered nb-software-licenses">
-      {{ entries.length }} {{ $tc('software_licenses.number', entries.length) }}
+      {{ entries.length }} {{ $t('software_licenses.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'software-license-list',
+defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  remainingSoftwareLicenses: { type: Object, default: () => ({}) }
+})
 
-  components: {
-    RowActionsCell,
-    TableInfo
-  },
-
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    remainingSoftwareLicenses: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-
-  emits: ['delete-clicked', 'edit-clicked']
-}
+defineEmits(['delete-clicked', 'edit-clicked'])
 </script>
 
 <style lang="scss" scoped>
@@ -112,6 +91,11 @@ export default {
   border-top: 0;
 }
 
+.name {
+  min-width: 200px;
+  padding: 1em;
+}
+
 .extension,
 .version {
   width: 100px;
@@ -122,4 +106,22 @@ export default {
   color: $red;
   font-weight: bold;
 }
+
+@media screen and (max-width: 768px) {
+  .name {
+    min-width: auto;
+    padding: 0.5em;
+  }
+
+  .extension,
+  .version {
+    width: auto;
+    padding: 0.5em;
+  }
+
+  .datatable-body td,
+  .datatable-head th {
+    padding: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/lists/StudioList.vue b/src/components/lists/StudioList.vue
index 1b48253bd8..d85bd722fd 100644
--- a/src/components/lists/StudioList.vue
+++ b/src/components/lists/StudioList.vue
@@ -7,7 +7,7 @@
             <th scope="col" class="name">
               {{ $t('studios.fields.name') }}
             </th>
-            <th scope="col">{{ $t('studios.fields.color') }}</th>
+            <th scope="col" class="color">{{ $t('studios.fields.color') }}</th>
             <th scope="col" class="actions"></th>
           </tr>
         </thead>
@@ -42,18 +42,9 @@ import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
 defineProps({
-  entries: {
-    type: Array,
-    default: () => []
-  },
-  isLoading: {
-    type: Boolean,
-    default: false
-  },
-  isError: {
-    type: Boolean,
-    default: false
-  }
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
 })
 
 defineEmits(['delete-clicked', 'edit-clicked'])
diff --git a/src/components/mixins/descriptors.js b/src/components/mixins/descriptors.js
index 8bc1c99a05..9eaa3c883f 100644
--- a/src/components/mixins/descriptors.js
+++ b/src/components/mixins/descriptors.js
@@ -8,6 +8,26 @@ import { mapGetters } from 'vuex'
 // for every row. Cache keyed by descriptor.id, cleared when it grows too large.
 const _checklistValuesCache = new Map()
 
+export const getDescriptorChecklistValues = descriptor => {
+  const cached = _checklistValuesCache.get(descriptor.id)
+  if (cached) return cached
+  const values = descriptor.choices.reduce((result, choice) => {
+    if (choice && typeof choice === 'string' && choice.startsWith('[x] ')) {
+      result.push({ text: choice.slice(4), checked: true })
+    } else if (
+      choice &&
+      typeof choice === 'string' &&
+      choice.startsWith('[ ] ')
+    ) {
+      result.push({ text: choice.slice(4), checked: false })
+    }
+    return result
+  }, [])
+  const result = values.length === descriptor.choices.length ? values : []
+  _checklistValuesCache.set(descriptor.id, result)
+  return result
+}
+
 export const descriptorMixin = {
   emits: [
     'add-metadata',
@@ -173,25 +193,7 @@ export const descriptorMixin = {
       }
     },
 
-    getDescriptorChecklistValues(descriptor) {
-      const cached = _checklistValuesCache.get(descriptor.id)
-      if (cached) return cached
-      const values = descriptor.choices.reduce((result, choice) => {
-        if (choice && typeof choice === 'string' && choice.startsWith('[x] ')) {
-          result.push({ text: choice.slice(4), checked: true })
-        } else if (
-          choice &&
-          typeof choice === 'string' &&
-          choice.startsWith('[ ] ')
-        ) {
-          result.push({ text: choice.slice(4), checked: false })
-        }
-        return result
-      }, [])
-      const result = values.length === descriptor.choices.length ? values : []
-      _checklistValuesCache.set(descriptor.id, result)
-      return result
-    },
+    getDescriptorChecklistValues,
 
     getMetadataChecklistValues(descriptor, entity) {
       let values
diff --git a/src/components/modals/AddAttachmentModal.vue b/src/components/modals/AddAttachmentModal.vue
index c73182fb21..ac4b357a51 100644
--- a/src/components/modals/AddAttachmentModal.vue
+++ b/src/components/modals/AddAttachmentModal.vue
@@ -29,7 +29,7 @@
 
         <div class="flexrow buttons attachment-modal-buttons">
           <file-upload
-            ref="file-field"
+            ref="fileField"
             class="flexrow-item"
             :label="$t('main.select_file')"
             :accept="extensions"
@@ -103,159 +103,105 @@
   </div>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 
+import { useModal } from '@/composables/modal'
 import files from '@/lib/files'
 
 import FileUpload from '@/components/widgets/FileUpload.vue'
 
-export default {
-  name: 'add-attachment-modal',
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  extensions: { type: String, default: files.ALL_EXTENSIONS_STRING },
+  isEditing: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isMovie: { type: Boolean, default: false },
+  title: { type: String, default: '' }
+})
 
-  mixins: [modalMixin],
+const emit = defineEmits(['add-snapshots', 'cancel', 'confirm'])
 
-  components: {
-    FileUpload
-  },
+useModal(toRef(props, 'active'), emit)
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isEditing: {
-      type: Boolean,
-      default: false
-    },
-    isMovie: {
-      type: Boolean,
-      default: false
-    },
-    extensions: {
-      type: String,
-      default: files.ALL_EXTENSIONS_STRING
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
+const fileField = ref(null)
+const forms = ref([])
+const isAnnotationLoading = ref(false)
+const isDraggingFile = ref(false)
 
-  emits: ['add-snapshots', 'cancel', 'confirm'],
+const onFileSelected = newForms => {
+  forms.value = forms.value.concat(newForms)
+}
 
-  data() {
-    return {
-      forms: [],
-      isAnnotationLoading: false,
-      isDraggingFile: false
-    }
-  },
+const confirm = () => {
+  emit('confirm', forms.value)
+}
 
-  computed: {
-    fileField() {
-      return this.$refs['file-field']
-    }
-  },
+const reset = () => {
+  fileField.value?.reset()
+  forms.value = []
+}
 
-  methods: {
-    onFileSelected(forms) {
-      this.forms = this.forms.concat(forms)
-    },
-
-    confirm() {
-      this.$emit('confirm', this.forms)
-    },
-
-    reset() {
-      this.fileField.reset()
-      this.forms = []
-    },
-
-    onPaste(event) {
-      if (this.active && event.clipboardData.files) {
-        this.addFiles(event.clipboardData.files)
-      }
-    },
-
-    getURL(form) {
-      return window.URL.createObjectURL(form.get('file'))
-    },
-
-    isImage(form) {
-      return form.get('file').type.startsWith('image')
-    },
-
-    isVideo(form) {
-      return form.get('file').type.startsWith('video')
-    },
-
-    isPdf(form) {
-      return form.get('file').type.indexOf('pdf') > 0
-    },
-
-    addFiles(files) {
-      this.fileField.filesChange('', files)
-    },
-
-    showAnnotationLoading() {
-      this.isAnnotationLoading = true
-    },
-
-    hideAnnotationLoading() {
-      this.isAnnotationLoading = false
-    },
-
-    removeAttachment(form) {
-      this.forms = this.forms.filter(f => f !== form)
-    },
-
-    onFileDragover(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      this.isDraggingFile = true
-    },
-
-    onFileDragLeave(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      if (event.target.id === 'drop-mask') {
-        this.isDraggingFile = false
-      }
-    },
-
-    onDrag(event) {},
-
-    onDrop(event) {
-      this.fileField.onDrop(event)
-      this.isDraggingFile = false
-      event.preventDefault()
-    }
-  },
+const addFiles = fileList => {
+  fileField.value?.filesChange('', fileList)
+}
 
-  watch: {
-    active() {
-      this.reset()
-    }
-  },
+const onPaste = event => {
+  if (props.active && event.clipboardData.files) {
+    addFiles(event.clipboardData.files)
+  }
+}
 
-  mounted() {
-    this.forms = []
-    window.addEventListener('paste', this.onPaste, false)
-  },
+const getURL = form => window.URL.createObjectURL(form.get('file'))
 
-  beforeUnmount() {
-    window.removeEventListener('paste', this.onPaste)
+const isImage = form => form.get('file').type.startsWith('image')
+const isVideo = form => form.get('file').type.startsWith('video')
+const isPdf = form => form.get('file').type.indexOf('pdf') > 0
+
+const removeAttachment = form => {
+  forms.value = forms.value.filter(f => f !== form)
+}
+
+const onFileDragover = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  isDraggingFile.value = true
+}
+
+const onFileDragLeave = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  if (event.target.id === 'drop-mask') {
+    isDraggingFile.value = false
   }
 }
+
+const onDrop = event => {
+  fileField.value?.onDrop(event)
+  isDraggingFile.value = false
+  event.preventDefault()
+}
+
+watch(() => props.active, reset)
+
+onMounted(() => {
+  window.addEventListener('paste', onPaste, false)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('paste', onPaste)
+})
+
+defineExpose({
+  addFiles,
+  showAnnotationLoading: () => {
+    isAnnotationLoading.value = true
+  },
+  hideAnnotationLoading: () => {
+    isAnnotationLoading.value = false
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/AddPreviewModal.vue b/src/components/modals/AddPreviewModal.vue
index 97353c231a..82b0416c6d 100644
--- a/src/components/modals/AddPreviewModal.vue
+++ b/src/components/modals/AddPreviewModal.vue
@@ -5,13 +5,8 @@
       modal: true,
       'is-active': active
     }"
-    ref="modal"
   >
-    <div
-      ref="background"
-      class="modal-background"
-      @click="$emit('cancel')"
-    ></div>
+    <div class="modal-background" @click="$emit('cancel')"></div>
 
     <div
       class="modal-content"
@@ -20,7 +15,6 @@
     >
       <div id="modal-content" class="box content" :class="{ dragging: true }">
         <div
-          ref="dropMask"
           id="drop-mask"
           class="drop-mask"
           @drop="onDrop"
@@ -41,7 +35,7 @@
         </p>
 
         <file-upload
-          ref="preview-field"
+          ref="previewField"
           class="preview-files-field"
           :accept="extensions"
           :is-primary="false"
@@ -70,7 +64,6 @@
             </p>
             <img alt="uploaded file" :src="getURL(form)" v-if="isImage(form)" />
             <video
-              :ref="`video-${index}`"
               :src="getURL(form)"
               preload="auto"
               class="is-fullwidth"
@@ -78,6 +71,7 @@
               controls
               loop
               muted
+              @loadedmetadata="onVideoLoaded"
               v-else-if="isVideo(form)"
             />
             <iframe
@@ -128,194 +122,118 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { AlertTriangleIcon } from 'lucide-vue-next'
+import { onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 
+import { useModal } from '@/composables/modal'
 import files from '@/lib/files'
 
-import { modalMixin } from '@/components/modals/base_modal'
 import FileUpload from '@/components/widgets/FileUpload.vue'
 
-export default {
-  name: 'add-preview-modal',
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  confirmLabel: { type: String, default: '' },
+  expectedFrames: { type: Number, default: 0 },
+  extensions: { type: String, default: files.ALL_EXTENSIONS_STRING },
+  fps: { type: Number, default: 0 },
+  isConcept: { type: Boolean, default: false },
+  isEditing: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isMultiple: { type: Boolean, default: true },
+  message: { type: String, default: 'tasks.revision_preview_file' },
+  title: { type: String, default: '' }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'fileselected'])
+
+useModal(toRef(props, 'active'), emit)
+
+const forms = ref([])
+const isDraggingFile = ref(false)
+const isWrongDuration = ref(false)
+const previewField = ref(null)
+
+const onFileSelected = newForms => {
+  forms.value = props.isMultiple ? forms.value.concat(newForms) : [newForms]
+  emit('fileselected', forms.value)
+}
 
-  mixins: [modalMixin],
+const reset = () => {
+  previewField.value?.reset()
+  forms.value = []
+  isWrongDuration.value = false
+}
 
-  components: {
-    AlertTriangleIcon,
-    FileUpload
-  },
+const onPaste = event => {
+  if (props.active && event.clipboardData.files) {
+    previewField.value?.filesChange('', event.clipboardData.files)
+  }
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    confirmLabel: {
-      type: String,
-      default: ''
-    },
-    extensions: {
-      type: String,
-      default: files.ALL_EXTENSIONS_STRING
-    },
-    isConcept: {
-      type: Boolean,
-      default: false
-    },
-    isEditing: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isMultiple: {
-      type: Boolean,
-      default: true
-    },
-    message: {
-      type: String,
-      default: 'tasks.revision_preview_file'
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    fps: {
-      type: Number,
-      default: 0
-    },
-    expectedFrames: {
-      type: Number,
-      default: 0
-    }
-  },
+const getURL = form => window.URL.createObjectURL(form.get('file'))
 
-  emits: ['cancel', 'confirm', 'fileselected'],
+const isImage = form => form.get('file').type.startsWith('image')
+const isVideo = form => form.get('file').type.startsWith('video')
+const isPdf = form => form.get('file').type.indexOf('pdf') > 0
 
-  data() {
-    return {
-      forms: [],
-      isWrongDuration: false,
-      isDraggingFile: false
-    }
-  },
+const removePreview = form => {
+  forms.value = forms.value.filter(f => f !== form)
+}
 
-  computed: {
-    previewField() {
-      return this.$refs['preview-field']
-    }
-  },
+const onVideoLoaded = event => {
+  if (props.expectedFrames === 0) return
+  const frames = Math.round(event.target.duration * props.fps)
+  if (frames !== props.expectedFrames) {
+    isWrongDuration.value = true
+  }
+}
 
-  methods: {
-    setFiles(files) {
-      this.previewField.filesChange('file', files)
-    },
-
-    onFileSelected(forms) {
-      this.forms = this.isMultiple ? this.forms.concat(forms) : [forms]
-      this.$emit('fileselected', this.forms)
-    },
-
-    reset() {
-      this.previewField?.reset()
-      this.forms = []
-      this.isWrongDuration = false
-    },
-
-    onPaste(event) {
-      if (this.active && event.clipboardData.files) {
-        this.previewField.filesChange('', event.clipboardData.files)
-      }
-    },
-
-    getURL(form) {
-      return window.URL.createObjectURL(form.get('file'))
-    },
-
-    isImage(form) {
-      return form.get('file').type.startsWith('image')
-    },
-
-    isVideo(form) {
-      return form.get('file').type.startsWith('video')
-    },
-
-    isPdf(form) {
-      return form.get('file').type.indexOf('pdf') > 0
-    },
-
-    removePreview(form) {
-      this.forms = this.forms.filter(f => f !== form)
-    },
-
-    onFileDragover(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      this.isDraggingFile = true
-    },
-
-    onFileDragLeave(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      if (event.target.id === 'drop-mask') {
-        this.isDraggingFile = false
-      }
-    },
-
-    onDrag(event) {},
-
-    onDrop(event) {
-      this.previewField.onDrop(event)
-      this.isDraggingFile = false
-      event.preventDefault()
-    }
-  },
+const onFileDragover = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  isDraggingFile.value = true
+}
 
-  watch: {
-    active() {
-      this.reset()
-    },
-
-    forms: {
-      deep: true,
-      handler() {
-        this.$nextTick(() => {
-          this.isWrongDuration = false
-          if (this.expectedFrames !== 0) {
-            Object.keys(this.$refs).forEach(key => {
-              const ref = this.$refs[key]
-              if (key.startsWith('video-') && ref[0]) {
-                ref[0].onloadedmetadata = () => {
-                  if (!ref[0]) return
-                  const frames = Math.round(ref[0].duration * this.fps)
-                  if (frames !== this.expectedFrames) {
-                    this.isWrongDuration = true
-                  }
-                }
-              }
-            })
-          }
-        })
-      }
-    }
-  },
+const onFileDragLeave = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  if (event.target.id === 'drop-mask') {
+    isDraggingFile.value = false
+  }
+}
 
-  mounted() {
-    this.forms = []
-    window.addEventListener('paste', this.onPaste, false)
+const onDrop = event => {
+  previewField.value?.onDrop(event)
+  isDraggingFile.value = false
+  event.preventDefault()
+}
+
+watch(() => props.active, reset)
+
+watch(
+  forms,
+  () => {
+    isWrongDuration.value = false
   },
+  { deep: true }
+)
+
+onMounted(() => {
+  window.addEventListener('paste', onPaste, false)
+})
 
-  beforeUnmount() {
-    window.removeEventListener('paste', this.onPaste)
+onBeforeUnmount(() => {
+  window.removeEventListener('paste', onPaste)
+})
+
+defineExpose({
+  reset,
+  setFiles: fileList => {
+    previewField.value?.filesChange('file', fileList)
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/AddThumbnailsModal.vue b/src/components/modals/AddThumbnailsModal.vue
index 8b63da1676..25225c301f 100644
--- a/src/components/modals/AddThumbnailsModal.vue
+++ b/src/components/modals/AddThumbnailsModal.vue
@@ -1,333 +1,256 @@
 <template>
-  <div
-    class="modal"
-    :class="{
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('entities.thumbnails.title')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('entities.thumbnails.title') }}
-        </h1>
-
-        <p>
-          {{ $t('entities.thumbnails.explanation') }}
-        </p>
-
-        <combobox-task-type
-          :label="$t('entities.thumbnails.select_task_type')"
-          :task-type-list="taskTypeList"
-          v-model="taskTypeId"
-        />
-
-        <p>
-          {{ $t('entities.thumbnails.explanation_two') }}
-          {{ $t(`entities.thumbnails.${parent}_pattern`) }}
-        </p>
-
-        <label class="label">
-          {{ $t('entities.thumbnails.select_files') }}
-        </label>
-
-        <file-upload
-          ref="preview-field"
-          :label="$t('main.csv.upload_file')"
-          :accept="extensions"
-          @fileselected="onFileSelected"
-          :multiple="true"
-        />
-
-        <div class="warning" v-if="invalidForms.length">
-          <label class="label mt2">
-            {{ $t('entities.thumbnails.invalid_files') }}
-          </label>
-          <ul class="invalid-files">
-            <li v-for="(form, index) in invalidForms" :key="index">
-              {{ form.get('file').name }}
-            </li>
-          </ul>
-        </div>
-
-        <label class="label mt2" v-if="thumbnailList.length">
-          {{ $t('entities.thumbnails.selected_files') }}
-        </label>
-        <div
-          class="thumbnail-line flexrow"
-          :key="thumbnailInfo.id"
-          v-for="thumbnailInfo in thumbnailList"
-        >
-          <img
-            class="flexrow-item"
-            src="@/assets/icons/movie-thumbnail.png"
-            width="150"
-            height="100"
-            v-if="!thumbnailInfo.src"
-          />
-          <img
-            class="flexrow-item"
-            :src="thumbnailInfo.src"
-            width="150"
-            height="100"
-            v-if="thumbnailInfo.src"
-          />
-          <span class="flexrow-item">
-            <template v-if="thumbnailInfo.parentName">
-              {{ thumbnailInfo.parentName }} /
-            </template>
-            {{ thumbnailInfo.name }}
-          </span>
-          <spinner v-if="loading[thumbnailInfo.id]" :size="10" />
-          <check-icon v-if="uploaded[thumbnailInfo.id]" />
-        </div>
-
-        <modal-footer
-          :error-text="$t('entities.thumbnails.error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          :is-disabled="!isFormFilled"
-          @confirm="confirm"
-          @cancel="$emit('cancel')"
-        />
-      </div>
+    <p>
+      {{ $t('entities.thumbnails.explanation') }}
+    </p>
+
+    <combobox-task-type
+      :label="$t('entities.thumbnails.select_task_type')"
+      :task-type-list="taskTypeList"
+      v-model="taskTypeId"
+    />
+
+    <p>
+      {{ $t('entities.thumbnails.explanation_two') }}
+      {{ $t(`entities.thumbnails.${parent}_pattern`) }}
+    </p>
+
+    <label class="label">
+      {{ $t('entities.thumbnails.select_files') }}
+    </label>
+
+    <file-upload
+      ref="previewField"
+      :label="$t('main.csv.upload_file')"
+      :accept="extensions"
+      @fileselected="onFileSelected"
+      :multiple="true"
+    />
+
+    <div class="warning" v-if="invalidForms.length">
+      <label class="label mt2">
+        {{ $t('entities.thumbnails.invalid_files') }}
+      </label>
+      <ul class="invalid-files">
+        <li v-for="(form, index) in invalidForms" :key="index">
+          {{ form.get('file').name }}
+        </li>
+      </ul>
     </div>
-  </div>
+
+    <label class="label mt2" v-if="thumbnailList.length">
+      {{ $t('entities.thumbnails.selected_files') }}
+    </label>
+    <div
+      class="thumbnail-line flexrow"
+      :key="thumbnailInfo.id"
+      v-for="thumbnailInfo in thumbnailList"
+    >
+      <img
+        class="flexrow-item"
+        src="@/assets/icons/movie-thumbnail.png"
+        width="150"
+        height="100"
+        v-if="!thumbnailInfo.src"
+      />
+      <img
+        class="flexrow-item"
+        :src="thumbnailInfo.src"
+        width="150"
+        height="100"
+        v-if="thumbnailInfo.src"
+      />
+      <span class="flexrow-item">
+        <template v-if="thumbnailInfo.parentName">
+          {{ thumbnailInfo.parentName }} /
+        </template>
+        {{ thumbnailInfo.name }}
+      </span>
+      <spinner v-if="loading[thumbnailInfo.id]" :size="10" />
+      <check-icon v-if="uploaded[thumbnailInfo.id]" />
+    </div>
+
+    <modal-footer
+      :error-text="$t('entities.thumbnails.error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      :is-disabled="!isFormFilled"
+      @confirm="confirm"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 import { CheckIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import stringHelpers from '@/lib/string'
 import assetStore from '@/store/modules/assets'
 import editStore from '@/store/modules/edits'
 import shotStore from '@/store/modules/shots'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
+// eslint-disable-next-line no-unused-vars
 import FileUpload from '@/components/widgets/FileUpload.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 
-export default {
-  name: 'add-thumbnails-modal',
+const store = useStore()
 
-  mixins: [modalMixin],
-
-  components: {
-    CheckIcon,
-    ComboboxTaskType,
-    FileUpload,
-    ModalFooter,
-    Spinner
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  entityType: {
+    type: String,
+    required: true,
+    validator: value => ['Asset', 'Edit', 'Shot'].includes(value)
   },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  parent: { type: String, required: true }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+const extensions = '.png,.jpg,.jpeg,.mp4,.mov'
+
+const entityMap = ref({})
+const forms = ref([])
+const loading = ref({})
+const previewField = ref(null)
+const taskTypeId = ref(null)
+const uploaded = ref({})
+
+const assetValidationColumns = computed(
+  () => store.getters.assetValidationColumns
+)
+const editValidationColumns = computed(
+  () => store.getters.editValidationColumns
+)
+const shotValidationColumns = computed(
+  () => store.getters.shotValidationColumns
+)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+const taskMap = computed(() => store.getters.taskMap)
+
+const isAssets = computed(() => props.entityType === 'Asset')
+const isEdits = computed(() => props.entityType === 'Edit')
+const isShots = computed(() => props.entityType === 'Shot')
+
+const taskTypeList = computed(() => {
+  let validationColumns = []
+  if (isAssets.value) validationColumns = assetValidationColumns.value || []
+  else if (isEdits.value) validationColumns = editValidationColumns.value || []
+  else if (isShots.value) validationColumns = shotValidationColumns.value || []
+  return validationColumns.map(id => taskTypeMap.value.get(id))
+})
+
+const slugifyFilename = form =>
+  stringHelpers.slugify(
+    stringHelpers.filenameWithoutExtension(form.get('file').name)
+  )
+
+const validForms = computed(() =>
+  forms.value.filter(form => {
+    const asset = entityMap.value[slugifyFilename(form)]
+    return asset && asset.validations.get(taskTypeId.value)
+  })
+)
+
+const invalidForms = computed(() =>
+  forms.value.filter(form => !validForms.value.includes(form))
+)
+
+const prepareImagePreview = form =>
+  form.get('file').type.startsWith('image')
+    ? window.URL.createObjectURL(form.get('file'))
+    : ''
+
+const thumbnailList = computed(() =>
+  validForms.value.map(form => {
+    const asset = entityMap.value[slugifyFilename(form)]
+    const url = prepareImagePreview(form)
+    let parentName = ''
+    if (isAssets.value) parentName = asset.asset_type_name
+    else if (isEdits.value) parentName = asset.episode_name
+    else if (isShots.value) parentName = asset.sequence_name
+    form.asset = asset
+    return { parentName, name: asset.name, id: asset.id, src: url }
+  })
+)
+
+const isFormFilled = computed(() => thumbnailList.value.length > 0)
+
+const reset = () => {
+  if (taskTypeList.value.length > 0) {
+    taskTypeId.value = taskTypeList.value[0].id
+  }
+  previewField.value?.reset()
+  forms.value = []
+  loading.value = {}
+  uploaded.value = {}
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    entityType: {
-      type: String,
-      required: true,
-      validator: value => ['Asset', 'Edit', 'Shot'].includes(value)
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    parent: {
-      type: String,
-      required: true
-    }
-  },
+const addTaskInformation = form => {
+  const entity = entityMap.value[slugifyFilename(form)]
+  form.task = taskMap.value.get(entity.validations.get(taskTypeId.value))
+  return form
+}
 
-  emits: ['cancel', 'confirm'],
+const confirm = () => {
+  emit('confirm', validForms.value.map(addTaskInformation))
+}
 
-  data() {
-    return {
-      extensions: '.png,.jpg,.jpeg,.mp4,.mov',
-      forms: [],
-      loading: {},
-      taskTypeId: null,
-      uploaded: {}
-    }
-  },
+const addEntityToEntityMap = entity => {
+  let fullName = ''
+  if (isAssets.value) {
+    fullName = stringHelpers.slugify(`${entity.asset_type_name}_${entity.name}`)
+  } else if (isEdits.value) {
+    fullName = stringHelpers.slugify(
+      entity.episode_name
+        ? `${entity.episode_name}_${entity.name}`
+        : entity.name
+    )
+  } else if (isShots.value) {
+    fullName = stringHelpers.slugify(`${entity.sequence_name}_${entity.name}`)
+  }
+  entityMap.value[fullName] = entity
+}
 
-  mounted() {
-    this.reset()
-  },
+const onFileSelected = newForms => {
+  entityMap.value = {}
+  uploaded.value = {}
+  let cachedEntities = []
+  if (isAssets.value) cachedEntities = assetStore.cache.assets
+  else if (isEdits.value) cachedEntities = editStore.cache.edits
+  else if (isShots.value) cachedEntities = shotStore.cache.shots
+  cachedEntities.forEach(addEntityToEntityMap)
+  forms.value = newForms
+}
 
-  computed: {
-    ...mapGetters([
-      'assetValidationColumns',
-      'editValidationColumns',
-      'shotValidationColumns',
-      'taskTypeMap',
-      'taskMap'
-    ]),
-
-    isFormFilled() {
-      return this.thumbnailList.length > 0
-    },
-
-    taskTypeList() {
-      let validationColumns = []
-      if (this.isAssets) {
-        validationColumns = this.assetValidationColumns || []
-      } else if (this.isEdits) {
-        validationColumns = this.editValidationColumns || []
-      } else if (this.isShots) {
-        validationColumns = this.shotValidationColumns || []
-      }
-      return validationColumns.map(taskTypeId =>
-        this.taskTypeMap.get(taskTypeId)
-      )
-    },
-
-    isAssets() {
-      return this.entityType === 'Asset'
-    },
-    isEdits() {
-      return this.entityType === 'Edit'
-    },
-    isShots() {
-      return this.entityType === 'Shot'
-    },
-
-    validForms() {
-      return this.forms.filter(form => {
-        const filename = this.slugifyFilename(form)
-        const asset = this.entityMap[filename]
-        return asset && asset.validations.get(this.taskTypeId)
-      })
-    },
-
-    invalidForms() {
-      return this.forms.filter(form => !this.validForms.includes(form))
-    },
-
-    thumbnailList() {
-      return this.validForms.map(form => {
-        const asset = this.entityMap[this.slugifyFilename(form)]
-        const url = this.prepareImagePreview(form)
-        let parentName = ''
-        if (this.isAssets) {
-          parentName = asset.asset_type_name
-        } else if (this.isEdits) {
-          parentName = asset.episode_name
-        } else if (this.isShots) {
-          parentName = asset.sequence_name
-        }
-        form.asset = asset
-        return {
-          parentName,
-          name: asset.name,
-          id: asset.id,
-          src: url
-        }
-      })
-    }
-  },
+watch(
+  () => props.active,
+  active => {
+    if (active) reset()
+  }
+)
 
-  methods: {
-    reset() {
-      if (this.taskTypeList.length > 0) {
-        this.taskTypeId = this.taskTypeList[0].id
-      }
-      this.$refs['preview-field'].reset()
-      this.forms = []
-      this.loading = {}
-      this.uploaded = {}
-    },
-
-    confirm() {
-      return this.$emit('confirm', this.validForms.map(this.addTaskInformation))
-    },
-
-    addEntityToEntityMap(entity) {
-      let fullName = ''
-      if (this.isAssets) {
-        fullName = stringHelpers.slugify(
-          `${entity.asset_type_name}_${entity.name}`
-        )
-      } else if (this.isEdits) {
-        fullName = stringHelpers.slugify(
-          entity.episode_name
-            ? `${entity.episode_name}_${entity.name}`
-            : entity.name
-        )
-      } else if (this.isShots) {
-        fullName = stringHelpers.slugify(
-          `${entity.sequence_name}_${entity.name}`
-        )
-      }
-      this.entityMap[fullName] = entity
-    },
-
-    addTaskInformation(form) {
-      const filename = this.slugifyFilename(form)
-      const entity = this.entityMap[filename]
-      const task = this.taskMap.get(entity.validations.get(this.taskTypeId))
-      form.task = task
-      return form
-    },
-
-    onFileSelected(forms) {
-      this.entityMap = {}
-      this.uploaded = {}
-      let cachedEntities = []
-      if (this.isAssets) {
-        cachedEntities = assetStore.cache.assets
-      } else if (this.isEdits) {
-        cachedEntities = editStore.cache.edits
-      } else if (this.isShots) {
-        cachedEntities = shotStore.cache.shots
-      }
-      cachedEntities.forEach(this.addEntityToEntityMap)
-      this.forms = forms
-    },
-
-    slugifyFilename(form) {
-      const filename = form.get('file').name
-      return stringHelpers.slugify(
-        stringHelpers.filenameWithoutExtension(filename)
-      )
-    },
-
-    prepareImagePreview(form) {
-      if (form.get('file').type.startsWith('image')) {
-        return window.URL.createObjectURL(form.get('file'))
-      }
-      return ''
-    },
-
-    markLoading(assetId) {
-      this.loading = {
-        [assetId]: true
-      }
-    },
-
-    markUploaded(assetId) {
-      this.uploaded[assetId] = true
-    }
-  },
+onMounted(reset)
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-      }
-    }
+defineExpose({
+  markLoading: assetId => {
+    loading.value = { [assetId]: true }
+  },
+  markUploaded: assetId => {
+    uploaded.value[assetId] = true
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/BuildFilterModal.vue b/src/components/modals/BuildFilterModal.vue
index 63e34f136f..96fc7947a6 100644
--- a/src/components/modals/BuildFilterModal.vue
+++ b/src/components/modals/BuildFilterModal.vue
@@ -15,7 +15,7 @@
 
         <combobox
           class="flexrow-item"
-          :options="general.unionOptions"
+          :options="unionOptions"
           locale-key-prefix="entities.build_filter."
           v-model="union"
         />
@@ -27,7 +27,7 @@
         <div class="flexrow asset-type-filter" v-if="isAssets">
           <combobox
             class="flexrow-item"
-            :options="general.operatorOptions"
+            :options="operatorOptions"
             locale-key-prefix="entities.build_filter."
             v-model="assetTypeFilters.operator"
           />
@@ -54,7 +54,7 @@
           />
           <combobox
             class="flexrow-item"
-            :options="general.taskTypeOperatorOptions"
+            :options="taskTypeOperatorOptions"
             @update:model-value="onTaskTypeOperatorChanged(taskTypeFilter)"
             locale-key-prefix="entities.build_filter."
             v-model="taskTypeFilter.operator"
@@ -109,14 +109,14 @@
 
             <combobox
               class="flexrow-item"
-              :options="general.checklistOptions"
+              :options="checklistOptions"
               locale-key-prefix="entities.build_filter."
               v-model="descriptorFilter.values[0].checked"
               v-if="descriptorFilter.is_checklist"
             />
             <combobox
               class="flexrow-item"
-              :options="general.booleanOptions"
+              :options="booleanOptions"
               locale-key-prefix="entities.build_filter."
               v-model="descriptorFilter.values[0]"
               v-else-if="
@@ -125,7 +125,7 @@
             />
             <combobox
               class="flexrow-item"
-              :options="general.operatorOptions"
+              :options="operatorOptions"
               locale-key-prefix="entities.build_filter."
               @update:model-value="
                 operator => onOperatorChanged(operator, descriptorFilter)
@@ -306,680 +306,628 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { v4 as uuidv4 } from 'uuid'
+import { computed, onMounted, reactive, ref, toRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
+import { getDescriptorChecklistValues } from '@/components/mixins/descriptors'
+import { useModal } from '@/composables/modal'
 import { getFilters } from '@/lib/filtering'
 import { sortPeople } from '@/lib/sorting'
-import { descriptorMixin } from '@/components/mixins/descriptors'
 
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleField from '@/components/widgets/PeopleField.vue'
 
-import { v4 as uuidv4 } from 'uuid'
+const { t } = useI18n()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  entityType: { type: String, default: 'asset' }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+useModal(toRef(props, 'active'), emit)
+
+// Static option arrays — extracted from data() at module scope so
+// they're not needlessly reactive.
+
+const operatorOptions = [
+  { label: 'equal', value: '=' },
+  { label: 'not_equal', value: '=-' },
+  { label: 'in', value: 'in' }
+]
+const taskTypeOperatorOptions = operatorOptions
+const booleanOptions = [
+  { label: 'checked', value: 'true' },
+  { label: 'not_checked', value: '-true' }
+]
+const checklistOptions = [
+  { label: 'checked', value: true },
+  { label: 'not_checked', value: false }
+]
+const unionOptions = [
+  { label: 'union_and', value: 'and' },
+  { label: 'union_or', value: 'or' }
+]
+const priorityOptions = [
+  { label: 'priority.normal', value: '0' },
+  { label: 'priority.high', value: '1' },
+  { label: 'priority.very_high', value: '2' },
+  { label: 'priority.emergency', value: '3' }
+]
+
+// State
+
+const assetTypeFilters = reactive({ operator: '=', value: '' })
+const assignation = reactive({
+  person: null,
+  taskTypeId: '',
+  value: 'nofilter',
+  options: [
+    { label: 'no_filter', value: 'nofilter' },
+    { label: 'assigned_to', value: 'assignedto' },
+    { label: 'not_assigned_to', value: '-assignedto' },
+    { label: 'assignation_exists_for', value: 'assigned' },
+    { label: 'no_assignation_for', value: 'unassigned' }
+  ]
+})
+const hasThumbnail = reactive({
+  value: 'nofilter',
+  options: [
+    { label: 'no_filter', value: 'nofilter' },
+    { label: 'with_thumbnail', value: 'withthumbnail' },
+    { label: 'without_thumbnail', value: '-withthumbnail' }
+  ]
+})
+const priority = reactive({ taskTypeId: '', value: '-1' })
+const readyFor = reactive({ taskTypeId: '' })
+const isAssetsReady = reactive({
+  value: 'nofilter',
+  taskTypeId: '',
+  options: [
+    { label: 'no_filter', value: 'nofilter' },
+    { label: 'assets_ready', value: 'assetsready' },
+    { label: 'assets_not_ready', value: '-assetsready' }
+  ]
+})
+const metadataDescriptorFilters = reactive({ values: [] })
+const taskTypeFilters = reactive({ values: [] })
+const union = ref('and')
+
+// Computed
+
+const assetMetadataDescriptors = computed(
+  () => store.getters.assetMetadataDescriptors
+)
+const assetTypeMap = computed(() => store.getters.assetTypeMap)
+const assetSearchText = computed(() => store.getters.assetSearchText)
+const assetValidationColumns = computed(
+  () => store.getters.assetValidationColumns
+)
+const currentProduction = computed(() => store.getters.currentProduction)
+const editSearchText = computed(() => store.getters.editSearchText)
+const editMetadataDescriptors = computed(
+  () => store.getters.editMetadataDescriptors
+)
+const editValidationColumns = computed(
+  () => store.getters.editValidationColumns
+)
+const episodeSearchText = computed(() => store.getters.episodeSearchText)
+const episodeMetadataDescriptors = computed(
+  () => store.getters.episodeMetadataDescriptors
+)
+const episodeValidationColumns = computed(
+  () => store.getters.episodeValidationColumns
+)
+const isCurrentUserVendor = computed(() => store.getters.isCurrentUserVendor)
+const people = computed(() => store.getters.people)
+const personMap = computed(() => store.getters.personMap)
+const productionAssetTypes = computed(() => store.getters.productionAssetTypes)
+const productionTaskStatuses = computed(
+  () => store.getters.productionTaskStatuses
+)
+const productionTaskTypes = computed(() => store.getters.productionTaskTypes)
+const productionShotTaskTypes = computed(
+  () => store.getters.productionShotTaskTypes
+)
+const sequenceSearchText = computed(() => store.getters.sequenceSearchText)
+const sequenceMetadataDescriptors = computed(
+  () => store.getters.sequenceMetadataDescriptors
+)
+const sequenceValidationColumns = computed(
+  () => store.getters.sequenceValidationColumns
+)
+const shotMetadataDescriptors = computed(
+  () => store.getters.shotMetadataDescriptors
+)
+const shotSearchText = computed(() => store.getters.shotSearchText)
+const shotValidationColumns = computed(
+  () => store.getters.shotValidationColumns
+)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
+
+const isAssets = computed(() => props.entityType === 'asset')
+const isShots = computed(() => props.entityType === 'shot')
+const isAssetsOnly = computed(
+  () => currentProduction.value?.production_type === 'assets'
+)
+
+const taskStatuses = computed(() =>
+  productionTaskStatuses.value.filter(status => !status.for_concept)
+)
+
+const validationColumnsByEntity = {
+  asset: assetValidationColumns,
+  edit: editValidationColumns,
+  episode: episodeValidationColumns,
+  sequence: sequenceValidationColumns,
+  shot: shotValidationColumns
+}
 
-export default {
-  name: 'build-filter-modal',
-
-  mixins: [modalMixin, descriptorMixin],
-
-  components: {
-    ButtonSimple,
-    Combobox,
-    ComboboxStatus,
-    ComboboxStyled,
-    ComboboxTaskType,
-    MetadataField,
-    ModalFooter,
-    PeopleField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    entityType: {
-      type: String,
-      default: 'asset'
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      assetTypeFilters: {
-        operator: '=',
-        value: ''
-      },
-      assignation: {
-        person: null,
-        taskTypeId: '',
-        value: 'nofilter',
-        options: [
-          { label: 'no_filter', value: 'nofilter' },
-          { label: 'assigned_to', value: 'assignedto' },
-          { label: 'not_assigned_to', value: '-assignedto' },
-          { label: 'assignation_exists_for', value: 'assigned' },
-          { label: 'no_assignation_for', value: 'unassigned' }
-        ]
-      },
-      general: {
-        operatorOptions: [
-          { label: 'equal', value: '=' },
-          { label: 'not_equal', value: '=-' },
-          { label: 'in', value: 'in' }
-        ],
-        booleanOptions: [
-          { label: 'checked', value: 'true' },
-          { label: 'not_checked', value: '-true' }
-        ],
-        checklistOptions: [
-          { label: 'checked', value: true },
-          { label: 'not_checked', value: false }
-        ],
-        taskTypeOperatorOptions: [
-          { label: 'equal', value: '=' },
-          { label: 'not_equal', value: '=-' },
-          { label: 'in', value: 'in' }
-        ],
-        unionOptions: [
-          { label: 'union_and', value: 'and' },
-          { label: 'union_or', value: 'or' }
-        ]
-      },
-      hasThumbnail: {
-        value: 'nofilter',
-        options: [
-          { label: 'no_filter', value: 'nofilter' },
-          { label: 'with_thumbnail', value: 'withthumbnail' },
-          { label: 'without_thumbnail', value: '-withthumbnail' }
-        ]
-      },
-      priorityOptions: [
-        { label: 'priority.normal', value: '0' },
-        { label: 'priority.high', value: '1' },
-        { label: 'priority.very_high', value: '2' },
-        { label: 'priority.emergency', value: '3' }
-      ],
-      priority: {
-        taskTypeId: '',
-        value: '-1'
-      },
-      readyFor: {
-        taskTypeId: ''
-      },
-      isAssetsReady: {
-        value: 'nofilter',
-        taskTypeId: '',
-        options: [
-          { label: 'no_filter', value: 'nofilter' },
-          { label: 'assets_ready', value: 'assetsready' },
-          { label: 'assets_not_ready', value: '-assetsready' }
-        ]
-      },
-      metadataDescriptorFilters: {
-        values: []
-      },
-      taskTypeFilters: {
-        values: []
-      },
-      union: 'and'
-    }
-  },
-
-  mounted() {
-    this.reset()
-    this.setFiltersFromCurrentQuery()
-  },
-
-  computed: {
-    ...mapGetters([
-      'assetMetadataDescriptors',
-      'assetTypeMap',
-      'assetSearchText',
-      'assetValidationColumns',
-      'currentProduction',
-      'editSearchText',
-      'editMetadataDescriptors',
-      'editValidationColumns',
-      'episodeSearchText',
-      'episodeMetadataDescriptors',
-      'episodeValidationColumns',
-      'isCurrentUserVendor',
-      'people',
-      'personMap',
-      'productionAssetTypes',
-      'productionTaskStatuses',
-      'productionTaskTypes',
-      'productionShotTaskTypes',
-      'sequenceSearchText',
-      'sequenceMetadataDescriptors',
-      'sequenceValidationColumns',
-      'shotMetadataDescriptors',
-      'shotSearchText',
-      'shotValidationColumns',
-      'taskTypeMap',
-      'taskStatusMap'
-    ]),
-
-    isAssets() {
-      return this.entityType === 'asset'
-    },
-    isShots() {
-      return this.entityType === 'shot'
-    },
-
-    isAssetsOnly() {
-      return this.currentProduction?.production_type === 'assets'
-    },
-
-    assetTypeOptions() {
-      return [
-        { label: this.$t('entities.build_filter.all_types'), value: '-' },
-        ...this.productionAssetTypes
-          .filter(assetType => assetType !== undefined)
-          .map(assetType => ({
-            label: assetType.name,
-            value: assetType.id
-          }))
-      ]
-    },
-
-    taskStatuses() {
-      return this.productionTaskStatuses.filter(status => !status.for_concept)
-    },
-
-    taskTypeListWithAll() {
-      return [
-        {
-          id: '',
-          color: '#999',
-          name: this.$t('main.all')
-        }
-      ].concat(this.taskTypeList)
-    },
-
-    taskTypeList() {
-      return this[`${this.entityType}ValidationColumns`].map(taskTypeId =>
-        this.taskTypeMap.get(taskTypeId)
-      )
-    },
-
-    readyForTaskTypeList() {
-      return [
-        {
-          id: '',
-          color: '#999',
-          name: this.$t('news.all')
-        }
-      ].concat(this.productionShotTaskTypes)
-    },
-
-    team() {
-      return sortPeople(
-        this.currentProduction?.team
-          .map(personId => this.personMap.get(personId))
-          .filter(person => person && !person.is_bot) ?? []
-      )
-    },
-
-    descriptorOptions() {
-      return this.metadataDescriptors.map(descriptor => ({
-        label: descriptor.name,
-        value: descriptor.id
-      }))
-    },
-
-    metadataDescriptors() {
-      return this[`${this.entityType}MetadataDescriptors`]
-    },
-
-    validDescriptorFilters() {
-      return this.metadataDescriptorFilters.values.filter(descriptor =>
-        this.getDescriptor(descriptor.id)
-      )
-    }
-  },
-
-  methods: {
-    applyFilter() {
-      const query = this.buildFilter()
-      this.$emit('confirm', query)
-    },
-
-    buildFilter() {
-      let query = ''
-      query = this.applyAssetTypeChoice(query)
-      query = this.applyTaskTypeChoice(query)
-      query = this.applyDescriptorChoice(query)
-      query = this.applyAssignationChoice(query)
-      query = this.applyThumbnailChoice(query)
-      query = this.applyPriorityChoice(query)
-      query = this.applyReadyForChoice(query)
-      query = this.applyAssetsReadyChoice(query)
-      query = this.applyUnionChoice(query)
-      return query.trim()
-    },
-
-    applyAssetTypeChoice(query) {
-      const value = this.assetTypeFilters.value
-      if (value && value !== '-') {
-        let operator = '=['
-        if (this.assetTypeFilters.operator === '=-') operator = '=[-'
-        const assetType = this.assetTypeMap.get(value)
-        query += ` type${operator}${assetType.name}]`
-      }
-      return query
-    },
-
-    applyTaskTypeChoice(query) {
-      this.taskTypeFilters.values.forEach(taskTypeFilter => {
-        let operator = '=['
-        if (taskTypeFilter.operator === '=-') operator = '=[-'
-        const taskType = this.taskTypeMap.get(taskTypeFilter.id)
-        const value = taskTypeFilter.values
-          .map(statusId => {
-            return this.taskStatusMap.get(statusId).short_name
-          })
-          .join(',')
-        query += ` [${taskType.name}]${operator}${value}]`
-      })
-      return query
-    },
-
-    applyDescriptorChoice(query) {
-      this.validDescriptorFilters.forEach(descriptorFilter => {
-        let operator = '=['
-        let value
-        if (descriptorFilter.is_checklist) {
-          value = descriptorFilter.values[0].text
-          value += descriptorFilter.values[0].checked ? ':true' : ':false'
-        } else {
-          if (descriptorFilter.operator === '=-') operator = '=[-'
-          const values = descriptorFilter.values
-          if (values.length === 0 || values[0] === '') {
-            const options = this.getDescriptorChoiceOptions(
-              descriptorFilter.id,
-              descriptorFilter.is_checklist
-            )
-            value = options[0]?.value ?? ''
-          } else {
-            value = descriptorFilter.values.join(',')
-          }
-        }
-        const descriptor = this.getDescriptor(descriptorFilter.id)
-        query += ` [${descriptor.name}]${operator}${value}]`
-      })
-      return query
-    },
-
-    applyAssignationChoice(query) {
-      if (this.assignation.value !== 'nofilter') {
-        if (this.assignation.person) {
-          let value = this.assignation.person.name
-          const taskType = this.taskTypeMap.get(this.assignation.taskTypeId)
-          if (this.assignation.value === '-assignedto') value = `-${value}`
-          if (taskType) {
-            query += ` assignedto[${taskType.name}]=[${value}]`
-          } else {
-            query += ` assignedto[]=[${value}]`
-          }
-        } else if (this.assignation.taskTypeId) {
-          const taskType = this.taskTypeMap.get(this.assignation.taskTypeId)
-          const value =
-            this.assignation.value === 'assigned' ? 'assigned' : 'unassigned'
-          query += ` [${taskType.name}]=${value}`
-        }
-      }
-      return query
-    },
+const metadataDescriptorsByEntity = {
+  asset: assetMetadataDescriptors,
+  edit: editMetadataDescriptors,
+  episode: episodeMetadataDescriptors,
+  sequence: sequenceMetadataDescriptors,
+  shot: shotMetadataDescriptors
+}
 
-    applyThumbnailChoice(query) {
-      if (this.hasThumbnail.value !== 'nofilter') {
-        query += ` ${this.hasThumbnail.value}`
-      }
-      return query
-    },
-
-    applyPriorityChoice(query) {
-      if (this.priority.taskTypeId !== '' && this.priority.value !== '-1') {
-        const taskType = this.taskTypeMap.get(this.priority.taskTypeId)
-        const value = this.priority.value
-        query += ` priority-[${taskType.name.toLowerCase()}]=${value}`
-      }
-      return query
-    },
+const searchTextByEntity = {
+  asset: assetSearchText,
+  edit: editSearchText,
+  episode: episodeSearchText,
+  sequence: sequenceSearchText,
+  shot: shotSearchText
+}
 
-    applyReadyForChoice(query) {
-      if (this.readyFor.taskTypeId !== '') {
-        const taskType = this.taskTypeMap.get(this.readyFor.taskTypeId)
-        query += ` readyfor=[${taskType.name.toLowerCase()}]`
-      }
-      return query
-    },
-
-    applyAssetsReadyChoice(query) {
-      if (this.isAssetsReady.value !== 'nofilter') {
-        if (this.isAssetsReady.taskTypeId.length === 0) {
-          this.isAssetsReady.taskTypeId = this.taskTypeList[0].id
-        }
-        const taskType = this.taskTypeMap.get(this.isAssetsReady.taskTypeId)
-        const operator = this.isAssetsReady.value === 'assetsready' ? '' : '-'
-        query += ` assetsready=[${operator}${taskType.name}]`
-      }
-      return query
-    },
+const taskTypeList = computed(() =>
+  validationColumnsByEntity[props.entityType].value.map(taskTypeId =>
+    taskTypeMap.value.get(taskTypeId)
+  )
+)
+
+const taskTypeListWithAll = computed(() => [
+  { id: '', color: '#999', name: t('main.all') },
+  ...taskTypeList.value
+])
+
+const readyForTaskTypeList = computed(() => [
+  { id: '', color: '#999', name: t('news.all') },
+  ...productionShotTaskTypes.value
+])
+
+const team = computed(() =>
+  sortPeople(
+    currentProduction.value?.team
+      .map(personId => personMap.value.get(personId))
+      .filter(person => person && !person.is_bot) ?? []
+  )
+)
+
+const metadataDescriptors = computed(
+  () => metadataDescriptorsByEntity[props.entityType].value
+)
+
+const descriptorOptions = computed(() =>
+  metadataDescriptors.value.map(descriptor => ({
+    label: descriptor.name,
+    value: descriptor.id
+  }))
+)
+
+const assetTypeOptions = computed(() => [
+  { label: t('entities.build_filter.all_types'), value: '-' },
+  ...productionAssetTypes.value
+    .filter(assetType => assetType !== undefined)
+    .map(assetType => ({ label: assetType.name, value: assetType.id }))
+])
+
+const getDescriptor = descriptorId =>
+  metadataDescriptors.value.find(d => d.id === descriptorId)
+
+const validDescriptorFilters = computed(() =>
+  metadataDescriptorFilters.values.filter(descriptor =>
+    getDescriptor(descriptor.id)
+  )
+)
+
+// Functions
+
+const getDescriptorChoiceOptions = (descriptorId, isChecklist) => {
+  const descriptor = getDescriptor(descriptorId)
+  if (!isChecklist) {
+    return descriptor.choices.map(choice => ({ label: choice, value: choice }))
+  }
+  return getDescriptorChecklistValues(descriptor).map(choice => ({
+    label: choice.text,
+    value: choice.text
+  }))
+}
 
-    applyUnionChoice(query) {
-      if (this.union === 'or') {
-        query = `+(${query.trim()})`
-      }
-      return query
-    },
+const applyAssetTypeChoice = query => {
+  const value = assetTypeFilters.value
+  if (value && value !== '-') {
+    let operator = '=['
+    if (assetTypeFilters.operator === '=-') operator = '=[-'
+    const assetType = assetTypeMap.value.get(value)
+    query += ` type${operator}${assetType.name}]`
+  }
+  return query
+}
 
-    // Task types
+const applyTaskTypeChoice = query => {
+  taskTypeFilters.values.forEach(taskTypeFilter => {
+    let operator = '=['
+    if (taskTypeFilter.operator === '=-') operator = '=[-'
+    const taskType = taskTypeMap.value.get(taskTypeFilter.id)
+    const value = taskTypeFilter.values
+      .map(statusId => taskStatusMap.value.get(statusId).short_name)
+      .join(',')
+    query += ` [${taskType.name}]${operator}${value}]`
+  })
+  return query
+}
 
-    addTaskTypeFilter() {
-      const filter = {
-        localId: uuidv4(),
-        id: this.taskTypeList[0].id,
-        operator: '=',
-        values: [this.taskStatuses[0].id]
-      }
-      this.taskTypeFilters.values.push(filter)
-      return filter
-    },
-
-    addInTaskTypeFilter(taskTypeFilter) {
-      taskTypeFilter.values.push(this.taskStatuses[0].id)
-    },
-
-    removeTaskTypeFilter(taskTypeFilter) {
-      this.taskTypeFilters.values = this.taskTypeFilters.values.filter(
-        f => f.localId !== taskTypeFilter.localId
-      )
-    },
-
-    addInDescriptorFilter(descriptorFilter) {
-      const descriptor = this.getDescriptor(descriptorFilter.id)
-      const value = descriptor.choices.length ? descriptor.choices[0] : ''
-      descriptorFilter.values.push(value)
-    },
-
-    // Descriptors
-
-    onDescriptorChanged(descriptorFilter, filter) {
-      const descriptor = this.getDescriptor(filter)
-
-      descriptorFilter.is_checklist = false
-      if (descriptor.choices.length > 0) {
-        const checklistValues = this.getDescriptorChecklistValues(descriptor)
-        if (checklistValues.length > 0) {
-          descriptorFilter.is_checklist = true
-          descriptorFilter.values = [checklistValues[0]]
-          descriptorFilter.operator = '='
-        } else {
-          descriptorFilter.values = [descriptor.choices[0]]
-        }
-      } else if (descriptor.data_type === 'boolean') {
-        descriptorFilter.values = ['-true']
-      } else {
-        descriptorFilter.values = ['']
-      }
-    },
-
-    addDescriptorFilter() {
-      const descriptor = this.getDescriptor(this.descriptorOptions[0].value)
-      const values = []
-      let isChecklist = false
-      if (descriptor.choices.length > 0) {
-        const checklistValues = this.getDescriptorChecklistValues(descriptor)
-        if (checklistValues.length > 0) {
-          isChecklist = true
-          values.push({
-            ...checklistValues[0],
-            checked: true
-          })
-        } else {
-          values.push(descriptor.choices[0])
-        }
-      } else if (descriptor.data_type === 'boolean') {
-        values.push('-true')
-      } else {
-        values.push('')
-      }
-      const filter = {
-        localId: uuidv4(),
-        id: this.descriptorOptions[0].value,
-        operator: '=',
-        values,
-        is_checklist: isChecklist
-      }
-      this.metadataDescriptorFilters.values.push(filter)
-      return filter
-    },
-
-    removeDescriptorFilter(descriptorFilter) {
-      this.metadataDescriptorFilters.values =
-        this.metadataDescriptorFilters.values.filter(
-          f => f.localId !== descriptorFilter.localId
+const applyDescriptorChoice = query => {
+  validDescriptorFilters.value.forEach(descriptorFilter => {
+    let operator = '=['
+    let value
+    if (descriptorFilter.is_checklist) {
+      value = descriptorFilter.values[0].text
+      value += descriptorFilter.values[0].checked ? ':true' : ':false'
+    } else {
+      if (descriptorFilter.operator === '=-') operator = '=[-'
+      const values = descriptorFilter.values
+      if (values.length === 0 || values[0] === '') {
+        const options = getDescriptorChoiceOptions(
+          descriptorFilter.id,
+          descriptorFilter.is_checklist
         )
-    },
-
-    getDescriptor(descriptorId) {
-      return this.metadataDescriptors.find(d => d.id === descriptorId)
-    },
-
-    getDescriptorChoiceOptions(descriptorId, isChecklist) {
-      const descriptor = this.getDescriptor(descriptorId)
-      if (!isChecklist) {
-        return descriptor.choices.map(choice => ({
-          label: choice,
-          value: choice
-        }))
+        value = options[0]?.value ?? ''
       } else {
-        return this.getDescriptorChecklistValues(descriptor).map(choice => ({
-          label: choice.text,
-          value: choice.text
-        }))
+        value = descriptorFilter.values.join(',')
       }
-    },
+    }
+    const descriptor = getDescriptor(descriptorFilter.id)
+    query += ` [${descriptor.name}]${operator}${value}]`
+  })
+  return query
+}
 
-    onOperatorChanged(operator, descriptorFilter) {
-      if (operator !== 'in') {
-        descriptorFilter.values = [descriptorFilter.values[0]]
-      }
-    },
-
-    // Helpers to set filters from search query
-
-    setFiltersFromCurrentQuery() {
-      const searchQuery = this[`${this.entityType}SearchText`]
-      if (searchQuery) {
-        const filters = getFilters({
-          entryIndex: [], // entry list is not needed,
-          assetTypes: this.productionAssetTypes,
-          taskTypes: this.productionTaskTypes,
-          taskStatuses: this.taskStatuses,
-          descriptors: this.metadataDescriptors,
-          persons: this.people,
-          query: searchQuery
-        })
-        filters.forEach(filter => {
-          if (filter.type === 'assettype') {
-            this.setFiltersFromAssetTypeQuery(filter)
-          } else if (filter.type === 'status') {
-            this.setFiltersFromStatusQuery(filter)
-          } else if (filter.type === 'descriptor') {
-            this.setFiltersFromDescriptorQuery(filter)
-          } else if (filter.type === 'assignation') {
-            this.setFiltersFromAssignationQuery(filter)
-          } else if (filter.type === 'assignedto') {
-            this.setFiltersFromAssignedToQuery(filter)
-          } else if (filter.type === 'thumbnail') {
-            this.setFiltersFromThumbnailQuery(filter)
-          } else if (filter.type === 'priority') {
-            this.setFiltersFromPriorityQuery(filter)
-          } else if (filter.type === 'readyfor') {
-            this.setFiltersFromReadyForQuery(filter)
-          } else if (filter.type === 'assetsready') {
-            this.setFiltersFromAssetsReadyQuery(filter)
-          }
-        })
-        if (filters.union) {
-          this.setUnion()
-        }
-      }
-    },
-
-    setFiltersFromAssetTypeQuery(filter) {
-      this.assetTypeFilters.operator = filter.excluding ? '=-' : '='
-      this.assetTypeFilters.value = filter.assetType.id
-    },
-
-    setFiltersFromStatusQuery(filter) {
-      let operator = '='
-      if (filter.taskStatuses.length > 1) {
-        operator = 'in'
-      } else if (filter.excluding) {
-        operator = '=-'
-      }
-      this.taskTypeFilters.values.push({
-        localId: uuidv4(),
-        id: filter.taskType.id,
-        operator,
-        values: filter.taskStatuses
-      })
-    },
-
-    setFiltersFromDescriptorQuery(filter) {
-      let operator = '='
-      let isChecklist = false
-      let values = filter.values
-      if (filter.values.length > 1) {
-        operator = 'in'
+const applyAssignationChoice = query => {
+  if (assignation.value !== 'nofilter') {
+    if (assignation.person) {
+      let value = assignation.person.name
+      const taskType = taskTypeMap.value.get(assignation.taskTypeId)
+      if (assignation.value === '-assignedto') value = `-${value}`
+      if (taskType) {
+        query += ` assignedto[${taskType.name}]=[${value}]`
       } else {
-        if (filter.values[0].endsWith(':true')) {
-          isChecklist = true
-          values = [
-            {
-              text: filter.values[0].replace(/:true$/, ''),
-              checked: true
-            }
-          ]
-        } else if (filter.values[0].endsWith(':false')) {
-          isChecklist = true
-          values = [
-            {
-              text: filter.values[0].replace(/:false$/, ''),
-              checked: false
-            }
-          ]
-        } else if (filter.excluding) {
-          if (filter.descriptor.data_type === 'boolean') {
-            values = [`-${filter.values[0]}`]
-          } else {
-            operator = '=-'
-          }
-        }
+        query += ` assignedto[]=[${value}]`
       }
-      this.metadataDescriptorFilters.values.push({
-        localId: uuidv4(),
-        id: filter.descriptor.id,
-        operator,
-        values,
-        is_checklist: isChecklist
-      })
-    },
-
-    setFiltersFromAssignationQuery(filter) {
-      if (filter.assigned) {
-        this.assignation.value = 'assigned'
-      } else {
-        this.assignation.value = 'unassigned'
-      }
-      this.assignation.taskTypeId = filter.taskType.id
-    },
-
-    setFiltersFromAssignedToQuery(filter) {
-      this.assignation.value = filter.excluding ? '-assignedto' : 'assignedto'
-      this.assignation.person = this.people.find(
-        p => p.id === filter.personIds[0]
-      )
-      this.assignation.taskTypeId = filter.taskType?.id
-    },
-
-    setFiltersFromThumbnailQuery(filter) {
-      if (filter.excluding) {
-        this.hasThumbnail.value = '-withthumbnail'
-      } else {
-        this.hasThumbnail.value = 'withthumbnail'
-      }
-    },
+    } else if (assignation.taskTypeId) {
+      const taskType = taskTypeMap.value.get(assignation.taskTypeId)
+      const value = assignation.value === 'assigned' ? 'assigned' : 'unassigned'
+      query += ` [${taskType.name}]=${value}`
+    }
+  }
+  return query
+}
 
-    setFiltersFromPriorityQuery(filter) {
-      this.priority.taskTypeId = filter.taskTypeId
-      this.priority.value = String(filter.value)
-    },
+const applyThumbnailChoice = query => {
+  if (hasThumbnail.value !== 'nofilter') {
+    query += ` ${hasThumbnail.value}`
+  }
+  return query
+}
 
-    setFiltersFromReadyForQuery(filter) {
-      this.readyFor.taskTypeId = filter.value
-    },
+const applyPriorityChoice = query => {
+  if (priority.taskTypeId !== '' && priority.value !== '-1') {
+    const taskType = taskTypeMap.value.get(priority.taskTypeId)
+    query += ` priority-[${taskType.name.toLowerCase()}]=${priority.value}`
+  }
+  return query
+}
 
-    setFiltersFromAssetsReadyQuery(filter) {
-      this.isAssetsReady.taskTypeId = filter.value
-      this.isAssetsReady.value = filter.excluding
-        ? '-assetsready'
-        : 'assetsready'
-    },
+const applyReadyForChoice = query => {
+  if (readyFor.taskTypeId !== '') {
+    const taskType = taskTypeMap.value.get(readyFor.taskTypeId)
+    query += ` readyfor=[${taskType.name.toLowerCase()}]`
+  }
+  return query
+}
 
-    setUnion() {
-      this.union = 'or'
-    },
+const applyAssetsReadyChoice = query => {
+  if (isAssetsReady.value !== 'nofilter') {
+    if (isAssetsReady.taskTypeId.length === 0) {
+      isAssetsReady.taskTypeId = taskTypeList.value[0].id
+    }
+    const taskType = taskTypeMap.value.get(isAssetsReady.taskTypeId)
+    const operator = isAssetsReady.value === 'assetsready' ? '' : '-'
+    query += ` assetsready=[${operator}${taskType.name}]`
+  }
+  return query
+}
 
-    // General
+const applyUnionChoice = query => {
+  if (union.value === 'or') {
+    query = `+(${query.trim()})`
+  }
+  return query
+}
 
-    onTaskTypeOperatorChanged(taskTypeFilter) {
-      if (taskTypeFilter.operator !== 'in') {
-        taskTypeFilter.values = [taskTypeFilter.values[0]]
-      }
-    },
-
-    reset() {
-      this.assignation.value = 'nofilter'
-      this.assignation.person = null
-      this.assignation.taskTypeId = ''
-      this.hasThumbnail.value = 'nofilter'
-      this.metadataDescriptorFilters.values = []
-      this.taskTypeFilters.values = []
-      this.assetTypeFilters.operator = '='
-      this.assetTypeFilters.value = '-'
+const buildFilter = () => {
+  let query = ''
+  query = applyAssetTypeChoice(query)
+  query = applyTaskTypeChoice(query)
+  query = applyDescriptorChoice(query)
+  query = applyAssignationChoice(query)
+  query = applyThumbnailChoice(query)
+  query = applyPriorityChoice(query)
+  query = applyReadyForChoice(query)
+  query = applyAssetsReadyChoice(query)
+  query = applyUnionChoice(query)
+  return query.trim()
+}
+
+const applyFilter = () => {
+  emit('confirm', buildFilter())
+}
+
+// Task types
+
+const addTaskTypeFilter = () => {
+  const filter = {
+    localId: uuidv4(),
+    id: taskTypeList.value[0].id,
+    operator: '=',
+    values: [taskStatuses.value[0].id]
+  }
+  taskTypeFilters.values.push(filter)
+  return filter
+}
+
+const addInTaskTypeFilter = taskTypeFilter => {
+  taskTypeFilter.values.push(taskStatuses.value[0].id)
+}
+
+const removeTaskTypeFilter = taskTypeFilter => {
+  taskTypeFilters.values = taskTypeFilters.values.filter(
+    f => f.localId !== taskTypeFilter.localId
+  )
+}
+
+const addInDescriptorFilter = descriptorFilter => {
+  const descriptor = getDescriptor(descriptorFilter.id)
+  const value = descriptor.choices.length ? descriptor.choices[0] : ''
+  descriptorFilter.values.push(value)
+}
+
+// Descriptors
+
+const onDescriptorChanged = (descriptorFilter, filter) => {
+  const descriptor = getDescriptor(filter)
+  descriptorFilter.is_checklist = false
+  if (descriptor.choices.length > 0) {
+    const checklistValues = getDescriptorChecklistValues(descriptor)
+    if (checklistValues.length > 0) {
+      descriptorFilter.is_checklist = true
+      descriptorFilter.values = [checklistValues[0]]
+      descriptorFilter.operator = '='
+    } else {
+      descriptorFilter.values = [descriptor.choices[0]]
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        this.assignation.taskTypeId =
-          this.taskTypeList.length > 0 ? this.taskTypeList[0].id : ''
-        this.readyFor.taskTypeId = ''
-        this.priority.taskTypeId = ''
-        this.priority.value = '0'
-        this.setFiltersFromCurrentQuery()
+  } else if (descriptor.data_type === 'boolean') {
+    descriptorFilter.values = ['-true']
+  } else {
+    descriptorFilter.values = ['']
+  }
+}
+
+const addDescriptorFilter = () => {
+  const descriptor = getDescriptor(descriptorOptions.value[0].value)
+  const values = []
+  let isChecklist = false
+  if (descriptor.choices.length > 0) {
+    const checklistValues = getDescriptorChecklistValues(descriptor)
+    if (checklistValues.length > 0) {
+      isChecklist = true
+      values.push({ ...checklistValues[0], checked: true })
+    } else {
+      values.push(descriptor.choices[0])
+    }
+  } else if (descriptor.data_type === 'boolean') {
+    values.push('-true')
+  } else {
+    values.push('')
+  }
+  const filter = {
+    localId: uuidv4(),
+    id: descriptorOptions.value[0].value,
+    operator: '=',
+    values,
+    is_checklist: isChecklist
+  }
+  metadataDescriptorFilters.values.push(filter)
+  return filter
+}
+
+const removeDescriptorFilter = descriptorFilter => {
+  metadataDescriptorFilters.values = metadataDescriptorFilters.values.filter(
+    f => f.localId !== descriptorFilter.localId
+  )
+}
+
+const onOperatorChanged = (operator, descriptorFilter) => {
+  if (operator !== 'in') {
+    descriptorFilter.values = [descriptorFilter.values[0]]
+  }
+}
+
+// Helpers to set filters from search query
+
+const setFiltersFromAssetTypeQuery = filter => {
+  assetTypeFilters.operator = filter.excluding ? '=-' : '='
+  assetTypeFilters.value = filter.assetType.id
+}
+
+const setFiltersFromStatusQuery = filter => {
+  let operator = '='
+  if (filter.taskStatuses.length > 1) operator = 'in'
+  else if (filter.excluding) operator = '=-'
+  taskTypeFilters.values.push({
+    localId: uuidv4(),
+    id: filter.taskType.id,
+    operator,
+    values: filter.taskStatuses
+  })
+}
+
+const setFiltersFromDescriptorQuery = filter => {
+  let operator = '='
+  let isChecklist = false
+  let values = filter.values
+  if (filter.values.length > 1) {
+    operator = 'in'
+  } else {
+    if (filter.values[0].endsWith(':true')) {
+      isChecklist = true
+      values = [{ text: filter.values[0].replace(/:true$/, ''), checked: true }]
+    } else if (filter.values[0].endsWith(':false')) {
+      isChecklist = true
+      values = [
+        { text: filter.values[0].replace(/:false$/, ''), checked: false }
+      ]
+    } else if (filter.excluding) {
+      if (filter.descriptor.data_type === 'boolean') {
+        values = [`-${filter.values[0]}`]
+      } else {
+        operator = '=-'
       }
     }
   }
+  metadataDescriptorFilters.values.push({
+    localId: uuidv4(),
+    id: filter.descriptor.id,
+    operator,
+    values,
+    is_checklist: isChecklist
+  })
+}
+
+const setFiltersFromAssignationQuery = filter => {
+  assignation.value = filter.assigned ? 'assigned' : 'unassigned'
+  assignation.taskTypeId = filter.taskType.id
+}
+
+const setFiltersFromAssignedToQuery = filter => {
+  assignation.value = filter.excluding ? '-assignedto' : 'assignedto'
+  assignation.person = people.value.find(p => p.id === filter.personIds[0])
+  assignation.taskTypeId = filter.taskType?.id
+}
+
+const setFiltersFromThumbnailQuery = filter => {
+  hasThumbnail.value = filter.excluding ? '-withthumbnail' : 'withthumbnail'
+}
+
+const setFiltersFromPriorityQuery = filter => {
+  priority.taskTypeId = filter.taskTypeId
+  priority.value = String(filter.value)
+}
+
+const setFiltersFromReadyForQuery = filter => {
+  readyFor.taskTypeId = filter.value
 }
+
+const setFiltersFromAssetsReadyQuery = filter => {
+  isAssetsReady.taskTypeId = filter.value
+  isAssetsReady.value = filter.excluding ? '-assetsready' : 'assetsready'
+}
+
+const setUnion = () => {
+  union.value = 'or'
+}
+
+const filterDispatchByType = {
+  assettype: setFiltersFromAssetTypeQuery,
+  status: setFiltersFromStatusQuery,
+  descriptor: setFiltersFromDescriptorQuery,
+  assignation: setFiltersFromAssignationQuery,
+  assignedto: setFiltersFromAssignedToQuery,
+  thumbnail: setFiltersFromThumbnailQuery,
+  priority: setFiltersFromPriorityQuery,
+  readyfor: setFiltersFromReadyForQuery,
+  assetsready: setFiltersFromAssetsReadyQuery
+}
+
+const setFiltersFromCurrentQuery = () => {
+  const searchQuery = searchTextByEntity[props.entityType]?.value
+  if (!searchQuery) return
+  const filters = getFilters({
+    entryIndex: [],
+    assetTypes: productionAssetTypes.value,
+    taskTypes: productionTaskTypes.value,
+    taskStatuses: taskStatuses.value,
+    descriptors: metadataDescriptors.value,
+    persons: people.value,
+    query: searchQuery
+  })
+  filters.forEach(filter => {
+    filterDispatchByType[filter.type]?.(filter)
+  })
+  if (filters.union) setUnion()
+}
+
+const onTaskTypeOperatorChanged = taskTypeFilter => {
+  if (taskTypeFilter.operator !== 'in') {
+    taskTypeFilter.values = [taskTypeFilter.values[0]]
+  }
+}
+
+const reset = () => {
+  assignation.value = 'nofilter'
+  assignation.person = null
+  assignation.taskTypeId = ''
+  hasThumbnail.value = 'nofilter'
+  metadataDescriptorFilters.values = []
+  taskTypeFilters.values = []
+  assetTypeFilters.operator = '='
+  assetTypeFilters.value = '-'
+}
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (!active) return
+    reset()
+    assignation.taskTypeId =
+      taskTypeList.value.length > 0 ? taskTypeList.value[0].id : ''
+    readyFor.taskTypeId = ''
+    priority.taskTypeId = ''
+    priority.value = '0'
+    setFiltersFromCurrentQuery()
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  reset()
+  setFiltersFromCurrentQuery()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1005,19 +953,10 @@ export default {
   text-transform: uppercase;
 }
 
-.field {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 .task-type-filter,
 .descriptor-filter {
   margin-bottom: 0.3em;
   align-items: flex-start;
-
-  .descriptor-text-value {
-    padding: 0;
-  }
 }
 
 .value-column {
@@ -1032,4 +971,31 @@ export default {
     line-height: 30px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .modal-content {
+    margin: 1rem 0.5rem;
+    max-height: calc(100vh - 2rem);
+    width: auto;
+  }
+
+  .box {
+    padding: 1.5em;
+  }
+
+  .title {
+    font-size: 1.5em;
+  }
+
+  .task-type-filter,
+  .descriptor-filter,
+  .assignation-filter,
+  .asset-type-filter {
+    flex-wrap: wrap;
+  }
+
+  .value-column {
+    width: 100%;
+  }
+}
 </style>
diff --git a/src/components/modals/BuildPeopleFilterModal.vue b/src/components/modals/BuildPeopleFilterModal.vue
index bfb165f99f..60fd35874a 100644
--- a/src/components/modals/BuildPeopleFilterModal.vue
+++ b/src/components/modals/BuildPeopleFilterModal.vue
@@ -1,267 +1,175 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('entities.build_filter.title')"
+    @cancel="$emit('cancel')"
   >
-    <div @click="$emit('cancel')" class="modal-background"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('entities.build_filter.title') }}
-        </h1>
-
-        <!--combobox
+    <h3 class="subtitle">
+      {{ $t('entities.build_filter.department') }}
+    </h3>
+
+    <div
+      class="flexrow department-filter"
+      :key="'task-type-' + i"
+      v-for="(departmentFilter, i) in departmentFilters.values"
+    >
+      <combobox
         class="flexrow-item"
-        :options="general.unionOptions"
+        :options="operatorOptions"
+        @update:model-value="onDepartmentOperatorChanged(departmentFilter)"
         locale-key-prefix="entities.build_filter."
-        v-model="union"
-      /-->
-
-        <h3 class="subtitle">
-          {{ $t('entities.build_filter.department') }}
-        </h3>
-
+        v-model="departmentFilter.operator"
+      />
+      <div class="flexrow-item flexrow value-column">
         <div
-          class="flexrow department-filter"
-          :key="'task-type-' + i"
-          v-for="(departmentFilter, i) in departmentFilters.values"
+          :key="`department-${index}`"
+          v-for="(_, index) in departmentFilter.values"
         >
           <combobox
             class="flexrow-item"
-            :options="general.operatorOptions"
-            @update:model-value="onDepartmentOperatorChanged(departmentFilter)"
-            locale-key-prefix="entities.build_filter."
-            v-model="departmentFilter.operator"
+            :options="departmentsOptions"
+            v-model="departmentFilter.values[index]"
           />
-          <div class="flexrow-item flexrow value-column">
-            <div
-              :key="`department-${index}`"
-              v-for="(_, index) in departmentFilter.values"
-            >
-              <combobox
-                class="flexrow-item"
-                :options="departmentsOptions"
-                v-model="departmentFilter.values[index]"
-              />
-            </div>
-            <button-simple
-              class="mt05"
-              icon="plus"
-              @click="addInDepartmentFilter(departmentFilter)"
-              v-if="departmentFilter.operator === 'in'"
-            />
-          </div>
         </div>
-
-        <modal-footer
-          :error-text="$t('entities.thumbnails.error')"
-          @confirm="applyFilter"
-          @cancel="$emit('cancel')"
+        <button-simple
+          class="mt05"
+          icon="plus"
+          @click="addInDepartmentFilter(departmentFilter)"
+          v-if="departmentFilter.operator === 'in'"
         />
       </div>
     </div>
-  </div>
+
+    <modal-footer
+      :error-text="$t('entities.thumbnails.error')"
+      @confirm="applyFilter"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, reactive, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
 import { getFilters } from '@/lib/filtering'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 
-export default {
-  name: 'build-people-filter-modal',
+const store = useStore()
 
-  mixins: [modalMixin],
+const props = defineProps({
+  active: { type: Boolean, default: false }
+})
 
-  components: {
-    ButtonSimple,
-    Combobox,
-    ModalFooter
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      general: {
-        operatorOptions: [
-          { label: 'equal', value: '=' },
-          { label: 'not_equal', value: '=-' },
-          { label: 'in', value: 'in' }
-        ],
-        unionOptions: [
-          { label: 'union_and', value: 'and' },
-          { label: 'union_or', value: 'or' }
-        ]
-      },
-      departmentFilters: {
-        values: []
-      },
-      union: 'and'
-    }
-  },
-
-  mounted() {
-    this.reset()
-    this.setFiltersFromCurrentQuery()
-  },
-
-  computed: {
-    ...mapGetters([
-      'peopleSearchText',
-      'peopleSearchText',
-      'departmentMap',
-      'departments'
-    ]),
-
-    departmentsOptions() {
-      return this.departments.map(department => {
-        return {
-          label: department.name,
-          value: department.id
-        }
-      })
-    }
-  },
+const operatorOptions = [
+  { label: 'equal', value: '=' },
+  { label: 'not_equal', value: '=-' },
+  { label: 'in', value: 'in' }
+]
 
-  methods: {
-    // Build filter
+const departmentFilters = reactive({ values: [] })
+let union = 'and'
 
-    applyFilter() {
-      const query = this.buildFilter()
-      this.$emit('confirm', query)
-    },
+const departmentMap = computed(() => store.getters.departmentMap)
+const departments = computed(() => store.getters.departments)
+const peopleSearchText = computed(() => store.getters.peopleSearchText)
 
-    buildFilter() {
-      let query = ''
-      query = this.applyDepartmentChoice(query)
-      query = this.applyUnionChoice(query)
-      return query.trim()
-    },
+const departmentsOptions = computed(() =>
+  departments.value.map(department => ({
+    label: department.name,
+    value: department.id
+  }))
+)
 
-    addDepartmentFilter() {
-      const filter = {
-        operator: '=',
-        values: [this.departments[0].id]
-      }
-      this.departmentFilters.values.push(filter)
-      return filter
-    },
+const onDepartmentOperatorChanged = departmentFilter => {
+  if (departmentFilter.operator !== 'in') {
+    departmentFilter.values = [departmentFilter.values[0]]
+  }
+}
 
-    addInDepartmentFilter(departmentFilter) {
-      departmentFilter.values.push(this.departments[0].name)
-    },
+const addInDepartmentFilter = departmentFilter => {
+  departmentFilter.values.push(departments.value[0].name)
+}
 
-    removeDepartmentFilter(departmentFilter) {
-      this.departmentFilters.values = this.departmentFilters.values.filter(
-        f => f !== departmentFilter
+const applyDepartmentChoice = query => {
+  departmentFilters.values.forEach(departmentFilter => {
+    const operator = departmentFilter.operator === '=-' ? '=[-' : '=['
+    const value = departmentFilter.values
+      .map(
+        dId => departmentMap.value.get(dId)?.name || departments.value[0].name
       )
-    },
-
-    applyDepartmentChoice(query) {
-      this.departmentFilters.values.forEach(departmentFilter => {
-        let operator = '=['
-        if (departmentFilter.operator === '=-') operator = '=[-'
-        const value = departmentFilter.values
-          .map(dId => {
-            return this.departmentMap.get(dId)
-              ? this.departmentMap.get(dId).name
-              : this.departments[0].name
-          })
-          .join(',')
-        query += ` department${operator}${value}]`
-      })
-      return query
-    },
-
-    applyUnionChoice(query) {
-      if (this.union === 'or') {
-        query = ` +(${query.trim()})`
-      }
-      return query
-    },
-
-    // Helpers to set filters from search query
-
-    setFiltersFromCurrentQuery() {
-      if (!this.peopleSearchText) {
-        return
-      }
-      this.departmentFilters.values = []
+      .join(',')
+    query += ` department${operator}${value}]`
+  })
+  return query
+}
 
-      const filters = getFilters({
-        entryIndex: [],
-        departments: this.departments,
-        persons: [],
-        query: this.peopleSearchText
-      })
-      filters.forEach(filter => {
-        this.setFiltersFromDepartmentQuery(filter)
-      })
-      if (filters.union) {
-        this.setUnion()
-      }
-    },
+const applyUnionChoice = query =>
+  union === 'or' ? ` +(${query.trim()})` : query
 
-    setFiltersFromDepartmentQuery(filter) {
-      let operator = '='
-      if (filter.values.length > 1) {
-        operator = 'in'
-      } else if (filter.excluding) {
-        operator = '=-'
-      }
-      this.departmentFilters.values.push({
-        operator,
-        values: filter.values.map(d => d.id)
-      })
-    },
+const buildFilter = () => {
+  let query = ''
+  query = applyDepartmentChoice(query)
+  query = applyUnionChoice(query)
+  return query.trim()
+}
 
-    setUnion() {
-      this.union = 'or'
-    },
+const applyFilter = () => {
+  emit('confirm', buildFilter())
+}
 
-    // General
+const setFiltersFromDepartmentQuery = filter => {
+  let operator = '='
+  if (filter.values.length > 1) operator = 'in'
+  else if (filter.excluding) operator = '=-'
+  departmentFilters.values.push({
+    operator,
+    values: filter.values.map(d => d.id)
+  })
+}
 
-    onDepartmentOperatorChanged(departmentFilter) {
-      if (departmentFilter.operator !== 'in') {
-        departmentFilter.values = [departmentFilter.values[0]]
-      }
-    },
+const setFiltersFromCurrentQuery = () => {
+  if (!peopleSearchText.value) return
+  departmentFilters.values = []
+  const filters = getFilters({
+    entryIndex: [],
+    departments: departments.value,
+    persons: [],
+    query: peopleSearchText.value
+  })
+  filters.forEach(setFiltersFromDepartmentQuery)
+  if (filters.union) union = 'or'
+}
 
-    reset() {
-      this.departmentFilters.values = [
-        {
-          operator: '=',
-          values: this.departments.length > 0 ? [this.departments[0].id] : []
-        }
-      ]
+const reset = () => {
+  departmentFilters.values = [
+    {
+      operator: '=',
+      values: departments.value.length > 0 ? [departments.value[0].id] : []
     }
-  },
+  ]
+}
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        this.setFiltersFromCurrentQuery()
-      }
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      reset()
+      setFiltersFromCurrentQuery()
     }
   }
-}
+)
+
+onMounted(() => {
+  reset()
+  setFiltersFromCurrentQuery()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/ChangeAvatarModal.vue b/src/components/modals/ChangeAvatarModal.vue
index dc1de724d0..c7d16c814d 100644
--- a/src/components/modals/ChangeAvatarModal.vue
+++ b/src/components/modals/ChangeAvatarModal.vue
@@ -1,117 +1,70 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ title }}
-        </h1>
-
-        <p>
-          {{ $t('main.csv.select_file') }}
-        </p>
-
-        <file-upload
-          ref="uploadAvatarField"
-          :label="$t('main.csv.upload_file')"
-          @fileselected="onFileSelected"
-          accept=".png,.jpg,.jpeg"
-        />
-
-        <p class="error" v-if="isError">
-          {{ $t('profile.avatar.error_upload') }}
-        </p>
-
-        <modal-footer
-          :error-text="$t('productions.metadata.error')"
-          :is-loading="isLoading"
-          :is-disabled="!formData"
-          @confirm="onConfirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="title" @cancel="$emit('cancel')">
+    <p>
+      {{ $t('main.csv.select_file') }}
+    </p>
+
+    <file-upload
+      ref="uploadAvatarField"
+      :label="$t('main.csv.upload_file')"
+      @fileselected="onFileSelected"
+      accept=".png,.jpg,.jpeg"
+    />
+
+    <p class="error" v-if="isError">
+      {{ $t('profile.avatar.error_upload') }}
+    </p>
+
+    <modal-footer
+      :error-text="$t('productions.metadata.error')"
+      :is-loading="isLoading"
+      :is-disabled="!formData"
+      @confirm="onConfirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { ref, watch } from 'vue'
 
-import FileUpload from '@/components/widgets/FileUpload.vue'
+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'
 
-export default {
-  name: 'change-avatar-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    FileUpload,
-    ModalFooter
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  title: { type: String, default: '' }
+})
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm', 'fileselected'])
 
-  emits: ['cancel', 'confirm', 'fileselected'],
+const formData = ref(null)
+const uploadAvatarField = ref(null)
 
-  data() {
-    return {
-      formData: null
-    }
-  },
+const onFileSelected = data => {
+  formData.value = data
+  emit('fileselected', data)
+}
 
-  methods: {
-    onFileSelected(formData) {
-      this.formData = formData
-      this.$emit('fileselected', formData)
-    },
+const onConfirmClicked = () => {
+  emit('confirm', formData.value)
+}
 
-    onConfirmClicked() {
-      this.$emit('confirm', this.formData)
-    }
-  },
-  watch: {
-    active() {
-      this.formData = null
-      this.$refs.uploadAvatarField.reset()
-    }
+watch(
+  () => props.active,
+  () => {
+    formData.value = null
+    uploadAvatarField.value?.reset()
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
 .error {
   margin-top: 1em;
 }
-
-.description {
-  margin-bottom: 1em;
-}
 </style>
diff --git a/src/components/modals/ChangePasswordModal.vue b/src/components/modals/ChangePasswordModal.vue
index 26627f916e..b23c14ea77 100644
--- a/src/components/modals/ChangePasswordModal.vue
+++ b/src/components/modals/ChangePasswordModal.vue
@@ -1,211 +1,166 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('people.change_password_for') }} {{ person.name }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            autocomplete="new-password"
-            :disabled="person.is_generated_from_ldap"
-            :label="$t('people.fields.password')"
-            ref="first-password"
-            type="password"
-            @enter="confirmClicked()"
-            v-model="form.password"
-          />
-          <text-field
-            autocomplete="new-password"
-            :disabled="person.is_generated_from_ldap"
-            :label="$t('people.fields.password_2')"
-            type="password"
-            @enter="confirmClicked()"
-            v-model="form.password2"
-          />
-        </form>
-
-        <div class="flexrow">
-          <button
-            :class="{
-              button: true,
-              'is-primary': true,
-              'flexrow-item': true,
-              'is-loading': isLoading
-            }"
-            :disabled="person.is_generated_from_ldap"
-            @click="confirmClicked"
-          >
-            {{ $t('profile.change_password.button') }}
-          </button>
-          <button
-            :class="{
-              button: true,
-              'flexrow-item': true,
-              'is-loading': isLoading,
-              'is-warning': true
-            }"
-            :disabled="
-              !(
-                person.totp_enabled ||
-                person.email_otp_enabled ||
-                person.fido_enabled
-              )
-            "
-            @click="disableTwoFactorAuthenticationClicked"
-          >
-            {{ $t('people.disable_2FA') }}
-          </button>
-          <div class="filler"></div>
-
-          <button class="button is-link flexrow-item" @click="$emit('cancel')">
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
-
-        <div class="error has-text-right mt1" v-if="!isValid">
-          {{ $t('profile.change_password.unvalid') }}
-        </div>
-        <div class="error has-text-right mt1" v-if="isError">
-          {{ $t('people.change_password_error') }}
-        </div>
-        <div
-          class="error has-text-right mt1"
-          v-if="isErrorDisableTwoFactorAuthentication"
-        >
-          {{ $t('people.disable_2FA_error') }}
-        </div>
-      </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="firstPassword"
+        autocomplete="new-password"
+        :disabled="person.is_generated_from_ldap"
+        :label="$t('people.fields.password')"
+        type="password"
+        @enter="confirmClicked"
+        v-model="form.password"
+      />
+      <text-field
+        autocomplete="new-password"
+        :disabled="person.is_generated_from_ldap"
+        :label="$t('people.fields.password_2')"
+        type="password"
+        @enter="confirmClicked"
+        v-model="form.password2"
+      />
+    </form>
+
+    <div class="flexrow">
+      <button
+        :class="{
+          button: true,
+          'is-primary': true,
+          'flexrow-item': true,
+          'is-loading': isLoading
+        }"
+        :disabled="person.is_generated_from_ldap"
+        @click="confirmClicked"
+      >
+        {{ $t('profile.change_password.button') }}
+      </button>
+      <button
+        :class="{
+          button: true,
+          'flexrow-item': true,
+          'is-loading': isLoading,
+          'is-warning': true
+        }"
+        :disabled="
+          !(
+            person.totp_enabled ||
+            person.email_otp_enabled ||
+            person.fido_enabled
+          )
+        "
+        @click="disableTwoFactorAuthenticationClicked"
+      >
+        {{ $t('people.disable_2FA') }}
+      </button>
+      <div class="filler"></div>
+
+      <button class="button is-link flexrow-item" @click="$emit('cancel')">
+        {{ $t('main.cancel') }}
+      </button>
     </div>
-  </div>
-</template>
 
-<script>
-import { mapActions } from 'vuex'
+    <div class="error has-text-right mt1" v-if="!isValid">
+      {{ $t('profile.change_password.unvalid') }}
+    </div>
+    <div class="error has-text-right mt1" v-if="isError">
+      {{ $t('people.change_password_error') }}
+    </div>
+    <div
+      class="error has-text-right mt1"
+      v-if="isErrorDisableTwoFactorAuthentication"
+    >
+      {{ $t('people.disable_2FA_error') }}
+    </div>
+  </base-modal>
+</template>
 
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'change-password-modal',
+const { t } = useI18n()
+const store = useStore()
 
-  mixins: [modalMixin],
+// Props / Emits
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    person: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        password: '',
-        password2: ''
-      },
-      isLoading: false,
-      isError: false,
-      isErrorDisableTwoFactorAuthentication: false,
-      isValid: true
-    }
-  },
-
-  components: {
-    TextField
-  },
-
-  methods: {
-    ...mapActions([
-      'changePasswordPerson',
-      'disableTwoFactorAuthenticationPerson'
-    ]),
-
-    confirmClicked() {
-      this.isErrorDisableTwoFactorAuthentication = false
-      this.isError = false
-      this.isLoading = true
-      this.changePasswordPerson({
-        person: this.person,
-        form: this.form
-      })
-        .then(() => {
-          this.$emit('confirm')
-        })
-        .catch(err => {
-          if (err.isValidPassword === false) this.isValid = false
-          else this.isError = true
-        })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-
-    disableTwoFactorAuthenticationClicked() {
-      this.isErrorDisableTwoFactorAuthentication = false
-      this.isError = false
-      this.isLoading = true
-      this.disableTwoFactorAuthenticationPerson(this.person)
-        .catch(() => {
-          this.isErrorDisableTwoFactorAuthentication = true
-        })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-
-    resetForm() {
-      if (this.person) {
-        this.form = {
-          password: '',
-          password2: ''
-        }
-        this.isLoading = false
-        this.isError = false
-        this.isErrorDisableTwoFactorAuthentication = false
-        this.isValid = true
-      }
-    }
-  },
-
-  watch: {
-    person() {
-      this.resetForm()
-    },
-
-    active() {
-      if (this.active) {
-        this.resetForm()
-        setTimeout(() => {
-          this.$refs['first-password']?.focus()
-        }, 100)
-      }
-    }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  person: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ password: '', password2: '' })
+const firstPassword = ref(null)
+const isError = ref(false)
+const isErrorDisableTwoFactorAuthentication = ref(false)
+const isLoading = ref(false)
+const isValid = ref(true)
+
+// Computed
+
+const modalTitle = computed(
+  () => `${t('people.change_password_for')} ${props.person.name}`
+)
+
+// Functions
+
+const confirmClicked = async () => {
+  isErrorDisableTwoFactorAuthentication.value = false
+  isError.value = false
+  isLoading.value = true
+  try {
+    await store.dispatch('changePasswordPerson', {
+      person: props.person,
+      form: form.value
+    })
+    emit('confirm')
+  } catch (err) {
+    if (err.isValidPassword === false) isValid.value = false
+    else isError.value = true
   }
+  isLoading.value = false
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
+const disableTwoFactorAuthenticationClicked = async () => {
+  isErrorDisableTwoFactorAuthentication.value = false
+  isError.value = false
+  isLoading.value = true
+  try {
+    await store.dispatch('disableTwoFactorAuthenticationPerson', props.person)
+  } catch {
+    isErrorDisableTwoFactorAuthentication.value = true
+  }
+  isLoading.value = false
 }
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
+
+const resetForm = () => {
+  if (!props.person) return
+  form.value = { password: '', password2: '' }
+  isLoading.value = false
+  isError.value = false
+  isErrorDisableTwoFactorAuthentication.value = false
+  isValid.value = true
 }
-</style>
+
+// Watchers
+
+watch(() => props.person, resetForm)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      resetForm()
+      setTimeout(() => {
+        firstPassword.value?.focus()
+      }, 100)
+    }
+  }
+)
+</script>
diff --git a/src/components/modals/ConfirmModal.vue b/src/components/modals/ConfirmModal.vue
index ead967b30e..fff4c4b5ba 100644
--- a/src/components/modals/ConfirmModal.vue
+++ b/src/components/modals/ConfirmModal.vue
@@ -29,43 +29,23 @@
   </div>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { toRef } from 'vue'
 
-export default {
-  name: 'confirm-modal',
+import { useModal } from '@/composables/modal'
 
-  mixins: [modalMixin],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  confirmButtonText: { type: String, default: '' },
+  errorText: { type: String, default: '' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  text: { type: String, required: true }
+})
 
-  props: {
-    text: {
-      required: true,
-      type: String
-    },
-    active: {
-      default: false,
-      type: Boolean
-    },
-    isLoading: {
-      default: false,
-      type: Boolean
-    },
-    isError: {
-      default: false,
-      type: Boolean
-    },
-    errorText: {
-      default: '',
-      type: String
-    },
-    confirmButtonText: {
-      default: '',
-      type: String
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  emits: ['cancel', 'confirm']
-}
+useModal(toRef(props, 'active'), emit)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/CreateTasksModal.vue b/src/components/modals/CreateTasksModal.vue
index 0a1d5195fd..fd50129c36 100644
--- a/src/components/modals/CreateTasksModal.vue
+++ b/src/components/modals/CreateTasksModal.vue
@@ -75,142 +75,90 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, ref, toRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
+import { useModal } from '@/composables/modal'
 
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 import PageTitle from '@/components/widgets/PageTitle.vue'
 
-export default {
-  name: 'create-tasks-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    ComboboxTaskType,
-    PageTitle
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    errorText: {
-      type: String,
-      default: ''
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isLoadingStay: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: ['cancel', 'confirm', 'confirm-and-stay'],
-
-  data() {
-    return {
-      form: {
-        task_type_id: ''
-      },
-      selectionOnly: 'true',
-      selectionOptions: [
-        { label: this.$t('tasks.for_selection'), value: 'true' },
-        { label: this.$t('tasks.for_project'), value: 'false' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'productionAssetTaskTypes',
-      'productionEditTaskTypes',
-      'productionEpisodeTaskTypes',
-      'productionShotTaskTypes',
-      'productionSequenceTaskTypes'
-    ]),
-
-    isAssetTasks() {
-      return this.$route.path.includes('assets')
-    },
-    isShotsTasks() {
-      return this.$route.path.includes('shots')
-    },
-    isSequencesTasks() {
-      return this.$route.path.includes('sequences')
-    },
-    isEditsTasks() {
-      return this.$route.path.includes('edits')
-    },
-    isEpisodesTasks() {
-      return this.$route.path.includes('episodes')
-    }
-  },
-
-  methods: {
-    getApplicableTaskTypes() {
-      if (this.isAssetTasks) {
-        return this.productionAssetTaskTypes
-      }
-      if (this.isShotsTasks) {
-        return this.productionShotTaskTypes
-      }
-      if (this.isSequencesTasks) {
-        return this.productionSequenceTaskTypes
-      }
-      if (this.isEditsTasks) {
-        return this.productionEditTaskTypes
-      }
-      if (this.isEpisodesTasks) {
-        return this.productionEpisodeTaskTypes
-      }
-      return []
-    },
-
-    confirmClicked() {
-      this.$emit('confirm', {
-        form: this.form,
-        selectionOnly: this.selectionOnly === 'true'
-      })
-    },
-
-    confirmAndStayClicked() {
-      this.$emit('confirm-and-stay', {
-        form: this.form,
-        selectionOnly: this.selectionOnly === 'true'
-      })
-    }
-  },
-
-  mounted() {
-    const taskTypes = this.getApplicableTaskTypes()
-
-    if (taskTypes.length > 0) {
-      this.form.task_type_id = taskTypes[0].id
-    }
-  }
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  errorText: { type: String, default: '' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isLoadingStay: { type: Boolean, default: false },
+  text: { type: String, default: '' },
+  title: { type: String, default: '' }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'confirm-and-stay'])
+
+useModal(toRef(props, 'active'), emit)
+
+const form = ref({ task_type_id: '' })
+const selectionOnly = ref('true')
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const productionAssetTaskTypes = computed(
+  () => store.getters.productionAssetTaskTypes
+)
+const productionEditTaskTypes = computed(
+  () => store.getters.productionEditTaskTypes
+)
+const productionEpisodeTaskTypes = computed(
+  () => store.getters.productionEpisodeTaskTypes
+)
+const productionSequenceTaskTypes = computed(
+  () => store.getters.productionSequenceTaskTypes
+)
+const productionShotTaskTypes = computed(
+  () => store.getters.productionShotTaskTypes
+)
+
+const selectionOptions = computed(() => [
+  { label: t('tasks.for_selection'), value: 'true' },
+  { label: t('tasks.for_project'), value: 'false' }
+])
+
+const getApplicableTaskTypes = () => {
+  const path = route.path
+  if (path.includes('assets')) return productionAssetTaskTypes.value
+  if (path.includes('shots')) return productionShotTaskTypes.value
+  if (path.includes('sequences')) return productionSequenceTaskTypes.value
+  if (path.includes('edits')) return productionEditTaskTypes.value
+  if (path.includes('episodes')) return productionEpisodeTaskTypes.value
+  return []
+}
+
+const buildPayload = () => ({
+  form: form.value,
+  selectionOnly: selectionOnly.value === 'true'
+})
+
+const confirmClicked = () => {
+  emit('confirm', buildPayload())
 }
+
+const confirmAndStayClicked = () => {
+  emit('confirm-and-stay', buildPayload())
+}
+
+onMounted(() => {
+  const taskTypes = getApplicableTaskTypes()
+  if (taskTypes.length > 0) {
+    form.value.task_type_id = taskTypes[0].id
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/DayOffModal.vue b/src/components/modals/DayOffModal.vue
index 1f01455d4b..5f46d7eacf 100644
--- a/src/components/modals/DayOffModal.vue
+++ b/src/components/modals/DayOffModal.vue
@@ -1,177 +1,136 @@
 <template>
-  <div class="modal day-off-modal" :class="{ 'is-active': active }">
-    <div class="modal-background" @click="$emit('cancel')"></div>
-    <div class="modal-content">
-      <form class="box" @submit.prevent="confirm">
-        <h1 class="title">
-          {{ isEditing ? $t('days_off.edit') : $t('days_off.add') }}
-        </h1>
-        <div class="flexrow field">
-          <div class="flexrow-item ml2">
-            <label class="label">
-              {{ $t('main.start_date') }}
-            </label>
-            <date-field
-              utc
-              week-days-disabled
-              @update:model-value="validateDates"
-              v-model="form.startDate"
-            />
-          </div>
-          <div class="flexrow-item">
-            <label class="label">
-              {{ $t('main.end_date') }}
-            </label>
-            <date-field
-              utc
-              week-days-disabled
-              @update:model-value="validateDates"
-              v-model="form.endDate"
-            />
-          </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent="confirm">
+      <div class="flexrow field">
+        <div class="flexrow-item ml2">
+          <label class="label">
+            {{ $t('main.start_date') }}
+          </label>
+          <date-field
+            utc
+            week-days-disabled
+            @update:model-value="validateDates"
+            v-model="form.startDate"
+          />
         </div>
-        <text-field
-          class="mt2"
-          :label="`${$t('main.description')} (${$t('main.optional')})`"
-          :required="false"
-          v-model.trim="form.description"
-        />
-        <p class="mb2 warning-text">
-          <alert-triangle-icon class="icon mr05 warning" />{{
-            $t('days_off.confirm_day_offs')
-          }}
-        </p>
-        <p class="is-danger has-text-right" v-if="isError">
-          {{ errorText || $t('days_off.error_days_off') }}
-        </p>
-        <p class="has-text-right mt1 mb2">
-          <button
-            type="submit"
-            class="button is-primary"
-            :class="{ 'is-loading': isLoading }"
-          >
-            {{ $t('main.confirmation') }}
-          </button>
-          <button type="button" class="button is-link" @click="$emit('cancel')">
-            {{ $t('main.cancel') }}
-          </button>
-        </p>
-      </form>
-    </div>
-  </div>
+        <div class="flexrow-item">
+          <label class="label">
+            {{ $t('main.end_date') }}
+          </label>
+          <date-field
+            utc
+            week-days-disabled
+            @update:model-value="validateDates"
+            v-model="form.endDate"
+          />
+        </div>
+      </div>
+      <text-field
+        class="mt2"
+        :label="`${$t('main.description')} (${$t('main.optional')})`"
+        :required="false"
+        v-model.trim="form.description"
+      />
+      <p class="mb2 warning-text">
+        <alert-triangle-icon class="icon mr05 warning" />{{
+          $t('days_off.confirm_day_offs')
+        }}
+      </p>
+      <p class="is-danger has-text-right" v-if="isError">
+        {{ errorText || $t('days_off.error_days_off') }}
+      </p>
+      <p class="has-text-right mt1 mb2">
+        <button
+          type="submit"
+          class="button is-primary"
+          :class="{ 'is-loading': isLoading }"
+        >
+          {{ $t('main.confirmation') }}
+        </button>
+        <button type="button" class="button is-link" @click="$emit('cancel')">
+          {{ $t('main.cancel') }}
+        </button>
+      </p>
+    </form>
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 import { AlertTriangleIcon } from 'lucide-vue-next'
 import moment from 'moment-timezone'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
+import BaseModal from '@/components/modals/BaseModal.vue'
 import DateField from '@/components/widgets/DateField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'day-off-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    AlertTriangleIcon,
-    DateField,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    dayOffToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    errorText: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        startDate: null,
-        endDate: null,
-        description: null
-      }
-    }
-  },
-
-  computed: {
-    isEditing() {
-      return Boolean(this.dayOffToEdit?.id)
-    }
-  },
-
-  methods: {
-    confirm() {
-      const dayOff = {
-        ...this.dayOffToEdit,
-        date: this.form.startDate,
-        end_date: this.form.endDate,
-        description: this.form.description
-      }
-      this.$emit('confirm', dayOff)
-    },
-
-    resetForm() {
-      const today = moment().utc().toDate()
-      this.form = {
-        startDate: this.dayOffToEdit?.date || today,
-        endDate:
-          this.dayOffToEdit?.end_date || this.dayOffToEdit?.date || today,
-        description: this.dayOffToEdit?.description || null
-      }
-    },
-
-    validateDates() {
-      if (
-        this.form.startDate &&
-        this.form.endDate &&
-        this.form.startDate > this.form.endDate
-      ) {
-        this.form.endDate = this.form.startDate
-      }
-    }
-  },
-
-  watch: {
-    dayOffToEdit: {
-      immediate: true,
-      handler() {
-        this.resetForm()
-      }
-    }
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  dayOffToEdit: { type: Object, default: () => ({}) },
+  errorText: { type: String, default: '' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  startDate: null,
+  endDate: null,
+  description: null
+})
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.dayOffToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value ? t('days_off.edit') : t('days_off.add')
+)
+
+// Functions
+
+const confirm = () => {
+  emit('confirm', {
+    ...props.dayOffToEdit,
+    date: form.value.startDate,
+    end_date: form.value.endDate,
+    description: form.value.description
+  })
+}
+
+const resetForm = () => {
+  const today = moment().utc().toDate()
+  form.value = {
+    startDate: props.dayOffToEdit?.date || today,
+    endDate: props.dayOffToEdit?.end_date || props.dayOffToEdit?.date || today,
+    description: props.dayOffToEdit?.description || null
+  }
+}
+
+const validateDates = () => {
+  if (
+    form.value.startDate &&
+    form.value.endDate &&
+    form.value.startDate > form.value.endDate
+  ) {
+    form.value.endDate = form.value.startDate
   }
 }
+
+// Watchers
+
+watch(() => props.dayOffToEdit, resetForm, { immediate: true })
 </script>
 
 <style lang="scss" scoped>
-.modal-content .box {
-  padding: 2em;
-}
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
 .ml2 {
   margin-left: 2.5em;
 }
diff --git a/src/components/modals/EditAssetModal.vue b/src/components/modals/EditAssetModal.vue
index 8f8b917d61..dac8824af8 100644
--- a/src/components/modals/EditAssetModal.vue
+++ b/src/components/modals/EditAssetModal.vue
@@ -1,368 +1,266 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="assetToEdit?.id">
-          {{ $t('assets.edit_title') }} {{ assetToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('assets.new_asset') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox
-            :label="$t('assets.fields.type')"
-            :options="productionAssetTypeOptions"
-            v-model="form.entity_type_id"
-          />
-          <combobox
-            ref="episodeField"
-            :label="$t('assets.fields.episode')"
-            :options="episodeOptions"
-            required
-            v-model="form.source_id"
-            v-if="isTVShow"
-          />
-          <text-field
-            ref="nameField"
-            :label="$t('assets.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('assets.fields.description')"
-            v-model="form.description"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-          />
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            v-model.trim="form.data.resolution"
-            @enter="runConfirmation"
-          />
-          <template v-if="assetToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="assetToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in assetMetadataDescriptors"
-            />
-          </template>
-          <combobox-boolean
-            :label="$t('assets.fields.shared')"
-            v-model="form.is_shared"
-            @enter="runConfirmation"
-          />
-        </form>
-
-        <div class="has-text-right">
-          <a
-            :class="{
-              button: true,
-              'is-primary': true,
-              'is-loading': isLoadingStay
-            }"
-            @click="confirmAndStayClicked"
-            v-if="!assetToEdit?.id"
-          >
-            {{ $t('main.confirmation_and_stay') }}
-          </a>
-          <a
-            :class="{
-              button: true,
-              'is-primary': true,
-              'is-loading': isLoading
-            }"
-            @click="confirmClicked"
-          >
-            {{ $t('main.confirmation') }}
-          </a>
-          <button class="button is-link" @click="$emit('cancel')">
-            {{ $t('main.close') }}
-          </button>
-          <p class="error has-text-right info-message" v-if="isError">
-            {{ $t('assets.edit_fail') }}
-          </p>
-          <p class="success has-text-right info-message" v-if="isSuccess">
-            {{ assetSuccessText }}
-          </p>
-        </div>
-      </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <combobox
+        :label="$t('assets.fields.type')"
+        :options="productionAssetTypeOptions"
+        v-model="form.entity_type_id"
+      />
+      <combobox
+        ref="episodeField"
+        :label="$t('assets.fields.episode')"
+        :options="episodeOptions"
+        required
+        v-model="form.source_id"
+        v-if="isTVShow"
+      />
+      <text-field
+        ref="nameField"
+        :label="$t('assets.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <textarea-field
+        :label="$t('assets.fields.description')"
+        v-model="form.description"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        v-model.trim="form.data.resolution"
+        @enter="runConfirmation"
+      />
+      <template v-if="assetToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="assetToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in assetMetadataDescriptors"
+        />
+      </template>
+      <combobox-boolean
+        :label="$t('assets.fields.shared')"
+        v-model="form.is_shared"
+        @enter="runConfirmation"
+      />
+    </form>
+
+    <div class="has-text-right">
+      <a
+        :class="{
+          button: true,
+          'is-primary': true,
+          'is-loading': isLoadingStay
+        }"
+        @click="confirmAndStayClicked"
+        v-if="!assetToEdit?.id"
+      >
+        {{ $t('main.confirmation_and_stay') }}
+      </a>
+      <a
+        :class="{
+          button: true,
+          'is-primary': true,
+          'is-loading': isLoading
+        }"
+        @click="confirmClicked"
+      >
+        {{ $t('main.confirmation') }}
+      </a>
+      <button class="button is-link" @click="$emit('cancel')">
+        {{ $t('main.close') }}
+      </button>
+      <p class="error has-text-right info-message" v-if="isError">
+        {{ $t('assets.edit_fail') }}
+      </p>
+      <p class="success has-text-right info-message" v-if="isSuccess">
+        {{ assetSuccessText }}
+      </p>
     </div>
-  </div>
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-asset-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    ComboboxBoolean,
-    MetadataField,
-    TextField,
-    TextareaField
-  },
+const { t } = useI18n()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  assetToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isLoadingStay: { type: Boolean, default: false },
+  isSuccess: { type: Boolean, default: false },
+  text: { type: String, default: '' }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'confirm-and-stay'])
+
+const form = ref({
+  name: '',
+  description: '',
+  source_id: 'null',
+  data: { resolution: '' },
+  is_shared: 'false'
+})
+const assetSuccessText = ref('')
+const episodeField = ref(null)
+const nameField = ref(null)
+
+const assetCreated = computed(() => store.getters.assetCreated)
+const assetMetadataDescriptors = computed(
+  () => store.getters.assetMetadataDescriptors
+)
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const episodes = computed(() => store.getters.episodes)
+const isTVShow = computed(() => store.getters.isTVShow)
+const openProductions = computed(() => store.getters.openProductions)
+const productionAssetTypeOptions = computed(
+  () => store.getters.productionAssetTypeOptions
+)
+
+const isEditing = computed(() => Boolean(props.assetToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('assets.edit_title')} ${props.assetToEdit.name}`
+    : t('assets.new_asset')
+)
+
+const episodeOptions = computed(() => {
+  const options = episodes.value.map(episode => ({
+    label: episode.name,
+    value: episode.id
+  }))
+  if (currentProduction.value?.production_style !== 'video-game') {
+    options.unshift({ label: t('main.main_pack'), value: 'null' })
+  }
+  return options
+})
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: String,
-      default: ''
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isLoadingStay: {
-      type: Boolean,
-      default: false
-    },
-    isSuccess: {
-      type: Boolean,
-      default: false
-    },
-    assetToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const validateForm = () => {
+  if (isTVShow.value && !episodeField.value?.isValid) {
+    episodeField.value?.focus()
+    return false
+  }
+  if (!form.value.name) {
+    nameField.value?.focus()
+    return false
+  }
+  return true
+}
 
-  emits: ['cancel', 'confirm', 'confirm-and-stay'],
+const buildPayload = () => ({
+  ...form.value,
+  is_shared: form.value.is_shared === 'true'
+})
 
-  data() {
-    return {
-      form: {
-        name: '',
-        description: '',
-        source_id: 'null',
-        data: {
-          resolution: ''
-        },
-        is_shared: 'false'
-      },
-      assetSuccessText: ''
-    }
-  },
+const confirmClicked = () => {
+  if (!validateForm()) return
+  emit('confirm', buildPayload())
+}
 
-  mounted() {
-    this.resetForm()
-    this.assetSuccessText = ''
-  },
+const confirmAndStayClicked = () => {
+  if (!validateForm()) return
+  emit('confirm-and-stay', buildPayload())
+}
 
-  computed: {
-    ...mapGetters([
-      'assets',
-      'assetCreated',
-      'assetMetadataDescriptors',
-      'assetTypes',
-      'currentProduction',
-      'currentEpisode',
-      'episodes',
-      'isTVShow',
-      'productionAssetTypes',
-      'productionAssetTypeOptions',
-      'openProductions'
-    ]),
+const runConfirmation = () => {
+  if (isEditing.value) confirmClicked()
+  else confirmAndStayClicked()
+}
 
-    resolution() {
-      return this.assetToEdit.data?.resolution || ''
-    },
+const getEntityTypeIdDefaultValue = () => {
+  const options = productionAssetTypeOptions.value
+  let entityTypeId = props.assetToEdit.asset_type_id || options[0]?.value
+  const isInOptions = options.some(option => option.value === entityTypeId)
+  if (!isInOptions) entityTypeId = options[0]?.value
+  return entityTypeId
+}
 
-    episodeOptions() {
-      const options = this.episodes.map(episode => {
-        return {
-          label: episode.name,
-          value: episode.id
-        }
-      })
-      if (this.currentProduction.production_style !== 'video-game') {
-        options.unshift({
-          label: this.$t('main.main_pack'),
-          value: 'null'
-        })
-      }
-      return options
+const resetForm = () => {
+  if (isEditing.value) {
+    form.value = {
+      entity_type_id: getEntityTypeIdDefaultValue(),
+      project_id: props.assetToEdit.project_id,
+      name: props.assetToEdit.name,
+      description: props.assetToEdit.description,
+      source_id:
+        props.assetToEdit.source_id || props.assetToEdit.episode_id || 'null',
+      data: {
+        ...props.assetToEdit.data,
+        resolution: props.assetToEdit.data?.resolution || ''
+      },
+      is_shared: String(props.assetToEdit.is_shared === true)
     }
-  },
-
-  methods: {
-    validateForm() {
-      if (this.isTVShow && !this.$refs.episodeField?.isValid) {
-        this.focusEpisode()
-        return false
-      }
-      if (!this.form.name) {
-        this.focusName()
-        return false
-      }
-      return true
-    },
-
-    runConfirmation() {
-      if (this.isEditing()) {
-        this.confirmClicked()
-      } else {
-        this.confirmAndStayClicked()
-      }
-    },
-
-    focusEpisode() {
-      this.$refs.episodeField?.focus()
-    },
-
-    focusName() {
-      this.$refs.nameField?.focus()
-    },
-
-    confirmAndStayClicked() {
-      if (!this.validateForm()) return
-      this.$emit('confirm-and-stay', {
-        ...this.form,
-        is_shared: this.form.is_shared === 'true'
-      })
-    },
-
-    confirmClicked() {
-      if (!this.validateForm()) return
-      this.$emit('confirm', {
-        ...this.form,
-        is_shared: this.form.is_shared === 'true'
-      })
-    },
-
-    isEditing() {
-      return this.assetToEdit?.id
-    },
-
-    getEntityTypeIdDefaultValue() {
-      let entityTypeId = this.assetToEdit.asset_type_id
-      if (!entityTypeId) {
-        entityTypeId = this.productionAssetTypeOptions[0]?.value
-      }
-      const isInOptions = this.productionAssetTypeOptions.some(
-        option => option.value === entityTypeId
-      )
-      if (!isInOptions) {
-        entityTypeId = this.productionAssetTypeOptions[0]?.value
-      }
-      return entityTypeId
-    },
-
-    resetForm() {
-      if (!this.isEditing()) {
-        if (!this.form.entity_type_id && this.productionAssetTypeOptions[0]) {
-          this.form.entity_type_id = this.productionAssetTypeOptions[0].value
-        }
-        if (this.openProductions.length > 0) {
-          this.form.project_id = this.currentProduction?.id || ''
-        }
-        this.form.name = ''
-        this.form.description = ''
-        this.form.source_id =
-          this.currentEpisode &&
-          !['all', 'main'].includes(this.currentEpisode.id)
-            ? this.currentEpisode.id
-            : 'null'
-        this.form.data = {}
-        this.form.is_shared = 'false'
-      } else {
-        const entityTypeId = this.getEntityTypeIdDefaultValue()
-        this.form = {
-          entity_type_id: entityTypeId,
-          project_id: this.assetToEdit.project_id,
-          name: this.assetToEdit.name,
-          description: this.assetToEdit.description,
-          source_id:
-            this.assetToEdit.source_id || this.assetToEdit.episode_id || 'null',
-          data: {
-            ...this.assetToEdit.data,
-            resolution: this.assetToEdit.data?.resolution || ''
-          },
-          is_shared: String(this.assetToEdit.is_shared === true)
-        }
-      }
+  } else {
+    if (!form.value.entity_type_id && productionAssetTypeOptions.value[0]) {
+      form.value.entity_type_id = productionAssetTypeOptions.value[0].value
     }
-  },
-
-  watch: {
-    assetToEdit() {
-      this.resetForm()
-    },
-
-    assetCreated() {
-      if (this.isEditing()) {
-        this.assetSuccessText = this.$t('assets.edit_success', {
-          name: this.assetCreated
-        })
-      } else {
-        this.assetSuccessText = this.$t('assets.new_success', {
-          name: this.assetCreated
-        })
-      }
-    },
-
-    active() {
-      this.assetSuccessText = ''
-      this.resetForm()
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
-    },
-
-    currentProduction() {
-      this.form.entity_type_id = null
-      this.resetForm()
+    if (openProductions.value.length > 0) {
+      form.value.project_id = currentProduction.value?.id || ''
     }
+    form.value.name = ''
+    form.value.description = ''
+    form.value.source_id = ['all', 'main'].includes(currentEpisode.value?.id)
+      ? 'null'
+      : currentEpisode.value?.id || 'null'
+    form.value.data = {}
+    form.value.is_shared = 'false'
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
+watch(() => props.assetToEdit, resetForm)
+
+watch(assetCreated, value => {
+  assetSuccessText.value = isEditing.value
+    ? t('assets.edit_success', { name: value })
+    : t('assets.new_success', { name: value })
+})
+
+watch(
+  () => props.active,
+  active => {
+    assetSuccessText.value = ''
+    resetForm()
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
 
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
+watch(currentProduction, () => {
+  form.value.entity_type_id = null
+  resetForm()
+})
 
+onMounted(() => {
+  resetForm()
+  assetSuccessText.value = ''
+})
+</script>
+
+<style lang="scss" scoped>
 .info-message {
   margin-top: 1em;
 }
diff --git a/src/components/modals/EditAssetTypeModal.vue b/src/components/modals/EditAssetTypeModal.vue
index 326a632661..c39c791df9 100644
--- a/src/components/modals/EditAssetTypeModal.vue
+++ b/src/components/modals/EditAssetTypeModal.vue
@@ -1,244 +1,191 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="assetTypeToEdit && assetTypeToEdit.id">
-          {{ $t('asset_types.edit_title') }} {{ assetTypeToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('asset_types.new_asset_type') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('asset_types.fields.name')"
-            :maxlength="30"
-            v-model="form.name"
-            @enter="runConfirmation"
-            v-focus
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('asset_types.fields.name')"
+        :maxlength="30"
+        v-model="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <text-field
+        :label="$t('asset_types.fields.short_name')"
+        :maxlength="30"
+        v-model="form.short_name"
+        @enter="runConfirmation"
+      />
+      <textarea-field
+        :label="$t('asset_types.fields.description')"
+        v-model="form.description"
+        @enter="runConfirmation"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="runConfirmation"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+
+      <label class="label">
+        {{ $t('asset_types.fields.task_types') }}
+      </label>
+      <div class="flexrow task-types mb1">
+        <div
+          class="flexrow-item mb1"
+          :key="taskTypeId"
+          @click="removeTaskType(taskTypeId)"
+          v-for="taskTypeId in form.task_types"
+        >
+          <task-type-name
+            :task-type="taskTypeMap.get(taskTypeId)"
+            :deletable="true"
+            v-if="taskTypeId"
           />
-          <text-field
-            ref="shortNameField"
-            :label="$t('asset_types.fields.short_name')"
-            :maxlength="30"
-            v-model="form.short_name"
-            @enter="runConfirmation"
-          />
-          <textarea-field
-            :label="$t('asset_types.fields.description')"
-            v-model="form.description"
-            @enter="runConfirmation"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="runConfirmation"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-
-          <label class="label">
-            {{ $t('asset_types.fields.task_types') }}
-          </label>
-          <div class="flexrow task-types mb1">
-            <div
-              class="flexrow-item mb1"
-              :key="taskTypeId"
-              @click="removeTaskType(taskTypeId)"
-              v-for="taskTypeId in form.task_types"
-            >
-              <task-type-name
-                :task-type="taskTypeMap.get(taskTypeId)"
-                :deletable="true"
-                v-if="taskTypeId"
-              />
-            </div>
-            <combobox
-              class="flexrow-item mb1"
-              :options="availableTaskTypes"
-              :with-margin="false"
-              @update:model-value="
-                id => {
-                  taskTypeMap.get(id) && form.task_types.push(id)
-                }
-              "
-              v-if="availableTaskTypes.length > 1"
-            />
-          </div>
-        </form>
-
-        <modal-footer
-          :error-text="$t('asset_types.create_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
+        </div>
+        <combobox
+          class="flexrow-item mb1"
+          :options="availableTaskTypes"
+          :with-margin="false"
+          @update:model-value="addTaskType"
+          v-if="availableTaskTypes.length > 1"
         />
       </div>
-    </div>
-  </div>
+    </form>
+
+    <modal-footer
+      :error-text="$t('asset_types.create_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import { sortByName } from '@/lib/sorting'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
-import TextareaField from '@/components/widgets/TextareaField.vue'
 import TextField from '@/components/widgets/TextField.vue'
+import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-asset-type-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    ComboboxBoolean,
-    ModalFooter,
-    TaskTypeName,
-    TextareaField,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    assetTypeToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
+const { t } = useI18n()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  assetTypeToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  name: '',
+  short_name: '',
+  description: '',
+  task_types: []
+})
+const nameField = ref(null)
+
+// Computed
+
+const taskTypes = computed(() => store.getters.taskTypes)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+
+const isEditing = computed(() => Boolean(props.assetTypeToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('asset_types.edit_title')} ${props.assetTypeToEdit.name}`
+    : t('asset_types.new_asset_type')
+)
+
+const availableTaskTypes = computed(() => {
+  const filtered = sortByName(
+    taskTypes.value.filter(
+      taskType =>
+        !form.value.task_types.includes(taskType.id) &&
+        taskType.for_entity === 'Asset'
+    )
+  )
+  return [
+    { name: t('task_types.add_task_type_placeholder'), id: '-' },
+    ...filtered
+  ].map(taskType => ({ label: taskType.name, value: taskType.id }))
+})
+
+// Functions
+
+const addTaskType = id => {
+  if (taskTypeMap.value.get(id)) {
+    form.value.task_types.push(id)
+  }
+}
 
-  data() {
-    return {
-      form: {
-        name: '',
-        short_name: '',
-        description: '',
-        task_types: []
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'taskTypes',
-      'taskTypeMap',
-      'assetTypes',
-      'assetTypeStatusOptions'
-    ]),
-
-    isEditing() {
-      return this.assetTypeToEdit && this.assetTypeToEdit.id
-    },
-
-    availableTaskTypes() {
-      const taskTypes = sortByName(
-        this.taskTypes.filter(taskType => {
-          return (
-            this.form.task_types.indexOf(taskType.id) === -1 &&
-            taskType.for_entity === 'Asset'
-          )
-        })
-      )
-      return [
-        {
-          name: this.$t('task_types.add_task_type_placeholder'),
-          id: '-'
-        },
-        ...taskTypes
-      ].map(taskType => {
-        return {
-          label: taskType.name,
-          value: taskType.id
-        }
-      })
-    }
-  },
+const removeTaskType = idToRemove => {
+  const index = form.value.task_types.indexOf(idToRemove)
+  if (index >= 0) {
+    form.value.task_types.splice(index, 1)
+  }
+}
 
-  methods: {
-    ...mapActions(['loadTaskTypes']),
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
 
-    removeTaskType(idToRemove) {
-      const taskTypeIndex = this.form.task_types.indexOf(idToRemove)
-      if (taskTypeIndex >= 0) {
-        this.form.task_types.splice(taskTypeIndex, 1)
-      }
-    },
+// Watchers
 
-    runConfirmation() {
-      this.$emit('confirm', this.form)
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
+  }
+)
+
+watch(
+  () => props.assetTypeToEdit,
+  assetType => {
+    if (assetType?.id) {
+      form.value = {
+        name: assetType.name,
+        short_name: assetType.short_name,
+        description: assetType.description,
+        task_types: [...(assetType.task_types || [])],
+        archived: String(assetType.archived === true)
       }
-    },
-
-    assetTypeToEdit() {
-      if (this.assetTypeToEdit.id) {
-        const types = this.assetTypeToEdit.task_types || []
-        this.form = {
-          name: this.assetTypeToEdit.name,
-          short_name: this.assetTypeToEdit.short_name,
-          description: this.assetTypeToEdit.description,
-          task_types: [...types],
-          archived: String(this.assetTypeToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          name: '',
-          short_name: '',
-          description: '',
-          task_types: [],
-          archived: 'false'
-        }
+    } else {
+      form.value = {
+        name: '',
+        short_name: '',
+        description: '',
+        task_types: [],
+        archived: 'false'
       }
     }
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-
 .task-types {
   flex-wrap: wrap;
 }
diff --git a/src/components/modals/EditAvatarModal.vue b/src/components/modals/EditAvatarModal.vue
index 33da27880f..d75c4f3e39 100644
--- a/src/components/modals/EditAvatarModal.vue
+++ b/src/components/modals/EditAvatarModal.vue
@@ -1,149 +1,114 @@
 <template>
-  <div class="modal" :class="{ 'is-active': active }">
-    <div class="modal-background" @click="close"></div>
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('profile.avatar.title') }}
-        </h1>
-        <form>
-          <input
-            ref="input-file"
-            class="hidden"
-            type="file"
-            accept=".png,.jpg,.jpeg"
-            @change="updateAvatar"
-          />
-          <people-avatar
-            :is-lazy="false"
-            :person="person"
-            :size="150"
-            :font-size="60"
-          />
-          <div class="flexrow right mt2">
-            <button
-              class="button flexrow-item is-primary"
-              :disabled="isUpdating || isDeleting"
-              type="button"
-              @click="selectFile"
-            >
-              <template v-if="isUpdating">
-                <spinner class="mr05 mt05" :size="20" is-white />
-                {{ $t('profile.avatar.updating') }}
-              </template>
-              <template v-else>{{ $t('profile.change_avatar') }}</template>
-            </button>
-            <button
-              class="button flexrow-item"
-              :disabled="isUpdating || isDeleting"
-              type="button"
-              @click="deleteAvatar"
-            >
-              <template v-if="isDeleting">
-                <spinner class="mr05 mt05" :size="20" />
-                {{ $t('profile.avatar.removing') }}
-              </template>
-              <template v-else>{{ $t('profile.clear_avatar') }}</template>
-            </button>
-            <button
-              class="button flexrow-item is-link"
-              :disabled="isUpdating || isDeleting"
-              type="button"
-              @click="close"
-            >
-              {{ $t('main.close') }}
-            </button>
-          </div>
-        </form>
-        <p class="error mt1 has-text-right" v-if="isError">
-          {{ errorText }}
-        </p>
+  <base-modal
+    :active="active"
+    :title="$t('profile.avatar.title')"
+    @cancel="close"
+  >
+    <form>
+      <input
+        ref="inputFile"
+        class="hidden"
+        type="file"
+        accept=".png,.jpg,.jpeg"
+        @change="updateAvatar"
+      />
+      <people-avatar
+        :is-lazy="false"
+        :person="person"
+        :size="150"
+        :font-size="60"
+      />
+      <div class="flexrow right mt2">
+        <button
+          class="button flexrow-item is-primary"
+          :disabled="isUpdating || isDeleting"
+          type="button"
+          @click="selectFile"
+        >
+          <template v-if="isUpdating">
+            <spinner class="mr05 mt05" :size="20" is-white />
+            {{ $t('profile.avatar.updating') }}
+          </template>
+          <template v-else>{{ $t('profile.change_avatar') }}</template>
+        </button>
+        <button
+          class="button flexrow-item"
+          :disabled="isUpdating || isDeleting"
+          type="button"
+          @click="deleteAvatar"
+        >
+          <template v-if="isDeleting">
+            <spinner class="mr05 mt05" :size="20" />
+            {{ $t('profile.avatar.removing') }}
+          </template>
+          <template v-else>{{ $t('profile.clear_avatar') }}</template>
+        </button>
+        <button
+          class="button flexrow-item is-link"
+          :disabled="isUpdating || isDeleting"
+          type="button"
+          @click="close"
+        >
+          {{ $t('main.close') }}
+        </button>
       </div>
-    </div>
-  </div>
+    </form>
+    <p class="error mt1 has-text-right" v-if="isError">
+      {{ errorText }}
+    </p>
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { ref, watch } from 'vue'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 
-export default {
-  name: 'edit-avatar-modal',
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  errorText: { type: String, default: '' },
+  isDeleting: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isUpdating: { type: Boolean, default: false },
+  person: { type: Object, required: true }
+})
 
-  mixins: [modalMixin],
+const emit = defineEmits(['close', 'delete', 'update'])
 
-  components: {
-    PeopleAvatar,
-    Spinner
-  },
+const inputFile = ref(null)
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    errorText: {
-      type: String,
-      default: ''
-    },
-    isDeleting: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isUpdating: {
-      type: Boolean,
-      default: false
-    },
-    person: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['close', 'delete', 'update'],
-
-  methods: {
-    selectFile() {
-      this.$refs['input-file'].click()
-    },
+const selectFile = () => {
+  inputFile.value.click()
+}
 
-    updateAvatar(event) {
-      const file = event.target.files[0]
-      const formData = new FormData()
-      formData.append('file', file, file.name)
-      this.$emit('update', formData)
-    },
+const updateAvatar = event => {
+  const file = event.target.files[0]
+  const formData = new FormData()
+  formData.append('file', file, file.name)
+  emit('update', formData)
+}
 
-    deleteAvatar() {
-      this.$emit('delete')
-    },
+const deleteAvatar = () => {
+  emit('delete')
+}
 
-    close() {
-      if (this.isUpdating || this.isDeleting) {
-        return
-      }
-      this.$emit('close')
-    },
+const close = () => {
+  if (props.isUpdating || props.isDeleting) return
+  emit('close')
+}
 
-    resetForm() {
-      this.$refs['input-file'].value = null
-    }
-  },
+const resetForm = () => {
+  if (inputFile.value) inputFile.value.value = null
+}
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.resetForm()
-      }
-    }
+watch(
+  () => props.active,
+  active => {
+    if (active) resetForm()
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditBackgroundModal.vue b/src/components/modals/EditBackgroundModal.vue
index f15ae58a09..0b7884caa3 100644
--- a/src/components/modals/EditBackgroundModal.vue
+++ b/src/components/modals/EditBackgroundModal.vue
@@ -1,182 +1,139 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('backgrounds.edit_background') }} {{ backgroundToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('backgrounds.new_background') }}
-        </h1>
-
-        <form @submit.prevent>
-          <div class="field" v-if="!isEditing">
-            <label class="label"> {{ $t('backgrounds.fields.file') }}</label>
-            <file-upload
-              ref="fileUpload"
-              :label="$t('main.select_file')"
-              accept=".hdr"
-              :is-primary="false"
-              @fileselected="onFileSelected"
-            />
-          </div>
-          <text-field
-            ref="nameField"
-            input-class="task-status-name"
-            :label="$t('backgrounds.fields.name')"
-            :maxlength="40"
-            @enter="confirmClicked"
-            v-model.trim="form.name"
-          />
-          <boolean-field
-            is-field
-            :label="$t('backgrounds.fields.is_default')"
-            @enter="confirmClicked"
-            v-model="form.is_default"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="confirmClicked"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-        </form>
-
-        <modal-footer
-          :error-text="$t('backgrounds.create_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <div class="field" v-if="!isEditing">
+        <label class="label">{{ $t('backgrounds.fields.file') }}</label>
+        <file-upload
+          ref="fileUpload"
+          :label="$t('main.select_file')"
+          accept=".hdr"
+          :is-primary="false"
+          @fileselected="onFileSelected"
         />
       </div>
-    </div>
-  </div>
+      <text-field
+        ref="nameField"
+        input-class="task-status-name"
+        :label="$t('backgrounds.fields.name')"
+        :maxlength="40"
+        @enter="confirmClicked"
+        v-model.trim="form.name"
+      />
+      <boolean-field
+        is-field
+        :label="$t('backgrounds.fields.is_default')"
+        @enter="confirmClicked"
+        v-model="form.is_default"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="confirmClicked"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+    </form>
+
+    <modal-footer
+      :error-text="$t('backgrounds.create_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
+// eslint-disable-next-line no-unused-vars
 import FileUpload from '@/components/widgets/FileUpload.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-background-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    ComboboxBoolean,
-    FileUpload,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    backgroundToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        file: null,
-        name: '',
-        is_default: 'false',
-        archived: 'false'
-      }
-    }
-  },
-
-  computed: {
-    isEditing() {
-      return this.backgroundToEdit?.id
-    }
-  },
-
-  methods: {
-    confirmClicked() {
-      if (!this.isEditing && !this.form.file) {
-        return
-      }
-      if (!this.form.name) {
-        this.$refs.nameField.focus()
-        return
-      }
-      this.$emit('confirm', {
-        ...this.form,
-        is_default: this.form.is_default === 'true',
-        archived: this.form.archived === 'true'
-      })
-    },
-
-    onFileSelected(formData) {
-      const file = formData.get('file')
-      this.form.file = formData
-      if (!this.form.name.length) {
-        this.form.name = file.name.slice(0, -4)
-      }
-      this.$nextTick(() => {
-        this.$refs.nameField?.focus()
-      })
-    },
-
-    resetForm() {
-      if (this.backgroundToEdit) {
-        this.form = {
-          file: null,
-          name: this.backgroundToEdit.name || '',
-          is_default: String(this.backgroundToEdit.is_default || false),
-          archived: String(this.backgroundToEdit.archived || false)
-        }
-        this.$refs.fileUpload?.reset()
-      }
-    }
-  },
-
-  watch: {
-    backgroundToEdit() {
-      this.resetForm()
-    },
-
-    active() {
-      if (this.active) {
-        this.resetForm()
-      }
-    }
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  backgroundToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  file: null,
+  name: '',
+  is_default: 'false',
+  archived: 'false'
+})
+const nameField = ref(null)
+const fileUpload = ref(null)
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.backgroundToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('backgrounds.edit_background')} ${props.backgroundToEdit.name}`
+    : t('backgrounds.new_background')
+)
+
+// Functions
+
+const confirmClicked = () => {
+  if (!isEditing.value && !form.value.file) return
+  if (!form.value.name) {
+    nameField.value?.focus()
+    return
   }
+  emit('confirm', {
+    ...form.value,
+    is_default: form.value.is_default === 'true',
+    archived: form.value.archived === 'true'
+  })
+}
+
+const onFileSelected = formData => {
+  const file = formData.get('file')
+  form.value.file = formData
+  if (!form.value.name.length) {
+    form.value.name = file.name.slice(0, -4)
+  }
+  nextTick(() => {
+    nameField.value?.focus()
+  })
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
+const resetForm = () => {
+  if (!props.backgroundToEdit) return
+  form.value = {
+    file: null,
+    name: props.backgroundToEdit.name || '',
+    is_default: String(props.backgroundToEdit.is_default || false),
+    archived: String(props.backgroundToEdit.archived || false)
+  }
+  fileUpload.value?.reset()
 }
-</style>
+
+// Watchers
+
+watch(() => props.backgroundToEdit, resetForm)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) resetForm()
+  }
+)
+</script>
diff --git a/src/components/modals/EditBudgetEntryModal.vue b/src/components/modals/EditBudgetEntryModal.vue
index 1eb3abf5cc..b3b4f518e9 100644
--- a/src/components/modals/EditBudgetEntryModal.vue
+++ b/src/components/modals/EditBudgetEntryModal.vue
@@ -98,242 +98,198 @@
   </base-modal>
 </template>
 
-<script>
+<script setup>
 import moment from 'moment'
-import { mapGetters } from 'vuex'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
-import { parseSimpleDate, formatSimpleDate } from '@/lib/time'
+import { formatSimpleDate, parseSimpleDate } from '@/lib/time'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import MonthField from '@/components/widgets/MonthField.vue'
 import PeopleField from '@/components/widgets/PeopleField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-budget-entry-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    Combobox,
-    ComboboxDepartment,
-    ModalFooter,
-    MonthField,
-    PeopleField,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    budgetEntryToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    salaryScale: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        department_id: '',
-        person: null,
-        position: 'artist',
-        seniority: 'junior',
-        start_date: null,
-        months_duration: 1
-      },
-      positionOptions: [
-        { label: 'artist', value: 'artist' },
-        { label: 'supervisor', value: 'supervisor' },
-        { label: 'lead', value: 'lead' }
-      ],
-      refreshKeys: {
-        endMonth: 0
-      },
-      seniorityOptions: [
-        { label: 'junior', value: 'junior' },
-        { label: 'mid', value: 'mid' },
-        { label: 'senior', value: 'senior' }
-      ]
-    }
-  },
-
-  mounted() {
-    this.resetForm()
-  },
-
-  computed: {
-    ...mapGetters(['activePeople', 'currentProduction', 'personMap']),
-
-    isDisabled() {
-      return !this.form.department_id || this.form.months_duration < 1
-    },
-
-    isEditing() {
-      return this.budgetEntryToEdit && this.budgetEntryToEdit.id
-    },
-
-    projectStartDate() {
-      return parseSimpleDate(this.currentProduction.start_date).toDate()
-    },
-
-    projectEndDate() {
-      return parseSimpleDate(this.currentProduction.end_date).toDate()
-    },
-
-    endMonth() {
-      this.refreshKeys.endMonth
-      const startDate = parseSimpleDate(this.form.start_date)
-      const projectEndDate = parseSimpleDate(this.currentProduction.end_date)
-      let endDate = startDate.add(this.form.months_duration, 'months')
-      endDate = moment.min(endDate, projectEndDate)
-      return endDate.format('YYYY-MM')
-    },
-
-    dailySalary() {
-      if (!this.form.department_id) {
-        return 0
-      } else if (!this.form.person || !this.form.person.daily_salary) {
-        const departmentScale = this.salaryScale[this.form.department_id]
-        return departmentScale[this.form.position || 'artist'][
-          this.form.seniority || 'junior'
-        ].salary
-      } else {
-        return this.form.person.daily_salary
-      }
-    },
-
-    monthlySalary() {
-      return this.dailySalary * 20
-    },
-
-    totalSalary() {
-      if (!this.form.department_id) {
-        return 0
-      } else {
-        const duration = Math.min(this.form.months_duration, this.maxDuration)
-        return this.monthlySalary * duration
-      }
-    },
-
-    maxDuration() {
-      const startDate = parseSimpleDate(this.form.start_date)
-      const projectEndDate = parseSimpleDate(
-        this.currentProduction.end_date
-      ).endOf('month')
-      const maxDuration = projectEndDate.diff(startDate, 'months')
-      return maxDuration > 0 ? maxDuration : 1
-    },
-
-    departmentPeople() {
-      if (this.form.department_id) {
-        return this.activePeople.filter(person =>
-          person.departments.includes(this.form.department_id)
-        )
-      } else {
-        return this.activePeople
-      }
-    }
-  },
-
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', {
-        ...this.form,
-        person_id: this.form.person?.id,
-        duration: Math.min(this.form.months_duration, this.maxDuration),
-        salary: this.monthlySalary,
-        total_salary: this.totalSalary
-      })
-    },
-
-    onPersonChanged(person) {
-      this.form.position = person?.position || 'artist'
-      this.form.seniority = person?.seniority || 'junior'
-    },
-
-    formatDate(date) {
-      return formatSimpleDate(date)
-    },
-
-    resetForm() {
-      if (this.isEditing) {
-        const person = this.personMap.get(this.budgetEntryToEdit.person_id)
-        Object.assign(this.form, {
-          id: this.budgetEntryToEdit.id,
-          department_id: this.budgetEntryToEdit.department_id,
-          person,
-          position: this.budgetEntryToEdit.position || 'artist',
-          seniority: this.budgetEntryToEdit.seniority || 'junior',
-          start_date: parseSimpleDate(
-            this.budgetEntryToEdit.start_date
-          ).toDate(),
-          months_duration: this.budgetEntryToEdit.months_duration,
-          daily_salary: this.budgetEntryToEdit.daily_salary
-        })
-        this.form.person = person
-        // Needed to bypass watcher
-        this.$nextTick(() => {
-          this.form.daily_salary = this.budgetEntryToEdit.daily_salary
-        })
-      } else {
-        this.form = {
-          id: null,
-          department_id: '',
-          person: null,
-          position: 'artist',
-          seniority: 'junior',
-          start_date: parseSimpleDate(this.currentProduction.start_date)
-            .startOf('month')
-            .toDate(),
-          months_duration: 1,
-          daily_salary: 0
-        }
-      }
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.resetForm()
-        setTimeout(() => {
-          this.$refs.departmentField.focus()
-        }, 100)
-      }
-    },
-
-    dailySalary() {
-      this.form.daily_salary = this.dailySalary
-    },
-
-    budgetEntryToEdit() {
-      this.resetForm()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  budgetEntryToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  salaryScale: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  department_id: '',
+  person: null,
+  position: 'artist',
+  seniority: 'junior',
+  start_date: null,
+  months_duration: 1
+})
+const departmentField = ref(null)
+
+const positionOptions = [
+  { label: 'artist', value: 'artist' },
+  { label: 'supervisor', value: 'supervisor' },
+  { label: 'lead', value: 'lead' }
+]
+const seniorityOptions = [
+  { label: 'junior', value: 'junior' },
+  { label: 'mid', value: 'mid' },
+  { label: 'senior', value: 'senior' }
+]
+
+// Computed
+
+const activePeople = computed(() => store.getters.activePeople)
+const currentProduction = computed(() => store.getters.currentProduction)
+const personMap = computed(() => store.getters.personMap)
+
+const isEditing = computed(() => Boolean(props.budgetEntryToEdit?.id))
+
+const isDisabled = computed(
+  () => !form.value.department_id || form.value.months_duration < 1
+)
+
+const projectStartDate = computed(() =>
+  parseSimpleDate(currentProduction.value.start_date).toDate()
+)
+
+const projectEndDate = computed(() =>
+  parseSimpleDate(currentProduction.value.end_date).toDate()
+)
+
+const maxDuration = computed(() => {
+  const startDate = parseSimpleDate(form.value.start_date)
+  const end = parseSimpleDate(currentProduction.value.end_date).endOf('month')
+  const months = end.diff(startDate, 'months')
+  return months > 0 ? months : 1
+})
+
+const endMonth = computed(() => {
+  const startDate = parseSimpleDate(form.value.start_date)
+  const projectEnd = parseSimpleDate(currentProduction.value.end_date)
+  const endDate = moment.min(
+    startDate.add(form.value.months_duration, 'months'),
+    projectEnd
+  )
+  return endDate.format('YYYY-MM')
+})
+
+const dailySalary = computed(() => {
+  if (!form.value.department_id) return 0
+  if (!form.value.person || !form.value.person.daily_salary) {
+    const departmentScale = props.salaryScale[form.value.department_id]
+    return departmentScale[form.value.position || 'artist'][
+      form.value.seniority || 'junior'
+    ].salary
+  }
+  return form.value.person.daily_salary
+})
+
+const monthlySalary = computed(() => dailySalary.value * 20)
+
+const totalSalary = computed(() => {
+  if (!form.value.department_id) return 0
+  const duration = Math.min(form.value.months_duration, maxDuration.value)
+  return monthlySalary.value * duration
+})
+
+const departmentPeople = computed(() => {
+  if (!form.value.department_id) return activePeople.value
+  return activePeople.value.filter(person =>
+    person.departments.includes(form.value.department_id)
+  )
+})
+
+// Functions
+
+const formatDate = date => formatSimpleDate(date)
+
+const onPersonChanged = person => {
+  form.value.position = person?.position || 'artist'
+  form.value.seniority = person?.seniority || 'junior'
+}
+
+const runConfirmation = () => {
+  emit('confirm', {
+    ...form.value,
+    person_id: form.value.person?.id,
+    duration: Math.min(form.value.months_duration, maxDuration.value),
+    salary: monthlySalary.value,
+    total_salary: totalSalary.value
+  })
+}
+
+const resetForm = () => {
+  if (isEditing.value) {
+    const entry = props.budgetEntryToEdit
+    const person = personMap.value.get(entry.person_id)
+    Object.assign(form.value, {
+      id: entry.id,
+      department_id: entry.department_id,
+      person,
+      position: entry.position || 'artist',
+      seniority: entry.seniority || 'junior',
+      start_date: parseSimpleDate(entry.start_date).toDate(),
+      months_duration: entry.months_duration,
+      daily_salary: entry.daily_salary
+    })
+    form.value.person = person
+    // Needed to bypass watcher
+    nextTick(() => {
+      form.value.daily_salary = entry.daily_salary
+    })
+  } else {
+    form.value = {
+      id: null,
+      department_id: '',
+      person: null,
+      position: 'artist',
+      seniority: 'junior',
+      start_date: parseSimpleDate(currentProduction.value.start_date)
+        .startOf('month')
+        .toDate(),
+      months_duration: 1,
+      daily_salary: 0
     }
   }
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      resetForm()
+      setTimeout(() => {
+        departmentField.value?.focus()
+      }, 100)
+    }
+  }
+)
+
+watch(dailySalary, value => {
+  form.value.daily_salary = value
+})
+
+watch(() => props.budgetEntryToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(resetForm)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditBudgetModal.vue b/src/components/modals/EditBudgetModal.vue
index 32e0593d96..0261ce89b3 100644
--- a/src/components/modals/EditBudgetModal.vue
+++ b/src/components/modals/EditBudgetModal.vue
@@ -37,126 +37,92 @@
   </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
-import Combobox from '@/components/widgets/Combobox.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-budget-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    Combobox,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    budgetToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    lastRevision: {
-      type: Number,
-      default: 0
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        name: '',
-        currency: 'USD'
-      },
-      currencieOptions: [
-        { label: 'USD', value: 'USD' },
-        { label: 'EUR', value: 'EUR' },
-        { label: 'GBP', value: 'GBP' },
-        { label: 'CAD', value: 'CAD' },
-        { label: 'AUD', value: 'AUD' },
-        { label: 'CHF', value: 'CHF' },
-        { label: 'JPY', value: 'JPY' },
-        { label: 'CNY', value: 'CNY' },
-        { label: 'INR', value: 'INR' }
-      ]
-    }
-  },
+const { t } = useI18n()
 
-  computed: {
-    isDisabled() {
-      return this.form.name.length === 0
-    },
+// Props / Emits
 
-    isEditing() {
-      return this.budgetToEdit && this.budgetToEdit.id
-    },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  budgetToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  lastRevision: { type: Number, default: 0 }
+})
 
-    modalTitle() {
-      return this.isEditing
-        ? this.$t('budget.edit_budget')
-        : this.$t('budget.create_budget')
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ name: '', currency: 'USD' })
+const nameField = ref(null)
+
+const currencieOptions = [
+  { label: 'USD', value: 'USD' },
+  { label: 'EUR', value: 'EUR' },
+  { label: 'GBP', value: 'GBP' },
+  { label: 'CAD', value: 'CAD' },
+  { label: 'AUD', value: 'AUD' },
+  { label: 'CHF', value: 'CHF' },
+  { label: 'JPY', value: 'JPY' },
+  { label: 'CNY', value: 'CNY' },
+  { label: 'INR', value: 'INR' }
+]
+
+// Computed
+
+const isDisabled = computed(() => form.value.name.length === 0)
+
+const isEditing = computed(() => Boolean(props.budgetToEdit?.id))
 
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', this.form)
+const modalTitle = computed(() =>
+  isEditing.value ? t('budget.edit_budget') : t('budget.create_budget')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
-    },
-
-    budgetToEdit() {
-      if (this.budgetToEdit.id) {
-        this.form = {
-          id: this.budgetToEdit.id,
-          name: this.budgetToEdit.name,
-          currency: this.budgetToEdit.currency || 'USD'
-        }
-      } else {
-        this.form = {
-          id: null,
-          name: '',
-          currency: 'USD'
-        }
+  }
+)
+
+watch(
+  () => props.budgetToEdit,
+  budget => {
+    if (budget?.id) {
+      form.value = {
+        id: budget.id,
+        name: budget.name,
+        currency: budget.currency || 'USD'
       }
+    } else {
+      form.value = { id: null, name: '', currency: 'USD' }
     }
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
 .revision-number {
   font-size: 1.4rem;
   font-weight: bold;
diff --git a/src/components/modals/EditCommentModal.vue b/src/components/modals/EditCommentModal.vue
index c442d3a4fc..da87c8bcc0 100644
--- a/src/components/modals/EditCommentModal.vue
+++ b/src/components/modals/EditCommentModal.vue
@@ -84,7 +84,7 @@
             </at-ta>
           </div>
           <text-field
-            ref="input-link"
+            ref="inputLink"
             :label="$t('main.link')"
             placeholder="https://..."
             type="url"
@@ -144,7 +144,6 @@
 
         <div>
           <file-upload
-            ref="file-field"
             class="flexrow-item"
             :accept="extensions"
             :is-primary="false"
@@ -167,293 +166,241 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { XIcon } from 'lucide-vue-next'
 import AtTa from 'vue-at/dist/vue-at-textarea'
-import { mapGetters } from 'vuex'
+import { computed, ref, toRef, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
+import { useModal } from '@/composables/modal'
 import files from '@/lib/files'
 import { remove } from '@/lib/models'
 import { replaceTimeWithTimecode } from '@/lib/render'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Checklist from '@/components/widgets/Checklist.vue'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
 import FileUpload from '@/components/widgets/FileUpload.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
-import TextField from '@/components/widgets/TextField.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
+// eslint-disable-next-line no-unused-vars
+import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-comment-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    AtTa,
-    Checklist,
-    ComboboxStatus,
-    FileUpload,
-    ModalFooter,
-    PeopleAvatar,
-    TaskTypeName,
-    TextField,
-    XIcon
-  },
+const route = useRoute()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  commentToEdit: { type: Object, default: () => ({}) },
+  fps: { type: Number, default: 25 },
+  frame: { type: Number, default: 0 },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  revision: { type: Number, default: 1 },
+  taskTypes: { type: Array, default: () => [] },
+  team: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+useModal(toRef(props, 'active'), emit)
+
+const extensions = files.ALL_EXTENSIONS_STRING
+
+const attachmentFiles = ref([])
+const attachmentFilesToDelete = ref([])
+const inputLink = ref(null)
+const membersForAts = ref({ '@': [], '#': [] })
+const textField = ref(null)
+const form = ref({
+  text: '',
+  task_status_id: null,
+  checklist: [{ checked: false, text: '' }],
+  link: null
+})
+
+const departmentMap = computed(() => store.getters.departmentMap)
+const getTaskStatusForCurrentUser = computed(
+  () => store.getters.getTaskStatusForCurrentUser
+)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const productionDepartmentIds = computed(
+  () => store.getters.productionDepartmentIds
+)
+const taskStatusForCurrentUser = computed(
+  () => store.getters.taskStatusForCurrentUser
+)
+
+const isConceptTask = computed(() => route.path.includes('concept'))
+
+const taskStatuses = computed(() =>
+  isConceptTask.value
+    ? getTaskStatusForCurrentUser.value(null, true)
+    : taskStatusForCurrentUser.value.filter(status => !status.for_concept)
+)
+
+const isPreviewsComment = computed(
+  () => props.commentToEdit?.previews?.length > 0
+)
+
+const isValidForm = computed(() =>
+  Boolean(
+    !isPreviewsComment.value ||
+    !form.value.link ||
+    inputLink.value?.checkValidity()
+  )
+)
+
+const runConfirmation = event => {
+  if (!event || event.keyCode === 13 || !event.keyCode) {
+    emit('confirm', {
+      id: props.commentToEdit.id,
+      text: form.value.text,
+      task_status_id: form.value.task_status_id,
+      checklist: form.value.checklist.filter(item => item.text),
+      newAttachmentFiles: attachmentFiles.value,
+      attachmentFilesToDelete: attachmentFilesToDelete.value,
+      links: form.value.link ? [form.value.link] : null
+    })
+  }
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    frame: {
-      type: Number,
-      default: 0
-    },
-    commentToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    taskTypes: {
-      type: Array,
-      default: () => []
-    },
-    team: {
-      type: Array,
-      default: () => []
-    },
-    fps: {
-      type: Number,
-      default: 25
-    },
-    revision: {
-      type: Number,
-      default: 1
-    }
-  },
+const removeTask = entry => {
+  form.value.checklist = [...remove(form.value.checklist, entry)]
+}
 
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      membersForAts: { '@': [], '#': [] },
-      attachmentFiles: [],
-      extensions: files.ALL_EXTENSIONS_STRING,
-      form: {
-        text: '',
-        task_status_id: null,
-        checklist: [{ checked: false, text: '' }],
-        link: null
-      }
-    }
-  },
+const removeAttachment = attachment => {
+  form.value.attachment_files = remove(form.value.attachment_files, attachment)
+  attachmentFilesToDelete.value.push(attachment)
+}
+
+const removeNewAttachment = attachment => {
+  attachmentFiles.value = remove(attachmentFiles.value, attachment)
+}
+
+const onFileSelected = files => {
+  attachmentFiles.value = files
+}
 
-  computed: {
-    ...mapGetters([
-      'departmentMap',
-      'getTaskStatusForCurrentUser',
-      'isCurrentUserClient',
-      'productionDepartmentIds',
-      'taskStatusForCurrentUser'
-    ]),
-
-    taskStatuses() {
-      return this.isConceptTask
-        ? this.getTaskStatusForCurrentUser(null, true)
-        : this.taskStatusForCurrentUser.filter(status => !status.for_concept)
-    },
-
-    isConceptTask() {
-      return this.$route.path.includes('concept')
-    },
-
-    isPreviewsComment() {
-      return this.commentToEdit?.previews?.length > 0
-    },
-
-    isValidForm() {
-      return Boolean(
-        !this.isPreviewsComment ||
-        !this.form.link ||
-        this.$refs['input-link']?.checkValidity()
-      )
+const reset = () => {
+  attachmentFiles.value = []
+  attachmentFilesToDelete.value = []
+  if (props.commentToEdit?.id) {
+    form.value = {
+      text: props.commentToEdit.text,
+      task_status_id: props.commentToEdit.task_status_id,
+      checklist: [...props.commentToEdit.checklist],
+      attachment_files: [...props.commentToEdit.attachment_files],
+      link: props.commentToEdit.links?.[0]
     }
-  },
+    if (form.value.checklist.length === 0) {
+      form.value.checklist = [{ checked: false, text: '' }]
+    }
+  } else {
+    form.value = {
+      text: '',
+      task_status_id: null,
+      checklist: [{ checked: false, text: '' }],
+      attachment_files: [],
+      link: null
+    }
+  }
+}
 
-  methods: {
-    runConfirmation(event) {
-      if (!event || event.keyCode === 13 || !event.keyCode) {
-        const result = {
-          id: this.commentToEdit.id,
-          text: this.form.text,
-          task_status_id: this.form.task_status_id,
-          checklist: this.form.checklist.filter(item => item.text),
-          newAttachmentFiles: this.attachmentFiles,
-          attachmentFilesToDelete: this.attachmentFilesToDelete,
-          links: this.form.link ? [this.form.link] : null
-        }
-        this.$emit('confirm', result)
-      }
-    },
-
-    removeTask(entry) {
-      this.form.checklist = [...remove(this.form.checklist, entry)]
-    },
-
-    removeAttachment(attachment) {
-      this.form.attachment_files = remove(
-        this.form.attachment_files,
-        attachment
-      )
-      this.attachmentFilesToDelete.push(attachment)
-    },
-
-    removeNewAttachment(attachment) {
-      this.attachmentFiles = remove(this.attachmentFiles, attachment)
-    },
-
-    onFileSelected(attachmentFiles) {
-      this.attachmentFiles = attachmentFiles
-    },
-
-    reset() {
-      this.attachmentFiles = []
-      this.attachmentFilesToDelete = []
-      if (this.commentToEdit && this.commentToEdit.id) {
-        this.form = {
-          text: this.commentToEdit.text,
-          task_status_id: this.commentToEdit.task_status_id,
-          checklist: [...this.commentToEdit.checklist],
-          attachment_files: [...this.commentToEdit.attachment_files],
-          link: this.commentToEdit.links?.[0]
-        }
-        if (this.form.checklist.length === 0) {
-          this.form.checklist = [{ checked: false, text: '' }]
-        }
-      } else {
-        this.form = {
-          text: '',
-          task_status_id: null,
-          checklist: [{ checked: false, text: '' }],
-          attachment_files: [],
-          link: null
-        }
-      }
-    },
-
-    onAddChecklistItem(item) {
-      delete item.index
-      this.form.checklist.push(item)
-    },
-
-    onInsertChecklistItem(item) {
-      this.form.checklist.splice(item.index, 0, item)
-      for (let i = 0; i < this.form.checklist.length; i++) {
-        this.form.checklist[i].index = i
-      }
-    },
-
-    atOptionsFilter(name, chunk, at, v) {
-      // filter the list by the given at symbol
-      const option_at = v?.isTaskType ? '#' : '@'
-      // @ for team, # for task type
-      if (at !== option_at) return false
-      // match at lower-case
-      return name?.toLowerCase().indexOf(chunk.toLowerCase()) > -1
-    },
-
-    onAtTextChanged(input) {
-      if (input.includes('@frame')) {
-        this.form.text = replaceTimeWithTimecode(
-          input,
-          this.revision,
-          this.frame + 1,
-          this.fps
-        )
-      }
+const onAddChecklistItem = item => {
+  delete item.index
+  form.value.checklist.push(item)
+}
+
+const onInsertChecklistItem = item => {
+  form.value.checklist.splice(item.index, 0, item)
+  form.value.checklist.forEach((entry, i) => {
+    entry.index = i
+  })
+}
+
+const atOptionsFilter = (name, chunk, at, v) => {
+  // filter the list by the given at symbol (@ for team, # for task type)
+  const expectedAt = v?.isTaskType ? '#' : '@'
+  if (at !== expectedAt) return false
+  return name?.toLowerCase().indexOf(chunk.toLowerCase()) > -1
+}
+
+const onAtTextChanged = input => {
+  if (input.includes('@frame')) {
+    form.value.text = replaceTimeWithTimecode(
+      input,
+      props.revision,
+      props.frame + 1,
+      props.fps
+    )
+  }
+}
+
+watch(() => props.commentToEdit, reset)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        reset()
+        textField.value?.focus()
+      }, 100)
     }
+  }
+)
+
+watch(
+  () => props.taskTypes,
+  values => {
+    const taskTypeOptions = values.map(taskType => ({
+      isTaskType: true,
+      full_name: taskType.name,
+      color: taskType.color,
+      id: taskType.id,
+      url: taskType.url
+    }))
+    taskTypeOptions.push({
+      isTaskType: true,
+      color: '#000',
+      full_name: 'All'
+    })
+    membersForAts.value['#'] = taskTypeOptions
   },
-
-  watch: {
-    commentToEdit() {
-      this.reset()
-    },
-
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.reset()
-          this.$refs.textField.focus()
-        }, 100)
-      }
-    },
-
-    taskTypes: {
-      deep: true,
-      immediate: true,
-      handler(values) {
-        const taskTypeOptions = values.map(taskType => {
-          return {
-            isTaskType: true,
-            full_name: taskType.name,
-            color: taskType.color,
-            id: taskType.id,
-            url: taskType.url
-          }
-        })
-        taskTypeOptions.push({
-          isTaskType: true,
-          color: '#000',
-          full_name: 'All'
-        })
-        this.membersForAts['#'] = taskTypeOptions
-      }
-    },
-
-    team: {
-      deep: true,
-      immediate: true,
-      handler() {
-        let teamOptions
-        if (this.isCurrentUserClient) {
-          teamOptions = [
-            this.team.filter(person =>
-              ['admin', 'manager', 'supervisor', 'client'].includes(person.role)
-            )
-          ]
-        } else {
-          teamOptions = [...this.team]
-        }
-        teamOptions = teamOptions.concat(
-          this.productionDepartmentIds.map(departmentId => {
-            const department = this.departmentMap.get(departmentId)
-            return {
-              isDepartment: true,
-              full_name: department.name,
-              color: department.color,
-              id: departmentId
-            }
-          })
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.team,
+  () => {
+    let teamOptions
+    if (isCurrentUserClient.value) {
+      teamOptions = [
+        props.team.filter(person =>
+          ['admin', 'manager', 'supervisor', 'client'].includes(person.role)
         )
-        teamOptions.push({
-          isTime: true,
-          full_name: 'frame'
-        })
-        this.membersForAts['@'] = teamOptions
-      }
+      ]
+    } else {
+      teamOptions = [...props.team]
     }
-  }
-}
+    teamOptions = teamOptions.concat(
+      productionDepartmentIds.value.map(departmentId => {
+        const department = departmentMap.value.get(departmentId)
+        return {
+          isDepartment: true,
+          full_name: department.name,
+          color: department.color,
+          id: departmentId
+        }
+      })
+    )
+    teamOptions.push({ isTime: true, full_name: 'frame' })
+    membersForAts.value['@'] = teamOptions
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditDepartmentsModal.vue b/src/components/modals/EditDepartmentsModal.vue
index 456e84d151..9d5d0c9a8f 100644
--- a/src/components/modals/EditDepartmentsModal.vue
+++ b/src/components/modals/EditDepartmentsModal.vue
@@ -1,146 +1,104 @@
 <template>
-  <div class="modal" :class="{ 'is-active': active }">
-    <div class="modal-background" @click="$emit('cancel')"></div>
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('departments.edit_title') }} {{ departmentToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('departments.new_departments') }}
-        </h1>
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('departments.fields.name')"
-            :maxlength="30"
-            v-model="form.name"
-            v-focus
-          />
-          <color-field
-            :label="$t('departments.fields.color')"
-            v-model="form.color"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="runConfirmation"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-        </form>
-        <modal-footer
-          :error-text="$t('departments.create_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('departments.fields.name')"
+        :maxlength="30"
+        v-model="form.name"
+        v-focus
+      />
+      <color-field
+        :label="$t('departments.fields.color')"
+        v-model="form.color"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="runConfirmation"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+    </form>
+    <modal-footer
+      :error-text="$t('departments.create_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-departments-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ColorField,
-    ComboboxBoolean,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    departmentToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        id: null,
-        name: '',
-        color: '',
-        archived: 'false'
-      }
-    }
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  departmentToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  computed: {
-    isEditing() {
-      return this.departmentToEdit?.id
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ id: null, name: '', color: '', archived: 'false' })
+const nameField = ref(null)
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.departmentToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('departments.edit_title')} ${props.departmentToEdit.name}`
+    : t('departments.new_departments')
+)
+
+// Functions
 
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', this.form)
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
-    },
-
-    departmentToEdit() {
-      if (this.isEditing) {
-        this.form = {
-          id: this.departmentToEdit.id,
-          name: this.departmentToEdit.name,
-          color: this.departmentToEdit.color,
-          archived: String(this.departmentToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          id: null,
-          name: '',
-          color: '',
-          archived: 'false'
-        }
+  }
+)
+
+watch(
+  () => props.departmentToEdit,
+  department => {
+    if (department?.id) {
+      form.value = {
+        id: department.id,
+        name: department.name,
+        color: department.color,
+        archived: String(department.archived === true)
       }
+    } else {
+      form.value = { id: null, name: '', color: '', archived: 'false' }
     }
   }
-}
+)
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-</style>
diff --git a/src/components/modals/EditEditModal.vue b/src/components/modals/EditEditModal.vue
index 720b8a7c0d..d797ff96a0 100644
--- a/src/components/modals/EditEditModal.vue
+++ b/src/components/modals/EditEditModal.vue
@@ -1,261 +1,176 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="editToEdit && editToEdit.id">
-          {{ $t('edits.edit_title') }} {{ editToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('edits.new_edit') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox
-            :label="$t('edits.fields.episode')"
-            :options="episodeOptions"
-            v-model="form.parent_id"
-            v-if="isTVShow"
-          />
-          <text-field
-            ref="nameField"
-            :label="$t('edits.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('edits.fields.description')"
-            v-model="form.description"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-          />
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            @enter="runConfirmation"
-            v-model.trim="form.data.resolution"
-          />
-          <template v-if="editToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="editToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in editMetadataDescriptors"
-            />
-          </template>
-        </form>
-
-        <modal-footer
-          :error-text="$t('edits.edit_error')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <combobox
+        :label="$t('edits.fields.episode')"
+        :options="episodeOptions"
+        v-model="form.parent_id"
+        v-if="isTVShow"
+      />
+      <text-field
+        ref="nameField"
+        :label="$t('edits.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <textarea-field
+        :label="$t('edits.fields.description')"
+        v-model="form.description"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        @enter="runConfirmation"
+        v-model.trim="form.data.resolution"
+      />
+      <template v-if="editToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="editToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in editMetadataDescriptors"
         />
-      </div>
-    </div>
-  </div>
+      </template>
+    </form>
+
+    <modal-footer
+      :error-text="$t('edits.edit_error')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-edit-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    MetadataField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
+const { t } = useI18n()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  editToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'confirm-and-stay'])
+
+// State
+
+const form = ref({
+  name: '',
+  description: '',
+  parent_id: null,
+  data: { resolution: '' }
+})
+const nameField = ref(null)
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const editMetadataDescriptors = computed(
+  () => store.getters.editMetadataDescriptors
+)
+const episodes = computed(() => store.getters.episodes)
+const isTVShow = computed(() => store.getters.isTVShow)
+const openProductions = computed(() => store.getters.openProductions)
+
+const isEditing = computed(() => Boolean(props.editToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('edits.edit_title')} ${props.editToEdit.name}`
+    : t('edits.new_edit')
+)
+
+const episodeOptions = computed(() => {
+  const options = episodes.value.map(episode => ({
+    label: episode.name,
+    value: episode.id
+  }))
+  // It might be useful to allow Edits not linked to any episodes.
+  return [{ label: '-', value: null }, ...options]
+})
+
+// Functions
+
+const confirmClicked = () => {
+  emit('confirm', form.value)
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    editToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const confirmAndStayClicked = () => {
+  emit('confirm-and-stay', form.value)
+}
 
-  emits: ['cancel', 'confirm', 'confirm-and-stay'],
+const runConfirmation = () => {
+  if (isEditing.value) {
+    confirmClicked()
+  } else {
+    confirmAndStayClicked()
+  }
+}
 
-  data() {
-    return {
-      form: {
-        name: '',
-        description: '',
-        parent_id: null,
-        data: {
-          resolution: ''
-        }
-      },
-      editSuccessText: ''
+const resetForm = () => {
+  if (isEditing.value) {
+    form.value = {
+      project_id: props.editToEdit.project_id,
+      name: props.editToEdit.name,
+      description: props.editToEdit.description,
+      parent_id: props.editToEdit.parent_id,
+      data: {
+        ...props.editToEdit.data,
+        resolution: props.editToEdit.data.resolution || ''
+      }
     }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'currentEpisode',
-      'editCreated',
-      'editMetadataDescriptors',
-      'episodes',
-      'isTVShow',
-      'openProductions'
-    ]),
-
-    episodeOptions() {
-      const options = this.episodes.map(episode => {
-        return {
-          label: episode.name,
-          value: episode.id
-        }
-      })
-      // It might be usefull to allow Edits not linked to any episodes.
-      return [{ label: '-', value: null }].concat(options)
+  } else {
+    if (openProductions.value.length > 0) {
+      form.value.project_id = currentProduction.value?.id || ''
     }
-  },
-
-  methods: {
-    runConfirmation() {
-      if (this.isEditing()) {
-        this.confirmClicked()
-      } else {
-        this.confirmAndStayClicked()
-      }
-    },
-
-    confirmAndStayClicked() {
-      this.$emit('confirm-and-stay', this.form)
-    },
-
-    confirmClicked() {
-      this.$emit('confirm', this.form)
-    },
+    form.value.name = ''
+    form.value.description = ''
+    form.value.parent_id = currentEpisode.value?.id || null
+    form.value.data = { resolution: '' }
+  }
+}
 
-    isEditing() {
-      return this.editToEdit && this.editToEdit.id
-    },
+// Watchers
 
-    resetForm() {
-      this.editSuccessText = ''
-      if (!this.isEditing()) {
-        if (this.openProductions.length > 0) {
-          this.form.project_id = this.currentProduction
-            ? this.currentProduction.id
-            : ''
-        }
-        this.form.name = ''
-        this.form.description = ''
-        this.form.parent_id = this.currentEpisode
-          ? this.currentEpisode.id
-          : null
-        this.form.data = {
-          resolution: ''
-        }
-      } else {
-        this.form = {
-          project_id: this.editToEdit.project_id,
-          name: this.editToEdit.name,
-          description: this.editToEdit.description,
-          parent_id: this.editToEdit.parent_id,
-          data:
-            {
-              ...this.editToEdit.data,
-              resolution: this.editToEdit.data.resolution || ''
-            } || {}
-        }
-      }
+watch(
+  () => props.active,
+  active => {
+    resetForm()
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
-  },
-
-  mounted() {
-    this.resetForm()
-  },
+  }
+)
 
-  watch: {
-    active() {
-      this.editSuccessText = ''
-      this.resetForm()
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
-    },
+watch(() => props.editToEdit, resetForm)
 
-    editToEdit() {
-      this.resetForm()
-    },
+// Lifecycle
 
-    editCreated() {
-      if (this.isEditing()) {
-        this.editSuccessText = this.$t('edits.edit_success', {
-          name: this.editCreated
-        })
-      } else {
-        this.editSuccessText = this.$t('edits.new_success', {
-          name: this.editCreated
-        })
-      }
-    }
-  }
-}
+onMounted(resetForm)
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-.title {
-  border-bottom: 2px solid #ddd;
-  padding-bottom: 0.5em;
-  margin-bottom: 1.2em;
-}
-.info-message {
-  margin-top: 1em;
-}
-
-.modal-content {
-  max-height: 80%;
-}
-</style>
diff --git a/src/components/modals/EditEpisodeModal.vue b/src/components/modals/EditEpisodeModal.vue
index 2b4dd3d1a5..59f3b7debd 100644
--- a/src/components/modals/EditEpisodeModal.vue
+++ b/src/components/modals/EditEpisodeModal.vue
@@ -1,223 +1,154 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="episodeToEdit && episodeToEdit.id">
-          {{ $t('episodes.edit_title') }} {{ episodeToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('episodes.new_episode') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('episodes.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-
-          <combobox-styled
-            class="field"
-            :label="$t('main.status')"
-            :options="episodeStatusOptions"
-            v-model="form.status"
-          />
-
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('episodes.fields.description')"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-            v-model="form.description"
-          />
-
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            v-model.trim="form.data.resolution"
-            @enter="runConfirmation"
-          />
-
-          <template v-if="episodeToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="episodeToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in episodeMetadataDescriptors"
-            />
-          </template>
-        </form>
-
-        <modal-footer
-          :error-text="$t('episodes.edit_error')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        :label="$t('episodes.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+
+      <combobox-styled
+        class="field"
+        :label="$t('main.status')"
+        :options="episodeStatusOptions"
+        v-model="form.status"
+      />
+
+      <textarea-field
+        :label="$t('episodes.fields.description')"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+        v-model="form.description"
+      />
+
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        v-model.trim="form.data.resolution"
+        @enter="runConfirmation"
+      />
+
+      <template v-if="episodeToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="episodeToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in episodeMetadataDescriptors"
         />
-      </div>
-    </div>
-  </div>
+      </template>
+    </form>
+
+    <modal-footer
+      :error-text="$t('episodes.edit_error')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-episode-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ComboboxStyled,
-    MetadataField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    episodeToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    let form = {
-      id: '',
-      name: '',
-      description: '',
-      fps: '',
-      data: {
-        resolution: ''
-      }
-    }
-    if (this.episodeToEdit && this.episodeToEdit.id) {
-      form = {
-        id: this.episodeToEdit.id,
-        name: this.episodeToEdit.name,
-        description: this.episodeToEdit.description,
-        production_id: this.episodeToEdit.project_id,
-        data:
-          {
-            ...this.episodeToEdit.data,
-            resolution: this.episodeToEdit.data.resolution || ''
-          } || {}
-      }
-    }
-    return {
-      form,
-      episodeSuccessText: '',
-      episodeStatusOptions: [
-        { label: 'canceled', value: 'canceled' },
-        { label: 'complete', value: 'complete' },
-        { label: 'running', value: 'running' },
-        { label: 'standby', value: 'standby' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'episodeMetadataDescriptors'])
-  },
-
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', this.form)
-    },
-
-    isEditing() {
-      return this.episodeToEdit && this.episodeToEdit.id
-    },
-
-    resetForm() {
-      this.episodeSuccessText = ''
-      if (!this.isEditing()) {
-        this.form.id = null
-        this.form.name = ''
-        this.form.status = 'running'
-        this.form.description = ''
-        this.form.data = {}
-      } else {
-        this.form = {
-          id: this.episodeToEdit.id,
-          name: this.episodeToEdit.name,
-          status: this.episodeToEdit.status,
-          description: this.episodeToEdit.description,
-          data:
-            {
-              ...this.episodeToEdit.data,
-              resolution: this.episodeToEdit.data.resolution || ''
-            } || {}
-        }
-      }
-    }
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  episodeToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  mounted() {
-    this.resetForm()
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.resetForm()
-      }
-    },
+// State
+
+const form = ref({
+  id: '',
+  name: '',
+  description: '',
+  fps: '',
+  data: { resolution: '' }
+})
+
+const episodeStatusOptions = [
+  { label: 'canceled', value: 'canceled' },
+  { label: 'complete', value: 'complete' },
+  { label: 'running', value: 'running' },
+  { label: 'standby', value: 'standby' }
+]
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const episodeMetadataDescriptors = computed(
+  () => store.getters.episodeMetadataDescriptors
+)
 
-    episodeToEdit() {
-      this.resetForm()
+const isEditing = computed(() => Boolean(props.episodeToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('episodes.edit_title')} ${props.episodeToEdit.name}`
+    : t('episodes.new_episode')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+const resetForm = () => {
+  if (isEditing.value) {
+    form.value = {
+      id: props.episodeToEdit.id,
+      name: props.episodeToEdit.name,
+      status: props.episodeToEdit.status,
+      description: props.episodeToEdit.description,
+      data: {
+        ...props.episodeToEdit.data,
+        resolution: props.episodeToEdit.data.resolution || ''
+      }
     }
+  } else {
+    form.value.id = null
+    form.value.name = ''
+    form.value.status = 'running'
+    form.value.description = ''
+    form.value.data = {}
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
+// Watchers
 
-.info-message {
-  margin-top: 1em;
-}
-</style>
+watch(
+  () => props.active,
+  active => {
+    if (active) resetForm()
+  }
+)
+
+watch(() => props.episodeToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(resetForm)
+</script>
diff --git a/src/components/modals/EditHardwareItemModal.vue b/src/components/modals/EditHardwareItemModal.vue
index 36656381a0..892e4f8eaf 100644
--- a/src/components/modals/EditHardwareItemModal.vue
+++ b/src/components/modals/EditHardwareItemModal.vue
@@ -48,126 +48,89 @@
   </base-modal>
 </template>
 
-<script>
-import { mapActions } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
-import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-hardware-item-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    ComboboxBoolean,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    hardwareItemToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        name: '',
-        archived: 'false'
-      }
-    }
-  },
-
-  mounted() {
-    this.loadHardwareItems()
-  },
-
-  computed: {
-    isEditing() {
-      return Boolean(this.hardwareItemToEdit?.id)
-    },
-
-    modalTitle() {
-      return this.isEditing
-        ? this.$t('hardware_items.edit_title') +
-            ' ' +
-            this.hardwareItemToEdit.name
-        : this.$t('hardware_items.new_hardware_item')
-    }
-  },
-
-  methods: {
-    ...mapActions(['loadHardwareItems']),
-
-    runConfirmation() {
-      this.$emit('confirm', this.form)
-    },
-
-    resetForm() {
-      if (this.hardwareItemToEdit.id) {
-        this.form = {
-          name: this.hardwareItemToEdit.name,
-          short_name: this.hardwareItemToEdit.short_name,
-          monthly_cost: this.hardwareItemToEdit.monthly_cost,
-          inventory_amount: this.hardwareItemToEdit.inventory_amount,
-          archived: String(this.hardwareItemToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          name: '',
-          short_name: '',
-          monthly_cost: 0,
-          inventory_amount: 0,
-          archived: 'false'
-        }
-      }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  hardwareItemToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ name: '', archived: 'false' })
+const nameField = ref(null)
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.hardwareItemToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? t('hardware_items.edit_title') + ' ' + props.hardwareItemToEdit.name
+    : t('hardware_items.new_hardware_item')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+const resetForm = () => {
+  if (props.hardwareItemToEdit.id) {
+    form.value = {
+      name: props.hardwareItemToEdit.name,
+      short_name: props.hardwareItemToEdit.short_name,
+      monthly_cost: props.hardwareItemToEdit.monthly_cost,
+      inventory_amount: props.hardwareItemToEdit.inventory_amount,
+      archived: String(props.hardwareItemToEdit.archived === true)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
-    },
-
-    hardwareItemToEdit() {
-      this.resetForm()
+  } else {
+    form.value = {
+      name: '',
+      short_name: '',
+      monthly_cost: 0,
+      inventory_amount: 0,
+      archived: 'false'
     }
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
+// Watchers
 
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-</style>
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
+
+watch(() => props.hardwareItemToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(() => {
+  store.dispatch('loadHardwareItems')
+})
+</script>
diff --git a/src/components/modals/EditHistoryModal.vue b/src/components/modals/EditHistoryModal.vue
index 48aa911355..7eeb9a58b1 100644
--- a/src/components/modals/EditHistoryModal.vue
+++ b/src/components/modals/EditHistoryModal.vue
@@ -1,154 +1,121 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('edits.history')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('edits.history') }}
-        </h1>
-
-        <table class="table" ref="headerWrapper">
-          <thead class="table-header">
-            <tr>
-              <th class="date">{{ $t('main.date') }}</th>
-              <th class="name">{{ $t('edits.fields.name') }}</th>
-              <th class="person table-filler">
-                {{ $t('edits.fields.person') }}
-              </th>
-            </tr>
-          </thead>
-        </table>
-
-        <div class="table-body" v-if="!isLoading">
-          <table class="table">
-            <tbody class="table-body">
-              <tr
-                class="edit-version"
-                :key="version.id"
-                v-for="version in versions"
-              >
-                <td class="date">
-                  {{ formatDate(version.created_at) }}
-                </td>
-                <td class="name">
-                  {{ version.name }}
-                </td>
-                <td class="person table-filler">
-                  {{ getPersonFullName(version.person_id) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <table-info :is-loading="isLoading" :is-error="isError" />
-
-        <div class="has-text-right modal-footer">
-          <button @click="$emit('cancel')" class="button is-link">
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
-      </div>
+    <table class="table">
+      <thead class="table-header">
+        <tr>
+          <th class="date">{{ $t('main.date') }}</th>
+          <th class="name">{{ $t('edits.fields.name') }}</th>
+          <th class="person table-filler">
+            {{ $t('edits.fields.person') }}
+          </th>
+        </tr>
+      </thead>
+    </table>
+
+    <div class="table-body" v-if="!isLoading">
+      <table class="table">
+        <tbody class="table-body">
+          <tr
+            class="edit-version"
+            :key="version.id"
+            v-for="version in versions"
+          >
+            <td class="date">
+              {{ formatDate(version.created_at) }}
+            </td>
+            <td class="name">
+              {{ version.name }}
+            </td>
+            <td class="person table-filler">
+              {{ getPersonFullName(version.person_id) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </div>
-</template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+    <table-info :is-loading="isLoading" :is-error="isError" />
+
+    <div class="has-text-right modal-footer">
+      <button @click="$emit('cancel')" class="button is-link">
+        {{ $t('main.cancel') }}
+      </button>
+    </div>
+  </base-modal>
+</template>
 
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import { formatDate } from '@/lib/time'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'edit-history-modal',
+const store = useStore()
 
-  mixins: [modalMixin],
+// Props / Emits
 
-  components: {
-    TableInfo
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  edit: { type: Object, default: () => ({}) }
+})
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    edit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+defineEmits(['cancel'])
 
-  emits: ['cancel'],
+// State
 
-  data() {
-    return {
-      isError: false,
-      isLoading: false,
-      versions: []
-    }
-  },
-
-  mounted() {
-    this.reset()
-  },
-
-  computed: {
-    ...mapGetters(['personMap'])
-  },
-
-  methods: {
-    ...mapActions(['loadEditHistory']),
-
-    formatDate(dateString) {
-      return formatDate(dateString)
-    },
-
-    getPersonFullName(personId) {
-      const person = this.personMap.get(personId)
-      return person ? person.full_name : ''
-    },
-
-    loadData() {
-      this.isError = false
-      this.isLoading = true
-      return this.loadEditHistory(this.edit.id)
-        .then(versions => {
-          this.versions = versions
-          this.isLoading = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.isLoading = false
-          this.isError = true
-        })
-    },
-
-    reset() {
-      this.versions = []
-      this.isError = false
-      this.isLoading = false
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        this.loadData()
-      }
-    }
+const isError = ref(false)
+const isLoading = ref(false)
+const versions = ref([])
+
+// Computed
+
+const personMap = computed(() => store.getters.personMap)
+
+// Functions
+
+const getPersonFullName = personId =>
+  personMap.value.get(personId)?.full_name || ''
+
+const reset = () => {
+  versions.value = []
+  isError.value = false
+  isLoading.value = false
+}
+
+const loadData = async () => {
+  isError.value = false
+  isLoading.value = true
+  try {
+    versions.value = await store.dispatch('loadEditHistory', props.edit.id)
+  } catch (err) {
+    console.error(err)
+    isError.value = true
   }
+  isLoading.value = false
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      reset()
+      loadData()
+    }
+  }
+)
+
+// Lifecycle
+
+onMounted(reset)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditLabelModal.vue b/src/components/modals/EditLabelModal.vue
index 2ce5c3d13a..2f2a887bf0 100644
--- a/src/components/modals/EditLabelModal.vue
+++ b/src/components/modals/EditLabelModal.vue
@@ -1,114 +1,78 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('breakdown.edit_label')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('breakdown.edit_label') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox
-            ref="typeField"
-            :label="$t('breakdown.label')"
-            :options="typeOptions"
-            @enter="confirm"
-            v-model="form.label"
-            v-focus
-          />
-
-          <modal-footer
-            :is-error="isError"
-            :is-loading="isLoading"
-            @confirm="confirm"
-            @cancel="$emit('cancel')"
-          />
-        </form>
-      </div>
-    </div>
-  </div>
+    <form @submit.prevent>
+      <combobox
+        :label="$t('breakdown.label')"
+        :options="typeOptions"
+        @enter="confirm"
+        v-model="form.label"
+        v-focus
+      />
+
+      <modal-footer
+        :is-error="isError"
+        :is-loading="isLoading"
+        @confirm="confirm"
+        @cancel="$emit('cancel')"
+      />
+    </form>
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import Combobox from '@/components/widgets/Combobox.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
 
-export default {
-  name: 'edit-label-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    ModalFooter
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  mounted() {
-    this.form.label = this.label
-  },
-
-  data() {
-    return {
-      form: {
-        label: 'animate'
-      },
-      typeOptions: [
-        {
-          label: this.$t('breakdown.options.animate'),
-          value: 'animate'
-        },
-        {
-          label: this.$t('breakdown.options.fixed'),
-          value: 'fixed'
-        }
-      ]
-    }
-  },
-
-  methods: {
-    confirm() {
-      return this.$emit('confirm', this.form)
-    }
-  },
-
-  watch: {
-    label() {
-      this.form.label = this.label
-    }
-  }
-}
-</script>
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  label: { type: String, default: 'animate' }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
 
-<style lang="scss" scoped>
-.error {
-  margin-top: 1em;
+const form = ref({ label: 'animate' })
+
+// Computed
+
+const typeOptions = computed(() => [
+  { label: t('breakdown.options.animate'), value: 'animate' },
+  { label: t('breakdown.options.fixed'), value: 'fixed' }
+])
+
+// Functions
+
+const confirm = () => {
+  emit('confirm', form.value)
 }
-</style>
+
+// Watchers
+
+watch(
+  () => props.label,
+  label => {
+    form.value.label = label
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  form.value.label = props.label
+})
+</script>
diff --git a/src/components/modals/EditMilestoneModal.vue b/src/components/modals/EditMilestoneModal.vue
index 1bdfc231d0..b7c68169ec 100644
--- a/src/components/modals/EditMilestoneModal.vue
+++ b/src/components/modals/EditMilestoneModal.vue
@@ -1,139 +1,108 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title" v-if="!isEdit">
-          {{ $t('schedule.milestone.add_milestone') }}:
-          {{ milestoneToEdit.date.format('YYYY-MM-DD') }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('schedule.milestone.edit_milestone') }}:
-          {{ milestoneToEdit.date.format('YYYY-MM-DD') }}
-        </h1>
-        <text-field
-          ref="nameField"
-          :label="$t('schedule.milestone.name')"
-          :maxlength="40"
-          v-model.trim="form.name"
-          @enter="confirm"
-          v-focus
-        />
-        <button-simple
-          class="button is-link error"
-          :text="$t('schedule.milestone.delete_milestone')"
-          @click="$emit('remove-milestone', milestoneToEdit)"
-          v-if="isEdit"
-        />
-        <modal-footer
-          :error-text="$t('schedule.milestone.error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          :is-disabled="!isFormFilled"
-          @confirm="confirm"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <text-field
+      ref="nameField"
+      :label="$t('schedule.milestone.name')"
+      :maxlength="40"
+      v-model.trim="form.name"
+      @enter="confirm"
+      v-focus
+    />
+    <button-simple
+      class="button is-link error"
+      :text="$t('schedule.milestone.delete_milestone')"
+      @click="$emit('remove-milestone', milestoneToEdit)"
+      v-if="isEdit"
+    />
+    <modal-footer
+      :error-text="$t('schedule.milestone.error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      :is-disabled="!isFormFilled"
+      @confirm="confirm"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 /*
  * Modal used to edit and create milestones.
  */
-import { modalMixin } from '@/components/modals/base_modal'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-milestone-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ButtonSimple,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    milestoneToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    }
-  },
+const { t } = useI18n()
 
-  emits: ['cancel', 'confirm', 'remove-milestone'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        name: ''
-      }
-    }
-  },
-
-  mounted() {
-    this.reset()
-    this.$nextTick(() => {
-      this.$refs.nameField.focus()
-    })
-  },
-
-  computed: {
-    isEdit() {
-      return this.milestoneToEdit.id !== undefined
-    },
-
-    isFormFilled() {
-      return this.form.name.length > 0
-    }
-  },
-
-  methods: {
-    confirm() {
-      return this.$emit('confirm', this.form)
-    },
-
-    reset() {
-      this.form = {
-        id: this.milestoneToEdit.id || undefined,
-        name: this.milestoneToEdit.name || '',
-        date: this.milestoneToEdit.date
-      }
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 1000)
-      }
-    }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  milestoneToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'remove-milestone'])
+
+// State
+
+const form = ref({ name: '' })
+const nameField = ref(null)
+
+// Computed
+
+const isEdit = computed(() => props.milestoneToEdit.id !== undefined)
+
+const isFormFilled = computed(() => form.value.name.length > 0)
+
+const modalTitle = computed(() => {
+  const dateStr = props.milestoneToEdit.date?.format('YYYY-MM-DD') ?? ''
+  const prefix = isEdit.value
+    ? t('schedule.milestone.edit_milestone')
+    : t('schedule.milestone.add_milestone')
+  return `${prefix}: ${dateStr}`
+})
+
+// Functions
+
+const confirm = () => {
+  emit('confirm', form.value)
+}
+
+const reset = () => {
+  form.value = {
+    id: props.milestoneToEdit.id || undefined,
+    name: props.milestoneToEdit.name || '',
+    date: props.milestoneToEdit.date
   }
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      reset()
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 1000)
+    }
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  reset()
+  nextTick(() => {
+    nameField.value?.focus()
+  })
+})
 </script>
diff --git a/src/components/modals/EditPersonModal.vue b/src/components/modals/EditPersonModal.vue
index ef8054295c..76682318c3 100644
--- a/src/components/modals/EditPersonModal.vue
+++ b/src/components/modals/EditPersonModal.vue
@@ -1,218 +1,208 @@
 <template>
-  <div class="modal" :class="{ 'is-active': active }">
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <form @submit.prevent="emitForm('confirm')" class="box">
-        <h1 class="title" v-if="personToEdit.id !== undefined">
-          {{ isBot ? $t('bots.edit_title') : $t('people.edit_title') }}
-          {{ personToEdit.full_name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ isBot ? $t('bots.new_bot') : $t('people.new_person') }}
-        </h1>
-        <text-field
-          ref="name-field"
-          :errored="form.first_name && !isValidName"
-          :label="
-            isBot ? $t('bots.fields.name') : $t('people.fields.first_name')
-          "
-          :disabled="personToEdit.is_generated_from_ldap"
-          v-model.trim="form.first_name"
-        />
-        <text-field
-          :label="$t('people.fields.last_name')"
-          :disabled="personToEdit.is_generated_from_ldap"
-          v-model.trim="form.last_name"
-          v-if="!isBot"
-        />
-        <text-field
-          type="email"
-          :errored="form.email && !isValidEmail"
-          :error-text="emailErrorText"
-          :label="$t('people.fields.email')"
-          :disabled="personToEdit.is_generated_from_ldap"
-          v-model.trim="form.email"
-          @update:model-value="$emit('reset-error', 'email')"
-          v-if="!isBot"
-        />
-        <text-field
-          :label="$t('people.fields.phone')"
-          v-model.trim="form.phone"
-          v-if="!isBot"
-        />
-        <date-field
-          :label="$t('bots.fields.expiration_date')"
-          :min-date="today"
-          :disabled="isEditing"
-          v-model="form.expiration_date"
-          v-if="isBot"
-        />
-        <combobox
-          :label="$t('people.fields.role')"
-          :options="roleOptions"
-          locale-key-prefix="people.role."
-          v-model="form.role"
-        />
-        <combobox
-          :label="$t('people.fields.position')"
-          :options="positionOptions"
-          locale-key-prefix="people.position."
-          v-model="form.position"
-          v-if="!isBot"
-        />
-        <combobox
-          :label="$t('people.fields.seniority')"
-          :options="seniorityOptions"
-          locale-key-prefix="people.seniority."
-          v-model="form.seniority"
-          v-if="!isBot"
-        />
-        <text-field
-          type="number"
-          :label="$t('people.fields.daily_salary')"
-          v-model="form.daily_salary"
-          v-if="!isBot"
-        />
-        <combobox
-          :label="$t('people.fields.contract')"
-          :options="contractOptions"
-          locale-key-prefix="people.contract."
-          v-model="form.contract_type"
-          v-if="!isBot && form.role !== 'client'"
-        />
-        <div class="departments field">
-          <label class="label">{{ $t('people.fields.departments') }}</label>
-          <p
-            class="empty mb1"
-            v-if="form.departments && form.departments.length === 0"
-          >
-            {{
-              isBot
-                ? $t('bots.departments_empty')
-                : $t('people.departments_empty')
-            }}
-          </p>
-          <div
-            class="department-element mb1 mt05"
-            :key="departmentId"
-            @click="removeDepartment(departmentId)"
-            v-for="departmentId in form.departments"
-          >
-            <department-name
-              :department="departmentMap.get(departmentId)"
-              v-if="departmentId"
-            />
-          </div>
-          <div class="flexrow">
-            <combobox-department
-              class="flexrow-item"
-              :selectable-departments="selectableDepartments"
-              v-model="selectedDepartment"
-              v-if="selectableDepartments.length > 0"
-            />
-            <button
-              class="button is-success flexrow-item"
-              :class="{
-                'is-disabled': selectedDepartment === null
-              }"
-              type="button"
-              @click="addDepartment"
-              v-if="selectableDepartments.length > 0"
-            >
-              {{ $t('main.add') }}
-            </button>
-          </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent="emitForm('confirm')">
+      <text-field
+        ref="nameField"
+        :errored="form.first_name && !isValidName"
+        :label="isBot ? $t('bots.fields.name') : $t('people.fields.first_name')"
+        :disabled="personToEdit.is_generated_from_ldap"
+        v-model.trim="form.first_name"
+      />
+      <text-field
+        :label="$t('people.fields.last_name')"
+        :disabled="personToEdit.is_generated_from_ldap"
+        v-model.trim="form.last_name"
+        v-if="!isBot"
+      />
+      <text-field
+        type="email"
+        :errored="form.email && !isValidEmail"
+        :error-text="emailErrorText"
+        :label="$t('people.fields.email')"
+        :disabled="personToEdit.is_generated_from_ldap"
+        v-model.trim="form.email"
+        @update:model-value="$emit('reset-error', 'email')"
+        v-if="!isBot"
+      />
+      <text-field
+        :label="$t('people.fields.phone')"
+        v-model.trim="form.phone"
+        v-if="!isBot"
+      />
+      <date-field
+        :label="$t('bots.fields.expiration_date')"
+        :min-date="today"
+        :disabled="isEditing"
+        v-model="form.expiration_date"
+        v-if="isBot"
+      />
+      <combobox
+        :label="$t('people.fields.role')"
+        :options="roleOptions"
+        locale-key-prefix="people.role."
+        v-model="form.role"
+      />
+      <combobox
+        :label="$t('people.fields.position')"
+        :options="positionOptions"
+        locale-key-prefix="people.position."
+        v-model="form.position"
+        v-if="!isBot"
+      />
+      <combobox
+        :label="$t('people.fields.seniority')"
+        :options="seniorityOptions"
+        locale-key-prefix="people.seniority."
+        v-model="form.seniority"
+        v-if="!isBot"
+      />
+      <text-field
+        type="number"
+        :label="$t('people.fields.daily_salary')"
+        v-model="form.daily_salary"
+        v-if="!isBot"
+      />
+      <combobox
+        :label="$t('people.fields.contract')"
+        :options="contractOptions"
+        locale-key-prefix="people.contract."
+        v-model="form.contract_type"
+        v-if="!isBot && form.role !== 'client'"
+      />
+      <div class="departments field">
+        <label class="label">{{ $t('people.fields.departments') }}</label>
+        <p
+          class="empty mb1"
+          v-if="form.departments && form.departments.length === 0"
+        >
+          {{
+            isBot
+              ? $t('bots.departments_empty')
+              : $t('people.departments_empty')
+          }}
+        </p>
+        <div
+          class="department-element mb1 mt05"
+          :key="departmentId"
+          @click="removeDepartment(departmentId)"
+          v-for="departmentId in form.departments"
+        >
+          <department-name
+            :department="departmentMap.get(departmentId)"
+            v-if="departmentId"
+          />
         </div>
-        <combobox-studio
-          class="field"
-          :label="$t('people.fields.studio')"
-          v-model="form.studio_id"
-          v-if="!isBot"
-        />
-        <combobox
-          :label="$t('people.fields.active')"
-          :options="activeOptions"
-          :disabled="personToEdit.is_generated_from_ldap"
-          v-model="form.active"
-        />
-
         <div class="flexrow">
+          <combobox-department
+            class="flexrow-item"
+            :selectable-departments="selectableDepartments"
+            v-model="selectedDepartment"
+            v-if="selectableDepartments.length > 0"
+          />
           <button
-            class="button flexrow-item"
-            :class="{
-              'is-loading': isInviteLoading
-            }"
-            :disabled="!isValidEmail"
-            type="button"
-            @click="emitForm('invite')"
-            v-if="isEditing && !isBot"
-          >
-            {{ $t('people.invite') }}
-          </button>
-          <div class="filler"></div>
-
-          <button
-            class="button is-primary flexrow-item"
+            class="button is-success flexrow-item"
             :class="{
-              'is-loading': isCreateInviteLoading
+              'is-disabled': selectedDepartment === null
             }"
-            :disabled="!isValidForm"
             type="button"
-            @click="emitForm('confirm-invite')"
-            v-if="!isEditing && !isBot"
+            @click="addDepartment"
+            v-if="selectableDepartments.length > 0"
           >
-            {{ $t('people.create_invite') }}
+            {{ $t('main.add') }}
           </button>
-          <button
-            class="button is-primary flexrow-item"
-            :class="{
-              'is-loading': isLoading
-            }"
-            :disabled="!isValidForm"
-            type="submit"
-          >
-            {{
-              !isEditing
-                ? isBot
-                  ? $t('bots.create')
-                  : $t('people.create')
-                : isBot
-                  ? $t('bots.confirm_edit')
-                  : $t('people.confirm_edit')
-            }}
-          </button>
-          <button
-            class="button is-link flexrow-item"
-            type="button"
-            @click="$emit('cancel')"
-          >
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
-
-        <div class="success has-text-right mt1" v-if="isInvitationSuccess">
-          {{ $t('people.invite_success') }}
-        </div>
-        <div class="error has-text-right mt1" v-if="isInvitationError">
-          {{ $t('people.invite_error') }}
-        </div>
-        <div class="error has-text-right mt1" v-if="isUserLimitError">
-          {{ $t('people.user_limit_error') }}
         </div>
-        <div class="error has-text-right mt1" v-if="isError">
-          {{ $t('people.create_error') }}
-        </div>
-      </form>
-    </div>
-  </div>
+      </div>
+      <combobox-studio
+        class="field"
+        :label="$t('people.fields.studio')"
+        v-model="form.studio_id"
+        v-if="!isBot"
+      />
+      <combobox
+        :label="$t('people.fields.active')"
+        :options="activeOptions"
+        :disabled="personToEdit.is_generated_from_ldap"
+        v-model="form.active"
+      />
+
+      <div class="flexrow">
+        <button
+          class="button flexrow-item"
+          :class="{
+            'is-loading': isInviteLoading
+          }"
+          :disabled="!isValidEmail"
+          type="button"
+          @click="emitForm('invite')"
+          v-if="isEditing && !isBot"
+        >
+          {{ $t('people.invite') }}
+        </button>
+        <div class="filler"></div>
+
+        <button
+          class="button is-primary flexrow-item"
+          :class="{
+            'is-loading': isCreateInviteLoading
+          }"
+          :disabled="!isValidForm"
+          type="button"
+          @click="emitForm('confirm-invite')"
+          v-if="!isEditing && !isBot"
+        >
+          {{ $t('people.create_invite') }}
+        </button>
+        <button
+          class="button is-primary flexrow-item"
+          :class="{
+            'is-loading': isLoading
+          }"
+          :disabled="!isValidForm"
+          type="submit"
+        >
+          {{
+            !isEditing
+              ? isBot
+                ? $t('bots.create')
+                : $t('people.create')
+              : isBot
+                ? $t('bots.confirm_edit')
+                : $t('people.confirm_edit')
+          }}
+        </button>
+        <button
+          class="button is-link flexrow-item"
+          type="button"
+          @click="$emit('cancel')"
+        >
+          {{ $t('main.cancel') }}
+        </button>
+      </div>
+
+      <div class="success has-text-right mt1" v-if="isInvitationSuccess">
+        {{ $t('people.invite_success') }}
+      </div>
+      <div class="error has-text-right mt1" v-if="isInvitationError">
+        {{ $t('people.invite_error') }}
+      </div>
+      <div class="error has-text-right mt1" v-if="isUserLimitError">
+        {{ $t('people.user_limit_error') }}
+      </div>
+      <div class="error has-text-right mt1" v-if="isError">
+        {{ $t('people.create_error') }}
+      </div>
+    </form>
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
-import { timeMixin } from '@/components/mixins/time'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import { useTime } from '@/composables/time'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
 import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
@@ -220,280 +210,218 @@ import DateField from '@/components/widgets/DateField.vue'
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-person-modal',
+const { t } = useI18n()
+const { today } = useTime()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isBot: { type: Boolean, default: false },
+  isCreateInviteLoading: { type: Boolean, default: false },
+  isEmailDomainError: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isInvitationError: { type: Boolean, default: false },
+  isInvitationSuccess: { type: Boolean, default: false },
+  isInviteLoading: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isUserLimitError: { type: Boolean, default: false },
+  personToEdit: { type: Object, default: () => ({}) }
+})
+
+// emitForm() emits one of 'confirm' / 'confirm-invite' / 'invite' dynamically,
+// so vue/no-unused-emit-declarations can't statically prove they're used.
+/* eslint-disable vue/no-unused-emit-declarations */
+const emit = defineEmits([
+  'cancel',
+  'confirm',
+  'confirm-invite',
+  'invite',
+  'reset-error'
+])
+/* eslint-enable vue/no-unused-emit-declarations */
+
+const activeOptions = computed(() => [
+  { label: t('main.yes'), value: 'true' },
+  { label: t('main.no'), value: 'false' }
+])
+
+const contractOptions = [
+  { label: 'open-ended', value: 'open-ended' },
+  { label: 'fixed-term', value: 'fixed-term' },
+  { label: 'short-term', value: 'short-term' },
+  { label: 'freelance', value: 'freelance' },
+  { label: 'apprentice', value: 'apprentice' },
+  { label: 'internship', value: 'internship' }
+]
+
+const roleOptions = [
+  { label: 'user', value: 'user' },
+  { label: 'supervisor', value: 'supervisor' },
+  { label: 'manager', value: 'manager' },
+  { label: 'client', value: 'client' },
+  { label: 'vendor', value: 'vendor' },
+  { label: 'admin', value: 'admin' }
+]
+
+const positionOptions = [
+  { label: '', value: null },
+  { label: 'artist', value: 'artist' },
+  { label: 'supervisor', value: 'supervisor' },
+  { label: 'lead', value: 'lead' }
+]
+
+const seniorityOptions = [
+  { label: '', value: null },
+  { label: 'senior', value: 'senior' },
+  { label: 'mid', value: 'mid' },
+  { label: 'junior', value: 'junior' }
+]
+
+const form = ref({
+  first_name: '',
+  last_name: '',
+  email: '',
+  phone: '',
+  role: 'user',
+  position: 'artist',
+  seniority: 'mid',
+  daily_salary: 0,
+  contract_type: 'open-ended',
+  active: 'true',
+  departments: [],
+  studio_id: null,
+  expiration_date: null,
+  is_bot: false
+})
+const nameField = ref(null)
+const selectedDepartment = ref(null)
+
+const departments = computed(() => store.getters.departments)
+const departmentMap = computed(() => store.getters.departmentMap)
+const people = computed(() => store.getters.people)
+const user = computed(() => store.getters.user)
+
+const isEditing = computed(() => Boolean(props.personToEdit?.id))
+
+const modalTitle = computed(() => {
+  if (isEditing.value) {
+    const prefix = props.isBot ? t('bots.edit_title') : t('people.edit_title')
+    return `${prefix} ${props.personToEdit.full_name}`
+  }
+  return props.isBot ? t('bots.new_bot') : t('people.new_person')
+})
+
+const selectableDepartments = computed(() =>
+  departments.value.filter(d => !form.value.departments.includes(d.id))
+)
+
+const isValidName = computed(() => Boolean(form.value.first_name?.length))
+
+const isUniqEmail = computed(
+  () =>
+    !people.value.some(
+      person =>
+        !person.is_bot &&
+        person.email === form.value.email &&
+        (!props.personToEdit || props.personToEdit.email !== person.email)
+    )
+)
+
+const isValidEmail = computed(() => {
+  if (!form.value.email?.length) return false
+  const emailRegex =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  if (!emailRegex.test(form.value.email)) return false
+  if (form.value.is_bot) return true
+  return isUniqEmail.value && !props.isEmailDomainError
+})
+
+const isValidForm = computed(() => isValidName.value && isValidEmail.value)
+
+const emailErrorText = computed(() => {
+  if (props.isEmailDomainError) return t('people.email_domain_error')
+  if (!isUniqEmail.value) return t('people.email_exist_error')
+  return ''
+})
+
+const emitForm = event => {
+  if (!isValidForm.value) return
+  emit(event, {
+    ...form.value,
+    last_name: form.value.last_name || '',
+    active: form.value.active === 'true' || form.value.active === true
+  })
+}
 
-  mixins: [modalMixin, timeMixin],
+const addDepartment = () => {
+  form.value.departments.push(selectedDepartment.value)
+  selectedDepartment.value = null
+}
 
-  components: {
-    Combobox,
-    ComboboxDepartment,
-    ComboboxStudio,
-    DateField,
-    DepartmentName,
-    TextField
-  },
+const removeDepartment = idToRemove => {
+  const index = form.value.departments.indexOf(idToRemove)
+  if (index >= 0) form.value.departments.splice(index, 1)
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isBot: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isCreateInviteLoading: {
-      type: Boolean,
-      default: false
-    },
-    isInviteLoading: {
-      type: Boolean,
-      default: false
-    },
-    isInvitationSuccess: {
-      type: Boolean,
-      default: false
-    },
-    isInvitationError: {
-      type: Boolean,
-      default: false
-    },
-    isUserLimitError: {
-      type: Boolean,
-      default: false
-    },
-    isEmailDomainError: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    personToEdit: {
-      type: Object,
-      default: () => {}
+const resetForm = () => {
+  if (isEditing.value) {
+    const p = props.personToEdit
+    form.value = {
+      first_name: p.first_name,
+      last_name: p.last_name,
+      email: p.email,
+      phone: p.phone,
+      role: p.role,
+      position: p.position,
+      seniority: p.seniority,
+      daily_salary: p.daily_salary,
+      contract_type: p.contract_type,
+      active: p.active ? 'true' : 'false',
+      departments: [...(p.departments || [])],
+      studio_id: p.studio_id,
+      expiration_date: p.expiration_date,
+      is_bot: p.is_bot,
+      notifications_enabled: p.notifications_enabled ? 'true' : 'false',
+      notifications_slack_enabled: p.notifications_slack_enabled
+        ? 'true'
+        : 'false',
+      notifications_mattermost_enabled: p.notifications_mattermost_enabled
+        ? 'true'
+        : 'false',
+      notifications_discord_enabled: p.notifications_discord_enabled
+        ? 'true'
+        : 'false'
     }
-  },
-
-  // eslint-disable-next-line vue/no-unused-emit-declarations
-  emits: ['cancel', 'confirm', 'confirm-invite', 'invite', 'reset-error'],
-
-  data() {
-    return {
-      activeOptions: [
-        { label: this.$t('main.yes'), value: 'true' },
-        { label: this.$t('main.no'), value: 'false' }
-      ],
-      contractOptions: [
-        { label: 'open-ended', value: 'open-ended' },
-        { label: 'fixed-term', value: 'fixed-term' },
-        { label: 'short-term', value: 'short-term' },
-        { label: 'freelance', value: 'freelance' },
-        { label: 'apprentice', value: 'apprentice' },
-        { label: 'internship', value: 'internship' }
-      ],
-      form: {
-        first_name: '',
-        last_name: '',
-        email: '',
-        phone: '',
-        role: 'user',
-        position: 'artist',
-        seniority: 'mid',
-        daily_salary: 0,
-        contract_type: 'open-ended',
-        active: 'true',
-        departments: [],
-        studio_id: null,
-        expiration_date: null,
-        is_bot: false
-      },
-      roleOptions: [
-        { label: 'user', value: 'user' },
-        { label: 'supervisor', value: 'supervisor' },
-        { label: 'manager', value: 'manager' },
-        { label: 'client', value: 'client' },
-        { label: 'vendor', value: 'vendor' },
-        { label: 'admin', value: 'admin' }
-      ],
-      positionOptions: [
-        { label: '', value: null },
-        { label: 'artist', value: 'artist' },
-        { label: 'supervisor', value: 'supervisor' },
-        { label: 'lead', value: 'lead' }
-      ],
-      seniorityOptions: [
-        { label: '', value: null },
-        { label: 'senior', value: 'senior' },
-        { label: 'mid', value: 'mid' },
-        { label: 'junior', value: 'junior' }
-      ],
-      selectedDepartment: null
+  } else {
+    form.value = {
+      role: 'user',
+      position: 'artist',
+      seniority: 'mid',
+      daily_salary: 0,
+      contract_type: 'open-ended',
+      active: 'true',
+      departments: [],
+      studio_id: null,
+      expiration_date: null,
+      is_bot: props.isBot,
+      email: props.isBot ? user.value.email : null
     }
-  },
+  }
+}
 
-  computed: {
-    ...mapGetters(['departments', 'departmentMap', 'people']),
-
-    selectableDepartments() {
-      return this.departments.filter(
-        department => !this.form.departments.includes(department.id)
-      )
-    },
-
-    isEditing() {
-      return Boolean(this.personToEdit?.id)
-    },
-
-    isValidName() {
-      return Boolean(this.form.first_name?.length)
-    },
-
-    isValidEmail() {
-      if (!this.form.email?.length) {
-        return false
-      }
-
-      const emailRegex =
-        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-
-      if (!emailRegex.test(this.form.email)) {
-        return false
-      }
-
-      if (this.form.is_bot) {
-        return true
-      }
-
-      return this.isUniqEmail && !this.isEmailDomainError
-    },
-
-    isUniqEmail() {
-      return !this.people.some(
-        person =>
-          !person.is_bot &&
-          person.email === this.form.email &&
-          (!this.personToEdit || this.personToEdit.email !== person.email)
-      )
-    },
-
-    isValidForm() {
-      return this.isValidName && this.isValidEmail
-    },
-
-    emailErrorText() {
-      if (this.isEmailDomainError) {
-        return this.$t('people.email_domain_error')
-      }
-      if (!this.isUniqEmail) {
-        return this.$t('people.email_exist_error')
-      }
-      return ''
-    }
-  },
+watch(() => props.personToEdit, resetForm, { immediate: true })
 
-  methods: {
-    emitForm(event) {
-      if (!this.isValidForm) {
-        return
-      }
-      const form = {
-        ...this.form,
-        last_name: this.form.last_name || '',
-        active: this.form.active === 'true' || this.form.active === true
-      }
-      this.$emit(event, form)
-    },
-
-    addDepartment() {
-      this.form.departments.push(this.selectedDepartment)
-      this.selectedDepartment = null
-    },
-
-    removeDepartment(idToRemove) {
-      const departmentIndex = this.form.departments.indexOf(idToRemove)
-      if (departmentIndex >= 0) {
-        this.form.departments.splice(departmentIndex, 1)
-      }
-    },
-
-    resetForm() {
-      if (this.isEditing) {
-        this.form = {
-          first_name: this.personToEdit.first_name,
-          last_name: this.personToEdit.last_name,
-          email: this.personToEdit.email,
-          phone: this.personToEdit.phone,
-          role: this.personToEdit.role,
-          position: this.personToEdit.position,
-          seniority: this.personToEdit.seniority,
-          daily_salary: this.personToEdit.daily_salary,
-          contract_type: this.personToEdit.contract_type,
-          active: this.personToEdit.active ? 'true' : 'false',
-          departments: [...(this.personToEdit.departments || [])],
-          studio_id: this.personToEdit.studio_id,
-          expiration_date: this.personToEdit.expiration_date,
-          is_bot: this.personToEdit.is_bot,
-          notifications_enabled: this.personToEdit.notifications_enabled
-            ? 'true'
-            : 'false',
-          notifications_slack_enabled: this.personToEdit
-            .notifications_slack_enabled
-            ? 'true'
-            : 'false',
-          notifications_mattermost_enabled: this.personToEdit
-            .notifications_mattermost_enabled
-            ? 'true'
-            : 'false',
-          notifications_discord_enabled: this.personToEdit
-            .notifications_discord_enabled
-            ? 'true'
-            : 'false'
-        }
-      } else {
-        this.form = {
-          role: 'user',
-          position: 'artist',
-          seniority: 'mid',
-          daily_salary: 0,
-          contract_type: 'open-ended',
-          active: 'true',
-          departments: [],
-          studio_id: null,
-          expiration_date: null,
-          is_bot: this.isBot,
-          email: this.isBot ? this.user.email : null
-        }
-      }
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
   },
-
-  watch: {
-    personToEdit: {
-      immediate: true,
-      handler() {
-        this.resetForm()
-      }
-    },
-
-    active: {
-      immediate: true,
-      handler() {
-        if (this.active) {
-          setTimeout(() => {
-            this.$refs['name-field']?.focus()
-          }, 100)
-        }
-      }
-    }
-  }
-}
+  { immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -503,15 +431,6 @@ export default {
   cursor: pointer;
 }
 
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-
 .empty {
   color: var(--text);
   font-style: italic;
diff --git a/src/components/modals/EditPlaylistModal.vue b/src/components/modals/EditPlaylistModal.vue
index 575d4fa73e..69f3b9d676 100644
--- a/src/components/modals/EditPlaylistModal.vue
+++ b/src/components/modals/EditPlaylistModal.vue
@@ -1,238 +1,175 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('playlists.edit_title') }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('playlists.create_title') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('playlists.fields.name')"
-            :maxlength="80"
-            @enter="runConfirmation"
-            v-model.trim="form.name"
-            v-focus
-          />
-          <combobox-simple
-            :label="$t('playlists.fields.for_client')"
-            :options="forClientOptions"
-            v-model="forClient"
-          />
-          <combobox-simple
-            :label="$t('playlists.fields.for_entity')"
-            :options="forEntityOptions"
-            :disabled="typeDisabled"
-            v-model="form.for_entity"
-            v-if="!isEditing"
-          />
-          <combobox-task-type
-            class="flexrow-item selector"
-            :label="$t('news.task_type')"
-            :task-type-list="taskTypeList"
-            :up="true"
-            v-model="form.task_type_id"
-          />
-        </form>
-
-        <modal-footer
-          :error-text="$t('playlists.edit_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('playlists.fields.name')"
+        :maxlength="80"
+        @enter="runConfirmation"
+        v-model.trim="form.name"
+        v-focus
+      />
+      <combobox-simple
+        :label="$t('playlists.fields.for_client')"
+        :options="forClientOptions"
+        v-model="forClient"
+      />
+      <combobox-simple
+        :label="$t('playlists.fields.for_entity')"
+        :options="forEntityOptions"
+        :disabled="typeDisabled"
+        v-model="form.for_entity"
+        v-if="!isEditing"
+      />
+      <combobox-task-type
+        class="flexrow-item selector"
+        :label="$t('news.task_type')"
+        :task-type-list="taskTypeList"
+        :up="true"
+        v-model="form.task_type_id"
+      />
+    </form>
+
+    <modal-footer
+      :error-text="$t('playlists.edit_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import { sortByName } from '@/lib/sorting'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ComboboxSimple from '@/components/widgets/ComboboxSimple.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-playlist-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ComboboxSimple,
-    ComboboxTaskType,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      value: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    playlistToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    typeDisabled: {
-      type: Boolean,
-      default: false
-    },
-    taskTypeId: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      forClient: 'false',
-      forClientOptions: [
-        { label: this.$t('playlists.for_client'), value: 'true' },
-        { label: this.$t('playlists.for_studio'), value: 'false' }
-      ],
-      form: {
-        name: this.playlistToEdit.name,
-        for_entity: this.playlistToEdit.for_entity,
-        for_client: this.playlistToEdit.for_client,
-        is_for_all: this.currentEpisode && this.currentEpisode.id === 'all',
-        task_type_id: this.taskTypeId
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentEpisode',
-      'currentProduction',
-      'productionTaskTypes'
-    ]),
-
-    isEditing() {
-      return this.playlistToEdit && this.playlistToEdit.id
-    },
-
-    forEntityOptions() {
-      if (
-        (this.currentEpisode &&
-          ['main', 'all'].includes(this.currentEpisode.id)) ||
-        this.currentProduction?.production_type === 'assets'
-      ) {
-        return [{ label: this.$t('assets.title'), value: 'asset' }]
-      } else if (this.currentProduction?.production_type === 'shots') {
-        return [
-          { label: this.$t('shots.title'), value: 'shot' },
-          { label: this.$t('sequences.title'), value: 'sequence' }
-        ]
-      } else {
-        return [
-          { label: this.$t('assets.title'), value: 'asset' },
-          { label: this.$t('shots.title'), value: 'shot' },
-          { label: this.$t('sequences.title'), value: 'sequence' }
-        ]
-      }
-    },
-
-    defaultForEntity() {
-      const isOnlyAssets = this.currentProduction?.production_type === 'assets'
-      const isOnlyShots = this.currentProduction?.production_type === 'shots'
-      const isAssetEpisode =
-        this.currentEpisode && ['all', 'main'].includes(this.currentEpisode.id)
-      return (isAssetEpisode || isOnlyAssets) && !isOnlyShots ? 'asset' : 'shot'
-    },
-
-    taskTypeList() {
-      const taskTypes = [...this.productionTaskTypes].filter(
-        taskType => taskType.for_entity.toLowerCase() === this.form.for_entity
-      )
-      return [
-        {
-          id: '',
-          color: '#999',
-          name: this.$t('news.all')
-        }
-      ].concat(sortByName([...taskTypes]))
-    }
-  },
-
-  methods: {
-    runConfirmation() {
-      if (!this.form.name) {
-        this.$refs.nameField.focus()
-        return
-      }
-      this.form.for_client = this.forClient === 'true'
-      this.$emit('confirm', this.form)
-    },
-
-    resetForm() {
-      if (this.isEditing) {
-        this.form.name = this.playlistToEdit.name
-        this.form.for_entity = this.playlistToEdit.for_entity
-        this.form.for_client = this.playlistToEdit.for_client
-        this.form.is_for_all =
-          this.currentEpisode && this.currentEpisode.id === 'all'
-        this.form.task_type_id = this.playlistToEdit.task_type_id
-      } else {
-        this.form = {
-          name: this.playlistToEdit.name,
-          for_entity: this.playlistToEdit.for_entity || this.defaultForEntity,
-          for_client: 'false',
-          is_for_all: this.currentEpisode && this.currentEpisode.id === 'all',
-          task_type_id: this.taskTypeId
-        }
-      }
-    }
-  },
-
-  watch: {
-    playlistToEdit() {
-      this.resetForm()
-    },
-
-    active() {
-      if (this.active) {
-        this.forClient = this.playlistToEdit.for_client ? 'true' : 'false'
-        this.resetForm()
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
-    }
+const { t } = useI18n()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  playlistToEdit: { type: Object, default: () => ({}) },
+  taskTypeId: { type: String, default: '' },
+  typeDisabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+const form = ref({
+  name: props.playlistToEdit.name,
+  for_entity: props.playlistToEdit.for_entity,
+  for_client: props.playlistToEdit.for_client,
+  is_for_all: false,
+  task_type_id: props.taskTypeId
+})
+const forClient = ref('false')
+const nameField = ref(null)
+
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const productionTaskTypes = computed(() => store.getters.productionTaskTypes)
+
+const isEditing = computed(() => Boolean(props.playlistToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value ? t('playlists.edit_title') : t('playlists.create_title')
+)
+
+const forClientOptions = computed(() => [
+  { label: t('playlists.for_client'), value: 'true' },
+  { label: t('playlists.for_studio'), value: 'false' }
+])
+
+const forEntityOptions = computed(() => {
+  if (
+    ['main', 'all'].includes(currentEpisode.value?.id) ||
+    currentProduction.value?.production_type === 'assets'
+  ) {
+    return [{ label: t('assets.title'), value: 'asset' }]
+  }
+  if (currentProduction.value?.production_type === 'shots') {
+    return [
+      { label: t('shots.title'), value: 'shot' },
+      { label: t('sequences.title'), value: 'sequence' }
+    ]
   }
+  return [
+    { label: t('assets.title'), value: 'asset' },
+    { label: t('shots.title'), value: 'shot' },
+    { label: t('sequences.title'), value: 'sequence' }
+  ]
+})
+
+const defaultForEntity = computed(() => {
+  const productionType = currentProduction.value?.production_type
+  const isOnlyAssets = productionType === 'assets'
+  const isOnlyShots = productionType === 'shots'
+  const isAssetEpisode = ['all', 'main'].includes(currentEpisode.value?.id)
+  return (isAssetEpisode || isOnlyAssets) && !isOnlyShots ? 'asset' : 'shot'
+})
+
+const taskTypeList = computed(() => {
+  const taskTypes = productionTaskTypes.value.filter(
+    taskType => taskType.for_entity.toLowerCase() === form.value.for_entity
+  )
+  return [
+    { id: '', color: '#999', name: t('news.all') },
+    ...sortByName([...taskTypes])
+  ]
+})
+
+const runConfirmation = () => {
+  if (!form.value.name) {
+    nameField.value?.focus()
+    return
+  }
+  form.value.for_client = forClient.value === 'true'
+  emit('confirm', form.value)
 }
-</script>
 
-<style lang="scss" scoped>
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
+const resetForm = () => {
+  const isAll = currentEpisode.value?.id === 'all'
+  if (isEditing.value) {
+    form.value.name = props.playlistToEdit.name
+    form.value.for_entity = props.playlistToEdit.for_entity
+    form.value.for_client = props.playlistToEdit.for_client
+    form.value.is_for_all = isAll
+    form.value.task_type_id = props.playlistToEdit.task_type_id
+  } else {
+    form.value = {
+      name: props.playlistToEdit.name,
+      for_entity: props.playlistToEdit.for_entity || defaultForEntity.value,
+      for_client: 'false',
+      is_for_all: isAll,
+      task_type_id: props.taskTypeId
+    }
+  }
 }
-</style>
+
+watch(() => props.playlistToEdit, resetForm)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      forClient.value = props.playlistToEdit.for_client ? 'true' : 'false'
+      resetForm()
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
+</script>
diff --git a/src/components/modals/EditSearchFilterGroupModal.vue b/src/components/modals/EditSearchFilterGroupModal.vue
index 1470a2373d..7ed767fdc1 100644
--- a/src/components/modals/EditSearchFilterGroupModal.vue
+++ b/src/components/modals/EditSearchFilterGroupModal.vue
@@ -1,170 +1,138 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="groupToEdit.id">
-          {{ $t('main.filter_group_edit') }} "{{ groupToEdit.name }}"
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('main.filter_group_add') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('assets.fields.name')"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <color-field :label="$t('main.color')" v-model="form.color" />
-
-          <boolean-field
-            class="mt1"
-            :label="$t('main.is_shared')"
-            v-model="form.is_shared"
-            v-if="isCurrentUserManager && currentProduction"
-          />
-
-          <combobox-department
-            class="mt2"
-            :label="$t('main.department')"
-            v-model="form.department_id"
-            :top="true"
-            v-if="form.is_shared === 'true'"
-          />
-        </form>
-
-        <div v-if="groupToEdit?.id" class="mt2">
-          {{ $t('main.created_by') }}:
-          <people-name :person="personMap.get(groupToEdit.person_id)" />
-        </div>
-
-        <modal-footer
-          :error-text="$t('main.filter_group_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
-        />
-      </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('assets.fields.name')"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <color-field :label="$t('main.color')" v-model="form.color" />
+
+      <boolean-field
+        class="mt1"
+        :label="$t('main.is_shared')"
+        v-model="form.is_shared"
+        v-if="isCurrentUserManager && currentProduction"
+      />
+
+      <combobox-department
+        class="mt2"
+        :label="$t('main.department')"
+        v-model="form.department_id"
+        :top="true"
+        v-if="form.is_shared === 'true'"
+      />
+    </form>
+
+    <div v-if="groupToEdit?.id" class="mt2">
+      {{ $t('main.created_by') }}:
+      <people-name :person="personMap.get(groupToEdit.person_id)" />
     </div>
-  </div>
+
+    <modal-footer
+      :error-text="$t('main.filter_group_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 /*
  * Modal used to edit filter group information.
  */
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-search-filter-group-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    ColorField,
-    ComboboxDepartment,
-    ModalFooter,
-    PeopleName,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    groupToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        color: '',
-        name: '',
-        is_shared: 'false'
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'isCurrentUserManager', 'personMap'])
-  },
-
-  methods: {
-    runConfirmation(event) {
-      if (!this.form.name.length) {
-        this.$refs.nameField.focus()
-        return
-      }
-
-      if (!event || event.keyCode === 13 || !event.keyCode) {
-        const data = {
-          ...this.form,
-          is_shared: this.form.is_shared === 'true'
-        }
-        this.$emit('confirm', data)
-      }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  groupToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ color: '', name: '', is_shared: 'false' })
+const nameField = ref(null)
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const personMap = computed(() => store.getters.personMap)
+
+const modalTitle = computed(() =>
+  props.groupToEdit?.id
+    ? `${t('main.filter_group_edit')} "${props.groupToEdit.name}"`
+    : t('main.filter_group_add')
+)
+
+// Functions
+
+const runConfirmation = event => {
+  if (!form.value.name.length) {
+    nameField.value?.focus()
+    return
+  }
+  if (!event || event.keyCode === 13 || !event.keyCode) {
+    emit('confirm', {
+      ...form.value,
+      is_shared: form.value.is_shared === 'true'
+    })
+  }
+}
+
+// Watchers
+
+watch(
+  () => props.groupToEdit,
+  group => {
+    const {
+      id,
+      color = '',
+      name = '',
+      is_shared = false,
+      department_id = null
+    } = group?.id ? group : {}
+    form.value = {
+      id,
+      color,
+      name,
+      is_shared: is_shared ? 'true' : 'false',
+      department_id
     }
-  },
-
-  watch: {
-    groupToEdit() {
-      const {
-        id,
-        color = '',
-        name = '',
-        is_shared = false,
-        department_id = null
-      } = this.groupToEdit?.id ? this.groupToEdit : {}
-      this.form = {
-        id,
-        color,
-        name,
-        is_shared: is_shared ? 'true' : 'false',
-        department_id
-      }
-    },
-
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
+  }
+)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
   }
-}
+)
 </script>
diff --git a/src/components/modals/EditSearchFilterModal.vue b/src/components/modals/EditSearchFilterModal.vue
index 07875a1fd1..ef97d642e7 100644
--- a/src/components/modals/EditSearchFilterModal.vue
+++ b/src/components/modals/EditSearchFilterModal.vue
@@ -1,205 +1,170 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('main.search_query_edit')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('main.search_query_edit') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('assets.fields.name')"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-
-          <text-field
-            :label="$t('main.search_query')"
-            v-model.trim="form.search_query"
-            @enter="runConfirmation"
-          />
-
-          <boolean-field
-            :label="$t('main.is_shared')"
-            v-model="form.is_shared"
-            @click="form.search_filter_group_id = null"
-            v-if="isCurrentUserManager && currentProduction"
-          />
-
-          <combobox-department
-            class="mt2"
-            :label="$t('main.department')"
-            :top="true"
-            v-model="form.department_id"
-            v-if="form.is_shared === 'true'"
-          />
-
-          <combobox
-            class="mt2"
-            :label="$t('main.filter_group')"
-            :options="allowedGroups"
-            v-model="form.search_filter_group_id"
-            v-if="isGroupEnabled && allowedGroups.length > 1"
-          />
-        </form>
-
-        <div v-if="searchQueryToEdit?.id" class="mt2">
-          {{ $t('main.created_by') }}:
-          <people-name :person="personMap.get(searchQueryToEdit.person_id)" />
-        </div>
-
-        <modal-footer
-          :error-text="$t('main.search_query_edit_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
-        />
-      </div>
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('assets.fields.name')"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+
+      <text-field
+        :label="$t('main.search_query')"
+        v-model.trim="form.search_query"
+        @enter="runConfirmation"
+      />
+
+      <boolean-field
+        :label="$t('main.is_shared')"
+        v-model="form.is_shared"
+        @click="form.search_filter_group_id = null"
+        v-if="isCurrentUserManager && currentProduction"
+      />
+
+      <combobox-department
+        class="mt2"
+        :label="$t('main.department')"
+        :top="true"
+        v-model="form.department_id"
+        v-if="form.is_shared === 'true'"
+      />
+
+      <combobox
+        class="mt2"
+        :label="$t('main.filter_group')"
+        :options="allowedGroups"
+        v-model="form.search_filter_group_id"
+        v-if="isGroupEnabled && allowedGroups.length > 1"
+      />
+    </form>
+
+    <div v-if="searchQueryToEdit?.id" class="mt2">
+      {{ $t('main.created_by') }}:
+      <people-name :person="personMap.get(searchQueryToEdit.person_id)" />
     </div>
-  </div>
+
+    <modal-footer
+      :error-text="$t('main.search_query_edit_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 /*
  * Modal used to edit search filter information. Users prefer to rename the
-   filter label when it's too complex to read or too long.
+ * filter label when it's too complex to read or too long.
  */
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+import { computed, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-search-filter-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    Combobox,
-    ComboboxDepartment,
-    ModalFooter,
-    PeopleName,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isGroupEnabled: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    searchQueryToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    groupOptions: {
-      type: Array,
-      default: () => []
-    }
-  },
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        id: null,
-        name: '',
-        search_filter_group_id: null,
-        search_query: '',
-        is_shared: 'false'
-      }
-    }
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  groupOptions: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isGroupEnabled: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  searchQueryToEdit: { type: Object, default: () => ({}) }
+})
 
-  computed: {
-    ...mapGetters(['currentProduction', 'isCurrentUserManager', 'personMap']),
+const emit = defineEmits(['cancel', 'confirm'])
 
-    allowedGroups() {
-      return this.groupOptions.filter(
-        group =>
-          group.is_shared === (this.form.is_shared === 'true') ||
-          group.value === null
-      )
-    }
-  },
+// State
 
-  methods: {
-    runConfirmation(event) {
-      if (!this.form.name.length) {
-        this.$refs.nameField.focus()
-        return
-      }
+const form = ref({
+  id: null,
+  name: '',
+  search_filter_group_id: null,
+  search_query: '',
+  is_shared: 'false'
+})
+const nameField = ref(null)
 
-      if (!event || event.keyCode === 13 || !event.keyCode) {
-        const data = {
-          id: this.searchQueryToEdit.id,
-          ...this.form,
-          is_shared: this.form.is_shared === 'true'
-        }
-        this.$emit('confirm', data)
-      }
-    }
-  },
-
-  watch: {
-    searchQueryToEdit() {
-      if (this.searchQueryToEdit?.id) {
-        this.form = {
-          id: this.searchQueryToEdit.id,
-          name: this.searchQueryToEdit.name,
-          search_filter_group_id: this.searchQueryToEdit.search_filter_group_id,
-          search_query: this.searchQueryToEdit.search_query,
-          is_shared: this.searchQueryToEdit.is_shared ? 'true' : 'false',
-          department_id: this.searchQueryToEdit.department_id
-        }
-      } else {
-        this.form = {
-          id: null,
-          name: '',
-          search_filter_group_id: null,
-          search_query: '',
-          is_shared: 'false',
-          department_id: null
-        }
-      }
-    },
+// Computed
 
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
+const currentProduction = computed(() => store.getters.currentProduction)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const personMap = computed(() => store.getters.personMap)
+
+const allowedGroups = computed(() =>
+  props.groupOptions.filter(
+    group =>
+      group.is_shared === (form.value.is_shared === 'true') ||
+      group.value === null
+  )
+)
+
+// Functions
+
+const runConfirmation = event => {
+  if (!form.value.name.length) {
+    nameField.value?.focus()
+    return
+  }
+  if (!event || event.keyCode === 13 || !event.keyCode) {
+    emit('confirm', {
+      id: props.searchQueryToEdit.id,
+      ...form.value,
+      is_shared: form.value.is_shared === 'true'
+    })
+  }
+}
+
+// Watchers
+
+watch(
+  () => props.searchQueryToEdit,
+  searchQuery => {
+    if (searchQuery?.id) {
+      form.value = {
+        id: searchQuery.id,
+        name: searchQuery.name,
+        search_filter_group_id: searchQuery.search_filter_group_id,
+        search_query: searchQuery.search_query,
+        is_shared: searchQuery.is_shared ? 'true' : 'false',
+        department_id: searchQuery.department_id
+      }
+    } else {
+      form.value = {
+        id: null,
+        name: '',
+        search_filter_group_id: null,
+        search_query: '',
+        is_shared: 'false',
+        department_id: null
       }
     }
   }
-}
+)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
 </script>
diff --git a/src/components/modals/EditSequenceModal.vue b/src/components/modals/EditSequenceModal.vue
index 2e37e7ddde..ad128bfb15 100644
--- a/src/components/modals/EditSequenceModal.vue
+++ b/src/components/modals/EditSequenceModal.vue
@@ -1,210 +1,130 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="sequenceToEdit && sequenceToEdit.id">
-          {{ $t('sequences.edit_title') }} {{ sequenceToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('sequences.new_sequence') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('sequences.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('sequences.fields.description')"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-            v-model="form.description"
-          />
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            v-model.trim="form.data.resolution"
-            @enter="runConfirmation"
-          />
-          <template v-if="sequenceToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="sequenceToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in sequenceMetadataDescriptors"
-            />
-          </template>
-        </form>
-
-        <modal-footer
-          :error-text="$t('sequences.edit_error')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        :label="$t('sequences.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <textarea-field
+        :label="$t('sequences.fields.description')"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+        v-model="form.description"
+      />
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        v-model.trim="form.data.resolution"
+        @enter="runConfirmation"
+      />
+      <template v-if="sequenceToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="sequenceToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in sequenceMetadataDescriptors"
         />
-      </div>
-    </div>
-  </div>
+      </template>
+    </form>
+
+    <modal-footer
+      :error-text="$t('sequences.edit_error')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
-import MetadataField from '@/components/widgets/MetadataField.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import MetadataField from '@/components/widgets/MetadataField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-sequence-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    MetadataField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    sequenceToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    if (this.sequenceToEdit && this.sequenceToEdit.id) {
-      return {
-        form: {
-          id: this.sequenceToEdit.id,
-          name: this.sequenceToEdit.name,
-          description: this.sequenceToEdit.description,
-          production_id: this.sequenceToEdit.project_id,
-          data:
-            {
-              ...this.sequenceToEdit.data,
-              resolution: this.sequenceToEdit.data.resolution || ''
-            } || {}
-        },
-        sequenceSuccessText: ''
-      }
-    } else {
-      return {
-        form: {
-          id: '',
-          name: '',
-          description: '',
-          data: {
-            resolution: ''
-          }
-        },
-        sequenceSuccessText: ''
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'sequenceMetadataDescriptors'])
-  },
-
-  methods: {
-    runConfirmation() {
-      this.confirmClicked()
-    },
-
-    confirmClicked() {
-      this.$emit('confirm', this.form)
-    },
-
-    isEditing() {
-      return this.sequenceToEdit && this.sequenceToEdit.id
-    },
-
-    resetForm() {
-      this.sequenceSuccessText = ''
-      if (!this.isEditing()) {
-        this.form.id = null
-        this.form.name = ''
-        this.form.description = ''
-        this.form.data = {
-          resolution: ''
-        }
-      } else {
-        this.form = {
-          id: this.sequenceToEdit.id,
-          name: this.sequenceToEdit.name,
-          description: this.sequenceToEdit.description,
-          data:
-            {
-              ...this.sequenceToEdit.data,
-              resolution: this.sequenceToEdit.data.resolution || ''
-            } || {}
-        }
-      }
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  mounted() {
-    if (this.active) {
-      this.resetForm()
-    }
-  },
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  sequenceToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  id: '',
+  name: '',
+  description: '',
+  data: { resolution: '' }
+})
+
+// Computed
 
-  watch: {
-    active() {
-      this.resetForm()
-    },
+const currentProduction = computed(() => store.getters.currentProduction)
+const sequenceMetadataDescriptors = computed(
+  () => store.getters.sequenceMetadataDescriptors
+)
 
-    sequenceToEdit() {
-      this.resetForm()
+const isEditing = computed(() => Boolean(props.sequenceToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('sequences.edit_title')} ${props.sequenceToEdit.name}`
+    : t('sequences.new_sequence')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+const resetForm = () => {
+  if (isEditing.value) {
+    form.value = {
+      id: props.sequenceToEdit.id,
+      name: props.sequenceToEdit.name,
+      description: props.sequenceToEdit.description,
+      data: {
+        ...props.sequenceToEdit.data,
+        resolution: props.sequenceToEdit.data.resolution || ''
+      }
     }
+  } else {
+    form.value.id = null
+    form.value.name = ''
+    form.value.description = ''
+    form.value.data = { resolution: '' }
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-.info-message {
-  margin-top: 1em;
-}
-</style>
+// Watchers
+
+watch(() => props.active, resetForm)
+
+watch(() => props.sequenceToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(() => {
+  if (props.active) resetForm()
+})
+</script>
diff --git a/src/components/modals/EditShotModal.vue b/src/components/modals/EditShotModal.vue
index bd6a8e3a11..eb446192ac 100644
--- a/src/components/modals/EditShotModal.vue
+++ b/src/components/modals/EditShotModal.vue
@@ -1,326 +1,203 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="shotToEdit && shotToEdit.id">
-          {{ $t('shots.edit_title') }} {{ shotToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('shots.new_shot') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox
-            :label="$t('shots.fields.sequence')"
-            :options="sequenceOptions"
-            v-model="form.sequence_id"
-          />
-          <text-field
-            ref="nameField"
-            :label="$t('shots.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('shots.fields.description')"
-            v-model="form.description"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-          />
-          <text-field
-            ref="nbFramesField"
-            :label="$t('shots.fields.nb_frames')"
-            type="number"
-            v-model="form.nb_frames"
-            @enter="runConfirmation"
-            v-if="!isPaperProduction"
-          />
-          <text-field
-            ref="frameInField"
-            :label="$t('shots.fields.frame_in')"
-            v-model="form.frameIn"
-            type="number"
-          />
-          <text-field
-            ref="frameOutField"
-            :label="$t('shots.fields.frame_out')"
-            v-model="form.frameOut"
-            type="number"
-            @enter="runConfirmation"
-          />
-          <text-field
-            ref="fpsField"
-            :label="$t('shots.fields.fps')"
-            type="number"
-            :max="1000"
-            :step="0.001"
-            :placeholder="currentProduction?.fps"
-            v-model="form.fps"
-            @enter="runConfirmation"
-          />
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            v-model.trim="form.resolution"
-            @enter="runConfirmation"
-          />
-          <text-field
-            ref="maxRetakesField"
-            type="number"
-            :label="$t('shots.fields.max_retakes')"
-            :placeholder="currentProduction?.max_retakes"
-            v-model="form.max_retakes"
-            @enter="runConfirmation"
-          />
-
-          <template v-if="shotToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="shotToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in shotMetadataDescriptors"
-            />
-          </template>
-        </form>
-
-        <modal-footer
-          :error-text="$t('shots.edit_fail')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <combobox
+        :label="$t('shots.fields.sequence')"
+        :options="sequenceOptions"
+        v-model="form.sequence_id"
+      />
+      <text-field
+        ref="nameField"
+        :label="$t('shots.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <textarea-field
+        :label="$t('shots.fields.description')"
+        v-model="form.description"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.nb_frames')"
+        type="number"
+        v-model="form.nb_frames"
+        @enter="runConfirmation"
+        v-if="!isPaperProduction"
+      />
+      <text-field
+        :label="$t('shots.fields.frame_in')"
+        v-model="form.frameIn"
+        type="number"
+      />
+      <text-field
+        :label="$t('shots.fields.frame_out')"
+        v-model="form.frameOut"
+        type="number"
+        @enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.fps')"
+        type="number"
+        :max="1000"
+        :step="0.001"
+        :placeholder="currentProduction?.fps"
+        v-model="form.fps"
+        @enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        v-model.trim="form.resolution"
+        @enter="runConfirmation"
+      />
+      <text-field
+        type="number"
+        :label="$t('shots.fields.max_retakes')"
+        :placeholder="currentProduction?.max_retakes"
+        v-model="form.max_retakes"
+        @enter="runConfirmation"
+      />
+
+      <template v-if="shotToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="shotToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in shotMetadataDescriptors"
         />
-      </div>
-    </div>
-  </div>
+      </template>
+    </form>
+
+    <modal-footer
+      :error-text="$t('shots.edit_fail')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
-import { formatListMixin } from '@/components/mixins/format'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import { sanitizeInteger } from '@/composables/format'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-shot-modal',
+const { t } = useI18n()
+const store = useStore()
 
-  mixins: [formatListMixin, modalMixin],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  shotToEdit: { type: Object, default: () => ({}) }
+})
 
-  components: {
-    Combobox,
-    MetadataField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
+const emit = defineEmits(['cancel', 'confirm', 'confirm-and-stay'])
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    shotToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const form = ref({ data: {} })
+const nameField = ref(null)
 
-  emits: ['cancel', 'confirm', 'confirm-and-stay'],
-
-  data() {
-    return {
-      form: {
-        data: {}
-      },
-      shotSuccessText: ''
-    }
-  },
+const currentProduction = computed(() => store.getters.currentProduction)
+const isPaperProduction = computed(() => store.getters.isPaperProduction)
+const openProductions = computed(() => store.getters.openProductions)
+const sequenceOptions = computed(() => store.getters.sequenceOptions)
+const sequences = computed(() => store.getters.sequences)
+const shotMetadataDescriptors = computed(
+  () => store.getters.shotMetadataDescriptors
+)
 
-  mounted() {
-    this.resetForm()
-  },
+const isEditing = computed(() => Boolean(props.shotToEdit?.id))
 
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'isPaperProduction',
-      'openProductions',
-      'sequenceOptions',
-      'sequences',
-      'shotCreated',
-      'shotMetadataDescriptors'
-    ]),
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('shots.edit_title')} ${props.shotToEdit.name}`
+    : t('shots.new_shot')
+)
 
-    frameIn() {
-      return this.shotToEdit.data ? this.shotToEdit.data.frame_in : ''
-    },
-
-    frameOut() {
-      return this.shotToEdit.data ? this.shotToEdit.data.frame_out : ''
-    },
+const confirmClicked = () => {
+  emit('confirm', form.value)
+}
 
-    fps() {
-      return this.shotToEdit.data ? this.shotToEdit.data.fps : ''
-    },
+const confirmAndStayClicked = () => {
+  emit('confirm-and-stay', form.value)
+}
 
-    resolution() {
-      return this.shotToEdit.data ? this.shotToEdit.data.resolution : ''
-    },
+const runConfirmation = () => {
+  if (isEditing.value) confirmClicked()
+  else confirmAndStayClicked()
+}
 
-    maxRetakes() {
-      return parseInt(this.shotToEdit.data?.max_retakes) || ''
+const resetForm = () => {
+  if (isEditing.value) {
+    const shotData = props.shotToEdit.data || {}
+    form.value = {
+      sequence_id: props.shotToEdit.sequence_id,
+      project_id: props.shotToEdit.project_id,
+      name: props.shotToEdit.name,
+      description: props.shotToEdit.description,
+      nb_frames: props.shotToEdit.nb_frames,
+      frameIn: shotData.frame_in || '',
+      frameOut: shotData.frame_out || '',
+      fps: shotData.fps || '',
+      max_retakes: parseInt(shotData.max_retakes) || '',
+      resolution: shotData.resolution || '',
+      data: { ...shotData }
     }
-  },
-
-  methods: {
-    ...mapActions(['loadSequences']),
-
-    runConfirmation() {
-      if (this.isEditing()) {
-        this.confirmClicked()
-      } else {
-        this.confirmAndStayClicked()
-      }
-    },
-
-    confirmAndStayClicked() {
-      this.$emit('confirm-and-stay', this.form)
-    },
-
-    confirmClicked() {
-      this.$emit('confirm', this.form)
-    },
-
-    isEditing() {
-      return this.shotToEdit && this.shotToEdit.id
-    },
-
-    resetForm() {
-      this.shotSuccessText = ''
-      if (!this.isEditing()) {
-        if (this.openProductions.length > 0) {
-          this.form.project_id = this.currentProduction
-            ? this.currentProduction.id
-            : ''
-        }
-        if (this.sequences.length > 0) {
-          this.form.sequence_id = this.sequences[0].id
-        }
-        this.form.name = ''
-        this.form.description = ''
-        this.form.nb_frames = 0
-        this.form.data = {}
-      } else {
-        this.form = {
-          sequence_id: this.shotToEdit.sequence_id,
-          project_id: this.shotToEdit.project_id,
-          name: this.shotToEdit.name,
-          description: this.shotToEdit.description,
-          nb_frames: this.shotToEdit.nb_frames,
-          frameIn: this.frameIn,
-          frameOut: this.frameOut,
-          fps: this.fps,
-          max_retakes: this.maxRetakes,
-          resolution: this.resolution,
-          data: { ...this.shotToEdit.data } || {}
-        }
-      }
+  } else {
+    if (openProductions.value.length > 0) {
+      form.value.project_id = currentProduction.value?.id || ''
     }
-  },
-
-  watch: {
-    active() {
-      this.shotSuccessText = ''
-      this.resetForm()
-      if (this.sequences.length === 0) {
-        this.loadSequences()
-      }
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
-    },
-
-    'form.frameIn'() {
-      const frameIn = this.sanitizeInteger(this.form.frameIn)
-      const frameOut = this.sanitizeInteger(this.form.frameOut)
-      if (frameIn && frameOut && frameOut > frameIn) {
-        this.form.nb_frames = frameOut - frameIn + 1
-      }
-    },
-
-    'form.frameOut'() {
-      const frameIn = this.sanitizeInteger(this.form.frameIn)
-      const frameOut = this.sanitizeInteger(this.form.frameOut)
-      if (frameIn && frameOut && frameOut > frameIn) {
-        this.form.nb_frames = frameOut - frameIn + 1
-      }
-    },
-
-    shotToEdit() {
-      this.resetForm()
-    },
-
-    shotCreated() {
-      if (this.isEditing()) {
-        this.shotSuccessText = this.$t('shots.edit_success', {
-          name: this.shotCreated
-        })
-      } else {
-        this.shotSuccessText = this.$t('shots.new_success', {
-          name: this.shotCreated
-        })
-      }
+    if (sequences.value.length > 0) {
+      form.value.sequence_id = sequences.value[0].id
     }
+    form.value.name = ''
+    form.value.description = ''
+    form.value.nb_frames = 0
+    form.value.data = {}
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-.title {
-  border-bottom: 2px solid #ddd;
-  padding-bottom: 0.5em;
-  margin-bottom: 1.2em;
-}
-.info-message {
-  margin-top: 1em;
+const updateNbFramesFromRange = () => {
+  const frameIn = sanitizeInteger(form.value.frameIn)
+  const frameOut = sanitizeInteger(form.value.frameOut)
+  if (frameIn && frameOut && frameOut > frameIn) {
+    form.value.nb_frames = frameOut - frameIn + 1
+  }
 }
 
-.modal-content {
-  max-height: 80%;
-}
-</style>
+watch(
+  () => props.active,
+  active => {
+    resetForm()
+    if (sequences.value.length === 0) {
+      store.dispatch('loadSequences')
+    }
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
+
+watch(() => form.value.frameIn, updateNbFramesFromRange)
+watch(() => form.value.frameOut, updateNbFramesFromRange)
+watch(() => props.shotToEdit, resetForm)
+
+onMounted(resetForm)
+</script>
diff --git a/src/components/modals/EditSoftwareLicenseModal.vue b/src/components/modals/EditSoftwareLicenseModal.vue
index 1f83284206..98098203b7 100644
--- a/src/components/modals/EditSoftwareLicenseModal.vue
+++ b/src/components/modals/EditSoftwareLicenseModal.vue
@@ -60,134 +60,93 @@
   </base-modal>
 </template>
 
-<script>
-import { mapActions } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
-import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-software-license-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    ComboboxBoolean,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    softwareLicenseToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        name: '',
-        archived: 'false'
-      }
-    }
-  },
-
-  mounted() {
-    this.loadSoftwareLicenses()
-  },
-
-  computed: {
-    isEditing() {
-      return Boolean(this.softwareLicenseToEdit?.id)
-    },
-
-    modalTitle() {
-      return this.isEditing
-        ? this.$t('software_licenses.edit_title') +
-            ' ' +
-            this.softwareLicenseToEdit.name
-        : this.$t('software_licenses.new_software_license')
-    }
-  },
-
-  methods: {
-    ...mapActions(['loadSoftwareLicenses']),
-
-    runConfirmation() {
-      this.$emit('confirm', this.form)
-    },
-
-    resetForm() {
-      if (this.softwareLicenseToEdit.id) {
-        this.form = {
-          name: this.softwareLicenseToEdit.name,
-          short_name: this.softwareLicenseToEdit.short_name,
-          file_extension: this.softwareLicenseToEdit.file_extension,
-          version: this.softwareLicenseToEdit.version,
-          monthly_cost: this.softwareLicenseToEdit.monthly_cost,
-          inventory_amount: this.softwareLicenseToEdit.inventory_amount,
-          archived: String(this.softwareLicenseToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          name: '',
-          short_name: '',
-          file_extension: '',
-          version: '',
-          monthly_cost: 0,
-          inventory_amount: 0,
-          archived: 'false'
-        }
-      }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  softwareLicenseToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ name: '', archived: 'false' })
+const nameField = ref(null)
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.softwareLicenseToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? t('software_licenses.edit_title') + ' ' + props.softwareLicenseToEdit.name
+    : t('software_licenses.new_software_license')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+const resetForm = () => {
+  if (props.softwareLicenseToEdit.id) {
+    form.value = {
+      name: props.softwareLicenseToEdit.name,
+      short_name: props.softwareLicenseToEdit.short_name,
+      file_extension: props.softwareLicenseToEdit.file_extension,
+      version: props.softwareLicenseToEdit.version,
+      monthly_cost: props.softwareLicenseToEdit.monthly_cost,
+      inventory_amount: props.softwareLicenseToEdit.inventory_amount,
+      archived: String(props.softwareLicenseToEdit.archived === true)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
-    },
-
-    softwareLicenseToEdit() {
-      this.resetForm()
+  } else {
+    form.value = {
+      name: '',
+      short_name: '',
+      file_extension: '',
+      version: '',
+      monthly_cost: 0,
+      inventory_amount: 0,
+      archived: 'false'
     }
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
+// Watchers
 
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
 
-.task-types {
-  flex-wrap: wrap;
-}
-</style>
+watch(() => props.softwareLicenseToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(() => {
+  store.dispatch('loadSoftwareLicenses')
+})
+</script>
diff --git a/src/components/modals/EditTaskStatusModal.vue b/src/components/modals/EditTaskStatusModal.vue
index 181efd060f..a4032486cb 100644
--- a/src/components/modals/EditTaskStatusModal.vue
+++ b/src/components/modals/EditTaskStatusModal.vue
@@ -1,272 +1,231 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('task_status.edit_title') }} {{ taskStatusToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('task_status.new_task_status') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            input-class="task-status-name"
-            :label="$t('task_status.fields.name')"
-            @enter="confirmClicked"
-            v-model.trim="form.name"
-            v-focus
-            v-if="taskStatusToEdit?.short_name !== 'todo'"
-          />
-          <text-field
-            ref="shortNameField"
-            input-class="task-status-short-name"
-            :label="$t('task_status.fields.short_name')"
-            :maxlength="8"
-            @enter="confirmClicked"
-            v-model.trim="form.short_name"
-            v-if="taskStatusToEdit?.short_name !== 'todo'"
-          />
-          <textarea-field
-            input-class="task-status-description"
-            :label="$t('task_status.fields.description')"
-            @enter="confirmClicked"
-            v-model="form.description"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_default')"
-            @enter="confirmClicked"
-            v-model="form.is_default"
-            :disabled="form.for_concept === 'true'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_wip')"
-            @enter="confirmClicked"
-            v-model="form.is_wip"
-            v-if="form.is_default === 'false'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_done')"
-            @enter="confirmClicked"
-            v-model="form.is_done"
-            v-if="form.is_default === 'false'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_retake')"
-            @enter="confirmClicked"
-            v-model="form.is_retake"
-            v-if="form.is_default === 'false'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_artist_allowed')"
-            @enter="confirmClicked"
-            v-model="form.is_artist_allowed"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_client_allowed')"
-            @enter="confirmClicked"
-            v-model="form.is_client_allowed"
-            v-if="form.for_concept !== 'true'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_feedback_request')"
-            @enter="confirmClicked"
-            v-model="form.is_feedback_request"
-            v-if="form.is_default === 'false'"
-          />
-          <color-field
-            class="mt2"
-            :colors="colors"
-            :column="5"
-            :label="$t('task_status.fields.color')"
-            v-model="form.color"
-            v-if="taskStatusToEdit?.short_name !== 'todo'"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="confirmClicked"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-        </form>
-
-        <modal-footer
-          :error-text="$t('task_status.create_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        input-class="task-status-name"
+        :label="$t('task_status.fields.name')"
+        @enter="confirmClicked"
+        v-model.trim="form.name"
+        v-focus
+        v-if="taskStatusToEdit?.short_name !== 'todo'"
+      />
+      <text-field
+        ref="shortNameField"
+        input-class="task-status-short-name"
+        :label="$t('task_status.fields.short_name')"
+        :maxlength="8"
+        @enter="confirmClicked"
+        v-model.trim="form.short_name"
+        v-if="taskStatusToEdit?.short_name !== 'todo'"
+      />
+      <textarea-field
+        input-class="task-status-description"
+        :label="$t('task_status.fields.description')"
+        @enter="confirmClicked"
+        v-model="form.description"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_default')"
+        @enter="confirmClicked"
+        v-model="form.is_default"
+        :disabled="form.for_concept === 'true'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_wip')"
+        @enter="confirmClicked"
+        v-model="form.is_wip"
+        v-if="form.is_default === 'false'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_done')"
+        @enter="confirmClicked"
+        v-model="form.is_done"
+        v-if="form.is_default === 'false'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_retake')"
+        @enter="confirmClicked"
+        v-model="form.is_retake"
+        v-if="form.is_default === 'false'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_artist_allowed')"
+        @enter="confirmClicked"
+        v-model="form.is_artist_allowed"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_client_allowed')"
+        @enter="confirmClicked"
+        v-model="form.is_client_allowed"
+        v-if="form.for_concept !== 'true'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_feedback_request')"
+        @enter="confirmClicked"
+        v-model="form.is_feedback_request"
+        v-if="form.is_default === 'false'"
+      />
+      <color-field
+        class="mt2"
+        :colors="colors"
+        :column="5"
+        :label="$t('task_status.fields.color')"
+        v-model="form.color"
+        v-if="taskStatusToEdit?.short_name !== 'todo'"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="confirmClicked"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+    </form>
+
+    <modal-footer
+      :error-text="$t('task_status.create_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-task-status-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    ColorField,
-    ComboboxBoolean,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    taskStatusToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        name: '',
-        short_name: '',
-        description: '',
-        color: '#999999',
-        is_default: 'false',
-        is_wip: 'false',
-        is_done: 'false',
-        is_retake: 'false',
-        is_feedback_request: 'false',
-        archived: 'false'
-      },
-      colors: [
-        '#999999',
-        '#CCCCCC',
-        '#F5F5F5',
-        '#CC9999',
-        '#FF3860',
-        '#E81123',
-        '#E74C3C',
-        '#FF5722',
-        '#FF7043',
-        '#FFA000',
-        '#FBC02D',
-        '#AFB42B',
-        '#8BC34A',
-        '#66BB6A',
-        '#22D160',
-        '#4DB6AC',
-        '#03A9F4',
-        '#3273DC',
-        '#3498DB',
-        '#2980B9',
-        '#607D8B',
-        '#8764B8',
-        '#AB26FF',
-        '#E040FB',
-        '#FF80AB'
-      ]
-    }
-  },
-
-  computed: {
-    isEditing() {
-      return this.taskStatusToEdit && this.taskStatusToEdit.id
-    }
-  },
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  taskStatusToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  name: '',
+  short_name: '',
+  description: '',
+  color: '#999999',
+  is_default: 'false',
+  is_wip: 'false',
+  is_done: 'false',
+  is_retake: 'false',
+  is_feedback_request: 'false',
+  archived: 'false'
+})
+const nameField = ref(null)
+const shortNameField = ref(null)
+
+const colors = [
+  '#999999',
+  '#CCCCCC',
+  '#F5F5F5',
+  '#CC9999',
+  '#FF3860',
+  '#E81123',
+  '#E74C3C',
+  '#FF5722',
+  '#FF7043',
+  '#FFA000',
+  '#FBC02D',
+  '#AFB42B',
+  '#8BC34A',
+  '#66BB6A',
+  '#22D160',
+  '#4DB6AC',
+  '#03A9F4',
+  '#3273DC',
+  '#3498DB',
+  '#2980B9',
+  '#607D8B',
+  '#8764B8',
+  '#AB26FF',
+  '#E040FB',
+  '#FF80AB'
+]
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.taskStatusToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('task_status.edit_title')} ${props.taskStatusToEdit.name}`
+    : t('task_status.new_task_status')
+)
+
+// Functions
+
+const confirmClicked = () => {
+  if (!form.value.name?.length && nameField.value) {
+    nameField.value.focus()
+    return
+  }
+  if (!form.value.short_name?.length && shortNameField.value) {
+    shortNameField.value.focus()
+    return
+  }
+  emit('confirm', form.value)
+}
 
-  methods: {
-    confirmClicked() {
-      if (!this.form.name?.length && this.$refs.nameField) {
-        this.$refs.nameField.focus()
-        return
-      }
-      if (!this.form.short_name?.length && this.$refs.shortNameField) {
-        this.$refs.shortNameField.focus()
-        return
-      }
-      this.$emit('confirm', this.form)
-    },
+const resetForm = () => {
+  if (!props.taskStatusToEdit) return
+  const ts = props.taskStatusToEdit
+  form.value = {
+    name: ts.name,
+    short_name: ts.short_name,
+    description: ts.description,
+    color: ts.color,
+    is_default: String(ts.is_default || false),
+    is_wip: String(ts.is_wip || false),
+    is_done: String(ts.is_done || false),
+    is_retake: String(ts.is_retake || false),
+    is_artist_allowed: String(ts.is_artist_allowed),
+    is_client_allowed: String(ts.is_client_allowed),
+    is_feedback_request: String(ts.is_feedback_request || false),
+    for_concept: String(ts.for_concept || false),
+    archived: String(ts.archived || false)
+  }
+}
 
-    resetForm() {
-      if (this.taskStatusToEdit) {
-        this.form = {
-          name: this.taskStatusToEdit.name,
-          short_name: this.taskStatusToEdit.short_name,
-          description: this.taskStatusToEdit.description,
-          color: this.taskStatusToEdit.color,
-          is_default: String(this.taskStatusToEdit.is_default || false),
-          is_wip: String(this.taskStatusToEdit.is_wip || false),
-          is_done: String(this.taskStatusToEdit.is_done || false),
-          is_retake: String(this.taskStatusToEdit.is_retake || false),
-          is_artist_allowed: String(this.taskStatusToEdit.is_artist_allowed),
-          is_client_allowed: String(this.taskStatusToEdit.is_client_allowed),
-          is_feedback_request: String(
-            this.taskStatusToEdit.is_feedback_request || false
-          ),
-          for_concept: String(this.taskStatusToEdit.for_concept || false),
-          archived: String(this.taskStatusToEdit.archived || false)
-        }
-      }
-    }
-  },
+// Watchers
 
-  watch: {
-    taskStatusToEdit() {
-      this.resetForm()
-    },
+watch(() => props.taskStatusToEdit, resetForm)
 
-    active() {
-      if (this.active) {
-        this.resetForm()
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      resetForm()
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
   }
-}
+)
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-</style>
diff --git a/src/components/modals/EditTaskTypeModal.vue b/src/components/modals/EditTaskTypeModal.vue
index 53420fff6d..adb17cac79 100644
--- a/src/components/modals/EditTaskTypeModal.vue
+++ b/src/components/modals/EditTaskTypeModal.vue
@@ -1,223 +1,171 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('task_types.edit_title') }} {{ taskTypeToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('task_types.new_task_type') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('task_types.fields.name')"
-            v-model="form.name"
-            @enter="confirmClicked"
-            v-focus
-          />
-          <text-field
-            ref="shortNameField"
-            :label="$t('task_types.fields.short_name')"
-            v-model="form.short_name"
-            @enter="confirmClicked"
-          />
-          <boolean-field
-            is-field
-            :label="$t('task_types.fields.allow_timelog')"
-            @enter="confirmClicked"
-            v-model="form.allow_timelog"
-          />
-          <textarea-field
-            :label="$t('task_types.fields.description')"
-            v-model="form.description"
-            @enter="confirmClicked"
-          />
-          <combobox-simple
-            class="field"
-            :label="$t('task_types.fields.dedicated_to')"
-            :options="dedicatedToOptions"
-            @enter="confirmClicked"
-            v-model="form.for_entity"
-            v-if="!isEditing"
-          />
-          <combobox-department
-            :label="$t('task_types.fields.department')"
-            @enter="confirmClicked"
-            v-model="form.department_id"
-          />
-          <color-field
-            class="mt2"
-            :label="$t('task_types.fields.color')"
-            v-model="form.color"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="confirmClicked"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-        </form>
-
-        <modal-footer
-          :error-text="$t('task_types.create_error')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        :label="$t('task_types.fields.name')"
+        v-model="form.name"
+        @enter="confirmClicked"
+        v-focus
+      />
+      <text-field
+        :label="$t('task_types.fields.short_name')"
+        v-model="form.short_name"
+        @enter="confirmClicked"
+      />
+      <boolean-field
+        is-field
+        :label="$t('task_types.fields.allow_timelog')"
+        @enter="confirmClicked"
+        v-model="form.allow_timelog"
+      />
+      <textarea-field
+        :label="$t('task_types.fields.description')"
+        v-model="form.description"
+        @enter="confirmClicked"
+      />
+      <combobox-simple
+        class="field"
+        :label="$t('task_types.fields.dedicated_to')"
+        :options="dedicatedToOptions"
+        @enter="confirmClicked"
+        v-model="form.for_entity"
+        v-if="!isEditing"
+      />
+      <combobox-department
+        :label="$t('task_types.fields.department')"
+        @enter="confirmClicked"
+        v-model="form.department_id"
+      />
+      <color-field
+        class="mt2"
+        :label="$t('task_types.fields.color')"
+        v-model="form.color"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="confirmClicked"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+    </form>
+
+    <modal-footer
+      :error-text="$t('task_types.create_error')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
+import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
-import ComboboxSimple from '@/components/widgets/ComboboxSimple.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
-import ColorField from '@/components/widgets/ColorField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxSimple from '@/components/widgets/ComboboxSimple.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-task-type-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    ComboboxBoolean,
-    ComboboxSimple,
-    ComboboxDepartment,
-    ColorField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    forEntity: {
-      type: String,
-      default: 'Asset'
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    taskTypeToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  forEntity: { type: String, default: 'Asset' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  taskTypeToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  name: '',
+  short_name: '',
+  description: '',
+  color: '#999999',
+  for_entity: 'Asset',
+  allow_timelog: 'false',
+  department_id: null,
+  archived: 'false'
+})
+
+// Computed
+
+const taskTypes = computed(() => store.getters.taskTypes)
+
+const isEditing = computed(() => Boolean(props.taskTypeToEdit?.id))
 
-  emits: ['cancel', 'confirm'],
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('task_types.edit_title')} ${props.taskTypeToEdit.name}`
+    : t('task_types.new_task_type')
+)
 
-  data() {
-    return {
-      form: {
+const dedicatedToOptions = computed(() => [
+  { label: t('assets.title'), value: 'Asset' },
+  { label: t('shots.title'), value: 'Shot' },
+  { label: t('sequences.title'), value: 'Sequence' },
+  { label: t('episodes.title'), value: 'Episode' },
+  { label: t('edits.title'), value: 'Edit' }
+])
+
+// Functions
+
+const newPriority = forEntity =>
+  taskTypes.value.filter(taskType => taskType.for_entity === forEntity).length +
+  1
+
+const confirmClicked = () => {
+  if (!isEditing.value) {
+    form.value.priority = newPriority(form.value.for_entity)
+  }
+  emit('confirm', form.value)
+}
+
+// Watchers
+
+watch(
+  () => props.active,
+  () => {
+    if (props.taskTypeToEdit?.id) {
+      form.value = {
+        name: props.taskTypeToEdit.name,
+        short_name: props.taskTypeToEdit.short_name,
+        description: props.taskTypeToEdit.description,
+        color: props.taskTypeToEdit.color,
+        for_entity: props.taskTypeToEdit.for_entity || 'Asset',
+        allow_timelog: String(props.taskTypeToEdit.allow_timelog === true),
+        department_id: props.taskTypeToEdit.department_id,
+        archived: String(props.taskTypeToEdit.archived === true)
+      }
+    } else {
+      form.value = {
         name: '',
         short_name: '',
         description: '',
         color: '#999999',
-        for_entity: 'Asset',
+        for_entity: props.forEntity,
         allow_timelog: 'false',
         department_id: null,
         archived: 'false'
-      },
-      dedicatedToOptions: [
-        { label: this.$t('assets.title'), value: 'Asset' },
-        { label: this.$t('shots.title'), value: 'Shot' },
-        { label: this.$t('sequences.title'), value: 'Sequence' },
-        { label: this.$t('episodes.title'), value: 'Episode' },
-        { label: this.$t('edits.title'), value: 'Edit' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapGetters(['taskTypes', 'taskTypeStatusOptions', 'departments']),
-    isEditing() {
-      return this.taskTypeToEdit && this.taskTypeToEdit.id
-    }
-  },
-
-  methods: {
-    newPriority(forEntity) {
-      return (
-        this.taskTypes.filter(taskType => taskType.for_entity === forEntity)
-          .length + 1
-      )
-    },
-
-    confirmClicked() {
-      if (!this.isEditing) {
-        this.form.priority = this.newPriority(this.form.for_entity)
-      }
-      this.$emit('confirm', this.form)
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.taskTypeToEdit) {
-        this.form = {
-          name: this.taskTypeToEdit.name,
-          short_name: this.taskTypeToEdit.short_name,
-          description: this.taskTypeToEdit.description,
-          color: this.taskTypeToEdit.color,
-          for_entity: this.taskTypeToEdit.for_entity || 'Asset',
-          allow_timelog: String(this.taskTypeToEdit.allow_timelog === true),
-          department_id: this.taskTypeToEdit.department_id,
-          archived: String(this.taskTypeToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          name: '',
-          short_name: '',
-          description: '',
-          color: '#999999',
-          for_entity: this.forEntity,
-          allow_timelog: 'false',
-          department_id: null,
-          archived: 'false'
-        }
       }
-      this.$nextTick(() => {
-        this.form.for_entity = this.forEntity
-      })
     }
+    nextTick(() => {
+      form.value.for_entity = props.forEntity
+    })
   }
-}
+)
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-</style>
diff --git a/src/components/modals/ImportEdlModal.vue b/src/components/modals/ImportEdlModal.vue
index 6c73231d6c..31b46558a0 100644
--- a/src/components/modals/ImportEdlModal.vue
+++ b/src/components/modals/ImportEdlModal.vue
@@ -1,177 +1,134 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('main.edl.import_title')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('main.edl.import_title') }}
-        </h1>
-
-        <p>
-          {{ $t('main.edl.explanation') }}
-        </p>
-
-        <p>
-          {{ $t('main.edl.select_file') }}
-        </p>
-        <file-upload
-          @fileselected="onFileSelected"
-          :label="$t('main.edl.upload_file')"
-          accept=".edl, .xml, .otio, .fcpxml"
-          ref="inputFile"
-        />
-
-        <br />
-        <text-field
-          ref="namingConventionField"
-          :label="$t('main.edl.naming_convention')"
-          v-model="form.namingConvention"
-          @enter="onConfirmClicked"
-          v-focus
-        />
-
-        <checkbox
-          :toggle="true"
-          :label="$t('main.edl.match_case')"
-          v-model="form.matchCase"
-        />
-
-        <modal-footer
-          :confirm-label="$t('main.edl.upload_edl')"
-          :error-text="errorText"
-          :is-loading="isLoading"
-          :is-disabled="formData === null"
-          :is-error="isError"
-          @confirm="onConfirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+    <p>
+      {{ $t('main.edl.explanation') }}
+    </p>
+
+    <p>
+      {{ $t('main.edl.select_file') }}
+    </p>
+    <file-upload
+      ref="inputFile"
+      @fileselected="onFileSelected"
+      :label="$t('main.edl.upload_file')"
+      accept=".edl, .xml, .otio, .fcpxml"
+    />
+
+    <br />
+    <text-field
+      :label="$t('main.edl.naming_convention')"
+      v-model="form.namingConvention"
+      @enter="onConfirmClicked"
+      v-focus
+    />
+
+    <checkbox
+      :toggle="true"
+      :label="$t('main.edl.match_case')"
+      v-model="form.matchCase"
+    />
+
+    <modal-footer
+      :confirm-label="$t('main.edl.upload_edl')"
+      :error-text="errorText"
+      :is-loading="isLoading"
+      :is-disabled="formData === null"
+      :is-error="isError"
+      @confirm="onConfirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Checkbox from '@/components/widgets/Checkbox.vue'
+// eslint-disable-next-line no-unused-vars
 import FileUpload from '@/components/widgets/FileUpload.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'import-edl-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Checkbox,
-    FileUpload,
-    ModalFooter,
-    TextField
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        namingConvention: '${project_name}_${sequence_name}-${shot_name}',
-        matchCase: true
-      },
-      formData: null
-    }
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    importError: {
-      type: Error,
-      default: null
-    }
-  },
-
-  mounted() {
-    this.formData = null
-    if (this.isTVShow)
-      this.form.namingConvention =
-        '${project_name}_${episode_name}-${sequence_name}-${shot_name}'
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'isTVShow']),
-
-    errorText() {
-      let text = this.$t('main.edl.error_upload')
-      if (this.importError && this.importError.status === 400) {
-        const res = this.importError.response
-        text += ` ${res.body.message}`
-      }
-      return text
-    }
-  },
-
-  methods: {
-    onFileSelected(formData) {
-      this.formData = formData
-    },
-
-    onConfirmClicked() {
-      this.$emit(
-        'confirm',
-        this.formData.get('file'),
-        this.form.namingConvention,
-        this.form.matchCase
-      )
-    },
-
-    reset() {
-      this.$refs.inputFile.reset()
-    }
-  },
-
-  watch: {
-    currentProduction() {
-      if (this.isTVShow)
-        this.form.namingConvention =
-          '${project_name}_${episode_name}-${sequence_name}-${shot_name}'
-      else
-        this.form.namingConvention =
-          '${project_name}_${sequence_name}-${shot_name}'
-    },
-
-    active() {
-      this.formData = null
-      this.reset()
-    }
+const { t } = useI18n()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  importError: { type: Error, default: null },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  namingConvention: '${project_name}_${sequence_name}-${shot_name}',
+  matchCase: true
+})
+const formData = ref(null)
+const inputFile = ref(null)
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const isTVShow = computed(() => store.getters.isTVShow)
+
+const errorText = computed(() => {
+  let text = t('main.edl.error_upload')
+  if (props.importError?.status === 400) {
+    text += ` ${props.importError.response.body.message}`
   }
+  return text
+})
+
+// Functions
+
+const onFileSelected = data => {
+  formData.value = data
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
+const onConfirmClicked = () => {
+  emit(
+    'confirm',
+    formData.value.get('file'),
+    form.value.namingConvention,
+    form.value.matchCase
+  )
 }
 
-.error {
-  margin-top: 1em;
+const updateNamingConvention = () => {
+  form.value.namingConvention = isTVShow.value
+    ? '${project_name}_${episode_name}-${sequence_name}-${shot_name}'
+    : '${project_name}_${sequence_name}-${shot_name}'
 }
-</style>
+
+// Watchers
+
+watch(currentProduction, updateNamingConvention)
+
+watch(
+  () => props.active,
+  () => {
+    formData.value = null
+    inputFile.value?.reset()
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  formData.value = null
+  if (isTVShow.value) updateNamingConvention()
+})
+</script>
diff --git a/src/components/modals/ImportModal.vue b/src/components/modals/ImportModal.vue
index a00b6c11e2..2ed4c4a385 100644
--- a/src/components/modals/ImportModal.vue
+++ b/src/components/modals/ImportModal.vue
@@ -1,186 +1,143 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('main.csv.import_title')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('main.csv.import_title') }}
-        </h1>
-
-        <div v-if="columns.length > 0" class="mb1">
-          {{ $t('main.csv.required_fields') }}
-          <ul>
-            <li v-for="column in columns" :key="column">
-              {{ column }}
-            </li>
-          </ul>
-        </div>
-        <div v-if="optionalColumns.length > 0" class="mb1">
-          {{ $t('main.csv.optional_fields') }}
-          <ul>
-            <li v-for="optionalColumn in optionalColumns" :key="optionalColumn">
-              {{ optionalColumn }}
-            </li>
-          </ul>
-        </div>
-        <div v-if="genericColumns.length > 0" class="mb1">
-          {{ $t('main.csv.generic_fields') }}
-          <ul>
-            <li v-for="genericColumn in genericColumns" :key="genericColumn">
-              {{ genericColumn }}
-            </li>
-          </ul>
-        </div>
-
-        <div class="tabs">
-          <ul>
-            <li
-              :class="{ 'is-active': activeTab === tab.id }"
-              :key="`tab-${tab.id}`"
-              v-for="tab in tabs"
-            >
-              <a @click="activeTab = tab.id">{{ tab.name }}</a>
-            </li>
-          </ul>
-        </div>
-        <div v-show="activeTab === 'file'">
-          <p>{{ $t('main.csv.select_file') }}</p>
-          <file-upload
-            @fileselected="onFileSelected"
-            :label="$t('main.csv.upload_file')"
-            ref="inputFile"
-          />
-        </div>
-        <div v-show="activeTab === 'text'">
-          <p>{{ $t('main.csv.paste_code') }}</p>
-          <textarea
-            class="paste-area"
-            :placeholder="pasteAreaPlaceholder"
-            v-model.trim="pastedCode"
-          ></textarea>
-        </div>
-
-        <modal-footer
-          :confirm-label="$t('main.csv.preview')"
-          :error-text="$t('main.csv.error_upload')"
-          :is-loading="isLoading"
-          :is-disabled="!isValid"
-          :is-error="isError"
-          @confirm="onConfirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
+    <div v-if="columns.length > 0" class="mb1">
+      {{ $t('main.csv.required_fields') }}
+      <ul>
+        <li v-for="column in columns" :key="column">
+          {{ column }}
+        </li>
+      </ul>
     </div>
-  </div>
+    <div v-if="optionalColumns.length > 0" class="mb1">
+      {{ $t('main.csv.optional_fields') }}
+      <ul>
+        <li v-for="optionalColumn in optionalColumns" :key="optionalColumn">
+          {{ optionalColumn }}
+        </li>
+      </ul>
+    </div>
+    <div v-if="genericColumns.length > 0" class="mb1">
+      {{ $t('main.csv.generic_fields') }}
+      <ul>
+        <li v-for="genericColumn in genericColumns" :key="genericColumn">
+          {{ genericColumn }}
+        </li>
+      </ul>
+    </div>
+
+    <div class="tabs">
+      <ul>
+        <li
+          :class="{ 'is-active': activeTab === tab.id }"
+          :key="`tab-${tab.id}`"
+          v-for="tab in tabs"
+        >
+          <a @click="activeTab = tab.id">{{ tab.name }}</a>
+        </li>
+      </ul>
+    </div>
+    <div v-show="activeTab === 'file'">
+      <p>{{ $t('main.csv.select_file') }}</p>
+      <file-upload
+        ref="inputFile"
+        @fileselected="onFileSelected"
+        :label="$t('main.csv.upload_file')"
+      />
+    </div>
+    <div v-show="activeTab === 'text'">
+      <p>{{ $t('main.csv.paste_code') }}</p>
+      <textarea
+        class="paste-area"
+        :placeholder="pasteAreaPlaceholder"
+        v-model.trim="pastedCode"
+      ></textarea>
+    </div>
+
+    <modal-footer
+      :confirm-label="$t('main.csv.preview')"
+      :error-text="$t('main.csv.error_upload')"
+      :is-loading="isLoading"
+      :is-disabled="!isValid"
+      :is-error="isError"
+      @confirm="onConfirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import FileUpload from '@/components/widgets/FileUpload.vue'
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+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'
+
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  columns: { type: Array, default: () => [] },
+  genericColumns: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  optionalColumns: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
 
-export default {
-  name: 'import-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    FileUpload,
-    ModalFooter
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      formData: null,
-      pastedCode: '',
-      activeTab: 'file',
-      tabs: [
-        {
-          id: 'file',
-          name: this.$t('main.csv.tab_select_file')
-        },
-        {
-          id: 'text',
-          name: this.$t('main.csv.tab_paste_code')
-        }
-      ]
-    }
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    optionalColumns: {
-      type: Array,
-      default: () => []
-    },
-    genericColumns: {
-      type: Array,
-      default: () => []
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    isValid() {
-      return (
-        (this.activeTab === 'file' && this.formData) ||
-        (this.activeTab === 'text' && this.pastedCode)
-      )
-    },
-
-    pasteAreaPlaceholder() {
-      return this.columns.join(';')
-    }
-  },
-
-  methods: {
-    onFileSelected(formData) {
-      this.formData = formData
-      this.onConfirmClicked()
-    },
-
-    onConfirmClicked() {
-      const mode = this.activeTab
-      const data = mode === 'file' ? this.formData : this.pastedCode
-      this.$emit('confirm', data, mode)
-    },
-
-    reset() {
-      this.$refs.inputFile?.reset()
-      this.activeTab = 'file'
-      this.formData = null
-      this.pastedCode = ''
-    }
-  },
-
-  watch: {
-    active() {
-      this.reset()
-    }
-  }
+// State
+
+const activeTab = ref('file')
+const formData = ref(null)
+const inputFile = ref(null)
+const pastedCode = ref('')
+
+// Computed
+
+const tabs = computed(() => [
+  { id: 'file', name: t('main.csv.tab_select_file') },
+  { id: 'text', name: t('main.csv.tab_paste_code') }
+])
+
+const isValid = computed(
+  () =>
+    (activeTab.value === 'file' && formData.value) ||
+    (activeTab.value === 'text' && pastedCode.value)
+)
+
+const pasteAreaPlaceholder = computed(() => props.columns.join(';'))
+
+// Functions
+
+const onConfirmClicked = () => {
+  const mode = activeTab.value
+  const data = mode === 'file' ? formData.value : pastedCode.value
+  emit('confirm', data, mode)
 }
+
+const onFileSelected = data => {
+  formData.value = data
+  onConfirmClicked()
+}
+
+const reset = () => {
+  inputFile.value?.reset()
+  activeTab.value = 'file'
+  formData.value = null
+  pastedCode.value = ''
+}
+
+// Watchers
+
+watch(() => props.active, reset)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/ImportRenderModal.vue b/src/components/modals/ImportRenderModal.vue
index 781cf16c44..a8270fa4a0 100644
--- a/src/components/modals/ImportRenderModal.vue
+++ b/src/components/modals/ImportRenderModal.vue
@@ -1,372 +1,277 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('main.csv.preview_title')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('main.csv.preview_title') }}
-        </h1>
-
-        <p>
-          {{ $t('main.csv.preview_required') }}
-        </p>
-        <div class="description">
-          <div v-show="!disableUpdate">
-            <h2 class="legend-title">
-              {{ $t('main.csv.options.title') }}
-            </h2>
-            <checkbox
-              :toggle="true"
-              :label="$t('main.csv.options.update')"
-              v-model="updateData"
-            />
-          </div>
-          <h3 class="legend-title">
-            {{ $t('main.csv.legend') }}
-          </h3>
-          <div class="flexrow legends">
-            <ul class="legend flexrow-item">
-              <li class="legend-definition">
-                <span class="legend-term"></span>
-                {{ $t('main.csv.legend_ok') }}
-              </li>
-              <li class="legend-definition">
-                <span class="legend-term ignored"></span>
-                {{ $t('main.csv.legend_ignored') }}
-              </li>
-              <li class="legend-definition">
-                <span class="legend-term missing"></span>
-                {{ $t('main.csv.legend_missing') }}
-              </li>
-              <li class="legend-definition">
-                <span class="legend-term missing-optional"></span>
-                {{ $t('main.csv.legend_missing_optional') }}
-              </li>
-            </ul>
-            <ul class="legend flexrow-item">
-              <li class="legend-definition">
-                <span class="legend-term"></span>
-                {{ $t('main.csv.legend_line_ok') }}
-              </li>
-              <li class="legend-definition">
-                <span class="legend-term disabled"></span>
-                {{ $t('main.csv.legend_disabled') }}
-              </li>
-              <li v-show="!disableUpdate" class="legend-definition">
-                <span class="legend-term overwrite"></span>
-                {{ $t('main.csv.legend_overwrite') }}
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="render-container">
-          <table class="render">
-            <colgroup>
-              <col
-                :key="`col-missing-${item}`"
-                class="missing"
-                v-for="item in columnsRequired"
-              />
-              <col
-                :key="`col-${index}`"
-                :class="stateColumn(cell)"
-                v-for="(cell, index) in parsedCsv[0]"
-              />
-              <col
-                :key="`col-missing-${item}`"
-                class="missing-optional"
-                v-for="item in columnsOptional"
-              />
-            </colgroup>
-            <thead>
-              <tr class="render-headers">
-                <th
-                  class="required-header"
-                  :key="`header-${cell}`"
-                  v-for="cell in columnsRequired"
-                >
-                  {{ cell }}
-                </th>
-                <th
-                  :key="`header-${index}`"
-                  v-for="(cell, index) in parsedCsv[0]"
-                >
-                  <div class="render-select">
-                    <combobox
-                      :options="columnOptions"
-                      :value="cell"
-                      :error="isDuplicated(index)"
-                      v-model="columnSelect[index]"
-                      @update:model-value="checkForDuplicate"
-                    />
-                  </div>
-                  {{ cell || '-' }}
-                </th>
-                <th
-                  class="optional-header"
-                  :key="`header-${cell}`"
-                  v-for="cell in columnsOptional"
-                >
-                  {{ cell }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                :class="{
-                  overwrite: updateData && existingData(index),
-                  disabled: !updateData && existingData(index)
-                }"
-                :key="`line-${index}`"
-                v-for="(line, index) in parsedCsv
-                  .slice(1)
-                  .filter(line => line.length > 1)"
-              >
-                <td v-for="cell in columnsRequired" :key="`cell-${cell}`">
-                  {{ '-' }}
-                </td>
-                <td v-for="(cell, index) in line" :key="`cell-${index}`">
-                  {{ cell || '-' }}
-                </td>
-                <td v-for="cell in columnsOptional" :key="`cell-${cell}`">
-                  {{ '-' }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="render-footer">
-          <button-simple
-            :text="$t('main.csv.preview_reupload')"
-            @click="onReupload"
+    <p>
+      {{ $t('main.csv.preview_required') }}
+    </p>
+    <div class="description">
+      <div v-show="!disableUpdate">
+        <h2 class="legend-title">
+          {{ $t('main.csv.options.title') }}
+        </h2>
+        <checkbox
+          :toggle="true"
+          :label="$t('main.csv.options.update')"
+          v-model="updateData"
+        />
+      </div>
+      <h3 class="legend-title">
+        {{ $t('main.csv.legend') }}
+      </h3>
+      <div class="flexrow legends">
+        <ul class="legend flexrow-item">
+          <li class="legend-definition">
+            <span class="legend-term"></span>
+            {{ $t('main.csv.legend_ok') }}
+          </li>
+          <li class="legend-definition">
+            <span class="legend-term ignored"></span>
+            {{ $t('main.csv.legend_ignored') }}
+          </li>
+          <li class="legend-definition">
+            <span class="legend-term missing"></span>
+            {{ $t('main.csv.legend_missing') }}
+          </li>
+          <li class="legend-definition">
+            <span class="legend-term missing-optional"></span>
+            {{ $t('main.csv.legend_missing_optional') }}
+          </li>
+        </ul>
+        <ul class="legend flexrow-item">
+          <li class="legend-definition">
+            <span class="legend-term"></span>
+            {{ $t('main.csv.legend_line_ok') }}
+          </li>
+          <li class="legend-definition">
+            <span class="legend-term disabled"></span>
+            {{ $t('main.csv.legend_disabled') }}
+          </li>
+          <li v-show="!disableUpdate" class="legend-definition">
+            <span class="legend-term overwrite"></span>
+            {{ $t('main.csv.legend_overwrite') }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="render-container">
+      <table class="render">
+        <colgroup>
+          <col
+            :key="`col-missing-${item}`"
+            class="missing"
+            v-for="item in columnsRequired"
           />
-          <modal-footer
-            :error-text="errorText"
-            :is-loading="isLoading"
-            :is-disabled="formData === undefined"
-            :is-error="isError"
-            @confirm="onConfirmClicked"
-            @cancel="$emit('cancel')"
+          <col
+            :key="`col-${index}`"
+            :class="stateColumn(cell)"
+            v-for="(cell, index) in parsedCsv[0]"
           />
-        </div>
-      </div>
+          <col
+            :key="`col-missing-${item}`"
+            class="missing-optional"
+            v-for="item in columnsOptional"
+          />
+        </colgroup>
+        <thead>
+          <tr class="render-headers">
+            <th
+              class="required-header"
+              :key="`header-${cell}`"
+              v-for="cell in columnsRequired"
+            >
+              {{ cell }}
+            </th>
+            <th :key="`header-${index}`" v-for="(cell, index) in parsedCsv[0]">
+              <div class="render-select">
+                <combobox
+                  :options="columnOptions"
+                  :value="cell"
+                  :error="isDuplicated(index)"
+                  v-model="columnSelect[index]"
+                  @update:model-value="checkForDuplicate"
+                />
+              </div>
+              {{ cell || '-' }}
+            </th>
+            <th
+              class="optional-header"
+              :key="`header-${cell}`"
+              v-for="cell in columnsOptional"
+            >
+              {{ cell }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            :class="{
+              overwrite: updateData && existingData(index),
+              disabled: !updateData && existingData(index)
+            }"
+            :key="`line-${index}`"
+            v-for="(line, index) in parsedCsv
+              .slice(1)
+              .filter(line => line.length > 1)"
+          >
+            <td v-for="cell in columnsRequired" :key="`cell-${cell}`">
+              {{ '-' }}
+            </td>
+            <td v-for="(cell, index) in line" :key="`cell-${index}`">
+              {{ cell || '-' }}
+            </td>
+            <td v-for="cell in columnsOptional" :key="`cell-${cell}`">
+              {{ '-' }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </div>
-</template>
 
-<script>
-import { mapGetters } from 'vuex'
+    <div class="render-footer">
+      <button-simple
+        :text="$t('main.csv.preview_reupload')"
+        @click="$emit('reupload')"
+      />
+      <modal-footer
+        :error-text="errorText"
+        :is-loading="isLoading"
+        :is-disabled="formData === undefined"
+        :is-error="isError"
+        @confirm="$emit('confirm', parsedCsv, updateData)"
+        @cancel="$emit('cancel')"
+      />
+    </div>
+  </base-modal>
+</template>
 
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
-import Combobox from '@/components/widgets/Combobox.vue'
-import Checkbox from '@/components/widgets/Checkbox.vue'
-import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import Checkbox from '@/components/widgets/Checkbox.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
 
-export default {
-  name: 'import-render-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ButtonSimple,
-    Combobox,
-    Checkbox,
-    ModalFooter
-  },
-
-  emits: ['cancel', 'confirm', 'reupload'],
-
-  data() {
-    return {
-      duplicates: [],
-      formData: null,
-      updateData: false
-    }
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    parsedCsv: {
-      type: Array,
-      default: () => []
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    dataMatchers: {
-      type: Array,
-      default: () => []
-    },
-    database: {
-      type: Object,
-      default: () => {}
-    },
-    disableUpdate: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    importError: {
-      type: Error,
-      default: null
-    }
-  },
-
-  mounted() {
-    this.formData = null
-  },
-
-  computed: {
-    ...mapGetters([
-      'assetMetadataDescriptors',
-      'shotMetadataDescriptors',
-      'editMetadataDescriptors'
-    ]),
-
-    columnsRequired() {
-      if (this.parsedCsv.length !== 0) {
-        return this.columns.filter(item => {
-          return (
-            !this.parsedCsv[0].includes(item) &&
-            this.dataMatchers.includes(item)
-          )
-        })
-      } else {
-        return []
-      }
-    },
-
-    columnsOptional() {
-      if (this.parsedCsv.length !== 0) {
-        return this.columns.filter(item => {
-          return (
-            !this.parsedCsv[0].includes(item) &&
-            !this.dataMatchers.includes(item)
-          )
-        })
-      } else {
-        return []
-      }
-    },
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  columns: { type: Array, default: () => [] },
+  dataMatchers: { type: Array, default: () => [] },
+  database: { type: Object, default: () => ({}) },
+  disableUpdate: { type: Boolean, default: false },
+  importError: { type: Error, default: null },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  parsedCsv: { type: Array, default: () => [] }
+})
+
+defineEmits(['cancel', 'confirm', 'reupload'])
+
+const duplicates = ref([])
+const formData = ref(null)
+const updateData = ref(false)
+
+const assetMetadataDescriptors = computed(
+  () => store.getters.assetMetadataDescriptors
+)
+const shotMetadataDescriptors = computed(
+  () => store.getters.shotMetadataDescriptors
+)
+const editMetadataDescriptors = computed(
+  () => store.getters.editMetadataDescriptors
+)
+
+const columnsRequired = computed(() => {
+  if (props.parsedCsv.length === 0) return []
+  return props.columns.filter(
+    item =>
+      !props.parsedCsv[0].includes(item) && props.dataMatchers.includes(item)
+  )
+})
+
+const columnsOptional = computed(() => {
+  if (props.parsedCsv.length === 0) return []
+  return props.columns.filter(
+    item =>
+      !props.parsedCsv[0].includes(item) && !props.dataMatchers.includes(item)
+  )
+})
+
+const metadataDescriptors = computed(() => {
+  const path = route.path
+  if (path.indexOf('assets') > 0) return assetMetadataDescriptors.value
+  if (path.indexOf('shots') > 0) return shotMetadataDescriptors.value
+  if (path.indexOf('edits') > 0) return editMetadataDescriptors.value
+  return []
+})
+
+const columnsAllowed = computed(() => {
+  const list = [...props.columns]
+  metadataDescriptors.value.forEach(item => {
+    if (!list.includes(item.name)) list.push(item.name)
+  })
+  return list
+})
+
+const columnOptions = computed(() => {
+  const options = [
+    { label: t('main.csv.choose'), value: t('main.csv.unknown') }
+  ]
+  columnsAllowed.value.forEach(item => {
+    options.push({ label: item, value: item })
+  })
+  return options
+})
+
+// columnSelect intentionally returns parsedCsv[0] directly so that
+// `v-model="columnSelect[index]"` mutates the underlying array — the
+// template expects to write back into the parsed CSV header row.
+const columnSelect = computed(() => props.parsedCsv[0])
+
+const indexMatchers = computed(() =>
+  props.dataMatchers.map(item => props.parsedCsv[0].indexOf(item))
+)
+
+const errorText = computed(() => {
+  let text = t('main.csv.error_upload')
+  if (props.importError?.status === 400) {
+    const res = props.importError.response
+    text += ` (line: ${res.body.line_number}) ${res.body.message}`
+  }
+  return text
+})
 
-    metadataDescriptors() {
-      if (this.$route.path.indexOf('assets') > 0) {
-        return this.assetMetadataDescriptors
-      }
-      if (this.$route.path.indexOf('shots') > 0) {
-        return this.shotMetadataDescriptors
-      }
-      if (this.$route.path.indexOf('edits') > 0) {
-        return this.editMetadataDescriptors
-      }
-      return []
-    },
-
-    columnsAllowed() {
-      const list = [...this.columns]
-      this.metadataDescriptors.forEach(item => {
-        if (!list.includes(item.name)) {
-          list.push(item.name)
-        }
-      })
-      return list
-    },
-
-    columnOptions() {
-      const options = [
-        {
-          label: this.$t('main.csv.choose'),
-          value: this.$t('main.csv.unknown')
-        }
-      ]
-      this.columnsAllowed.forEach(item => {
-        options.push({ label: item, value: item })
-      })
-      return options
-    },
-
-    columnSelect() {
-      return this.parsedCsv[0]
-    },
-
-    indexMatchers() {
-      const indexes = []
-      this.dataMatchers.forEach(item => {
-        indexes.push(this.parsedCsv[0].indexOf(item))
-      })
-      return indexes
-    },
-
-    errorText() {
-      let text = this.$t('main.csv.error_upload')
-      if (this.importError && this.importError.status === 400) {
-        const res = this.importError.response
-        text += ` (line: ${res.body.line_number}) ${res.body.message}`
-      }
-      return text
-    }
-  },
+const stateColumn = data =>
+  columnsAllowed.value.includes(data) ? undefined : 'ignored'
 
-  methods: {
-    onConfirmClicked() {
-      this.$emit('confirm', this.parsedCsv, this.updateData)
-    },
+const checkForDuplicate = () => {
+  const ignoredItem = t('main.csv.unknown')
+  duplicates.value = columnSelect.value
+    .filter((item, index) => columnSelect.value.indexOf(item) !== index)
+    .filter(item => item !== ignoredItem)
+}
 
-    onReupload() {
-      this.$emit('reupload')
-    },
+const isDuplicated = index =>
+  duplicates.value.includes(columnSelect.value[index])
 
-    stateColumn(data) {
-      if (!this.columnsAllowed.includes(data)) {
-        return 'ignored'
-      }
-    },
-
-    checkForDuplicate() {
-      const ignoredItem = this.$t('main.csv.unknown')
-      this.duplicates = this.columnSelect
-        .filter((item, index) => this.columnSelect.indexOf(item) !== index)
-        .filter(item => item !== ignoredItem)
-    },
-
-    isDuplicated(index) {
-      if (this.duplicates.includes(this.columnSelect[index])) {
-        return true
-      }
-    },
-
-    existingData(index) {
-      const csv = this.parsedCsv[index + 1]
-      const db = this.database
-      const columns = this.indexMatchers
-      let itemName = ''
-      columns.forEach(col => {
-        itemName += csv[col]
-      })
-      return db[itemName]
-    }
-  }
+const existingData = index => {
+  const csv = props.parsedCsv[index + 1]
+  let itemName = ''
+  indexMatchers.value.forEach(col => {
+    itemName += csv[col]
+  })
+  return props.database[itemName]
 }
 </script>
 
diff --git a/src/components/modals/ManageShotsModal.vue b/src/components/modals/ManageShotsModal.vue
index 35d80e89ec..ef9356f780 100644
--- a/src/components/modals/ManageShotsModal.vue
+++ b/src/components/modals/ManageShotsModal.vue
@@ -14,7 +14,6 @@
         <div>
           <div class="flexrow">
             <combobox
-              ref="shot-padding"
               :label="$t('shots.padding')"
               :options="shotPaddingOptions"
               class="shot-padding flexrow-item"
@@ -151,236 +150,187 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, reactive, ref, toRef, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
-import shotStore from '@/store/modules/shots'
-
-import { modalMixin } from '@/components/modals/base_modal'
-
-import stringHelpers from '@/lib/string'
+import { useModal } from '@/composables/modal'
 import { sortByName } from '@/lib/sorting'
+import stringHelpers from '@/lib/string'
+import shotStore from '@/store/modules/shots'
 
 import Combobox from '@/components/widgets/Combobox.vue'
 import PageTitle from '@/components/widgets/PageTitle.vue'
 
-export default {
-  name: 'manage-shots-modal',
+const router = useRouter()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['add-episode', 'add-sequence', 'add-shot', 'cancel'])
+
+useModal(toRef(props, 'active'), emit)
+
+const shotPaddingOptions = [
+  { label: '1', value: '1' },
+  { label: '2', value: '2' },
+  { label: '10', value: '10' }
+]
+
+const addEpisodeInput = ref(null)
+const addSequenceInput = ref(null)
+const addShotInput = ref(null)
+
+const names = reactive({ episode: '', sequence: '', shot: '' })
+const loading = reactive({
+  addEpisode: false,
+  addSequence: false,
+  addShot: false
+})
+const sequences = ref([])
+const displayedShots = ref([])
+const selectedEpisodeId = ref(null)
+const selectedSequenceId = ref(null)
+const shotPadding = ref('1')
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const displayedEpisodes = computed(() => store.getters.displayedEpisodes)
+const displayedSequences = computed(() => store.getters.displayedSequences)
+const isTVShow = computed(() => store.getters.isTVShow)
+
+const shots = computed(() => shotStore.cache.shots)
+
+const isAddEpisodeAllowed = computed(() => {
+  if (!names.episode) return false
+  return !displayedEpisodes.value.find(
+    episode => names.episode === episode.name
+  )
+})
+
+const isAddSequenceAllowed = computed(() => {
+  if (!names.sequence) return false
+  const exists = displayedSequences.value.find(
+    sequence => names.sequence === sequence.name
+  )
+  return !exists && (selectedEpisodeId.value || !isTVShow.value)
+})
+
+const isAddShotAllowed = computed(() => {
+  if (!names.shot) return false
+  const exists = displayedShots.value.find(shot => names.shot === shot.name)
+  return !exists && selectedSequenceId.value
+})
+
+const focusAddSequence = () => {
+  addSequenceInput.value?.focus()
+}
 
-  mixins: [modalMixin],
+const focusAddShot = () => {
+  addShotInput.value?.focus()
+}
 
-  components: {
-    Combobox,
-    PageTitle
-  },
+const selectSequence = sequenceId => {
+  selectedSequenceId.value = sequenceId
+  displayedShots.value = sortByName(
+    shots.value.filter(shot => shot.sequence_id === sequenceId)
+  )
+}
 
-  props: {
-    active: {
-      default: true,
-      type: Boolean
-    }
-  },
-
-  emits: ['add-episode', 'add-sequence', 'add-shot', 'cancel'],
-
-  data() {
-    return {
-      names: {
-        episode: '',
-        sequence: '',
-        shot: ''
-      },
-      loading: {
-        addEpisode: false,
-        addSequence: false,
-        addShot: false
-      },
-      sequences: [],
-      displayedShots: [],
-      selectedEpisodeId: null,
-      selectedSequenceId: null,
-      shotPaddingOptions: [
-        {
-          label: '1',
-          value: '1'
-        },
-        {
-          label: '2',
-          value: '2'
-        },
-        {
-          label: '10',
-          value: '10'
-        }
-      ],
-      shotPadding: '1'
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'displayedEpisodes',
-      'displayedSequences',
-      'isTVShow'
-    ]),
-
-    isAddEpisodeAllowed() {
-      const isEmpty = this.names.episode === ''
-      const isExist = this.displayedEpisodes.find(episode => {
-        return this.names.episode === episode.name
-      })
-      return !isEmpty && !isExist
-    },
-
-    isAddSequenceAllowed() {
-      const isEmpty = this.names.sequence === ''
-      const isExist = this.displayedSequences.find(sequence => {
-        return this.names.sequence === sequence.name
-      })
-      return !isEmpty && !isExist && (this.selectedEpisodeId || !this.isTVShow)
-    },
-
-    isAddShotAllowed() {
-      const isEmpty = this.names.shot === ''
-      const isExist = this.displayedShots.find(shot => {
-        return this.names.shot === shot.name
-      })
-      return !isEmpty && !isExist && this.selectedSequenceId
-    },
-
-    shots() {
-      return shotStore.cache.shots
-    }
-  },
+const selectEpisode = episodeId => {
+  selectedEpisodeId.value = episodeId
+  if (!isTVShow.value) {
+    displayedShots.value = []
+  } else {
+    router.push({
+      name: 'episode-shots',
+      params: {
+        production_id: currentProduction.value.id,
+        episode_id: episodeId
+      }
+    })
+  }
+}
 
-  methods: {
-    focusAddSequence() {
-      this.$refs.addSequenceInput.focus()
-    },
+const addEpisode = () => {
+  if (!isAddEpisodeAllowed.value) return
+  loading.addEpisode = true
+  const episode = {
+    name: names.episode,
+    project_id: currentProduction.value.id
+  }
+  emit('add-episode', episode, created => {
+    loading.addEpisode = false
+    selectEpisode(created.id)
+    names.episode = stringHelpers.generateNextName(created.name)
+  })
+}
 
-    focusAddShot() {
-      this.$refs.addShotInput.focus()
-    },
+const addSequence = () => {
+  if (!isAddSequenceAllowed.value) return
+  loading.addSequence = true
+  const sequence = {
+    name: names.sequence,
+    episode_id: selectedEpisodeId.value,
+    project_id: currentProduction.value.id
+  }
+  emit('add-sequence', sequence, created => {
+    loading.addSequence = false
+    selectEpisode(selectedEpisodeId.value)
+    selectSequence(created.id)
+    names.sequence = stringHelpers.generateNextName(created.name)
+  })
+}
 
-    selectEpisode(episodeId) {
-      if (!this.isTVShow) {
-        this.selectedEpisodeId = episodeId
-        this.displayedShots = []
-      } else {
-        this.selectedEpisodeId = episodeId
-        this.$router.push({
-          name: 'episode-shots',
-          params: {
-            production_id: this.currentProduction.id,
-            episode_id: episodeId
-          }
-        })
-      }
-    },
-
-    selectSequence(sequenceId) {
-      this.selectedSequenceId = sequenceId
-      this.displayedShots = sortByName(
-        this.shots.filter(shot => {
-          return shot.sequence_id === sequenceId
-        })
-      )
-    },
-
-    addEpisode() {
-      if (this.isAddEpisodeAllowed) {
-        const episodeName = this.names.episode
-        if (episodeName.length > 0) {
-          this.loading.addEpisode = true
-          const episode = {
-            name: this.names.episode,
-            project_id: this.currentProduction.id
-          }
-          this.$emit('add-episode', episode, episode => {
-            this.loading.addEpisode = false
-            this.selectEpisode(episode.id)
-            this.names.episode = stringHelpers.generateNextName(episode.name)
-          })
-        }
-      }
-    },
-
-    addSequence() {
-      if (this.isAddSequenceAllowed) {
-        const sequenceName = this.names.sequence
-        if (
-          sequenceName.length > 0 &&
-          (this.selectedEpisodeId || !this.isTVShow)
-        ) {
-          this.loading.addSequence = true
-          const sequence = {
-            name: this.names.sequence,
-            episode_id: this.selectedEpisodeId,
-            project_id: this.currentProduction.id
-          }
-          this.$emit('add-sequence', sequence, sequence => {
-            this.loading.addSequence = false
-            this.selectEpisode(this.selectedEpisodeId)
-            this.selectSequence(sequence.id)
-            this.names.sequence = stringHelpers.generateNextName(sequence.name)
-          })
-        }
-      }
-    },
-
-    addShot() {
-      if (this.isAddShotAllowed && !this.loading.addShot) {
-        const shotName = this.names.shot
-        this.loading.addShot = true
-        if (shotName.length > 0 && this.selectedSequenceId) {
-          const shot = {
-            name: this.names.shot,
-            sequence_id: this.selectedSequenceId,
-            project_id: this.currentProduction.id
-          }
-          this.$emit('add-shot', shot, shot => {
-            this.loading.addShot = false
-            this.selectSequence(this.selectedSequenceId)
-            this.names.shot = stringHelpers.generateNextName(
-              shot.name,
-              parseInt(this.shotPadding)
-            )
-          })
-        }
-      }
+const addShot = () => {
+  if (!isAddShotAllowed.value || loading.addShot) return
+  loading.addShot = true
+  const shot = {
+    name: names.shot,
+    sequence_id: selectedSequenceId.value,
+    project_id: currentProduction.value.id
+  }
+  emit('add-shot', shot, created => {
+    loading.addShot = false
+    selectSequence(selectedSequenceId.value)
+    names.shot = stringHelpers.generateNextName(
+      created.name,
+      parseInt(shotPadding.value)
+    )
+  })
+}
+
+watch(
+  () => props.active,
+  active => {
+    if (!active) return
+    shotPadding.value = '1'
+    sequences.value = displayedSequences.value
+    if (isTVShow.value) {
+      selectEpisode(displayedEpisodes.value[0].id)
+    } else if (sequences.value.length > 0) {
+      selectSequence(sequences.value[0].id)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.shotPadding = '1'
-        this.sequences = this.displayedSequences
-        if (this.isTVShow) {
-          this.selectEpisode(this.displayedEpisodes[0].id)
-        } else if (this.sequences.length > 0) {
-          this.selectSequence(this.sequences[0].id)
-        }
-
-        setTimeout(() => {
-          if (this.isTVShow) {
-            this.$refs.addEpisodeInput.focus()
-          } else {
-            this.$refs.addSequenceInput.focus()
-          }
-        }, 100)
+    setTimeout(() => {
+      if (isTVShow.value) {
+        addEpisodeInput.value?.focus()
+      } else {
+        addSequenceInput.value?.focus()
       }
-    },
+    }, 100)
+  }
+)
 
-    selectedEpisodeId() {
-      this.sequences = this.displayedSequences
-      if (this.sequences.length > 0) {
-        this.selectSequence(this.sequences[0].id)
-      }
-    }
+watch(selectedEpisodeId, () => {
+  sequences.value = displayedSequences.value
+  if (sequences.value.length > 0) {
+    selectSequence(sequences.value[0].id)
   }
-}
+})
+
+defineExpose({ focusAddSequence, focusAddShot })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/NewTokenModal.vue b/src/components/modals/NewTokenModal.vue
index 604608d41f..b98210e076 100644
--- a/src/components/modals/NewTokenModal.vue
+++ b/src/components/modals/NewTokenModal.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="modal" :class="{ 'is-active': active }">
+    <!--
+      Background click intentionally has no @click handler — accidental
+      dismissal would lose an unrecoverable token. Escape still cancels
+      via useModal.
+    -->
     <div class="modal-background"></div>
     <div class="modal-content">
       <div class="box">
@@ -42,7 +47,6 @@
           </p>
           <div class="token">
             <text-field
-              ref="token"
               :disabled="!visible"
               input-class=" token-input"
               :readonly="true"
@@ -79,94 +83,67 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { AlertTriangleIcon, EyeIcon, EyeOffIcon } from 'lucide-vue-next'
+import { computed, ref, toRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { modalMixin } from '@/components/modals/base_modal'
-import { timeMixin } from '@/components/mixins/time'
+import { useModal } from '@/composables/modal'
+import { useTime } from '@/composables/time'
 
 import DateField from '@/components/widgets/DateField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'new-token-modal',
-
-  mixins: [modalMixin, timeMixin],
-
-  components: {
-    AlertTriangleIcon,
-    DateField,
-    EyeIcon,
-    EyeOffIcon,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    person: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const { today } = useTime()
 
-  emits: ['cancel', 'close', 'generate-token'],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  person: { type: Object, default: () => ({}) }
+})
 
-  data() {
-    return {
-      form: {
-        expiration_date: null
-      },
-      message: null,
-      visible: false
-    }
-  },
-
-  computed: {
-    isValidExpirationDate() {
-      return (
-        !this.form.expiration_date ||
-        new Date(this.form.expiration_date) > new Date()
-      )
-    }
-  },
-
-  methods: {
-    generateToken() {
-      this.$emit('generate-token', {
-        id: this.person.id,
-        expiration_date: this.form.expiration_date
-      })
-    },
-
-    async copyClicked() {
-      this.message = null
-      await navigator.clipboard.writeText(this.person.access_token)
-      this.message = this.$t('bots.token_copied')
-      setTimeout(() => {
-        this.message = null
-      }, 5000)
-    },
-
-    resetForm() {
-      this.form = {
-        expiration_date: this.person.expiration_date
-      }
-      this.message = null
-      this.visible = false
-    }
-  },
+const emit = defineEmits(['cancel', 'close', 'generate-token'])
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.resetForm()
-      }
-    }
-  }
+useModal(toRef(props, 'active'), emit)
+
+const form = ref({ expiration_date: null })
+const message = ref(null)
+const visible = ref(false)
+
+const isValidExpirationDate = computed(
+  () =>
+    !form.value.expiration_date ||
+    new Date(form.value.expiration_date) > new Date()
+)
+
+const generateToken = () => {
+  emit('generate-token', {
+    id: props.person.id,
+    expiration_date: form.value.expiration_date
+  })
+}
+
+const copyClicked = async () => {
+  message.value = null
+  await navigator.clipboard.writeText(props.person.access_token)
+  message.value = t('bots.token_copied')
+  setTimeout(() => {
+    message.value = null
+  }, 5000)
 }
+
+const resetForm = () => {
+  form.value = { expiration_date: props.person.expiration_date }
+  message.value = null
+  visible.value = false
+}
+
+watch(
+  () => props.active,
+  active => {
+    if (active) resetForm()
+  }
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/NotifyClientModal.vue b/src/components/modals/NotifyClientModal.vue
index 48f6581e3b..75ff4c3b35 100644
--- a/src/components/modals/NotifyClientModal.vue
+++ b/src/components/modals/NotifyClientModal.vue
@@ -10,7 +10,6 @@
 
     <combobox-studio
       class="mt1 mb1"
-      ref="studioField"
       all-studios-label
       :label="$t('main.studio')"
       v-model="form.studio_id"
@@ -18,7 +17,6 @@
 
     <combobox-department
       class="mt1 mb1"
-      ref="departmentField"
       all-departments-label
       :label="$t('people.fields.departments')"
       v-model="form.department_id"
@@ -56,90 +54,61 @@
   </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
 import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 
-export default {
-  name: 'notify-client-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    ComboboxDepartment,
-    ComboboxStudio,
-    ModalFooter,
-    PeopleAvatar,
-    PeopleName
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isSuccess: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        studio_id: '',
-        department_id: ''
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'personMap']),
-
-    clients() {
-      return this.currentProduction.team
-        .map(personId => this.personMap.get(personId))
-        .filter(person => person?.role === 'client')
-        .filter(
-          person =>
-            !this.form.studio_id || person.studio_id === this.form.studio_id
-        )
-        .filter(
-          person =>
-            !this.form.department_id ||
-            (person.departments &&
-              person.departments.includes(this.form.department_id))
-        )
-        .sort((a, b) => (a.full_name || '').localeCompare(b.full_name || ''))
-    }
-  },
-
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', {
-        studio_id: this.form.studio_id,
-        department_id: this.form.department_id
-      })
-    }
-  }
+const store = useStore()
+
+// Props / Emits
+
+defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isSuccess: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ studio_id: '', department_id: '' })
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const personMap = computed(() => store.getters.personMap)
+
+const clients = computed(() =>
+  currentProduction.value.team
+    .map(personId => personMap.value.get(personId))
+    .filter(person => person?.role === 'client')
+    .filter(
+      person =>
+        !form.value.studio_id || person.studio_id === form.value.studio_id
+    )
+    .filter(
+      person =>
+        !form.value.department_id ||
+        person.departments?.includes(form.value.department_id)
+    )
+    .sort((a, b) => (a.full_name || '').localeCompare(b.full_name || ''))
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', {
+    studio_id: form.value.studio_id,
+    department_id: form.value.department_id
+  })
 }
 </script>
diff --git a/src/components/modals/PreviewModal.vue b/src/components/modals/PreviewModal.vue
index a7809b4fcc..9255a3ac43 100644
--- a/src/components/modals/PreviewModal.vue
+++ b/src/components/modals/PreviewModal.vue
@@ -31,59 +31,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ArrowUpRightIcon, DownloadIcon, XIcon } from 'lucide-vue-next'
+import { computed, toRef } from 'vue'
 
+import { useModal } from '@/composables/modal'
 import { getDownloadAttachmentPath } from '@/lib/path'
 
-import { modalMixin } from '@/components/modals/base_modal'
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  attachment: { type: Object, default: () => ({}) },
+  previewFileId: { type: String, default: '' }
+})
 
-export default {
-  name: 'preview-modal',
+const emit = defineEmits(['cancel'])
 
-  mixins: [modalMixin],
+useModal(toRef(props, 'active'), emit)
 
-  components: {
-    ArrowUpRightIcon,
-    DownloadIcon,
-    XIcon
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    previewFileId: {
-      type: String,
-      default: ''
-    },
-    attachment: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel'],
-
-  computed: {
-    previewPath() {
-      if (this.previewFileId) {
-        return this.active
-          ? `/api/pictures/originals/preview-files/${this.previewFileId}.png`
-          : ''
-      }
-      if (this.attachment) {
-        return getDownloadAttachmentPath(this.attachment)
-      }
-      return ''
-    },
-
-    previewDlPath() {
-      return `/api/pictures/originals/preview-files/${this.previewFileId}/download`
-    }
+const previewPath = computed(() => {
+  if (props.previewFileId) {
+    return props.active
+      ? `/api/pictures/originals/preview-files/${props.previewFileId}.png`
+      : ''
   }
-}
+  if (props.attachment) {
+    return getDownloadAttachmentPath(props.attachment)
+  }
+  return ''
+})
+
+const previewDlPath = computed(
+  () => `/api/pictures/originals/preview-files/${props.previewFileId}/download`
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/SelectTaskTypeModal.vue b/src/components/modals/SelectTaskTypeModal.vue
index 8fb6807693..ae60ddb3c7 100644
--- a/src/components/modals/SelectTaskTypeModal.vue
+++ b/src/components/modals/SelectTaskTypeModal.vue
@@ -1,111 +1,64 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('playlists.select_task_type')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('playlists.select_task_type') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox-task-type
-            :task-type-list="taskTypeList"
-            v-model="taskTypeId"
-          />
-        </form>
-
-        <p>
-          {{ $t('playlists.apply_task_type_change') }}
-        </p>
-
-        <p class="has-text-right mt2">
-          <a
-            :class="{
-              button: true,
-              'is-primary': true,
-              'is-loading': isLoading
-            }"
-            @click="runConfirmation"
-          >
-            {{ $t('main.confirmation') }}
-          </a>
-          <button @click="$emit('cancel')" class="button is-link">
-            {{ $t('main.cancel') }}
-          </button>
-        </p>
-
-        <p class="error has-text-right info-message" v-if="isError">
-          {{ $t('playlist.change_task_type_fails') }}
-        </p>
-      </div>
-    </div>
-  </div>
+    <form @submit.prevent>
+      <combobox-task-type :task-type-list="taskTypeList" v-model="taskTypeId" />
+    </form>
+
+    <p>
+      {{ $t('playlists.apply_task_type_change') }}
+    </p>
+
+    <p class="has-text-right mt2">
+      <a
+        :class="{
+          button: true,
+          'is-primary': true,
+          'is-loading': isLoading
+        }"
+        @click="runConfirmation"
+      >
+        {{ $t('main.confirmation') }}
+      </a>
+      <button @click="$emit('cancel')" class="button is-link">
+        {{ $t('main.cancel') }}
+      </button>
+    </p>
+
+    <p class="error has-text-right info-message" v-if="isError">
+      {{ $t('playlist.change_task_type_fails') }}
+    </p>
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { ref, watch } from 'vue'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 
-export default {
-  name: 'select-task-type-modal',
-
-  mixins: [modalMixin],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  taskTypeList: { type: Array, default: () => [] }
+})
 
-  components: {
-    ComboboxTaskType
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    taskTypeList: {
-      type: Array,
-      default: () => {}
-    }
-  },
+const taskTypeId = ref('')
 
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      taskTypeId: ''
-    }
-  },
-
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', this.taskTypeId)
-    }
-  },
+const runConfirmation = () => {
+  emit('confirm', taskTypeId.value)
+}
 
-  watch: {
-    active() {
-      this.taskTypeId = this.taskTypeList[0].id
-    }
+watch(
+  () => props.active,
+  () => {
+    taskTypeId.value = props.taskTypeList[0]?.id || ''
   }
-}
+)
 </script>
-
-<style lang="scss" scoped>
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-</style>
diff --git a/src/components/modals/SetFramesFromTaskTypePreviewsModal.vue b/src/components/modals/SetFramesFromTaskTypePreviewsModal.vue
index 2d5cd95346..f6bd73915d 100644
--- a/src/components/modals/SetFramesFromTaskTypePreviewsModal.vue
+++ b/src/components/modals/SetFramesFromTaskTypePreviewsModal.vue
@@ -1,117 +1,76 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('shots.get_frames_from_previews')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('shots.get_frames_from_previews') }}
-        </h1>
-
-        <p class="description">
-          {{ $t('shots.get_frames_from_previews_description') }}
-        </p>
-
-        <combobox-task-type
-          :task-type-list="productionShotTaskTypes"
-          :placeholder="$t('task_types.select_task_type')"
-          add-placeholder
-          v-model="taskTypeId"
-        />
-
-        <modal-footer
-          :error-text="$t('shots.get_frames_from_previews_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          :is-disabled="!isFormFilled"
-          @confirm="confirm"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+    <p class="description">
+      {{ $t('shots.get_frames_from_previews_description') }}
+    </p>
+
+    <combobox-task-type
+      :task-type-list="productionShotTaskTypes"
+      :placeholder="$t('task_types.select_task_type')"
+      add-placeholder
+      v-model="taskTypeId"
+    />
+
+    <modal-footer
+      :error-text="$t('shots.get_frames_from_previews_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      :is-disabled="!isFormFilled"
+      @confirm="confirm"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
-import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 
-export default {
-  name: 'set-frames-from-task-type-previews-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ComboboxTaskType,
-    ModalFooter
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    errorText: {
-      type: String,
-      default: ''
-    }
-  },
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  errorText: { type: String, default: '' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  data() {
-    return {
-      taskTypeId: null
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  mounted() {
-    this.reset()
-  },
+const taskTypeId = ref(null)
 
-  computed: {
-    ...mapGetters(['productionShotTaskTypes']),
+const productionShotTaskTypes = computed(
+  () => store.getters.productionShotTaskTypes
+)
 
-    isFormFilled() {
-      return this.taskTypeId !== null && this.taskTypeId !== ''
-    }
-  },
+const isFormFilled = computed(
+  () => taskTypeId.value !== null && taskTypeId.value !== ''
+)
 
-  methods: {
-    confirm() {
-      return this.$emit('confirm', this.taskTypeId)
-    },
+const confirm = () => {
+  emit('confirm', taskTypeId.value)
+}
 
-    reset() {
-      this.taskType = null
-    }
-  },
+const reset = () => {
+  taskTypeId.value = null
+}
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-      }
-    }
+watch(
+  () => props.active,
+  active => {
+    if (active) reset()
   }
-}
+)
+
+onMounted(reset)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/ShortcutModal.vue b/src/components/modals/ShortcutModal.vue
index d12d5f06d5..da09ae7bb5 100644
--- a/src/components/modals/ShortcutModal.vue
+++ b/src/components/modals/ShortcutModal.vue
@@ -1,191 +1,113 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('keyboard.shortcuts')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('keyboard.shortcuts') }}
-        </h1>
-
-        <div
-          class="mt2"
-          :key="shortcutGroup.label"
-          v-for="shortcutGroup in shortcutGroups"
-        >
-          <h3>
-            {{ $t(shortcutGroup.label) }}
-          </h3>
+    <div
+      class="mt2"
+      :key="shortcutGroup.label"
+      v-for="shortcutGroup in shortcutGroups"
+    >
+      <h3>
+        {{ $t(shortcutGroup.label) }}
+      </h3>
 
+      <div
+        class="shortcut"
+        :key="`shortcut-${i}`"
+        v-for="(shortcut, i) in shortcutGroup.shortcuts"
+      >
+        <div class="shortcut-key-wrapper">
           <div
-            class="shortcut"
-            :key="`shortcut-${i}`"
-            v-for="(shortcut, i) in shortcutGroup.shortcuts"
+            :key="`shortcut-key-${i}-${j}`"
+            v-for="(key, j) in shortcut.keys"
           >
-            <div class="shortcut-key-wrapper">
-              <div
-                :key="`shortcut-key-${i}-${j}`"
-                v-for="(key, j) in shortcut.keys"
-              >
-                <span class="shortcut-key">{{ key }}</span>
-                <span
-                  class="shortcut-plus"
-                  v-if="j !== shortcut.keys.length - 1"
-                  >+
-                </span>
-              </div>
-            </div>
-            <span class="shortcut-text">{{ shortcut.text }}</span>
+            <span class="shortcut-key">{{ key }}</span>
+            <span class="shortcut-plus" v-if="j !== shortcut.keys.length - 1"
+              >+
+            </span>
           </div>
         </div>
-
-        <div class="has-text-right modal-footer">
-          <button @click="$emit('cancel')" class="button is-link">
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
+        <span class="shortcut-text">{{ shortcut.text }}</span>
       </div>
     </div>
-  </div>
+
+    <div class="has-text-right modal-footer">
+      <button @click="$emit('cancel')" class="button is-link">
+        {{ $t('main.cancel') }}
+      </button>
+    </div>
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-export default {
-  name: 'shortcut-modal',
+import BaseModal from '@/components/modals/BaseModal.vue'
 
-  mixins: [modalMixin],
+const { t } = useI18n()
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
+defineProps({
+  active: { type: Boolean, default: false }
+})
 
-  emits: ['cancel'],
+defineEmits(['cancel'])
 
-  data() {
-    return {
-      shortcutGroups: [
-        {
-          label: 'keyboard.navigation',
-          shortcuts: [
-            {
-              keys: ['Alt', '←'],
-              text: this.$t('keyboard.altleft')
-            },
-            {
-              keys: ['Alt', '↑'],
-              text: this.$t('keyboard.altup')
-            },
-            {
-              keys: ['Alt', '→'],
-              text: this.$t('keyboard.altright')
-            },
-            {
-              keys: ['Alt', '↓'],
-              text: this.$t('keyboard.altdown')
-            },
-            {
-              keys: ['Ctrl', '←'],
-              text: this.$t('keyboard.ctrlleft')
-            },
-            {
-              keys: ['Ctrl', '↑'],
-              text: this.$t('keyboard.ctrlup')
-            },
-            {
-              keys: ['Ctrl', '→'],
-              text: this.$t('keyboard.ctrlright')
-            },
-            {
-              keys: ['Ctrl', '↓'],
-              text: this.$t('keyboard.ctrldown')
-            }
-          ]
-        },
-        {
-          label: 'keyboard.playlist_navigation',
-          shortcuts: [
-            {
-              keys: ['Alt', 'j'],
-              text: this.$t('keyboard.altj')
-            },
-            {
-              keys: ['Alt', 'k'],
-              text: this.$t('keyboard.altk')
-            },
-            {
-              keys: ['Home'],
-              text: this.$t('keyboard.plhome')
-            },
-            {
-              keys: ['End'],
-              text: this.$t('keyboard.plend')
-            },
-            {
-              keys: ['Alt', '→'],
-              text: this.$t('keyboard.plaltright')
-            },
-            {
-              keys: ['Alt', '←'],
-              text: this.$t('keyboard.plaltleft')
-            },
-            {
-              keys: ['Alt', 'o'],
-              text: this.$t('keyboard.plalto')
-            }
-          ]
-        },
-        {
-          label: 'keyboard.object_viewer',
-          shortcuts: [
-            {
-              keys: ['Ctrl', 'Mouse Left Click', 'Drag Horizontal'],
-              text: this.$t('keyboard.rotate_hdr')
-            },
-            {
-              keys: ['Mouse Middle Click', 'Drag Horizontal'],
-              text: this.$t('keyboard.rotate_hdr')
-            },
-            {
-              keys: ['Alt', 'Mouse Left Click', 'Drag Vertical'],
-              text: this.$t('keyboard.change_fov')
-            }
-          ]
-        },
-        {
-          label: 'keyboard.annotations',
-          shortcuts: [
-            {
-              keys: ['Ctrl', 'z'],
-              text: this.$t('keyboard.undo')
-            },
-            {
-              keys: ['Alt', 'r'],
-              text: this.$t('keyboard.redo')
-            },
-            {
-              keys: ['Alt', 'd'],
-              text: this.$t('keyboard.draw')
-            },
-            {
-              keys: ['Suppr'],
-              text: this.$t('keyboard.remove_annotation')
-            }
-          ]
-        }
-      ]
-    }
+const shortcutGroups = computed(() => [
+  {
+    label: 'keyboard.navigation',
+    shortcuts: [
+      { keys: ['Alt', '←'], text: t('keyboard.altleft') },
+      { keys: ['Alt', '↑'], text: t('keyboard.altup') },
+      { keys: ['Alt', '→'], text: t('keyboard.altright') },
+      { keys: ['Alt', '↓'], text: t('keyboard.altdown') },
+      { keys: ['Ctrl', '←'], text: t('keyboard.ctrlleft') },
+      { keys: ['Ctrl', '↑'], text: t('keyboard.ctrlup') },
+      { keys: ['Ctrl', '→'], text: t('keyboard.ctrlright') },
+      { keys: ['Ctrl', '↓'], text: t('keyboard.ctrldown') }
+    ]
+  },
+  {
+    label: 'keyboard.playlist_navigation',
+    shortcuts: [
+      { keys: ['Alt', 'j'], text: t('keyboard.altj') },
+      { keys: ['Alt', 'k'], text: t('keyboard.altk') },
+      { keys: ['Home'], text: t('keyboard.plhome') },
+      { keys: ['End'], text: t('keyboard.plend') },
+      { keys: ['Alt', '→'], text: t('keyboard.plaltright') },
+      { keys: ['Alt', '←'], text: t('keyboard.plaltleft') },
+      { keys: ['Alt', 'o'], text: t('keyboard.plalto') }
+    ]
+  },
+  {
+    label: 'keyboard.object_viewer',
+    shortcuts: [
+      {
+        keys: ['Ctrl', 'Mouse Left Click', 'Drag Horizontal'],
+        text: t('keyboard.rotate_hdr')
+      },
+      {
+        keys: ['Mouse Middle Click', 'Drag Horizontal'],
+        text: t('keyboard.rotate_hdr')
+      },
+      {
+        keys: ['Alt', 'Mouse Left Click', 'Drag Vertical'],
+        text: t('keyboard.change_fov')
+      }
+    ]
+  },
+  {
+    label: 'keyboard.annotations',
+    shortcuts: [
+      { keys: ['Ctrl', 'z'], text: t('keyboard.undo') },
+      { keys: ['Alt', 'r'], text: t('keyboard.redo') },
+      { keys: ['Alt', 'd'], text: t('keyboard.draw') },
+      { keys: ['Suppr'], text: t('keyboard.remove_annotation') }
+    ]
   }
-}
+])
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/ShotHistoryModal.vue b/src/components/modals/ShotHistoryModal.vue
index 91a583b9af..a0e5ca8da3 100644
--- a/src/components/modals/ShotHistoryModal.vue
+++ b/src/components/modals/ShotHistoryModal.vue
@@ -1,161 +1,129 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('shots.history')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('shots.history') }}
-        </h1>
-
-        <table class="table" ref="headerWrapper">
-          <thead class="table-header">
-            <tr>
-              <th class="date">{{ $t('main.date') }}</th>
-              <th class="name">{{ $t('shots.fields.name') }}</th>
-              <th class="frame-in">{{ $t('shots.fields.frame_in') }}</th>
-              <th class="frame-out">{{ $t('shots.fields.frame_out') }}</th>
-              <th class="person table-filler">
-                {{ $t('shots.fields.person') }}
-              </th>
-            </tr>
-          </thead>
-        </table>
-
-        <div class="table-body" v-if="!isLoading">
-          <table class="table">
-            <tbody class="table-body">
-              <tr
-                class="shot-version"
-                :key="version.id"
-                v-for="version in versions"
-              >
-                <td class="date">
-                  {{ formatDate(version.created_at) }}
-                </td>
-                <td class="name">
-                  {{ version.name }}
-                </td>
-                <td class="frame-in">
-                  {{ version.data.frame_in }}
-                </td>
-                <td class="frame-out">
-                  {{ version.data.frame_out }}
-                </td>
-                <td class="person table-filler">
-                  {{ getPersonFullName(version.person_id) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <table-info :is-loading="isLoading" :is-error="isError" />
-
-        <div class="has-text-right modal-footer">
-          <button @click="$emit('cancel')" class="button is-link">
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
-      </div>
+    <table class="table">
+      <thead class="table-header">
+        <tr>
+          <th class="date">{{ $t('main.date') }}</th>
+          <th class="name">{{ $t('shots.fields.name') }}</th>
+          <th class="frame-in">{{ $t('shots.fields.frame_in') }}</th>
+          <th class="frame-out">{{ $t('shots.fields.frame_out') }}</th>
+          <th class="person table-filler">
+            {{ $t('shots.fields.person') }}
+          </th>
+        </tr>
+      </thead>
+    </table>
+
+    <div class="table-body" v-if="!isLoading">
+      <table class="table">
+        <tbody class="table-body">
+          <tr
+            class="shot-version"
+            :key="version.id"
+            v-for="version in versions"
+          >
+            <td class="date">
+              {{ formatDate(version.created_at) }}
+            </td>
+            <td class="name">
+              {{ version.name }}
+            </td>
+            <td class="frame-in">
+              {{ version.data.frame_in }}
+            </td>
+            <td class="frame-out">
+              {{ version.data.frame_out }}
+            </td>
+            <td class="person table-filler">
+              {{ getPersonFullName(version.person_id) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </div>
+
+    <table-info :is-loading="isLoading" :is-error="isError" />
+
+    <div class="has-text-right modal-footer">
+      <button @click="$emit('cancel')" class="button is-link">
+        {{ $t('main.cancel') }}
+      </button>
+    </div>
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
 import { formatDate } from '@/lib/time'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'shot-history-modal',
+const store = useStore()
 
-  mixins: [modalMixin],
+// Props / Emits
 
-  components: {
-    TableInfo
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  shot: { type: Object, default: () => ({}) }
+})
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    shot: {
-      type: Object,
-      default: () => {}
-    }
-  },
+defineEmits(['cancel'])
 
-  emits: ['cancel'],
+// State
 
-  data() {
-    return {
-      isError: false,
-      isLoading: false,
-      versions: []
-    }
-  },
-
-  mounted() {
-    this.reset()
-  },
-
-  computed: {
-    ...mapGetters(['personMap'])
-  },
-
-  methods: {
-    ...mapActions(['loadShotHistory']),
-
-    formatDate(dateString) {
-      return formatDate(dateString)
-    },
-
-    getPersonFullName(personId) {
-      const person = this.personMap.get(personId)
-      return person ? person.full_name : ''
-    },
-
-    loadData() {
-      this.isError = false
-      this.isLoading = true
-      return this.loadShotHistory(this.shot.id)
-        .then(versions => {
-          this.versions = versions
-          this.isLoading = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.isLoading = false
-          this.isError = true
-        })
-    },
-
-    reset() {
-      this.versions = []
-      this.isError = false
-      this.isLoading = false
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        this.loadData()
-      }
-    }
+const isError = ref(false)
+const isLoading = ref(false)
+const versions = ref([])
+
+// Computed
+
+const personMap = computed(() => store.getters.personMap)
+
+// Functions
+
+const getPersonFullName = personId =>
+  personMap.value.get(personId)?.full_name || ''
+
+const reset = () => {
+  versions.value = []
+  isError.value = false
+  isLoading.value = false
+}
+
+const loadData = async () => {
+  isError.value = false
+  isLoading.value = true
+  try {
+    versions.value = await store.dispatch('loadShotHistory', props.shot.id)
+  } catch (err) {
+    console.error(err)
+    isError.value = true
   }
+  isLoading.value = false
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      reset()
+      loadData()
+    }
+  }
+)
+
+// Lifecycle
+
+onMounted(reset)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/ViewPlaylistModal.vue b/src/components/modals/ViewPlaylistModal.vue
index 5d50515ad1..244c0efe43 100644
--- a/src/components/modals/ViewPlaylistModal.vue
+++ b/src/components/modals/ViewPlaylistModal.vue
@@ -11,7 +11,7 @@
     <div class="modal-content wide xyz-in" xyz="fade">
       <div class="box">
         <playlist-player
-          ref="playlist-player"
+          ref="playlistPlayer"
           :playlist="currentPlaylist"
           :entities="currentEntities"
           :is-loading="isLoading"
@@ -38,336 +38,251 @@
   </div>
 </template>
 
-<script>
+<script setup>
 /*
  * This component is aimed at displaying a temporary playlist from any view. It
  * is used in entity list to display playlists from the selection.
  */
 
-import { mapActions, mapGetters } from 'vuex'
-import { DEFAULT_NB_FRAMES_PICTURE } from '@/lib/playlist'
+import { computed, ref, toRef, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
+import { useModal } from '@/composables/modal'
+import { DEFAULT_NB_FRAMES_PICTURE } from '@/lib/playlist'
 
 import EditPlaylistModal from '@/components/modals/EditPlaylistModal.vue'
+// eslint-disable-next-line no-unused-vars
 import PlaylistPlayer from '@/components/pages/playlists/PlaylistPlayer.vue'
 
 import assetStore from '@/store/modules/assets'
 import shotStore from '@/store/modules/shots'
 import sequenceStore from '@/store/modules/sequences'
 
-export default {
-  name: 'view-playlist-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    EditPlaylistModal,
-    PlaylistPlayer
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    taskIds: {
-      type: Array
-    },
-    sort: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['cancel'],
-
-  data() {
-    return {
-      previewFileMap: new Map(),
-      previewFileEntityMap: new Map(),
-      currentEntities: [],
-      currentPlaylist: {
-        id: 'temp',
-        name: 'Temporary playlist',
-        shots: [],
-        for_entity: 'shot'
-      },
-      errors: {
-        edit: false
-      },
-      loading: {
-        edit: false
-      },
-      modals: {
-        edit: false
-      },
-      playlistToEdit: {},
-      isLoading: false
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentEpisode',
-      'currentProduction',
-      'isTVShow',
-      'selectedTasks',
-      'taskMap'
-    ]),
-
-    currentTaskIds() {
-      return this.taskIds || Array.from(this.selectedTasks.keys())
-    },
-
-    isPlaylistPage() {
-      return this.$route.path.indexOf('playlist') > 0
-    },
-
-    playlistPlayer() {
-      return this.$refs['playlist-player']
-    },
-
-    isAssetPlaylist() {
-      return this.currentEntityType === 'asset'
-    },
-
-    isSequencePlaylist() {
-      return this.currentEntityType === 'sequence'
-    },
-
-    isShotPlaylist() {
-      return this.currentEntityType === 'shot'
-    },
-
-    currentEntityType() {
-      let type = 'shot'
-      if (this.$route.path.indexOf('asset') > 0) type = 'asset'
-      if (this.$route.path.indexOf('sequence') > 0) type = 'sequence'
-      return type
-    },
-
-    assetMap() {
-      return assetStore.cache.assetMap
-    },
-
-    shotMap() {
-      return shotStore.cache.shotMap
-    },
+const route = useRoute()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  sort: { type: Boolean, default: false },
+  taskIds: { type: Array, default: null }
+})
+
+const emit = defineEmits(['cancel'])
+
+useModal(toRef(props, 'active'), emit)
+
+const currentEntities = ref([])
+const currentPlaylist = ref({
+  id: 'temp',
+  name: 'Temporary playlist',
+  shots: [],
+  for_entity: 'shot'
+})
+const errors = ref({ edit: false })
+const isLoading = ref(false)
+const loading = ref({ edit: false })
+const modals = ref({ edit: false })
+const playlistPlayer = ref(null)
+const playlistToEdit = ref({})
+let previewFileMap = new Map()
+let previewFileEntityMap = new Map()
+
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const isTVShow = computed(() => store.getters.isTVShow)
+const selectedTasks = computed(() => store.getters.selectedTasks)
+
+const currentTaskIds = computed(
+  () => props.taskIds || Array.from(selectedTasks.value.keys())
+)
+
+const isPlaylistPage = computed(() => route.path.indexOf('playlist') > 0)
+
+const currentEntityType = computed(() => {
+  if (route.path.indexOf('asset') > 0) return 'asset'
+  if (route.path.indexOf('sequence') > 0) return 'sequence'
+  return 'shot'
+})
+
+const isAssetPlaylist = computed(() => currentEntityType.value === 'asset')
+const isSequencePlaylist = computed(
+  () => currentEntityType.value === 'sequence'
+)
+
+const onPreviewChanged = async ({
+  entity,
+  previewFileId,
+  previousPreviewFileId
+}) => {
+  await store.dispatch('changePlaylistPreview', {
+    playlist: currentPlaylist.value,
+    entity,
+    previewFileId,
+    previousPreviewFileId,
+    remote: false
+  })
+}
 
-    sequenceMap() {
-      return sequenceStore.cache.sequenceMap
-    },
+const onAnnotationChanged = ({ preview, additions, deletions, updates }) => {
+  store.dispatch('updatePreviewAnnotation', {
+    taskId: preview.task_id,
+    preview,
+    additions,
+    deletions,
+    updates
+  })
+}
 
-    frameDuration() {
-      return Math.round((1 / this.fps) * 10000) / 10000
-    },
+const onAnnotationsRefreshed = preview => {
+  const entity = previewFileEntityMap.get(preview.id)
+  const localPreview = previewFileMap.get(preview.id)
+  if (entity) entity.preview_file_annotations = preview.annotations
+  if (localPreview) localPreview.annotations = preview.annotations
+}
 
-    fps() {
-      return parseFloat(this.currentProduction?.fps) || 25
+const lookupEntity = entityInfo => {
+  if (isAssetPlaylist.value) return assetStore.cache.assetMap.get(entityInfo.id)
+  if (isSequencePlaylist.value) {
+    const entity = sequenceStore.cache.sequenceMap.get(entityInfo.id)
+    if (entity && currentEpisode.value) {
+      entity.episode_name = currentEpisode.value.name
     }
-  },
-
-  methods: {
-    ...mapActions([
-      'changePlaylistPreview',
-      'editPlaylist',
-      'loadPlaylists',
-      'loadTempPlaylist',
-      'newPlaylist',
-      'updatePreviewAnnotation'
-    ]),
-
-    /* When a preview is modified, the change is persisted */
-    async onPreviewChanged({ entity, previewFileId, previousPreviewFileId }) {
-      await this.changePlaylistPreview({
-        playlist: this.currentPlaylist,
-        entity,
-        previewFileId,
-        previousPreviewFileId,
-        remote: false
-      })
-    },
-
-    onAnnotationChanged({ preview, additions, deletions, updates }) {
-      const taskId = preview.task_id
-      this.updatePreviewAnnotation({
-        taskId,
-        preview,
-        additions,
-        deletions,
-        updates
-      })
-    },
+    return entity
+  }
+  return shotStore.cache.shotMap.get(entityInfo.id)
+}
 
-    onAnnotationsRefreshed(preview) {
-      const entity = this.previewFileEntityMap.get(preview.id)
-      const localPreview = this.previewFileMap.get(preview.id)
-      if (entity) {
-        entity.preview_file_annotations = preview.annotations
-      }
-      if (localPreview) {
-        localPreview.annotations = preview.annotations
-      }
-    },
+const convertEntityToPlaylistFormat = entityInfo => {
+  const entity = lookupEntity(entityInfo)
+  if (!entity) return entityInfo
+  const playlistEntity = {
+    id: entityInfo.id,
+    name: entity.name,
+    nb_frames:
+      entityInfo.nb_frames || entity.nb_frames || DEFAULT_NB_FRAMES_PICTURE,
+    parent_name:
+      entity.sequence_name || entity.episode_name || entity.asset_type_name,
+    preview_files: entityInfo.preview_files,
+    preview_file_id: entityInfo.preview_file_id || entity.preview_file_id,
+    preview_file_extension:
+      entityInfo.preview_file_extension || entity.preview_file_extension,
+    preview_file_revision:
+      entityInfo.preview_file_revision || entity.preview_file_revision,
+    preview_file_width:
+      entityInfo.preview_file_width || entity.preview_file_width,
+    preview_file_height:
+      entityInfo.preview_file_height || entity.preview_file_height,
+    preview_file_duration:
+      entityInfo.preview_file_duration || entity.preview_file_duration,
+    preview_file_task_id:
+      entityInfo.task_id ||
+      entityInfo.preview_file_task_id ||
+      entity.preview_file_task_id,
+    preview_file_annotations:
+      entityInfo.preview_file_annotations || entity.preview_file_annotations,
+    preview_file_previews:
+      entityInfo.preview_file_previews || entity.preview_file_previews,
+    preview_nb_frames:
+      entityInfo.nb_frames || entity.nb_frames || DEFAULT_NB_FRAMES_PICTURE
+  }
+  Object.assign(entityInfo, playlistEntity)
+  previewFileEntityMap.set(playlistEntity.preview_file_id, playlistEntity)
+  const previews = playlistEntity.preview_file_previews || []
+  previews.forEach(preview => {
+    preview.duration = entity.preview_file_duration
+    previewFileMap.set(preview.id, preview)
+  })
+  return playlistEntity
+}
 
-    setupEntities(entities) {
-      const entityMap = {}
-      entities.forEach(entity => {
-        this.previewFileEntityMap.set(entity.preview_file_id, entity)
-        const previewFileGroups = Object.values(entity.preview_files)
-        this.convertEntityToPlaylistFormat(entity)
-        previewFileGroups.forEach(previewFiles => {
-          previewFiles.forEach(previewFile => {
-            this.previewFileMap.set(previewFile.id, previewFile)
-          })
-        })
-        entityMap[entity.id + '-' + entity.preview_file_id] = entity
+const setupEntities = entities => {
+  const entityMap = {}
+  entities.forEach(entity => {
+    previewFileEntityMap.set(entity.preview_file_id, entity)
+    const previewFileGroups = Object.values(entity.preview_files)
+    convertEntityToPlaylistFormat(entity)
+    previewFileGroups.forEach(previewFiles => {
+      previewFiles.forEach(previewFile => {
+        previewFileMap.set(previewFile.id, previewFile)
       })
-      this.$store.commit('SET_PLAYLIST_ENTRY_MAP', entityMap)
-      this.currentPlaylist.shots = Object.values(entityMap)
-      this.currentEntities = Object.values(entityMap)
-    },
+    })
+    entityMap[entity.id + '-' + entity.preview_file_id] = entity
+  })
+  store.commit('SET_PLAYLIST_ENTRY_MAP', entityMap)
+  currentPlaylist.value.shots = Object.values(entityMap)
+  currentEntities.value = Object.values(entityMap)
+}
 
-    convertEntityToPlaylistFormat(entityInfo) {
-      let entity
-      if (this.isAssetPlaylist) {
-        entity = this.assetMap.get(entityInfo.id)
-      } else if (this.isSequencePlaylist) {
-        entity = this.sequenceMap.get(entityInfo.id)
-        if (this.currentEpisode) {
-          entity.episode_name = this.currentEpisode.name
-        }
-      } else {
-        entity = this.shotMap.get(entityInfo.id)
-      }
-      if (entity) {
-        const playlistEntity = {
-          id: entityInfo.id,
-          name: entity.name,
-          nb_frames:
-            entityInfo.nb_frames ||
-            entity.nb_frames ||
-            DEFAULT_NB_FRAMES_PICTURE,
-          parent_name:
-            entity.sequence_name ||
-            entity.episode_name ||
-            entity.asset_type_name,
-          preview_files: entityInfo.preview_files,
-          preview_file_id: entityInfo.preview_file_id || entity.preview_file_id,
-          preview_file_extension:
-            entityInfo.preview_file_extension || entity.preview_file_extension,
-          preview_file_revision:
-            entityInfo.preview_file_revision || entity.preview_file_revision,
-          preview_file_width:
-            entityInfo.preview_file_width || entity.preview_file_width,
-          preview_file_height:
-            entityInfo.preview_file_height || entity.preview_file_height,
-          preview_file_duration:
-            entityInfo.preview_file_duration || entity.preview_file_duration,
-          preview_file_task_id:
-            entityInfo.task_id ||
-            entityInfo.preview_file_task_id ||
-            entity.preview_file_task_id,
-          preview_file_annotations:
-            entityInfo.preview_file_annotations ||
-            entity.preview_file_annotations,
-          preview_file_previews:
-            entityInfo.preview_file_previews || entity.preview_file_previews,
-          preview_nb_frames:
-            entityInfo.nb_frames ||
-            entity.nb_frames ||
-            DEFAULT_NB_FRAMES_PICTURE
-        }
-        Object.assign(entityInfo, playlistEntity)
-        this.previewFileEntityMap.set(
-          playlistEntity.preview_file_id,
-          playlistEntity
-        )
-        const previews = playlistEntity.preview_file_previews || []
-        previews.forEach(preview => {
-          preview.duration = entity.preview_file_duration
-          this.previewFileMap.set(preview.id, preview)
-        })
-        return playlistEntity
-      } else {
-        return entityInfo
-      }
-    },
+const onSaveClicked = () => {
+  playlistToEdit.value = { for_entity: currentEntityType.value }
+  modals.value.edit = true
+}
 
-    onSaveClicked() {
-      this.errors.editPlaylist = false
-      this.playlistToEdit = {
-        for_entity: this.currentEntityType
-      }
-      this.modals.edit = true
-    },
+const savePlaylist = async form => {
+  const newPlaylist = {
+    name: form.name,
+    production_id: currentProduction.value.id,
+    for_client: form.for_client,
+    for_entity: form.for_entity,
+    is_for_all: form.is_for_all,
+    task_type_id: form.task_type_id
+  }
+  if (isTVShow.value && currentEpisode.value) {
+    newPlaylist.episode_id = currentEpisode.value.id
+  }
+  errors.value.edit = false
+  loading.value.edit = true
+  try {
+    const playlist = await store.dispatch('newPlaylist', newPlaylist)
+    Object.assign(currentPlaylist.value, {
+      id: playlist.id,
+      name: playlist.name,
+      for_client: playlist.for_client,
+      for_entity: playlist.for_entity,
+      is_for_all: playlist.is_for_all
+    })
+    const playlistToSave = { ...currentPlaylist.value }
+    playlistToSave.shots = currentPlaylist.value.shots.map(shot => ({
+      entity_id: shot.id,
+      preview_file_id: shot.preview_file_id
+    }))
+    await store.dispatch('editPlaylist', { data: playlistToSave })
+    modals.value.edit = false
+    store.dispatch('loadPlaylists', {})
+  } catch (err) {
+    console.error(err)
+    errors.value.edit = true
+    loading.value.edit = false
+  }
+}
 
-    async savePlaylist(form) {
-      const newPlaylist = {
-        name: form.name,
-        production_id: this.currentProduction.id,
-        for_client: form.for_client,
-        for_entity: form.for_entity,
-        is_for_all: form.is_for_all,
-        task_type_id: form.task_type_id
-      }
-      if (this.isTVShow && this.currentEpisode) {
-        newPlaylist.episode_id = this.currentEpisode.id
-      }
-      this.errors.edit = false
-      this.loading.edit = true
-      try {
-        const playlist = await this.newPlaylist(newPlaylist)
-        Object.assign(this.currentPlaylist, {
-          id: playlist.id,
-          name: playlist.name,
-          for_client: playlist.for_client,
-          for_entity: playlist.for_entity,
-          is_for_all: playlist.is_for_all
-        })
-        const playlistToSave = { ...this.currentPlaylist }
-        playlistToSave.shots = this.currentPlaylist.shots.map(shot => {
-          return {
-            entity_id: shot.id,
-            preview_file_id: shot.preview_file_id
-          }
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      currentEntities.value = []
+      previewFileMap = new Map()
+      previewFileEntityMap = new Map()
+      isLoading.value = true
+      store
+        .dispatch('loadTempPlaylist', {
+          taskIds: currentTaskIds.value,
+          sort: props.sort
         })
-        await this.editPlaylist({
-          data: playlistToSave
+        .then(entities => {
+          currentPlaylist.value.for_entity = currentEntityType.value
+          setupEntities(entities)
+          isLoading.value = false
         })
-        this.modals.edit = false
-        this.loadPlaylists({})
-      } catch (err) {
-        console.error(err)
-        this.errors.edit = true
-        this.loading.edit = false
-      }
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.currentEntities = []
-        this.previewFileMap = new Map()
-        this.previewFileEntityMap = new Map()
-        this.isLoading = true
-        this.loadTempPlaylist({ taskIds: this.currentTaskIds, sort: this.sort })
-          .then(entities => {
-            this.currentPlaylist.for_entity = this.currentEntityType
-            this.setupEntities(entities)
-            this.isLoading = false
-          })
-          .catch(console.error)
-      } else {
-        this.playlistPlayer.pause()
-        this.playlistPlayer.clearCanvas()
-        this.currentEntities = []
-      }
+        .catch(console.error)
+    } else {
+      playlistPlayer.value?.pause()
+      playlistPlayer.value?.clearCanvas()
+      currentEntities.value = []
     }
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/pages/Departments.vue b/src/components/pages/Departments.vue
index 529e8aa725..983d6244f7 100644
--- a/src/components/pages/Departments.vue
+++ b/src/components/pages/Departments.vue
@@ -52,264 +52,220 @@
   </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'
 
-import DeleteModal from '@/components/modals/DeleteModal.vue'
-import DepartmentLinks from '@/components/pages/departments/DepartmentLinks.vue'
+// eslint-disable-next-line no-unused-vars
 import DepartmentList from '@/components/lists/DepartmentList.vue'
+import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditDepartmentsModal from '@/components/modals/EditDepartmentsModal.vue'
+import DepartmentLinks from '@/components/pages/departments/DepartmentLinks.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
 
-export default {
-  name: 'departments',
-
-  components: {
-    DeleteModal,
-    DepartmentLinks,
-    DepartmentList,
-    EditDepartmentsModal,
-    ListPageHeader,
-    RouteTabs
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      departmentToEdit: null,
-      departmentToDelete: null,
-      linkedHardwareItems: {},
-      linkedSoftwareLicenses: {},
-      errors: {
-        departments: false,
-        edit: false,
-        del: false
-      },
-      loading: {
-        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')
-        },
-        {
-          name: 'linked-hardware',
-          label: this.$t('departments.linked_hardware')
-        },
-        {
-          name: 'linked-software',
-          label: this.$t('departments.linked_software')
-        }
-      ]
-    }
-  },
-
-  async mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-    this.loading.departments = true
-    this.errors.departments = false
-    try {
-      await this.loadDepartments()
-      await this.loadHardwareItems()
-      await this.loadSoftwareLicenses()
-      this.linkedHardwareItems = await this.loadLinkedHardwareItems()
-      this.linkedSoftwareLicenses = await this.loadLinkedSoftwareLicenses()
-    } catch (error) {
-      console.error(error)
-      this.errors.departments = true
-    }
-    this.loading.departments = false
-  },
-
-  computed: {
-    ...mapGetters([
-      'departments',
-      'archivedDepartments',
-      'hardwareItems',
-      'softwareLicenses'
-    ]),
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    departmentList() {
-      return this.isActiveTab ? this.departments : this.archivedDepartments
-    },
-
-    deleteText() {
-      return this.departmentToDelete
-        ? this.$t('departments.delete_text', {
-            name: this.departmentToDelete.name
-          })
-        : ''
-    },
-
-    linkedItems() {
-      return this.activeTab === 'linked-hardware'
-        ? this.linkedHardwareItems
-        : this.linkedSoftwareLicenses
-    },
-
-    items() {
-      return this.activeTab === 'linked-hardware'
-        ? this.hardwareItems
-        : this.softwareLicenses
-    }
-  },
-
-  methods: {
-    ...mapActions([
-      'deleteDepartment',
-      'linkHardwareItem',
-      'linkSoftwareLicense',
-      'loadDepartments',
-      'loadHardwareItems',
-      'loadSoftwareLicenses',
-      'loadLinkedHardwareItems',
-      'loadLinkedSoftwareLicenses',
-      'unlinkHardwareItem',
-      'unlinkSoftwareLicense'
-    ]),
-
-    onExportClicked() {
-      const name = stringHelpers.slugify(this.$t('departments.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('departments.fields.name'),
-        this.$t('departments.fields.color')
-      ]
-      const entries = [headers].concat(
-        this.departments.map(department => [
-          department.type,
-          department.name,
-          department.color
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
-
-    onNewClicked() {
-      this.departmentToEdit = { name: '', color: '#999999' }
-      this.modals.edit = true
-    },
-
-    onEditClicked(department) {
-      this.departmentToEdit = department
-      this.modals.edit = true
-    },
-
-    confirmEditDepartment(form) {
-      let action = 'newDepartment'
-      if (this.departmentToEdit && this.departmentToEdit.id) {
-        action = 'editDepartment'
-        form.id = this.departmentToEdit.id
-      }
-      this.loading.edit = true
-      this.errors.edit = false
-      this.$store
-        .dispatch(action, form)
-        .then(() => {
-          this.loading.edit = false
-          this.modals.edit = false
-        })
-        .catch(() => {
-          this.loading.edit = false
-          this.errors.edit = true
-        })
-    },
-
-    onDeleteClicked(department) {
-      this.departmentToDelete = department
-      this.modals.del = true
-    },
-
-    async confirmDeleteDepartment() {
-      this.loading.del = true
-      this.errors.del = false
-      try {
-        await this.deleteDepartment(this.departmentToDelete)
-        this.loading.del = false
-        this.modals.del = false
-      } catch (e) {
-        this.loading.del = false
-        this.errors.del = true
-      }
-    },
-
-    onLinkItem(data) {
-      if (this.activeTab === 'linked-hardware') {
-        this.linkHardwareItem({
-          hardwareItemId: data.itemId,
-          departmentId: data.departmentId
-        })
-        const item = this.hardwareItems.find(i => i.id === data.itemId)
-        if (!this.linkedHardwareItems[data.departmentId]) {
-          this.linkedHardwareItems[data.departmentId] = []
-        }
-        this.linkedHardwareItems[data.departmentId].push(item)
-      } else if (this.activeTab === 'linked-software') {
-        this.linkSoftwareLicense({
-          softwareLicenseId: data.itemId,
-          departmentId: data.departmentId
-        })
-        const item = this.softwareLicenses.find(i => i.id === data.itemId)
-        if (!this.linkedSoftwareLicenses[data.departmentId]) {
-          this.linkedSoftwareLicenses[data.departmentId] = []
-        }
-        this.linkedSoftwareLicenses[data.departmentId].push(item)
-      }
-    },
-
-    onUnlinkItem(data) {
-      if (this.activeTab === 'linked-hardware') {
-        this.unlinkHardwareItem({
-          hardwareItemId: data.itemId,
-          departmentId: data.departmentId
-        })
-        this.linkedHardwareItems[data.departmentId] = this.linkedHardwareItems[
-          data.departmentId
-        ].filter(i => i.id !== data.itemId)
-      } else if (this.activeTab === 'linked-software') {
-        this.unlinkSoftwareLicense({
-          softwareLicenseId: data.itemId,
-          departmentId: data.departmentId
-        })
-        this.linkedSoftwareLicenses[data.departmentId] =
-          this.linkedSoftwareLicenses[data.departmentId].filter(
-            i => i.id !== data.itemId
-          )
-      }
-    }
-  },
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+// State
+
+const activeTab = ref('active')
+const departmentToDelete = ref(null)
+const departmentToEdit = ref(null)
+const linkedHardwareItems = ref({})
+const linkedSoftwareLicenses = ref({})
+
+const errors = reactive({ del: false, departments: false, edit: false })
+const loading = reactive({ del: false, departments: false, edit: false })
+const modals = reactive({ del: false, edit: false })
+
+// Computed
+
+const archivedDepartments = computed(() => store.getters.archivedDepartments)
+const departments = computed(() => store.getters.departments)
+const hardwareItems = computed(() => store.getters.hardwareItems)
+const softwareLicenses = computed(() => store.getters.softwareLicenses)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') },
+  { name: 'linked-hardware', label: t('departments.linked_hardware') },
+  { name: 'linked-software', label: t('departments.linked_software') }
+])
+
+const departmentList = computed(() =>
+  isActiveTab.value ? departments.value : archivedDepartments.value
+)
+
+const deleteText = computed(() =>
+  departmentToDelete.value
+    ? t('departments.delete_text', { name: departmentToDelete.value.name })
+    : ''
+)
+
+const linkedItems = computed(() =>
+  activeTab.value === 'linked-hardware'
+    ? linkedHardwareItems.value
+    : linkedSoftwareLicenses.value
+)
+
+const items = computed(() =>
+  activeTab.value === 'linked-hardware'
+    ? hardwareItems.value
+    : softwareLicenses.value
+)
+
+// Functions
+
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('departments.title'))
+  const headers = [
+    t('main.type'),
+    t('departments.fields.name'),
+    t('departments.fields.color')
+  ]
+  const rows = departments.value.map(department => [
+    department.type,
+    department.name,
+    department.color
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
+
+const onNewClicked = () => {
+  departmentToEdit.value = { name: '', color: '#999999' }
+  modals.edit = true
+}
 
-  watch: {
-    '$route.query.tab'() {
-      this.activeTab = this.$route.query.tab || 'active'
+const onEditClicked = department => {
+  departmentToEdit.value = department
+  modals.edit = true
+}
+
+const onDeleteClicked = department => {
+  departmentToDelete.value = department
+  modals.del = true
+}
+
+const confirmEditDepartment = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (departmentToEdit.value?.id) {
+      await store.dispatch('editDepartment', {
+        ...form,
+        id: departmentToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newDepartment', form)
     }
-  },
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
+  }
+  loading.edit = false
+}
 
-  head() {
-    return {
-      title: `${this.$t('departments.title')} - Kitsu`
+const confirmDeleteDepartment = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteDepartment', departmentToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
+
+const onLinkItem = ({ itemId, departmentId }) => {
+  if (activeTab.value === 'linked-hardware') {
+    store.dispatch('linkHardwareItem', {
+      hardwareItemId: itemId,
+      departmentId
+    })
+    const item = hardwareItems.value.find(i => i.id === itemId)
+    if (!linkedHardwareItems.value[departmentId]) {
+      linkedHardwareItems.value[departmentId] = []
     }
+    linkedHardwareItems.value[departmentId].push(item)
+  } else if (activeTab.value === 'linked-software') {
+    store.dispatch('linkSoftwareLicense', {
+      softwareLicenseId: itemId,
+      departmentId
+    })
+    const item = softwareLicenses.value.find(i => i.id === itemId)
+    if (!linkedSoftwareLicenses.value[departmentId]) {
+      linkedSoftwareLicenses.value[departmentId] = []
+    }
+    linkedSoftwareLicenses.value[departmentId].push(item)
+  }
+}
+
+const onUnlinkItem = ({ itemId, departmentId }) => {
+  if (activeTab.value === 'linked-hardware') {
+    store.dispatch('unlinkHardwareItem', {
+      hardwareItemId: itemId,
+      departmentId
+    })
+    linkedHardwareItems.value[departmentId] = linkedHardwareItems.value[
+      departmentId
+    ].filter(i => i.id !== itemId)
+  } else if (activeTab.value === 'linked-software') {
+    store.dispatch('unlinkSoftwareLicense', {
+      softwareLicenseId: itemId,
+      departmentId
+    })
+    linkedSoftwareLicenses.value[departmentId] = linkedSoftwareLicenses.value[
+      departmentId
+    ].filter(i => i.id !== itemId)
   }
 }
+
+// Watchers
+
+watch(
+  () => route.query.tab,
+  tab => {
+    activeTab.value = tab || 'active'
+  }
+)
+
+// Lifecycle
+
+onMounted(async () => {
+  activeTab.value = route.query.tab || 'active'
+  loading.departments = true
+  errors.departments = false
+  try {
+    await store.dispatch('loadDepartments')
+    await store.dispatch('loadHardwareItems')
+    await store.dispatch('loadSoftwareLicenses')
+    linkedHardwareItems.value = await store.dispatch('loadLinkedHardwareItems')
+    linkedSoftwareLicenses.value = await store.dispatch(
+      'loadLinkedSoftwareLicenses'
+    )
+  } catch (err) {
+    console.error(err)
+    errors.departments = true
+  }
+  loading.departments = false
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('departments.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
@@ -321,4 +277,11 @@ export default {
   min-height: 30px;
   margin-top: 1em;
 }
+
+@media screen and (max-width: 768px) {
+  .departments {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/pages/HardwareItems.vue b/src/components/pages/HardwareItems.vue
index a5ef450d59..de333caa10 100644
--- a/src/components/pages/HardwareItems.vue
+++ b/src/components/pages/HardwareItems.vue
@@ -41,219 +41,185 @@
   </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'
 
+import HardwareItemList from '@/components/lists/HardwareItemList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditHardwareItemModal from '@/components/modals/EditHardwareItemModal.vue'
-import HardwareItemList from '@/components/lists/HardwareItemList.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
 
-export default {
-  name: 'hardware-items',
-
-  components: {
-    DeleteModal,
-    EditHardwareItemModal,
-    HardwareItemList,
-    ListPageHeader,
-    RouteTabs
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      choices: [],
-      hardwareItemToDelete: null,
-      hardwareItemToEdit: {},
-      linkedHardwareItems: {},
-      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')
-        }
-      ]
-    }
-  },
-
-  async mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-    this.linkedHardwareItems = await this.loadLinkedHardwareItems()
-  },
-
-  computed: {
-    ...mapGetters(['activePeople', 'hardwareItems', 'archivedHardwareItems']),
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    hardwareItemsList() {
-      return this.isActiveTab ? this.hardwareItems : this.archivedHardwareItems
-    },
-
-    deleteText() {
-      const hardwareItem = this.hardwareItemToDelete
-      if (hardwareItem) {
-        return this.$t('hardware_items.delete_text', {
-          name: hardwareItem.name
-        })
-      } else {
-        return ''
-      }
-    },
-
-    usedAmounts() {
-      const usedAmounts = {}
-      this.activePeople.forEach(person => {
-        person.departments.forEach(departmentId => {
-          const departmentItems = this.linkedHardwareItems[departmentId] || []
-          departmentItems.forEach(item => {
-            if (!usedAmounts[item.id]) {
-              usedAmounts[item.id] = 0
-            }
-            usedAmounts[item.id] += 1
-          })
-        })
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+// State
+
+const activeTab = ref('active')
+const hardwareItemToDelete = ref(null)
+const hardwareItemToEdit = ref({})
+const linkedHardwareItems = 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 activePeople = computed(() => store.getters.activePeople)
+const archivedHardwareItems = computed(
+  () => store.getters.archivedHardwareItems
+)
+const hardwareItems = computed(() => store.getters.hardwareItems)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') }
+])
+
+const hardwareItemsList = computed(() =>
+  isActiveTab.value ? hardwareItems.value : archivedHardwareItems.value
+)
+
+const deleteText = computed(() =>
+  hardwareItemToDelete.value
+    ? t('hardware_items.delete_text', { name: hardwareItemToDelete.value.name })
+    : ''
+)
+
+const usedAmounts = computed(() => {
+  const amounts = {}
+  activePeople.value.forEach(person => {
+    person.departments.forEach(departmentId => {
+      const departmentItems = linkedHardwareItems.value[departmentId] || []
+      departmentItems.forEach(item => {
+        amounts[item.id] = (amounts[item.id] || 0) + 1
       })
-      return usedAmounts
-    },
+    })
+  })
+  return amounts
+})
+
+const remainingHardwareItems = computed(() =>
+  hardwareItems.value.reduce((remaining, hardwareItem) => {
+    remaining[hardwareItem.id] =
+      hardwareItem.inventory_amount - (usedAmounts.value[hardwareItem.id] || 0)
+    return remaining
+  }, {})
+)
+
+// Functions
+
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('hardware_items.title'))
+  const headers = [
+    t('main.type'),
+    t('hardware_items.fields.name'),
+    t('hardware_items.fields.short_name'),
+    t('hardware_items.fields.monthly_cost'),
+    t('hardware_items.fields.inventory_amount')
+  ]
+  const rows = hardwareItems.value.map(hardwareItem => [
+    hardwareItem.type,
+    hardwareItem.name,
+    hardwareItem.short_name,
+    hardwareItem.monthly_cost,
+    hardwareItem.inventory_amount
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
 
-    remainingHardwareItems() {
-      const remainingAmounts = {}
+const onNewClicked = () => {
+  hardwareItemToEdit.value = {}
+  errors.edit = false
+  modals.edit = true
+}
 
-      this.hardwareItems.forEach(hardwareItem => {
-        remainingAmounts[hardwareItem.id] =
-          hardwareItem.inventory_amount -
-          (this.usedAmounts[hardwareItem.id] || 0)
-      })
-      return remainingAmounts
-    }
-  },
-
-  methods: {
-    ...mapActions([
-      'deleteHardwareItem',
-      'editHardwareItem',
-      'newHardwareItem',
-      'loadHardwareItems',
-      'loadLinkedHardwareItems'
-    ]),
-
-    confirmEditHardwareItem(form) {
-      let action = 'newHardwareItem'
-      if (this.hardwareItemToEdit && this.hardwareItemToEdit.id) {
-        action = 'editHardwareItem'
-        form.id = this.hardwareItemToEdit.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
-        })
-    },
-
-    confirmDeleteHardwareItem() {
-      this.loading.del = true
-      this.errors.del = false
-      this.deleteHardwareItem(this.hardwareItemToDelete)
-        .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('hardware_items.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('hardware_items.fields.name'),
-        this.$t('hardware_items.fields.short_name'),
-        this.$t('hardware_items.fields.monthly_cost'),
-        this.$t('hardware_items.fields.inventory_amount')
-      ]
-      const entries = [headers].concat(
-        this.hardwareItems.map(hardwareItem => [
-          hardwareItem.type,
-          hardwareItem.name,
-          hardwareItem.short_name,
-          hardwareItem.monthly_cost,
-          hardwareItem.inventory_amount
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
-
-    onNewClicked() {
-      this.hardwareItemToEdit = {}
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onEditClicked(hardwareItem) {
-      this.hardwareItemToEdit = hardwareItem
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onDeleteClicked(hardwareItem) {
-      this.hardwareItemToDelete = hardwareItem
-      this.errors.del = false
-      this.modals.del = true
-    }
-  },
+const onEditClicked = hardwareItem => {
+  hardwareItemToEdit.value = hardwareItem
+  errors.edit = false
+  modals.edit = true
+}
 
-  watch: {
-    '$route.query.tab'() {
-      this.activeTab = this.$route.query.tab || 'active'
-    }
-  },
+const onDeleteClicked = hardwareItem => {
+  hardwareItemToDelete.value = hardwareItem
+  errors.del = false
+  modals.del = true
+}
 
-  head() {
-    return {
-      title: `${this.$t('hardware_items.title')} - Kitsu`
+const confirmEditHardwareItem = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (hardwareItemToEdit.value?.id) {
+      await store.dispatch('editHardwareItem', {
+        ...form,
+        id: hardwareItemToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newHardwareItem', form)
     }
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
   }
+  loading.edit = false
 }
+
+const confirmDeleteHardwareItem = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteHardwareItem', hardwareItemToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
+
+// Watchers
+
+watch(
+  () => route.query.tab,
+  tab => {
+    activeTab.value = tab || 'active'
+  }
+)
+
+// Lifecycle
+
+onMounted(async () => {
+  activeTab.value = route.query.tab || 'active'
+  linkedHardwareItems.value = await store.dispatch('loadLinkedHardwareItems')
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('hardware_items.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
-.software-license-list {
+.hardware-item-list {
   margin-top: 0;
 }
+
+@media screen and (max-width: 768px) {
+  .hardware-items {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/pages/SoftwareLicenses.vue b/src/components/pages/SoftwareLicenses.vue
index 616a937b9a..becf8613f6 100644
--- a/src/components/pages/SoftwareLicenses.vue
+++ b/src/components/pages/SoftwareLicenses.vue
@@ -41,227 +41,193 @@
   </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'
 
+import SoftwareLicenseList from '@/components/lists/SoftwareLicenseList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditSoftwareLicenseModal from '@/components/modals/EditSoftwareLicenseModal.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
-import SoftwareLicenseList from '@/components/lists/SoftwareLicenseList.vue'
 
-export default {
-  name: 'software-licenses',
-
-  components: {
-    DeleteModal,
-    EditSoftwareLicenseModal,
-    ListPageHeader,
-    RouteTabs,
-    SoftwareLicenseList
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      linkedSoftwareLicenses: {},
-      softwareLicenseToDelete: null,
-      softwareLicenseToEdit: {},
-      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')
-        }
-      ]
-    }
-  },
-
-  async mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-    this.linkedSoftwareLicenses = await this.loadLinkedSoftwareLicenses()
-  },
-
-  computed: {
-    ...mapGetters([
-      'activePeople',
-      'softwareLicenses',
-      'archivedSoftwareLicenses'
-    ]),
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    softwareLicensesList() {
-      return this.isActiveTab
-        ? this.softwareLicenses
-        : this.archivedSoftwareLicenses
-    },
-
-    usedAmounts() {
-      const usedAmounts = {}
-      this.activePeople.forEach(person => {
-        person.departments.forEach(departmentId => {
-          const departmentItems =
-            this.linkedSoftwareLicenses[departmentId] || []
-          departmentItems.forEach(item => {
-            if (!usedAmounts[item.id]) {
-              usedAmounts[item.id] = 0
-            }
-            usedAmounts[item.id] += 1
-          })
-        })
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+// State
+
+const activeTab = ref('active')
+const linkedSoftwareLicenses = ref({})
+const softwareLicenseToDelete = ref(null)
+const softwareLicenseToEdit = 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 activePeople = computed(() => store.getters.activePeople)
+const archivedSoftwareLicenses = computed(
+  () => store.getters.archivedSoftwareLicenses
+)
+const softwareLicenses = computed(() => store.getters.softwareLicenses)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') }
+])
+
+const softwareLicensesList = computed(() =>
+  isActiveTab.value ? softwareLicenses.value : archivedSoftwareLicenses.value
+)
+
+const deleteText = computed(() =>
+  softwareLicenseToDelete.value
+    ? t('software_licenses.delete_text', {
+        name: softwareLicenseToDelete.value.name
       })
-      return usedAmounts
-    },
-
-    remainingSoftwareLicenses() {
-      const remainingAmounts = {}
-      this.softwareLicenses.forEach(license => {
-        remainingAmounts[license.id] =
-          license.inventory_amount - (this.usedAmounts[license.id] || 0)
+    : ''
+)
+
+const usedAmounts = computed(() => {
+  const amounts = {}
+  activePeople.value.forEach(person => {
+    person.departments.forEach(departmentId => {
+      const departmentItems = linkedSoftwareLicenses.value[departmentId] || []
+      departmentItems.forEach(item => {
+        amounts[item.id] = (amounts[item.id] || 0) + 1
       })
-      return remainingAmounts
-    },
-
-    deleteText() {
-      const softwareLicense = this.softwareLicenseToDelete
-      if (softwareLicense) {
-        return this.$t('software_licenses.delete_text', {
-          name: softwareLicense.name
-        })
-      } else {
-        return ''
-      }
-    }
-  },
-
-  methods: {
-    ...mapActions([
-      'deleteSoftwareLicense',
-      'editSoftwareLicense',
-      'newSoftwareLicense',
-      'loadLinkedSoftwareLicenses'
-    ]),
-
-    confirmEditSoftwareLicense(form) {
-      let action = 'newSoftwareLicense'
-      if (this.softwareLicenseToEdit && this.softwareLicenseToEdit.id) {
-        action = 'editSoftwareLicense'
-        form.id = this.softwareLicenseToEdit.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
-        })
-    },
-
-    confirmDeleteSoftwareLicense() {
-      this.loading.del = true
-      this.errors.del = false
-      this.deleteSoftwareLicense(this.softwareLicenseToDelete)
-        .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('software_licenses.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('software_licenses.fields.name'),
-        this.$t('software_licenses.fields.short_name'),
-        this.$t('software_licenses.fields.extension'),
-        this.$t('software_licenses.fields.version'),
-        this.$t('software_licenses.fields.monthly_cost'),
-        this.$t('software_licenses.fields.inventory_amount')
-      ]
-      const entries = [headers].concat(
-        this.softwareLicenses.map(softwareLicense => [
-          softwareLicense.type,
-          softwareLicense.name,
-          softwareLicense.short_name,
-          softwareLicense.file_extension,
-          softwareLicense.version,
-          softwareLicense.monthly_cost,
-          softwareLicense.inventory_amount
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
-
-    onNewClicked() {
-      this.softwareLicenseToEdit = {}
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onEditClicked(softwareLicense) {
-      this.softwareLicenseToEdit = softwareLicense
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onDeleteClicked(softwareLicense) {
-      this.softwareLicenseToDelete = softwareLicense
-      this.errors.del = false
-      this.modals.del = true
-    }
-  },
+    })
+  })
+  return amounts
+})
+
+const remainingSoftwareLicenses = computed(() =>
+  softwareLicenses.value.reduce((remaining, license) => {
+    remaining[license.id] =
+      license.inventory_amount - (usedAmounts.value[license.id] || 0)
+    return remaining
+  }, {})
+)
+
+// Functions
+
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('software_licenses.title'))
+  const headers = [
+    t('main.type'),
+    t('software_licenses.fields.name'),
+    t('software_licenses.fields.short_name'),
+    t('software_licenses.fields.extension'),
+    t('software_licenses.fields.version'),
+    t('software_licenses.fields.monthly_cost'),
+    t('software_licenses.fields.inventory_amount')
+  ]
+  const rows = softwareLicenses.value.map(softwareLicense => [
+    softwareLicense.type,
+    softwareLicense.name,
+    softwareLicense.short_name,
+    softwareLicense.file_extension,
+    softwareLicense.version,
+    softwareLicense.monthly_cost,
+    softwareLicense.inventory_amount
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
 
-  watch: {
-    '$route.query.tab'() {
-      this.activeTab = this.$route.query.tab || 'active'
-    }
-  },
+const onNewClicked = () => {
+  softwareLicenseToEdit.value = {}
+  errors.edit = false
+  modals.edit = true
+}
 
-  head() {
-    return {
-      title: `${this.$t('software_licenses.title')} - Kitsu`
+const onEditClicked = softwareLicense => {
+  softwareLicenseToEdit.value = softwareLicense
+  errors.edit = false
+  modals.edit = true
+}
+
+const onDeleteClicked = softwareLicense => {
+  softwareLicenseToDelete.value = softwareLicense
+  errors.del = false
+  modals.del = true
+}
+
+const confirmEditSoftwareLicense = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (softwareLicenseToEdit.value?.id) {
+      await store.dispatch('editSoftwareLicense', {
+        ...form,
+        id: softwareLicenseToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newSoftwareLicense', form)
     }
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
   }
+  loading.edit = false
 }
+
+const confirmDeleteSoftwareLicense = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteSoftwareLicense', softwareLicenseToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
+
+// Watchers
+
+watch(
+  () => route.query.tab,
+  tab => {
+    activeTab.value = tab || 'active'
+  }
+)
+
+// Lifecycle
+
+onMounted(async () => {
+  activeTab.value = route.query.tab || 'active'
+  linkedSoftwareLicenses.value = await store.dispatch(
+    'loadLinkedSoftwareLicenses'
+  )
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('software_licenses.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
 .software-license-list {
   margin-top: 0;
 }
+
+@media screen and (max-width: 768px) {
+  .software-licenses {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/pages/Studios.vue b/src/components/pages/Studios.vue
index f2411940d9..08a67507ce 100644
--- a/src/components/pages/Studios.vue
+++ b/src/components/pages/Studios.vue
@@ -41,42 +41,47 @@
 </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 { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
 
+import StudioList from '@/components/lists/StudioList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditStudiosModal from '@/components/modals/EditStudiosModal.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
-import StudioList from '@/components/lists/StudioList.vue'
 
 const { t } = useI18n()
 const route = useRoute()
 const store = useStore()
 
+// State
+
 const activeTab = ref('active')
-const studioToEdit = ref(null)
 const studioToDelete = ref(null)
-const errors = reactive({ studios: false, edit: false, del: false })
-const loading = reactive({ studios: false, edit: false, del: false })
+const studioToEdit = ref(null)
+
+const errors = reactive({ del: false, edit: false, studios: false })
+const loading = reactive({ del: false, edit: false, studios: false })
 const modals = reactive({ del: false, edit: false })
 
-const studios = computed(() => store.getters.studios)
+// Computed
+
 const archivedStudios = computed(() => store.getters.archivedStudios)
+const studios = computed(() => store.getters.studios)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
 
 const tabs = computed(() => [
   { name: 'active', label: t('main.active') },
   { name: 'archived', label: t('main.archived') }
 ])
 
-const isActiveTab = computed(() => activeTab.value === 'active')
-
 const displayedStudios = computed(() =>
   isActiveTab.value ? studios.value : archivedStudios.value
 )
@@ -87,6 +92,8 @@ const deleteText = computed(() =>
     : ''
 )
 
+// Functions
+
 const onExportClicked = () => {
   const name = stringHelpers.slugify(t('studios.title'))
   const headers = [
@@ -94,10 +101,12 @@ const onExportClicked = () => {
     t('studios.fields.name'),
     t('studios.fields.color')
   ]
-  const entries = [headers].concat(
-    studios.value.map(studio => [studio.type, studio.name, studio.color])
-  )
-  csv.buildCsvFile(name, entries)
+  const rows = studios.value.map(studio => [
+    studio.type,
+    studio.name,
+    studio.color
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
 }
 
 const onNewClicked = () => {
@@ -110,42 +119,43 @@ const onEditClicked = studio => {
   modals.edit = true
 }
 
+const onDeleteClicked = studio => {
+  studioToDelete.value = studio
+  modals.del = true
+}
+
 const confirmEditStudio = async form => {
   loading.edit = true
   errors.edit = false
-  form.id = studioToEdit.value?.id
   try {
-    if (form.id) {
-      await store.dispatch('editStudio', form)
+    if (studioToEdit.value?.id) {
+      await store.dispatch('editStudio', { ...form, id: studioToEdit.value.id })
     } else {
       await store.dispatch('newStudio', form)
     }
     modals.edit = false
-  } catch (error) {
-    console.error(error)
+  } catch (err) {
+    console.error(err)
     errors.edit = true
   }
   loading.edit = false
 }
 
-const onDeleteClicked = studio => {
-  studioToDelete.value = studio
-  modals.del = true
-}
-
 const confirmDeleteStudio = async () => {
   loading.del = true
   errors.del = false
   try {
     await store.dispatch('deleteStudio', studioToDelete.value)
     modals.del = false
-  } catch (error) {
-    console.error(error)
+  } catch (err) {
+    console.error(err)
     errors.del = true
   }
   loading.del = false
 }
 
+// Watchers
+
 watch(
   () => route.query.tab,
   tab => {
@@ -153,19 +163,23 @@ watch(
   }
 )
 
+// Lifecycle
+
 onMounted(async () => {
   activeTab.value = route.query.tab || 'active'
   loading.studios = true
   errors.studios = false
   try {
     await store.dispatch('loadStudios')
-  } catch (error) {
-    console.error(error)
+  } catch (err) {
+    console.error(err)
     errors.studios = true
   }
   loading.studios = false
 })
 
+// Head
+
 useHead({ title: computed(() => `${t('studios.title')} - Kitsu`) })
 </script>
 
diff --git a/src/components/pages/budget/SalaryScale.vue b/src/components/pages/budget/SalaryScale.vue
index 08562afac5..ace3c2301d 100644
--- a/src/components/pages/budget/SalaryScale.vue
+++ b/src/components/pages/budget/SalaryScale.vue
@@ -23,203 +23,43 @@
                   :key="department.id"
                   v-for="department in departments"
                 >
-                  <tr class="datatable-row">
-                    <td rowspan="9">
-                      <department-name :department="department" />
-                    </td>
-                    <td rowspan="3">{{ $t('budget.positions.supervisor') }}</td>
-                    <td>{{ $t('budget.seniorities.senior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'supervisor',
-                              'senior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.supervisor.senior
-                            .salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.mid') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'supervisor',
-                              'mid',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.supervisor.mid.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.junior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'supervisor',
-                              'junior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.supervisor.junior
-                            .salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td rowspan="3">{{ $t('budget.positions.lead') }}</td>
-                    <td>{{ $t('budget.seniorities.senior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'lead',
-                              'senior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.lead.senior.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.mid') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'lead',
-                              'mid',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.lead.mid.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.junior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'lead',
-                              'junior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.lead.junior.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td rowspan="3">{{ $t('budget.positions.artist') }}</td>
-                    <td>{{ $t('budget.seniorities.senior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'artist',
-                              'senior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.artist.senior.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.mid') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'artist',
-                              'mid',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.artist.mid.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.junior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'artist',
-                              'junior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.artist.junior.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
+                  <template
+                    :key="position"
+                    v-for="(position, pIdx) in positions"
+                  >
+                    <tr
+                      class="datatable-row"
+                      :key="seniority"
+                      v-for="(seniority, sIdx) in seniorities"
+                    >
+                      <td v-if="pIdx === 0 && sIdx === 0" rowspan="9">
+                        <department-name :department="department" />
+                      </td>
+                      <td v-if="sIdx === 0" rowspan="3">
+                        {{ $t(`budget.positions.${position}`) }}
+                      </td>
+                      <td>{{ $t(`budget.seniorities.${seniority}`) }}</td>
+                      <td>
+                        <input
+                          type="number"
+                          class="input-editor"
+                          @input="
+                            event =>
+                              modifySalaryScale(
+                                department.id,
+                                position,
+                                seniority,
+                                event
+                              )
+                          "
+                          :value="
+                            salaryScale[department.id]?.[position]?.[seniority]
+                              ?.salary || 0
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </template>
                 </template>
               </tbody>
             </table>
@@ -230,55 +70,47 @@
   </page-layout>
 </template>
 
-<script>
-import DepartmentName from '@/components/widgets/DepartmentName.vue'
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
+
 import PageLayout from '@/components/layouts/PageLayout.vue'
+import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import PageTitle from '@/components/widgets/PageTitle.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
-import { mapGetters, mapActions } from 'vuex'
 
-export default {
-  name: 'salary-scale',
+const store = useStore()
 
-  components: {
-    DepartmentName,
-    PageLayout,
-    PageTitle,
-    Spinner
-  },
+const positions = ['supervisor', 'lead', 'artist']
+const seniorities = ['senior', 'mid', 'junior']
 
-  data() {
-    return {
-      isLoading: false,
-      salaryScale: {}
-    }
-  },
+// State
 
-  computed: {
-    ...mapGetters(['departments'])
-  },
+const isLoading = ref(false)
+const salaryScale = ref({})
 
-  mounted() {
-    this.setSalaryScale()
-  },
+// Computed
 
-  methods: {
-    ...mapActions(['loadSalaryScale', 'updateSalaryScale']),
+const departments = computed(() => store.getters.departments)
 
-    async setSalaryScale() {
-      this.isLoading = true
-      this.salaryScale = await this.loadSalaryScale()
-      this.isLoading = false
-    },
+// Functions
 
-    modifySalaryScale(departmentId, position, seniority, event) {
-      const salary = Math.trunc(event.target.valueAsNumber || 0)
-      const scaleEntry = this.salaryScale[departmentId][position][seniority]
-      scaleEntry.salary = salary
-      this.updateSalaryScale(scaleEntry)
-    }
-  }
+const setSalaryScale = async () => {
+  isLoading.value = true
+  salaryScale.value = await store.dispatch('loadSalaryScale')
+  isLoading.value = false
 }
+
+const modifySalaryScale = (departmentId, position, seniority, event) => {
+  const salary = Math.trunc(event.target.valueAsNumber || 0)
+  const scaleEntry = salaryScale.value[departmentId][position][seniority]
+  scaleEntry.salary = salary
+  store.dispatch('updateSalaryScale', scaleEntry)
+}
+
+// Lifecycle
+
+onMounted(setSalaryScale)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/format.js b/src/composables/format.js
new file mode 100644
index 0000000000..75912b22f1
--- /dev/null
+++ b/src/composables/format.js
@@ -0,0 +1,77 @@
+/*
+ * Composition API counterpart of `src/components/mixins/format.js`.
+ * New `<script setup>` components should use `useFormat()` (or the
+ * pure-function named exports below). The legacy mixin stays in place
+ * so existing Options API components keep working — they can migrate
+ * one by one to this composable.
+ */
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import {
+  formatDate,
+  formatDuration as libFormatDuration,
+  formatFullDate,
+  formatSimpleDate
+} from '@/lib/time'
+
+// Pure helpers — re-exported / defined here so callers that don't need
+// the reactive parts can import them directly without instantiating the
+// composable.
+
+export { formatDate, formatFullDate, formatSimpleDate }
+
+export const formatPrioritySymbol = priority => {
+  const clamped = Math.max(0, Math.min(priority, 3))
+  return '!'.repeat(clamped)
+}
+
+export const sanitizeInteger = value => {
+  if (typeof value !== 'string') return 0
+  const digits = value.replace(/\D/g, '')
+  return digits.length > 0 ? parseInt(digits) || 0 : 0
+}
+
+export const sanitizeIntegerLight = value => {
+  if (typeof value !== 'string') return null
+  const digits = value.replace(/\D/g, '')
+  return digits.length > 0 ? parseInt(digits) || null : null
+}
+
+export const useFormat = () => {
+  const { t } = useI18n()
+  const store = useStore()
+
+  const organisation = computed(() => store.getters.organisation)
+  const isDurationInHours = computed(
+    () => organisation.value.format_duration_in_hours
+  )
+
+  const formatBoolean = value => (value ? t('main.yes') : t('main.no'))
+
+  const formatDuration = (minutes, toLocale = true) =>
+    libFormatDuration(organisation.value, minutes, toLocale)
+
+  const formatPriority = priority => {
+    if (priority === 0) return 'normal'
+    if (priority === 1) return t('tasks.priority.high')
+    if (priority === 2) return t('tasks.priority.very_high')
+    if (priority === 3) return t('tasks.priority.emergency')
+    return String(priority)
+  }
+
+  return {
+    organisation,
+    isDurationInHours,
+    formatBoolean,
+    formatDate,
+    formatFullDate,
+    formatSimpleDate,
+    formatDuration,
+    formatPriority,
+    formatPrioritySymbol,
+    sanitizeInteger,
+    sanitizeIntegerLight
+  }
+}