diff --git a/client/src/components/Settings.vue b/client/src/components/Settings.vue
index f0e12512..8e42ec18 100644
--- a/client/src/components/Settings.vue
+++ b/client/src/components/Settings.vue
@@ -144,6 +144,13 @@
                         <q-btn flat round icon='mdi-plus' @click='addMood' color='primary'></q-btn>  
                         </div>                      
                     </div>
+
+                    <!-- Sort moods -->
+                    <div class='q-mt-sm q-mb-sm text-uppercase text-primary text-subtitle2'>Sort moods</div>
+                    <div class='row'>
+                        <q-btn class='q-mr-sm' flat round color='white' size='sm' icon='mdi-sort-alphabetical-ascending' @click='sortMoods(1)'></q-btn>
+                        <q-btn class='q-mr-sm' flat round color='white' size='sm' icon='mdi-sort-alphabetical-descending' @click='sortMoods(-1)'></q-btn>
+                    </div>
                 </div>
                 
                 <!-- Genres -->
@@ -207,6 +214,13 @@
                         <TagFields v-if='$1t.settings.value.quickTag.subgenreTag' class='col-10 q-mt-sm q-mb-md' style='margin-bottom: 20px;' dense v-model='$1t.settings.value.quickTag.subgenreTag'></TagFields>
                     </div>
 
+                    <!-- Sort genres -->
+                    <div class='q-mt-sm q-mb-sm text-uppercase text-primary text-subtitle2'>Sort moods</div>
+                    <div class='row'>
+                        <q-btn class='q-mr-sm' flat round color='white' size='sm' icon='mdi-sort-alphabetical-ascending' @click='sortGenres(1)'></q-btn>
+                        <q-btn class='q-mr-sm' flat round color='white' size='sm' icon='mdi-sort-alphabetical-descending' @click='sortGenres(-1)'></q-btn>
+                    </div>
+
                 </div>
             </div>
 
@@ -266,6 +280,8 @@
                             <!-- Reordering -->
                             <q-btn size='sm' class='q-mr-sm' flat round icon='mdi-chevron-up' color='primary' @click='reorderCustomQT(i, -1)' v-if='i > 0'></q-btn>
                             <q-btn size='sm' class='q-mr-sm' flat round icon='mdi-chevron-down' color='primary' @click='reorderCustomQT(i, 1)' v-if='i != $1t.settings.value.quickTag.custom.length - 1'></q-btn>
+                            <q-btn size='sm' class='q-mr-sm' flat round icon='mdi-sort-alphabetical-ascending' color='primary' @click='sortCustomQT(i, 1)'></q-btn>
+                            <q-btn size='sm' class='q-mr-sm' flat round icon='mdi-sort-alphabetical-descending' color='primary' @click='sortCustomQT(i, -1)'></q-btn>
                             <!-- Delete -->
                             <q-btn size='sm' flat round icon='mdi-delete' color='red' @click='deleteCustomQT(i)'></q-btn>
 
@@ -496,6 +512,19 @@ function addMood() {
     }
 }
 
