diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index 85b3cad5f..2e86c6d18 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -48,7 +48,7 @@ import { provide, type InjectionKey, ref, watch, shallowReactive, computed, watc
 import { Project } from '@/models/project'
 import type { UserInfo } from '@/stores/user'
 import SpxEditor from './SpxEditor.vue'
-import SpxStage from './stage/SpxStage.vue'
+import SpxStage from './preview/SpxStage.vue'
 import EditorPanels from './panels/EditorPanels.vue'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/editor/SpxEditor.vue b/spx-gui/src/components/editor/SpxEditor.vue
index 42d0e82fc..36c45d867 100644
--- a/spx-gui/src/components/editor/SpxEditor.vue
+++ b/spx-gui/src/components/editor/SpxEditor.vue
@@ -1,12 +1,14 @@
 <template>
   <SoundEditor v-if="editorCtx.selected?.type === 'sound'" />
-  <SpriteEditor v-if="editorCtx.selectedSprite != null" :sprite="editorCtx.selectedSprite" />
+  <SpriteEditor v-else-if="editorCtx.selectedSprite != null" :sprite="editorCtx.selectedSprite" />
+  <StageEditor v-else-if="editorCtx.selected?.type === 'stage'" :stage="editorCtx.project.stage" />
   <div v-else>TODO</div>
 </template>
 
 <script setup lang="ts">
 import SoundEditor from './sound/SoundEditor.vue'
 import SpriteEditor from './sprite/SpriteEditor.vue'
+import StageEditor from './stage/StageEditor.vue'
 import { useEditorCtx } from './ProjectEditor.vue'
 
 const editorCtx = useEditorCtx()
diff --git a/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue b/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
index 263996395..3a698985a 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
@@ -7,7 +7,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, effect, computed } from 'vue'
+import { computed } from 'vue'
+import { useFileUrl } from '@/utils/file'
 import { Sprite } from '@/models/sprite'
 
 const props = defineProps<{
@@ -19,13 +20,7 @@ const emit = defineEmits<{
   remove: []
 }>()
 
-const imgSrc = ref<string | null>(null)
-
-effect(async () => {
-  const img = props.sprite.costume?.img
-  imgSrc.value = img != null ? await img.url() : null // TODO: race condition
-})
-
+const imgSrc = useFileUrl(() => props.sprite.costume?.img)
 const imgStyle = computed(() => imgSrc.value && { backgroundImage: `url("${imgSrc.value}")` })
 </script>
 
diff --git a/spx-gui/src/components/editor/panels/stage/BackdropList.vue b/spx-gui/src/components/editor/panels/stage/BackdropList.vue
deleted file mode 100644
index b177daf9b..000000000
--- a/spx-gui/src/components/editor/panels/stage/BackdropList.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<!--
- * @Author: Xu Ning
- * @Date: 2024-01-18 17:08:16
- * @LastEditors: xuning 453594138@qq.com
- * @LastEditTime: 2024-03-13 14:46:09
- * @FilePath: /builder/spx-gui/src/components/sprite-list/BackdropList.vue
- * @Description: 
--->
-<template>
-  <div class="stage-list">
-    <div class="stage-list-space">
-      <AssetAddBtn :type="AssetType.Backdrop" />
-      <ImageCardCom :type="'bg'" :asset="editorCtx.project.stage" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ImageCardCom from '../todo/ImageCardCom.vue'
-import AssetAddBtn from '../todo/AssetAddBtn.vue'
-import { useEditorCtx } from '@/components/editor/ProjectEditor.vue'
-import { AssetType } from '@/apis/asset'
-
-const editorCtx = useEditorCtx()
-</script>
-
-<style scoped lang="scss">
-.stage-list {
-  text-align: center;
-  height: calc(100% - 20px);
-  padding: 10px;
-  .stage-list-space {
-    margin: 0 10px;
-    overflow-y: auto;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/stage/StageEdit.vue b/spx-gui/src/components/editor/panels/stage/StageEdit.vue
deleted file mode 100644
index e020ca951..000000000
--- a/spx-gui/src/components/editor/panels/stage/StageEdit.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
- * @Author: Xu Ning
- * @Date: 2024-01-18 17:08:16
- * @LastEditors: xuning 453594138@qq.com
- * @LastEditTime: 2024-03-13 15:07:40
- * @FilePath: /builder/spx-gui/src/components/sprite-list/BackdropList.vue
- * @Description: 
--->
-<template>
-  <div class="stage-list">
-    <div
-      :class="!editorCtx.selectedSprite ? 'stage-list-title-click' : 'stage-list-title'"
-      @click="enableEditEntryCode"
-    >
-      {{ $t('stage.stage') }}
-    </div>
-    <BackdropList />
-  </div>
-</template>
-
-<script setup lang="ts">
-import BackdropList from './BackdropList.vue'
-import { useEditorCtx } from '@/components/editor/ProjectEditor.vue'
-
-const editorCtx = useEditorCtx()
-
-const enableEditEntryCode = () => {
-  editorCtx.select('stage')
-}
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/theme.scss';
-@mixin stageListTitleBase {
-  padding: 10px 0;
-  cursor: pointer;
-}
-.stage-list {
-  text-align: center;
-  height: calc(100% - 20px);
-  .stage-list-title {
-    @include stageListTitleBase;
-  }
-  .stage-list-title-click {
-    @include stageListTitleBase;
-    background: $base-color;
-    color: white;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/stage/StagePanel.vue b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
index 589ff98b0..298ca5a6c 100644
--- a/spx-gui/src/components/editor/panels/stage/StagePanel.vue
+++ b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
@@ -1,15 +1,122 @@
 <template>
-  <div class="stage-panel">
-    <StageEdit />
-  </div>
+  <section class="stage-panel">
+    <header class="header">
+      {{ _t({ en: 'Stage', zh: '舞台' }) }}
+    </header>
+    <main class="main">
+      <NDropdown trigger="hover" :options="options" @select="handleOption">
+        <div class="overview" :class="{ active: isSelected }" @click="select">
+          <div class="img" :style="imgStyle"></div>
+        </div>
+      </NDropdown>
+    </main>
+    <footer>
+      <!-- Entry for "add to library", its appearance or position may change later -->
+      <NButton v-if="backdrop != null" @click="handleAddToLibrary()">Add to library</NButton>
+    </footer>
+  </section>
 </template>
 
 <script setup lang="ts">
-import StageEdit from './StageEdit.vue'
+import { computed } from 'vue'
+import { NDropdown, NButton } from 'naive-ui'
+import { useAddAssetFromLibrary, useAddAssetToLibrary } from '@/components/library'
+import { useMessageHandle } from '@/utils/exception'
+import { useI18n } from '@/utils/i18n'
+import { AssetType } from '@/apis/asset'
+import { selectImg, useFileUrl } from '@/utils/file'
+import { fromNativeFile } from '@/models/common/file'
+import { Backdrop } from '@/models/backdrop'
+import { stripExt } from '@/utils/path'
+import { useEditorCtx } from '../../ProjectEditor.vue'
+
+const { t } = useI18n()
+const editorCtx = useEditorCtx()
+
+const isSelected = computed(() => editorCtx.selected?.type === 'stage')
+
+function select() {
+  editorCtx.select('stage')
+}
+
+const backdrop = computed(() => editorCtx.project.stage.backdrop)
+const imgSrc = useFileUrl(() => backdrop.value?.img)
+const imgStyle = computed(() => imgSrc.value && { backgroundImage: `url("${imgSrc.value}")` })
+
+const handleUpload = useMessageHandle(
+  async () => {
+    const img = await selectImg()
+    const file = fromNativeFile(img)
+    const backdrop = new Backdrop(stripExt(img.name), file)
+    editorCtx.project.stage.setBackdrop(backdrop)
+  },
+  { en: 'Upload failed', zh: '上传失败' }
+)
+
+const addAssetFromLibrary = useAddAssetFromLibrary()
+
+const options = computed(() => {
+  return [
+    {
+      key: 'upload',
+      label: t({ en: 'Upload', zh: '上传' }),
+      handler: handleUpload
+    },
+    {
+      key: 'fromLibrary',
+      label: t({ en: 'Choose from asset library', zh: '从素材库选择' }),
+      handler: () => addAssetFromLibrary(editorCtx.project, AssetType.Backdrop)
+    }
+  ]
+})
+
+function handleOption(key: string) {
+  for (const option of options.value) {
+    if (option.key === key) {
+      option.handler()
+      return
+    }
+  }
+  throw new Error(`unknown option key: ${key}`)
+}
+
+const addToLibrary = useAddAssetToLibrary()
+
+function handleAddToLibrary() {
+  addToLibrary(backdrop.value!)
+}
 </script>
 
 <style scoped lang="scss">
 .stage-panel {
   border: 1px solid #333;
 }
+
+.header {
+  padding: 0.5em 1em;
+}
+
+.overview {
+  display: flex;
+  flex-direction: column;
+  width: 80px;
+  height: fit-content;
+  padding: 6px;
+  position: relative;
+  align-items: center;
+  border: 1px solid #333;
+
+  &.active {
+    border-color: yellow;
+    background-color: yellow;
+  }
+}
+
+.img {
+  width: 100%;
+  height: 68px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
 </style>
diff --git a/spx-gui/src/components/editor/panels/todo/AssetAddBtn.vue b/spx-gui/src/components/editor/panels/todo/AssetAddBtn.vue
index 0e609a262..617711d30 100644
--- a/spx-gui/src/components/editor/panels/todo/AssetAddBtn.vue
+++ b/spx-gui/src/components/editor/panels/todo/AssetAddBtn.vue
@@ -267,7 +267,7 @@ const beforeUpload = async (
           message.error(t('message.image'))
           return false
         }
-        editorCtx.project.stage.addBackdrop(new Backdrop(assetName, file))
+        editorCtx.project.stage.setBackdrop(new Backdrop(assetName, file))
         break
       }
       case 'sound': {
diff --git a/spx-gui/src/components/editor/panels/todo/ImageCardCom.vue b/spx-gui/src/components/editor/panels/todo/ImageCardCom.vue
deleted file mode 100644
index ed1a0d76a..000000000
--- a/spx-gui/src/components/editor/panels/todo/ImageCardCom.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
- * @Author: Xu Ning
- * @Date: 2024-01-18 17:11:19
- * @LastEditors: xuning 453594138@qq.com
- * @LastEditTime: 2024-03-13 12:21:45
- * @FilePath: \spx-gui\src\components\sprite-list\ImageCardCom.vue
- * @Description:
--->
-<template>
-  <div
-    v-if="props.type === 'sprite'"
-    :class="computedProperties.cardClassName"
-    :style="{ boxShadow: active ? '0px 0px 0px 4px #FF81A7' : undefined }"
-  >
-    <div class="delete-button" @click="deleteSprite(props.asset as Sprite)">×</div>
-    <n-image
-      preview-disabled
-      :width="computedProperties.imageWidth"
-      :height="computedProperties.imageHeight"
-      :src="spriteUrl"
-      :fallback-src="error"
-    />
-    {{ (props.asset as Sprite).name }}
-  </div>
-  <div
-    v-for="(backdrop, index) in backdrops"
-    v-else
-    :key="index"
-    :class="computedProperties.cardClassName"
-    :style="index == 0 ? firstBackdropStyle : ''"
-    @click.stop="() => topBackdrop(backdrop.name)"
-  >
-    <div class="delete-button" @click.stop="() => deleteBackdrop(backdrop.name)">×</div>
-    <n-image
-      preview-disabled
-      :width="computedProperties.imageWidth"
-      :height="computedProperties.imageHeight"
-      :src="backdrop.url"
-      :fallback-src="error"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-// ----------Import required packages / components-----------
-import { defineProps, computed, ref, effect } from 'vue'
-import { NImage } from 'naive-ui'
-import { Stage } from '@/models/stage'
-import type { Sprite } from '@/models/sprite'
-import error from '@/assets/error.svg'
-import { useEditorCtx } from '@/components/editor/ProjectEditor.vue'
-
-// ----------props & emit------------------------------------
-interface PropType {
-  type: 'sprite' | 'bg' // TODO: split the component
-  asset: Sprite | Stage
-  active?: boolean
-}
-const props = defineProps<PropType>()
-const editorCtx = useEditorCtx()
-const firstBackdropStyle = { 'box-shadow': '0px 0px 0px 4px #FF81A7' }
-
-// ----------computed properties-----------------------------
-const computedProperties = computed(() => {
-  if (props.type === 'bg') {
-    return {
-      cardClassName: 'bg-list-card',
-      imageWidth: 40,
-      imageHeight: 40
-    }
-  }
-  return {
-    cardClassName: 'sprite-list-card',
-    imageWidth: 75,
-    imageHeight: 75
-  }
-})
-
-const spriteUrl = ref('')
-const backdrops = ref<Array<{ name: string; url: string }>>([])
-
-effect(async () => {
-  if (props.type === 'bg') {
-    backdrops.value = await Promise.all(
-      (props.asset as Stage).backdrops.map(async (backdrop) => {
-        const url = await backdrop.img.url()
-        return { name: backdrop.name, url }
-      })
-    )
-  } else {
-    // TODO: use costume index instead of the 1st costume
-    spriteUrl.value = await (props.asset as Sprite).costumes[0].img.url()
-  }
-})
-
-// ----------methods-----------------------------------------
-const deleteSprite = (sprite: Sprite) => {
-  editorCtx.project.removeSprite(sprite.name)
-}
-
-const deleteBackdrop = (name: string) => {
-  editorCtx.project.stage.removeBackdrop(name)
-}
-
-const topBackdrop = (name: string) => {
-  editorCtx.project.stage.topBackdrop(name)
-}
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/theme.scss';
-
-@mixin listCardBase {
-  margin: 10px auto;
-  border-radius: 20px;
-  box-shadow: 0 0 5px $sprite-list-card-box-shadow;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: visible; // show x button
-  cursor: pointer;
-
-  .delete-button {
-    position: absolute;
-    top: -5px;
-    right: -10px;
-    background-color: $sprite-list-card-close-button;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    color: $sprite-list-card-close-button-x;
-    border: 2px solid $sprite-list-card-close-button-border;
-  }
-}
-
-.bg-list-card {
-  @include listCardBase;
-  width: 60px;
-  height: 60px;
-
-  .delete-button {
-    width: 15px;
-    height: 15px;
-    font-size: 20px;
-  }
-}
-
-.sprite-list-card {
-  @include listCardBase;
-  width: 110px;
-  height: 110px;
-
-  .delete-button {
-    width: 30px;
-    height: 30px;
-    font-size: 40px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/RunnerContainer.vue b/spx-gui/src/components/editor/preview/RunnerContainer.vue
similarity index 100%
rename from spx-gui/src/components/editor/stage/RunnerContainer.vue
rename to spx-gui/src/components/editor/preview/RunnerContainer.vue
diff --git a/spx-gui/src/components/editor/stage/SpxStage.vue b/spx-gui/src/components/editor/preview/SpxStage.vue
similarity index 100%
rename from spx-gui/src/components/editor/stage/SpxStage.vue
rename to spx-gui/src/components/editor/preview/SpxStage.vue
diff --git a/spx-gui/src/components/editor/stage/stage-viewer/BackdropLayer.vue b/spx-gui/src/components/editor/preview/stage-viewer/BackdropLayer.vue
similarity index 69%
rename from spx-gui/src/components/editor/stage/stage-viewer/BackdropLayer.vue
rename to spx-gui/src/components/editor/preview/stage-viewer/BackdropLayer.vue
index 2c7af06d4..d2b459fb2 100644
--- a/spx-gui/src/components/editor/stage/stage-viewer/BackdropLayer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/BackdropLayer.vue
@@ -25,7 +25,8 @@
   </v-layer>
 </template>
 <script setup lang="ts">
-import { defineProps, watch, ref } from 'vue'
+import { defineProps } from 'vue'
+import { useImgFile } from '@/utils/file'
 import type { Stage } from '@/models/stage'
 import type { Size } from '@/models/common'
 
@@ -35,18 +36,5 @@ const props = defineProps<{
   stage: Stage
 }>()
 
-const image = ref<HTMLImageElement>()
-
-watch(
-  () => props.stage.backdrop?.img,
-  async (backdropImg) => {
-    image.value?.remove()
-    if (backdropImg != null) {
-      const _image = new window.Image()
-      _image.src = await backdropImg.url()
-      image.value = _image
-    }
-  },
-  { immediate: true }
-)
+const image = useImgFile(() => props.stage.backdrop?.img)
 </script>
diff --git a/spx-gui/src/components/editor/stage/stage-viewer/Costume.vue b/spx-gui/src/components/editor/preview/stage-viewer/Costume.vue
similarity index 92%
rename from spx-gui/src/components/editor/stage/stage-viewer/Costume.vue
rename to spx-gui/src/components/editor/preview/stage-viewer/Costume.vue
index 9ea8a91e4..b5bea8adf 100644
--- a/spx-gui/src/components/editor/stage/stage-viewer/Costume.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/Costume.vue
@@ -35,6 +35,8 @@ import type { Sprite } from '@/models/sprite'
 import type { SpriteDragMoveEvent, SpriteApperanceChangeEvent } from './common'
 import type { Rect } from 'konva/lib/shapes/Rect'
 import type { Size } from '@/models/common'
+import { useImgFile } from '@/utils/file'
+
 // ----------props & emit------------------------------------
 const props = defineProps<{
   sprite: Sprite
@@ -57,7 +59,7 @@ const displayScale = computed(
 )
 
 // ----------data related -----------------------------------
-const image = ref<HTMLImageElement>()
+const image = useImgFile(() => currentCostume.value?.img)
 const costume = ref()
 // ----------computed properties-----------------------------
 // Computed spx's sprite position to konva's relative position by about changing sprite postion
@@ -88,24 +90,6 @@ watch(
   }
 )
 
-watch(
-  () => currentCostume.value,
-  async (new_costume) => {
-    if (new_costume != null) {
-      const _image = new window.Image()
-      _image.src = await new_costume.img.url()
-      _image.onload = () => {
-        image.value = _image
-      }
-    } else {
-      image.value?.remove()
-    }
-  },
-  {
-    immediate: true
-  }
-)
-
 // ----------methods-----------------------------------------
 /**
  * @description: map spx's sprite position to konva's relative position
diff --git a/spx-gui/src/components/editor/stage/stage-viewer/Sprite.vue b/spx-gui/src/components/editor/preview/stage-viewer/Sprite.vue
similarity index 100%
rename from spx-gui/src/components/editor/stage/stage-viewer/Sprite.vue
rename to spx-gui/src/components/editor/preview/stage-viewer/Sprite.vue
diff --git a/spx-gui/src/components/editor/stage/stage-viewer/SpriteLayer.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteLayer.vue
similarity index 100%
rename from spx-gui/src/components/editor/stage/stage-viewer/SpriteLayer.vue
rename to spx-gui/src/components/editor/preview/stage-viewer/SpriteLayer.vue
diff --git a/spx-gui/src/components/editor/stage/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
similarity index 100%
rename from spx-gui/src/components/editor/stage/stage-viewer/StageViewer.vue
rename to spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
diff --git a/spx-gui/src/components/editor/stage/stage-viewer/common.ts b/spx-gui/src/components/editor/preview/stage-viewer/common.ts
similarity index 100%
rename from spx-gui/src/components/editor/stage/stage-viewer/common.ts
rename to spx-gui/src/components/editor/preview/stage-viewer/common.ts
diff --git a/spx-gui/src/components/editor/stage/stage-viewer/index.ts b/spx-gui/src/components/editor/preview/stage-viewer/index.ts
similarity index 100%
rename from spx-gui/src/components/editor/stage/stage-viewer/index.ts
rename to spx-gui/src/components/editor/preview/stage-viewer/index.ts
diff --git a/spx-gui/src/components/editor/stage/StageEditor.vue b/spx-gui/src/components/editor/stage/StageEditor.vue
new file mode 100644
index 000000000..13fc4d1cc
--- /dev/null
+++ b/spx-gui/src/components/editor/stage/StageEditor.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="stage-editor">
+    <SpxCodeEditor :value="stage.code" @change="(v) => stage.setCode(v)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Stage } from '@/models/stage'
+import SpxCodeEditor from '../spx-code-editor/SpxCodeEditor.vue'
+
+defineProps<{
+  stage: Stage
+}>()
+</script>
+
+<style scoped></style>
diff --git a/spx-gui/src/components/library/AssetLibrary.vue b/spx-gui/src/components/library/AssetLibrary.vue
index 1a953fba0..3c95f4df3 100644
--- a/spx-gui/src/components/library/AssetLibrary.vue
+++ b/spx-gui/src/components/library/AssetLibrary.vue
@@ -132,7 +132,7 @@ const addAssetToProject = useMessageHandle(
       }
       case AssetType.Backdrop: {
         const backdrop = await asset2Backdrop(asset)
-        project.stage.addBackdrop(backdrop)
+        project.stage.setBackdrop(backdrop)
         break
       }
       case AssetType.Sound: {
diff --git a/spx-gui/src/models/common/asset.ts b/spx-gui/src/models/common/asset.ts
index c511999d0..a53ba5145 100644
--- a/spx-gui/src/models/common/asset.ts
+++ b/spx-gui/src/models/common/asset.ts
@@ -99,7 +99,7 @@ export function validateSoundName(name: string, project: Project | null) {
 export function validateBackdropName(name: string, stage: Stage | null) {
   const err = validateAssetName(name)
   if (err != null) return err
-  if (stage != null && stage.backdrops.find((b) => b.name === name))
+  if (stage != null && stage._backdrops.find((b) => b.name === name))
     return { en: `Backdrop with name ${name} already exists`, zh: '存在同名的背景' }
 }
 
diff --git a/spx-gui/src/models/common/disposable.ts b/spx-gui/src/models/common/disposable.ts
index fc6355fb0..64e4ec835 100644
--- a/spx-gui/src/models/common/disposable.ts
+++ b/spx-gui/src/models/common/disposable.ts
@@ -5,7 +5,7 @@
 
 export type Disposer = () => void
 
-export abstract class Disposble {
+export class Disposble {
   _disposers: Disposer[] = []
 
   addDisposer(disposer: Disposer) {
diff --git a/spx-gui/src/models/common/file.ts b/spx-gui/src/models/common/file.ts
index 3853898fb..10221edde 100644
--- a/spx-gui/src/models/common/file.ts
+++ b/spx-gui/src/models/common/file.ts
@@ -5,6 +5,8 @@
 
 import { getMimeFromExt } from '@/utils/file'
 import { extname } from '@/utils/path'
+import type { Disposer } from './disposable'
+import { Cancelled } from '@/utils/exception'
 
 export type Options = {
   /** MIME type of file */
@@ -40,10 +42,16 @@ export class File {
     }))
   }
 
-  // TODO: remember to do URL.revokeObjectURL
-  async url() {
+  async url(onCleanup: (disposer: Disposer) => void) {
+    let cancelled = false
+    onCleanup(() => {
+      cancelled = true
+    })
     const ab = await this.arrayBuffer()
-    return URL.createObjectURL(new Blob([ab]))
+    if (cancelled) throw new Cancelled()
+    const url = URL.createObjectURL(new Blob([ab]))
+    onCleanup(() => URL.revokeObjectURL(url))
+    return url
   }
 }
 
diff --git a/spx-gui/src/models/costume.ts b/spx-gui/src/models/costume.ts
index 4e1967e8b..3a4a688e5 100644
--- a/spx-gui/src/models/costume.ts
+++ b/spx-gui/src/models/costume.ts
@@ -5,6 +5,7 @@ import { File, type Files } from './common/file'
 import { type Size } from './common'
 import type { Sprite } from './sprite'
 import { getCostumeName, validateCostumeName } from './common/asset'
+import { Disposble } from './common/disposable'
 
 export type CostumeInits = {
   x?: number
@@ -57,21 +58,23 @@ export class Costume {
   }
 
   async getSize() {
-    const imgUrl = await this.img.url()
+    const d = new Disposble()
+    const imgUrl = await this.img.url((fn) => d.addDisposer(fn))
     return new Promise<Size>((resolve, reject) => {
       const img = new window.Image()
+      d.addDisposer(() => img.remove())
       img.src = imgUrl
       img.onload = () => {
         resolve({
           width: img.width / this.bitmapResolution,
           height: img.height / this.bitmapResolution
         })
-        img.remove()
       }
       img.onerror = (e) => {
         reject(new Error(`load image failed: ${e.toString()}`))
-        img.remove()
       }
+    }).finally(() => {
+      d.dispose()
     })
   }
 
diff --git a/spx-gui/src/models/stage.ts b/spx-gui/src/models/stage.ts
index baf2e44bf..cba3d2185 100644
--- a/spx-gui/src/models/stage.ts
+++ b/spx-gui/src/models/stage.ts
@@ -47,36 +47,55 @@ export class Stage {
     this.code = code
   }
 
-  backdrops: Backdrop[]
-  backdropIndex: number
   get backdrop(): Backdrop | null {
-    return this.backdrops[this.backdropIndex] ?? null
+    return this._backdrops[this._backdropIndex] ?? null
   }
-  setbackdropIndex(backdropIndex: number) {
-    this.backdropIndex = backdropIndex
+  /**
+   * Set given backdrop to stage.
+   * Note: the backdrop's name may be altered to avoid conflict
+   */
+  setBackdrop(backdrop: Backdrop) {
+    for (const b of this._backdrops) {
+      this.removeBackdrop(b.name)
+    }
+    this._addBackdrop(backdrop)
   }
   removeBackdrop(name: string) {
-    const idx = this.backdrops.findIndex((s) => s.name === name)
-    const [backdrop] = this.backdrops.splice(idx, 1)
+    const idx = this._backdrops.findIndex((s) => s.name === name)
+    const [backdrop] = this._backdrops.splice(idx, 1)
     backdrop.setStage(null)
-    // TODO: `this.backdropIndex`?
+    if (this._backdropIndex === idx) {
+      this._setBackdropIndex(0)
+    }
+  }
+
+  // Currently we support at most one backdrop, so
+  // * fields like `backdrops`、`backdropIndex`
+  // * methods like `setBackdropIndex`、`addBackdrop`、`topBackdrop`
+  // are marked private to prevent usage from outside of models.
+  // Instead, we offer `setBackdrop` to manipulate backdrops.
+
+  _backdrops: Backdrop[]
+  _backdropIndex: number
+  _setBackdropIndex(backdropIndex: number) {
+    this._backdropIndex = backdropIndex
   }
   /**
    * Add given backdrop to stage.
    * Note: the backdrop's name may be altered to avoid conflict
    */
-  addBackdrop(backdrop: Backdrop) {
+  _addBackdrop(backdrop: Backdrop) {
     const newName = getBackdropName(this, backdrop.name)
     backdrop.setName(newName)
     backdrop.setStage(this)
-    this.backdrops.push(backdrop)
+    this._backdrops.push(backdrop)
     // TODO: `this.backdropIndex`?
   }
-  topBackdrop(name: string) {
-    const idx = this.backdrops.findIndex((s) => s.name === name)
+  _topBackdrop(name: string) {
+    const idx = this._backdrops.findIndex((s) => s.name === name)
     if (idx < 0) throw new Error(`backdrop ${name} not found`)
-    const [backdrop] = this.backdrops.splice(idx, 1)
-    this.backdrops.unshift(backdrop)
+    const [backdrop] = this._backdrops.splice(idx, 1)
+    this._backdrops.unshift(backdrop)
     // TODO: relation to `this.backdropIndex`?
   }
 
@@ -109,8 +128,8 @@ export class Stage {
 
   constructor(code = '', inits?: Partial<StageInits>) {
     this.code = code
-    this.backdrops = []
-    this.backdropIndex = inits?.backdropIndex ?? 0
+    this._backdrops = []
+    this._backdropIndex = inits?.backdropIndex ?? 0
     this.mapWidth = inits?.mapWidth
     this.mapHeight = inits?.mapHeight
     this.mapMode = getMapMode(inits?.mapMode)
@@ -134,7 +153,7 @@ export class Stage {
     })
     const backdrops = (sceneConfigs ?? []).map((c) => Backdrop.load(c, files))
     for (const backdrop of backdrops) {
-      stage.addBackdrop(backdrop)
+      stage._addBackdrop(backdrop)
     }
     return stage
   }
@@ -145,12 +164,12 @@ export class Stage {
     if (this.code !== '') {
       files[stageCodeFilePath] = fromText(stageCodeFileName, this.code)
     }
-    for (const backdrop of this.backdrops) {
+    for (const backdrop of this._backdrops) {
       const [backdropConfig, backdropFiles] = backdrop.export()
       backdropConfigs.push(backdropConfig)
       Object.assign(files, backdropFiles)
     }
-    const { backdropIndex, mapWidth, mapHeight, mapMode } = this
+    const { _backdropIndex: backdropIndex, mapWidth, mapHeight, mapMode } = this
     const config: RawStageConfig = {
       scenes: backdropConfigs,
       sceneIndex: backdropIndex,
diff --git a/spx-gui/src/utils/file.ts b/spx-gui/src/utils/file.ts
index f453f3f0c..b8f3cc007 100644
--- a/spx-gui/src/utils/file.ts
+++ b/spx-gui/src/utils/file.ts
@@ -1,3 +1,6 @@
+import { ref, watch, type WatchSource } from 'vue'
+import type { File } from '@/models/common/file'
+
 /**
  * Map file extension to mime type.
  */
@@ -32,7 +35,7 @@ export type FileSelectOptions = {
 }
 
 function _selectFile({ accept = '', multiple = false }: FileSelectOptions) {
-  return new Promise<File[]>((resolve) => {
+  return new Promise<globalThis.File[]>((resolve) => {
     const input = document.createElement('input')
     input.type = 'file'
     input.accept = accept
@@ -59,8 +62,47 @@ export function selectFiles(options?: Omit<FileSelectOptions, 'multiple'>) {
   return _selectFile({ ...options, multiple: true })
 }
 
+/** Let the user select single image */
+export function selectImg() {
+  const accept = imgExts.map((ext) => `.${ext}`).join(',')
+  return selectFile({ accept })
+}
+
 /** Let the user select multiple images */
 export function selectImgs() {
   const accept = imgExts.map((ext) => `.${ext}`).join(',')
   return selectFiles({ accept })
 }
+
+/** Get url for File */
+export function useFileUrl(fileSource: WatchSource<File | undefined>) {
+  const urlRef = ref<string | null>(null)
+  watch(
+    fileSource,
+    (file, _, onCleanup) => {
+      if (file == null) return
+      file.url(onCleanup).then((url) => {
+        urlRef.value = url
+      })
+    },
+    { immediate: true }
+  )
+  return urlRef
+}
+
+export function useImgFile(fileSource: WatchSource<File | undefined>) {
+  const urlRef = useFileUrl(fileSource)
+  const imgRef = ref<HTMLImageElement | null>(null)
+  watch(urlRef, (url, _, onCleanup) => {
+    onCleanup(() => {
+      imgRef.value?.remove()
+      imgRef.value = null
+    })
+    if (url != null) {
+      const img = new window.Image()
+      img.src = url
+      imgRef.value = img
+    }
+  })
+  return imgRef
+}