diff --git a/app/imports/api/creature/creatureFolders/methods.js/reorderCreatureFolder.js b/app/imports/api/creature/creatureFolders/methods.js/reorderCreatureFolder.js
index f57aaa8a..4b309819 100644
--- a/app/imports/api/creature/creatureFolders/methods.js/reorderCreatureFolder.js
+++ b/app/imports/api/creature/creatureFolders/methods.js/reorderCreatureFolder.js
@@ -31,7 +31,7 @@ const reorderCreatureFolder = new ValidatedMethod({
       owner: userId
     }, {
       fields: { order: 1, },
-      sort: { left: -1 }
+      sort: { order: 1 }
     }).forEach((folder, index) => {
       if (folder.order !== index) {
         CreatureFolders.update(_id, { $set: { order: index } })
diff --git a/app/imports/client/ui/creature/creatureList/CreatureFolderHeader.vue b/app/imports/client/ui/creature/creatureList/CreatureFolderHeader.vue
index 4d992fdd..cefb7821 100644
--- a/app/imports/client/ui/creature/creatureList/CreatureFolderHeader.vue
+++ b/app/imports/client/ui/creature/creatureList/CreatureFolderHeader.vue
@@ -13,7 +13,7 @@
         regular
         hide-details
         dense
-        :value="model.name"
+        :value="newName"
         @change="renameFolder"
         @click.native.stop=""
         @input.native.stop=""
@@ -66,28 +66,32 @@
     },
     data(){return {
       renaming: false,
+      newName: this.model?.name,
     }},
     watch: {
       renaming(value){
-        if (!value) return;
-        Vue.nextTick(() => {
-          this.$refs['name-input'].focus();
-        });
+        if (value) {
+          Vue.nextTick(() => {
+            this.$refs['name-input'].focus();
+          });
+        } else if (this.newName && this.newName !== this.model.name) {
+          updateCreatureFolderName.call({
+            _id: this.model._id,
+            name: this.newName
+          }, error => {
+            if (!error) return;
+            console.error(error);
+            snackbar({
+              text: error.reason,
+            });
+          });
+        }
       },
     },
     methods:{
       renameFolder(name, ack){
-        updateCreatureFolderName.call({
-          _id: this.model._id,
-          name
-        }, error => {
-          ack(error);
-          if (!error) return;
-          console.error(error);
-          snackbar({
-            text: error.reason,
-          });
-        });
+        this.newName = name;
+        ack();
       },
       removeFolder(){
         removeCreatureFolder.call({
diff --git a/app/imports/client/ui/creature/creatureList/CreatureFolderList.vue b/app/imports/client/ui/creature/creatureList/CreatureFolderList.vue
index 7bd8152c..5c4806d5 100644
--- a/app/imports/client/ui/creature/creatureList/CreatureFolderList.vue
+++ b/app/imports/client/ui/creature/creatureList/CreatureFolderList.vue
@@ -12,29 +12,34 @@
       :dense="dense"
       @creature-selected="id => $emit('creature-selected', id)"
     />
-    <v-list-group
-      v-for="folder in folders"
-      :key="folder._id"
-      v-model="openFolders[folder._id]"
-      :dense="dense"
+    <v-slide-x-transition
+      group
+      leave-absolute
     >
-      <template #activator>
-        <creature-folder-header
-          :open="openFolders[folder._id]"
-          :model="folder"
-          :selection="selection"
-          :dense="dense"
-        />
-      </template>
-      <creature-list
-        :creatures="folder.creatures"
-        :folder-id="folder._id"
-        :selection="selection"
-        :selected-creature="selectedCreature"
+      <v-list-group
+        v-for="folder in folders"
+        :key="folder._id"
+        v-model="openFolders[folder._id]"
         :dense="dense"
-        @creature-selected="id => $emit('creature-selected', id)"
-      />
-    </v-list-group>
+      >
+        <template #activator>
+          <creature-folder-header
+            :open="openFolders[folder._id]"
+            :model="folder"
+            :selection="selection"
+            :dense="dense"
+          />
+        </template>
+        <creature-list
+          :creatures="folder.creatures"
+          :folder-id="folder._id"
+          :selection="selection"
+          :selected-creature="selectedCreature"
+          :dense="dense"
+          @creature-selected="id => $emit('creature-selected', id)"
+        />
+      </v-list-group>
+    </v-slide-x-transition>
   </v-list>
 </template>
 
diff --git a/app/imports/client/ui/layouts/Sidebar.vue b/app/imports/client/ui/layouts/Sidebar.vue
index 7ab264bd..28f56433 100644
--- a/app/imports/client/ui/layouts/Sidebar.vue
+++ b/app/imports/client/ui/layouts/Sidebar.vue
@@ -113,7 +113,7 @@ export default {
       const userId = Meteor.userId();
       let folders = CreatureFolders.find(
         { owner: userId, archived: { $ne: true } },
-        { sort: { left: 1 } },
+        { sort: { name: 1 } },
       ).map(folder => {
         folder.creatures = Creatures.find(
           {
diff --git a/app/imports/client/ui/pages/CharacterList.vue b/app/imports/client/ui/pages/CharacterList.vue
index f8b1ef46..cd446b80 100644
--- a/app/imports/client/ui/pages/CharacterList.vue
+++ b/app/imports/client/ui/pages/CharacterList.vue
@@ -112,7 +112,7 @@ export default {
       const userId = Meteor.userId();
       let folders = CreatureFolders.find(
         { owner: userId, archived: { $ne: true } },
-        { sort: { left: 1 } },
+        { sort: { name: 1 } },
       ).map(folder => {
         folder.creatures = Creatures.find(
           {