+/// Sort moods
+function sortMoods(dir: 1 | -1 = 1) {
+    $1t.settings.value.quickTag.moods.sort((a, b) => {
+        if (a.mood.toLowerCase() > b.mood.toLowerCase()) {
+            return 1 * dir;
+        }
+        if (a.mood.toLowerCase() < b.mood.toLowerCase()) {
+            return -1 * dir;
+        }
+        return 0;
+    });
+}
+
 // Add new genre
 function addGenre() {
     if (!newGenre.value || newGenre.value.trim() == "") return;
@@ -504,6 +533,19 @@ function addGenre() {
     newGenre.value = undefined;
 }
 
+/// Sort genres
+function sortGenres(dir: 1 | -1 = 1) {
+    $1t.settings.value.quickTag.genres.sort((a, b) => {
+        if (a.genre.toLowerCase() > b.genre.toLowerCase()) {
+            return 1 * dir;
+        }
+        if (a.genre.toLowerCase() < b.genre.toLowerCase()) {
+            return -1 * dir;
+        }
+        return 0;
+    });
+}
+
 // On subgenres changed
 function onSubgenreInput(e: string | null, i: number) {
     if (!e) {
@@ -546,6 +588,19 @@ function editCustomQT(i: number) {
     customQTEdit.value[i] = !customQTEdit.value[i];
 }
 
+/// Sort custom QT alphabetically
+function sortCustomQT(i: number, dir: 1 | -1 = 1) {
+    $1t.settings.value.quickTag.custom[i].values.sort((a, b) => {
+        if (a.val.toLowerCase() > b.val.toLowerCase()) {
+            return 1 * dir;
+        }
+        if (a.val.toLowerCase() < b.val.toLowerCase()) {
+            return -1 * dir;
+        }
+        return 0;
+    });
+}
+
 function addNewQTValue(i: number) {
     $1t.settings.value.quickTag.custom[i].values.push({val: "New", keybind: undefined});
     //TODO: Focus on new value
diff --git a/client/src/components/TagEditorAlbumArt.vue b/client/src/components/TagEditorAlbumArt.vue
new file mode 100644
index 00000000..0ab366cc
--- /dev/null
+++ b/client/src/components/TagEditorAlbumArt.vue
@@ -0,0 +1,95 @@
+<template>
+    <!-- Image -->
+    <div
+        @dragover.prevent='drag = true'
+        @dragleave.prevent='drag = false'
+        @drop.prevent='drop'
+    >
+        <q-img 
+            :src='image.data' 
+            class='albumart clickable' 
+            @click='emit("click")'
+            :class='{"albumart-darker": drag}'
+        >
+            <div v-show='drag' class='text-h6 full-height row justify-center items-center text-center'>
+                Drop the image to replace
+            </div>
+        </q-img>
+    </div>
+    
+
+    <!-- Meta -->
+    <div class='q-pt-sm q-mb-md'>
+        <div class='text-caption'>{{image.kind}}</div>
+        <div class='text-caption'>{{image.description}}</div>
+        <div class='text-subtitle3 text-grey-6 monospace'>{{image.mime}} {{image.width}}x{{image.height}}</div>
+        <q-btn dense push color='red' class='rounded-borders q-px-md q-mt-sm text-weight-medium' @click='emit("remove")'>Remove</q-btn>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { PropType, ref } from 'vue';
+
+interface TagEditorImage {
+    mime: string,
+    data?: string,
+    kind?: string,
+    description: string,
+    width: number,
+    height: number
+};
+
+const { image } = defineProps({ image: { type: Object as PropType<TagEditorImage>, required: true }});
+const emit = defineEmits(['click', 'remove', 'replace']);
+
+const drag = ref(false);
+
+/// File dropped, replace
+
+function drop(e: DragEvent) {
+    // Get file
+    let files = e.dataTransfer!.files;
+    if (files.length !== 1) return;
+    let file = files[0];
+    if (!file.type.includes('image/')) return;
+
+    // Read
+    let reader = new FileReader();
+    reader.onload = f => {
+        replaceArt(f.target!.result as string)
+    }
+    reader.readAsDataURL(file);
+    drag.value = false;
+}
+
+async function replaceArt(data: string) {
+    // Load width/height
+    let wh: [number, number] = await new Promise((res) => {
+        let i = new Image();
+        i.onload = function() {
+            res([i.width, i.height]);
+        }
+        i.src = data;
+    });
+
+    // Output image
+    let outImage: any = {
+        data: data.substring(data.indexOf('base64,')+7).trim(),
+        mime: data.substring(5, data.indexOf(';')),
+        description: image.description??'',
+        kind: image.kind,
+        width: wh[0],
+        height: wh[1]
+    }
+    emit('replace', outImage);
+}
+
+</script>
+
+<style lang='scss' scoped>
+
+.albumart-darker {
+    opacity: 0.6;
+}
+
+</style>
\ No newline at end of file
diff --git a/client/src/views/TagEditor.vue b/client/src/views/TagEditor.vue
index ab155e70..4d5ccc70 100644
--- a/client/src/views/TagEditor.vue
+++ b/client/src/views/TagEditor.vue
@@ -132,6 +132,7 @@
                     </div>
                 </div>
                 <q-separator class='q-mx-auto' :style='"max-width: 513px; margin-top: 40px;"' inset color="dark"/>
+                
                 <!-- Add new tag -->
                 <div class='row q-mt-lg' style='margin-top: 40px;'>
                     <div class='col-3 q-pt-sm text-weight-medium text-grey-4 text-body2'>Add new text tag</div>
@@ -143,6 +144,7 @@
                     </div>
                 </div>
                 <q-separator class='q-mx-auto' :style='"max-width: 513px; margin-top: 20px; margin-bottom: 25px;"' inset color="dark"/>
+                
                 <!-- Album art -->
                 <div class='text-uppercase text-primary text-weight-medium'>
                     Album art
@@ -152,13 +154,19 @@
                 </div>
                 <div class='text-grey-4 albumart-container text-center'>
                     <div v-for='(image, i) in file.images' :key='"art"+i' class='q-mr-md'>
-                        <q-img :src='image.data' class='albumart clickable' @click='albumArt = image.data; showAlbumArt = true'></q-img>
+                        <!-- <q-img :src='image.data' class='albumart clickable' @click='albumArt = image.data; showAlbumArt = true'></q-img>
                         <div class='q-pt-sm q-mb-md'>
                             <div v-if='file.format != "mp4"' class='text-caption'>{{image.kind}}</div>
                             <div v-if='file.format != "mp4"' class='text-caption'>{{image.description}}</div>
                             <div class='text-subtitle3 text-grey-6 monospace'>{{image.mime}} {{image.width}}x{{image.height}}</div>
                             <q-btn dense push color='red' class='rounded-borders q-px-md q-mt-sm text-weight-medium' @click='removeArt(i)'>Remove</q-btn>
-                        </div>
+                        </div> -->
+                        <TagEditorAlbumArt 
+                            :image='image' 
+                            @click='albumArt = image.data; showAlbumArt = true' 
+                            @remove='removeArt(i)'
+                            @replace='addAlbumArt'
+                        ></TagEditorAlbumArt>
                     </div>
                 </div>
 
@@ -359,6 +367,7 @@ import { computed, onDeactivated, onMounted, ref } from 'vue';
 import { get1t } from '../scripts/onetagger';
 import { useQuasar } from 'quasar';
 import ManualTag from '../components/ManualTag.vue';
+import TagEditorAlbumArt from '../components/TagEditorAlbumArt.vue';
 
 const $1t = get1t();
 const $q = useQuasar();
@@ -527,6 +536,11 @@ function onChange(tag: string) {
 
 // Add new album art
 function addAlbumArt(data: any) {
+    // Find old image
+    file.value.images = file.value.images.filter((i: any) => i.kind != data.kind);
+    changes.value = changes.value.filter((c) => c.type != 'addPictureBase64' || c.kind != data.kind);
+
+    // Add
     changes.value.push({
         type: 'addPictureBase64',
         mime: data.mime,