diff --git a/spx-gui/src/components/editor/common/placeholder/EditorPlaceholder.vue b/spx-gui/src/components/editor/common/placeholder/EditorPlaceholder.vue
index 58eae5384..59cc484c3 100644
--- a/spx-gui/src/components/editor/common/placeholder/EditorPlaceholder.vue
+++ b/spx-gui/src/components/editor/common/placeholder/EditorPlaceholder.vue
@@ -1,13 +1,11 @@
 <!--
   Placeholder when no target (sprite/sound/stage) selected
-  TODO: extract as UI component when there is another similar case
 -->
 
 <template>
-  <div class="editor-placeholder">
-    <img :src="placeholderImg" />
-    <p class="text">{{ $t({ en: 'Add a sprite to start', zh: '添加一个精灵' }) }}</p>
-    <div class="op">
+  <UIEmpty size="extra-large">
+    {{ $t({ en: 'Add a sprite to start', zh: '添加一个精灵' }) }}
+    <template #op>
       <UIButton
         type="boring"
         size="large"
@@ -30,17 +28,16 @@
         </template>
         {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
       </UIButton>
-    </div>
-  </div>
+    </template>
+  </UIEmpty>
 </template>
 
 <script setup lang="ts">
-import { UIButton } from '@/components/ui'
+import { UIEmpty, UIButton } from '@/components/ui'
 import { useAddAssetFromLibrary, useAddSpriteFromLocalFile } from '@/components/asset'
 import { useMessageHandle } from '@/utils/exception'
 import { AssetType } from '@/apis/asset'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
-import placeholderImg from './placeholder.svg'
 import localFileImg from './local-file.svg'
 import assetLibraryImg from './asset-library.svg'
 
@@ -60,28 +57,6 @@ const handleAddFromAssetLibrary = useMessageHandle(
 </script>
 
 <style scoped lang="scss">
-.editor-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.text {
-  margin-top: 4px;
-  color: var(--ui-color-grey-700);
-  font-size: 16px;
-  line-height: 26px;
-}
-
-.op {
-  margin-top: 32px;
-  display: flex;
-  gap: var(--ui-gap-large);
-}
-
 .icon {
   width: 24px;
   height: 24px;
diff --git a/spx-gui/src/components/editor/sprite/AnimationEditor.vue b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
index cff44b9bd..aa2b93d46 100644
--- a/spx-gui/src/components/editor/sprite/AnimationEditor.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
@@ -1,5 +1,16 @@
 <template>
-  <EditorList color="sprite" :add-text="$t({ en: 'Add costume', zh: '添加造型' })">
+  <UIEmpty v-if="sprite.animations.length === 0" size="extra-large">
+    {{ $t({ en: 'No animations', zh: '没有动画' }) }}
+    <template #op>
+      <UIButton type="boring" size="large" @click="handleGroupCostumes">
+        <template #icon>
+          <img class="icon" :src="galleryIcon" />
+        </template>
+        {{ $t({ en: 'Group costumes as animation', zh: '将造型合并为动画' }) }}
+      </UIButton>
+    </template>
+  </UIEmpty>
+  <EditorList v-else color="sprite" :add-text="$t({ en: 'Add costume', zh: '添加造型' })">
     <AnimationItem
       v-for="animation in sprite.animations"
       :key="animation.name"
@@ -22,35 +33,34 @@
 </template>
 
 <script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
 import type { Sprite } from '@/models/sprite'
 import EditorList from '../common/EditorList.vue'
-import { UIMenu, UIMenuItem, useModal } from '@/components/ui'
-import { shallowRef, watch } from 'vue'
+import { UIMenu, UIMenuItem, useModal, UIEmpty, UIButton } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
 import AnimationDetail from './AnimationDetail.vue'
 import GroupCostumesModal from '@/components/asset/animation/GroupCostumesModal.vue'
 import { useEditorCtx } from '../EditorContextProvider.vue'
 import { Animation } from '@/models/animation'
 import AnimationItem from './AnimationItem.vue'
-import { useMessageHandle } from '@/utils/exception'
+import galleryIcon from './gallery.svg'
 
 const props = defineProps<{
   sprite: Sprite
 }>()
 
-const selectedAnimation = shallowRef<Animation | null>(props.sprite.animations[0] || null)
-
 const editorCtx = useEditorCtx()
 
-const groupCostumes = useModal(GroupCostumesModal)
+const selectedAnimation = shallowRef<Animation | null>(props.sprite.animations[0] || null)
 
-watch(
-  () => props.sprite,
-  (sprite) => {
-    if (!(selectedAnimation.value && sprite.animations.includes(selectedAnimation.value))) {
-      selectedAnimation.value = sprite.animations[0] || null
-    }
+watchEffect(() => {
+  if (selectedAnimation.value == null) return
+  if (!props.sprite.animations.includes(selectedAnimation.value)) {
+    selectedAnimation.value = props.sprite.animations[0] ?? null
   }
-)
+})
+
+const groupCostumes = useModal(GroupCostumesModal)
 
 const handleGroupCostumes = useMessageHandle(
   async () => {
@@ -60,20 +70,22 @@ const handleGroupCostumes = useMessageHandle(
 
     editorCtx.project.history.doAction(
       {
-        name: { en: `Group costumes as animation`, zh: `将造型合并为动画` }
+        name: { en: 'Group costumes as animation', zh: '将造型合并为动画' }
       },
       () => {
         const animation = Animation.create(
           '',
-          props.sprite,
           selectedCostumes.map((costume) => costume.clone())
         )
         props.sprite.addAnimation(animation)
         if (removeCostumes) {
-          for (const costume of selectedCostumes) {
-            props.sprite.removeCostume(costume.name)
+          for (let i = selectedCostumes.length - 1; i >= 0; i--) {
+            // Do not remove the last costume
+            if (props.sprite.costumes.length <= 1) break
+            props.sprite.removeCostume(selectedCostumes[i].name)
           }
         }
+        selectedAnimation.value = animation
       }
     )
   },
@@ -84,6 +96,10 @@ const handleGroupCostumes = useMessageHandle(
 ).fn
 </script>
 <style scoped lang="scss">
+.icon {
+  width: 24px;
+  height: 24px;
+}
 .background {
   width: 100%;
   height: 100%;
diff --git a/spx-gui/src/components/editor/sprite/AnimationItem.vue b/spx-gui/src/components/editor/sprite/AnimationItem.vue
index 645d31506..02fb7a516 100644
--- a/spx-gui/src/components/editor/sprite/AnimationItem.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationItem.vue
@@ -2,17 +2,11 @@
   <EditorItem :selected="selected" color="sprite">
     <UIImg class="img" :src="imgSrc" :loading="imgLoading" />
     <EditorItemName class="name">{{ animation.name }}</EditorItemName>
-    <UICornerIcon
-      v-show="selected && removable"
-      color="sprite"
-      type="trash"
-      @click.stop="handelRemove"
-    />
+    <UICornerIcon v-show="selected" color="sprite" type="trash" @click.stop="handelRemove" />
   </EditorItem>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { UIImg, UICornerIcon, useModal } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
 import type { Sprite } from '@/models/sprite'
@@ -32,8 +26,6 @@ const props = defineProps<{
 const editorCtx = useEditorCtx()
 const [imgSrc, imgLoading] = useFileUrl(() => props.animation.costumes[0].img)
 
-const removable = computed(() => props.sprite.costumes.length > 1)
-
 const removeAnimation = useModal(AnimationRemoveModal)
 
 const handelRemove = useMessageHandle(
diff --git a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
index 1d1608e97..eb03407dd 100644
--- a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
@@ -1,7 +1,7 @@
 <template>
   <UIFormModal
-    style="width: 512px"
-    :title="$t({ en: 'Remove animation', zh: '移除动画' })"
+    style="width: 560px"
+    :title="$t({ en: 'Remove animation', zh: '删除动画' })"
     :visible="visible"
     @update:visible="emit('cancelled')"
   >
@@ -10,11 +10,11 @@
         {{
           $t({
             en: `Animation ${animation.name} will be removed. Do you want to preserve the costumes?`,
-            zh: `动画 ${animation.name} 将被移除。是否保留其中的造型？`
+            zh: `动画 ${animation.name} 将被删除。是否保留其中的造型？`
           })
         }}
       </div>
-      <UICheckbox v-model:checked="preserveCostumes">
+      <UICheckbox v-model:checked="preserveCostumes" class="checkbox">
         {{
           $t({
             en: "Preserve (the costumes will be moved to the sprite's costume list)",
@@ -59,7 +59,7 @@ const handleConfirm = async () => {
     {
       name: {
         en: `Remove animation ${props.animation.name}`,
-        zh: `移除动画 ${props.animation.name}`
+        zh: `删除动画 ${props.animation.name}`
       }
     },
     () => {
@@ -76,6 +76,9 @@ const handleConfirm = async () => {
 }
 </script>
 <style scoped lang="scss">
+.checkbox {
+  margin-top: 20px;
+}
 .action {
   margin-top: 40px;
   display: flex;
diff --git a/spx-gui/src/components/editor/sprite/SpriteEditor.vue b/spx-gui/src/components/editor/sprite/SpriteEditor.vue
index 66ff9b605..fe5ff7017 100644
--- a/spx-gui/src/components/editor/sprite/SpriteEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteEditor.vue
@@ -3,7 +3,7 @@
     <UITabs v-model:value="selectedTab" color="sprite">
       <UITab value="code">{{ $t({ en: 'Code', zh: '代码' }) }}</UITab>
       <UITab value="costumes">{{ $t({ en: 'Costumes', zh: '造型' }) }}</UITab>
-      <UITab value="animation">{{ $t({ en: 'Animation', zh: '动画' }) }}</UITab>
+      <UITab value="animations">{{ $t({ en: 'Animations', zh: '动画' }) }}</UITab>
     </UITabs>
     <template #extra>
       <FormatButton
@@ -20,8 +20,8 @@
     @update:value="handleCodeUpdate"
   />
   <CostumesEditor v-show="selectedTab === 'costumes'" :sprite="sprite" />
-  <!-- We use v-if to prevent the animation from running in the background -->
-  <AnimationEditor v-if="selectedTab === 'animation'" :sprite="sprite" />
+  <!-- We use v-if to prevent AnimationEditor from running in the background -->
+  <AnimationEditor v-if="selectedTab === 'animations'" :sprite="sprite" />
 </template>
 
 <script setup lang="ts">
@@ -40,7 +40,7 @@ const props = defineProps<{
 }>()
 
 const editorCtx = useEditorCtx()
-const selectedTab = ref<'code' | 'costumes' | 'animation'>('code')
+const selectedTab = ref<'code' | 'costumes' | 'animations'>('code')
 const codeEditor = ref<InstanceType<typeof CodeEditor>>()
 const code = computed(() => props.sprite.code)
 
diff --git a/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue b/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
index a67abf7d1..ced1143cc 100644
--- a/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/DurationEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <UIDropdownModal
-    :title="$t({ en: 'Adjust duration', zh: '调整时长' })"
+    :title="$t(actionName)"
     style="width: 280px"
     @cancel="emit('close')"
     @confirm="handleConfirm"
@@ -16,6 +16,7 @@
 import { ref } from 'vue'
 import type { Animation } from '@/models/animation'
 import { UIDropdownModal, UINumberInput } from '@/components/ui'
+import { useEditorCtx } from '../../EditorContextProvider.vue'
 
 const props = defineProps<{
   animation: Animation
@@ -25,10 +26,14 @@ const emit = defineEmits<{
   close: []
 }>()
 
+const editorCtx = useEditorCtx()
+const actionName = { en: 'Adjust animation duration', zh: '调整动画时长' }
 const duration = ref(props.animation.duration)
 
-function handleConfirm() {
-  props.animation.setDuration(duration.value)
+async function handleConfirm() {
+  await editorCtx.project.history.doAction({ name: actionName }, () => {
+    props.animation.setDuration(duration.value)
+  })
   emit('close')
 }
 </script>
diff --git a/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
index b5348fe54..a70c32226 100644
--- a/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/sound/SoundEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <UIDropdownModal
-    :title="$t({ en: 'Select sound', zh: '选择声音' })"
+    :title="$t(actionName)"
     style="width: 320px; max-height: 400px"
     @cancel="emit('close')"
     @confirm="handleConfirm"
@@ -63,8 +63,9 @@ const emit = defineEmits<{
 
 const editorCtx = useEditorCtx()
 
+const actionName = { en: 'Select sound', zh: '选择声音' }
 const selected = ref(props.animation.sound)
-function handleSoundClick(sound: string) {
+async function handleSoundClick(sound: string) {
   selected.value = selected.value === sound ? null : sound
 }
 
@@ -97,8 +98,10 @@ function handleRecorded(sound: Sound) {
   selected.value = sound.name
 }
 
-function handleConfirm() {
-  props.animation.setSound(selected.value)
+async function handleConfirm() {
+  await editorCtx.project.history.doAction({ name: actionName }, () =>
+    props.animation.setSound(selected.value)
+  )
   emit('close')
 }
 </script>
diff --git a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
index c743ce3b4..ba6e819f9 100644
--- a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
@@ -2,7 +2,7 @@
 
 <template>
   <UIDropdownModal
-    :title="$t({ en: 'Bind state', zh: '绑定状态' })"
+    :title="$t(actionName)"
     style="width: 320px"
     @cancel="emit('close')"
     @confirm="handleConfirm"
@@ -44,6 +44,7 @@ import { ref } from 'vue'
 import type { Animation } from '@/models/animation'
 import { type Sprite, State } from '@/models/sprite'
 import { UIDropdownModal, UICornerIcon, UIBlockItem } from '@/components/ui'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import iconStateDefault from './default.svg?raw'
 import iconStateStep from './step.svg?raw'
 import iconStateDie from './die.svg?raw'
@@ -57,6 +58,8 @@ const emit = defineEmits<{
   close: []
 }>()
 
+const editorCtx = useEditorCtx()
+const actionName = { en: 'Bind state', zh: '绑定状态' }
 const boundStates = ref(props.sprite.getAnimationBoundStates(props.animation.name))
 
 function isBound(state: State) {
@@ -69,8 +72,10 @@ function handleStateItemClick(state: State) {
     : [...boundStates.value, state]
 }
 
-function handleConfirm() {
-  props.sprite.setAnimationBoundStates(props.animation.name, boundStates.value)
+async function handleConfirm() {
+  await editorCtx.project.history.doAction({ name: actionName }, () => {
+    props.sprite.setAnimationBoundStates(props.animation.name, boundStates.value)
+  })
   emit('close')
 }
 </script>
diff --git a/spx-gui/src/components/editor/sprite/gallery.svg b/spx-gui/src/components/editor/sprite/gallery.svg
new file mode 100644
index 000000000..95ac6b9e7
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/gallery.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M22.448 7.60798L21.248 16.189C21.091 17.282 20.664 18.058 19.991 18.501C19.758 18.621 19.5031 18.5001 19.5031 18.2571V9.66609C19.5031 7.05709 17.9451 5.49909 15.3361 5.49909C15.3361 5.49909 6.22395 5.49909 5.92395 5.49909C5.62395 5.49909 5.61694 5.22896 5.63794 5.10896C5.79594 4.16296 6.17 3.46295 6.75 3.02595C7.357 2.56895 8.17702 2.41005 9.19202 2.55305L19.7531 4.03303C20.7701 4.17703 21.518 4.55809 21.976 5.16609C22.433 5.77309 22.592 6.59498 22.448 7.60798ZM18.002 9.66511V18.3331C18.002 20.1111 17.113 21.0001 15.335 21.0001H4.66699C2.88899 21.0001 2 20.1111 2 18.3331V9.66511C2 7.88711 2.88899 6.99812 4.66699 6.99812H15.335C17.114 6.99812 18.002 7.88711 18.002 9.66511ZM13.25 14.0001C13.25 13.5861 12.914 13.2501 12.5 13.2501H10.75V11.5001C10.75 11.0861 10.414 10.7501 10 10.7501C9.586 10.7501 9.25 11.0861 9.25 11.5001V13.2501H7.5C7.086 13.2501 6.75 13.5861 6.75 14.0001C6.75 14.4141 7.086 14.7501 7.5 14.7501H9.25V16.5001C9.25 16.9141 9.586 17.2501 10 17.2501C10.414 17.2501 10.75 16.9141 10.75 16.5001V14.7501H12.5C12.914 14.7501 13.25 14.4141 13.25 14.0001Z" fill="#6E7781"/>
+</svg>
diff --git a/spx-gui/src/components/ui/empty/UIEmpty.vue b/spx-gui/src/components/ui/empty/UIEmpty.vue
index 06a4ad9a3..1e110c24c 100644
--- a/spx-gui/src/components/ui/empty/UIEmpty.vue
+++ b/spx-gui/src/components/ui/empty/UIEmpty.vue
@@ -1,64 +1,76 @@
 <template>
-  <div v-if="size === 'large'" class="ui-empty" :class="[`size-${size}`]">
-    <img :src="emptyImg" />
-    <slot></slot>
-    <template v-if="!slots.default">
-      {{ defaultText }}
+  <div class="ui-empty" :class="[`size-${size}`]">
+    <template v-if="size === 'large'">
+      <img :src="emptyImg" />
+      <slot></slot>
+      <template v-if="!slots.default">
+        {{ defaultText }}
+      </template>
     </template>
-  </div>
-  <div v-else class="ui-empty" :class="[`size-${size}`]">
-    <svg
-      v-if="size === 'medium'"
-      class="line"
-      width="36"
-      height="2"
-      viewBox="0 0 36 2"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1 1H9"
-        stroke="#EAEFF3"
-        stroke-width="1.56"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M15 1H35"
-        stroke="#EAEFF3"
-        stroke-width="1.56"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-    <slot></slot>
-    <template v-if="!slots.default">
-      {{ defaultText }}
+    <template v-else-if="size === 'extra-large'">
+      <img :src="emptyXlImg" />
+      <p class="text">
+        <slot></slot>
+        <template v-if="!slots.default">
+          {{ defaultText }}
+        </template>
+      </p>
+      <div class="op"><slot name="op"></slot></div>
+    </template>
+    <template v-else>
+      <svg
+        v-if="size === 'medium'"
+        class="line"
+        width="36"
+        height="2"
+        viewBox="0 0 36 2"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1 1H9"
+          stroke="#EAEFF3"
+          stroke-width="1.56"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 1H35"
+          stroke="#EAEFF3"
+          stroke-width="1.56"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <slot></slot>
+      <template v-if="!slots.default">
+        {{ defaultText }}
+      </template>
+      <svg
+        v-if="size === 'medium'"
+        class="line"
+        width="36"
+        height="2"
+        viewBox="0 0 36 2"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1 1H21"
+          stroke="#EAEFF3"
+          stroke-width="1.56"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M27 1H35"
+          stroke="#EAEFF3"
+          stroke-width="1.56"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
     </template>
-    <svg
-      v-if="size === 'medium'"
-      class="line"
-      width="36"
-      height="2"
-      viewBox="0 0 36 2"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1 1H21"
-        stroke="#EAEFF3"
-        stroke-width="1.56"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M27 1H35"
-        stroke="#EAEFF3"
-        stroke-width="1.56"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
   </div>
 </template>
 
@@ -66,9 +78,10 @@
 import { computed, useSlots } from 'vue'
 import { useConfig } from '../UIConfigProvider.vue'
 import emptyImg from './empty.svg'
+import emptyXlImg from './empty-xl.svg'
 
 defineProps<{
-  size: 'small' | 'medium' | 'large'
+  size: 'small' | 'medium' | 'large' | 'extra-large'
 }>()
 
 const config = useConfig()
@@ -96,6 +109,23 @@ const slots = useSlots()
   color: var(--ui-color-grey-1000);
 }
 
+.size-extra-large {
+  flex-direction: column;
+
+  .text {
+    margin-top: 4px;
+    color: var(--ui-color-grey-700);
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  .op {
+    margin-top: 24px;
+    display: flex;
+    gap: var(--ui-gap-large);
+  }
+}
+
 .size-small,
 .size-medium {
   color: var(--ui-color-grey-600);
diff --git a/spx-gui/src/components/editor/common/placeholder/placeholder.svg b/spx-gui/src/components/ui/empty/empty-xl.svg
similarity index 99%
rename from spx-gui/src/components/editor/common/placeholder/placeholder.svg
rename to spx-gui/src/components/ui/empty/empty-xl.svg
index 496c2e62a..d7599478a 100644
--- a/spx-gui/src/components/editor/common/placeholder/placeholder.svg
+++ b/spx-gui/src/components/ui/empty/empty-xl.svg
@@ -56,4 +56,4 @@
   <path d="M61.25 35H63.75C64.0815 35 64.3995 35.1317 64.6339 35.3661C64.8683 35.6005 65 35.9185 65 36.25V37.5C65 37.8315 64.8683 38.1495 64.6339 38.3839C64.3995 38.6183 64.0815 38.75 63.75 38.75H61.25V35Z" fill="#FBE8C2" stroke="black" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M61.25 23.75H65V26.25C65 26.913 64.7366 27.5489 64.2678 28.0178C63.7989 28.4866 63.163 28.75 62.5 28.75H61.25V23.75Z" fill="black" stroke="black" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M63.75 20H68.75C69.413 20 70.0489 20.2634 70.5178 20.7322C70.9866 21.2011 71.25 21.837 71.25 22.5V23.75H61.25V22.5C61.25 21.837 61.5134 21.2011 61.9822 20.7322C62.4511 20.2634 63.087 20 63.75 20Z" fill="#E62234" stroke="black" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/spx-gui/src/models/animation.test.ts b/spx-gui/src/models/animation.test.ts
new file mode 100644
index 000000000..0508608a0
--- /dev/null
+++ b/spx-gui/src/models/animation.test.ts
@@ -0,0 +1,82 @@
+import { nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { fromText } from './common/file'
+import { Project } from './project'
+import { Sprite } from './sprite'
+import { Costume } from './costume'
+import { Sound } from './sound'
+import { Animation } from './animation'
+
+function mockFile(name = 'mocked') {
+  return fromText(name, Math.random() + '')
+}
+
+function makeProject() {
+  const project = new Project()
+  const sprite = new Sprite('Sprite')
+  const costume = new Costume('default', mockFile())
+  sprite.addCostume(costume)
+  const animationCostumes = Array.from({ length: 3 }, (_, i) => new Costume(`a${i}`, mockFile()))
+  const animation = Animation.create('default', animationCostumes)
+  sprite.addAnimation(animation)
+  const sound = new Sound('sound', mockFile())
+  project.addSprite(sprite)
+  project.addSound(sound)
+  return project
+}
+
+describe('Animation', () => {
+  it('should work well', () => {
+    const project = makeProject()
+    const sprite = project.sprites[0]
+    const animation = sprite.animations[0]
+    expect(animation.name).toBe('default')
+    expect(animation.costumes.length).toBe(3)
+    expect(animation.duration).toBe(3 / 10)
+    expect(animation.sound).toBeNull()
+
+    animation.setDuration(1)
+    expect(animation.duration).toBe(1)
+  })
+
+  it('should work well with sound', () => {
+    const project = makeProject()
+    const sprite = project.sprites[0]
+    const animation = sprite.animations[0]
+    animation.setSound(project.sounds[0].name)
+    expect(animation.sound).toBe(project.sounds[0].name)
+
+    const sound2 = new Sound('sound2', mockFile())
+    project.addSound(sound2)
+    animation.setSound(sound2.name)
+    expect(animation.sound).toBe(sound2.name)
+
+    animation.setSound(null)
+    expect(animation.sound).toBeNull()
+
+    animation.setSound(project.sounds[0].name)
+    expect(animation.sound).toBe(project.sounds[0].name)
+  })
+
+  it('should work well with sound renaming', async () => {
+    const project = makeProject()
+    const sprite = project.sprites[0]
+    const animation = sprite.animations[0]
+    animation.setSound(project.sounds[0].name)
+    await nextTick()
+    project.sounds[0].setName('newSound')
+    await nextTick()
+    expect(animation.sound).toBe('newSound')
+  })
+
+  it('should work well with sound deletion', async () => {
+    const project = makeProject()
+    const sprite = project.sprites[0]
+    const animation = sprite.animations[0]
+    animation.setSound(project.sounds[0].name)
+    await nextTick()
+    project.removeSound(project.sounds[0].name)
+    await nextTick()
+    expect(animation.sound).toBeNull()
+  })
+})
diff --git a/spx-gui/src/models/animation.ts b/spx-gui/src/models/animation.ts
index 07174ba1d..24abfbadf 100644
--- a/spx-gui/src/models/animation.ts
+++ b/spx-gui/src/models/animation.ts
@@ -1,13 +1,14 @@
-import { reactive } from 'vue'
+import { reactive, watch } from 'vue'
 
-import type { Sprite } from './sprite'
 import {
   ensureValidCostumeName,
   getAnimationName,
   validateAnimationName
 } from './common/asset-name'
-import type { Costume, RawCostumeConfig } from './costume'
+import { Disposble } from './common/disposable'
 import type { Files } from './common/file'
+import type { Costume, RawCostumeConfig } from './costume'
+import type { Sprite } from './sprite'
 
 enum AniType {
   frame = 0,
@@ -23,7 +24,7 @@ type ActionConfig = {
   costumes?: unknown
 }
 
-const defaultFps = 25 // TODO
+const defaultFps = 10
 
 export type AnimationInits = {
   duration?: number
@@ -41,7 +42,7 @@ export type RawAnimationConfig = AnimationInits & {
   to?: number | string
 }
 
-export class Animation {
+export class Animation extends Disposble {
   private sprite: Sprite | null = null
   setSprite(sprite: Sprite | null) {
     this.sprite = sprite
@@ -85,19 +86,6 @@ export class Animation {
     }
   }
 
-  /**
-   * Ungroup costumes, which will be added back to sprite.
-   * Typically called before the animation removed from the sprite.
-   */
-  ungroup() {
-    if (this.sprite == null) throw new Error('sprite expected')
-    const costumes = this.costumes
-    this.setCostumes([])
-    for (const costume of costumes) {
-      this.sprite.addCostume(costume)
-    }
-  }
-
   duration: number
   setDuration(duration: number) {
     this.duration = duration
@@ -108,24 +96,52 @@ export class Animation {
     this.sound = sound
   }
 
+  init() {
+    // update `this.sound` when sound removed or renamed
+    // TODO: there are quite some similar logic to deal with such references among models, we may introduce model `ID` to simplify that
+    this.addDisposer(
+      watch(
+        () => this.sprite?.project?.sounds.find((s) => s.name === this.sound),
+        (sound, _, onCleanup) => {
+          if (sound == null) {
+            this.sound = null
+            return
+          }
+          const stopWatch = watch(
+            () => sound.name,
+            (newName) => {
+              this.sound = newName
+            },
+            { flush: 'sync' }
+          ) // `flush: 'sync'` to ensure the watcher is triggered before being cleaned up
+          onCleanup(stopWatch)
+        },
+        { immediate: true }
+      )
+    )
+  }
+
   constructor(name: string, inits?: AnimationInits) {
+    super()
     this.name = name
     this.costumes = []
-    this.duration = inits?.duration ?? 5
+    this.duration = inits?.duration ?? 0
     this.sound = inits?.onStart?.play ?? null
 
     for (const field of ['fps', 'isLoop', 'onPlay'] as const) {
       if (inits?.[field] != null) console.warn(`unsupported field: ${field} for sprite ${name}`)
     }
 
-    return reactive(this) as this
+    const self = reactive(this) as this
+    self.init()
+    return self
   }
 
   /**
    * Create instance with default inits
    * Note that the "default" means default behavior for builder, not the default behavior of spx
    */
-  static create(nameBase: string, sprite: Sprite, costumes: Costume[], inits?: AnimationInits) {
+  static create(nameBase: string, costumes: Costume[], inits?: AnimationInits) {
     const animation = new Animation(getAnimationName(null, nameBase), inits)
     animation.setCostumes(costumes)
     return animation
diff --git a/spx-gui/src/models/sprite.ts b/spx-gui/src/models/sprite.ts
index 7c544d06c..65223124c 100644
--- a/spx-gui/src/models/sprite.ts
+++ b/spx-gui/src/models/sprite.ts
@@ -3,7 +3,7 @@
  * @desc Object-model definition for Sprite & Costume
  */
 
-import { reactive } from 'vue'
+import { reactive, watch } from 'vue'
 import { join } from '@/utils/path'
 import { fromText, type Files, fromConfig, toText, toConfig, listDirs } from './common/file'
 import { Disposble } from './common/disposable'
@@ -69,7 +69,7 @@ function getSpriteCodeFileName(name: string) {
 export const spriteConfigFileName = 'index.json'
 
 export class Sprite extends Disposble {
-  private project: Project | null = null
+  project: Project | null = null
   setProject(project: Project | null) {
     this.project = project
   }
@@ -128,6 +128,7 @@ export class Sprite extends Disposble {
     if (idx === -1) throw new Error(`animation ${name} not found`)
     const [animation] = this.animations.splice(idx, 1)
     animation.setSprite(null)
+    animation.dispose()
   }
   /**
    * Add given animation to sprite.
@@ -137,7 +138,24 @@ export class Sprite extends Disposble {
     const newAnimationName = ensureValidAnimationName(animation.name, this)
     animation.setName(newAnimationName)
     animation.setSprite(this)
+    animation.addDisposer(() => animation.setSprite(null))
     this.animations.push(animation)
+    animation.addDisposer(
+      // update animationBindings when sprite renamed
+      watch(
+        () => animation.name,
+        (newName, originalName) => {
+          Object.entries(this.animationBindings).forEach(([state, name]) => {
+            if (name === originalName) this.animationBindings[state as State] = newName
+          })
+        }
+      )
+    )
+    animation.addDisposer(() => {
+      Object.entries(this.animationBindings).forEach(([state, name]) => {
+        if (name === animation.name) this.animationBindings[state as State] = undefined
+      })
+    })
   }
 
   private animationBindings: Record<State, string | undefined>