diff --git a/xmcl-keystone-ui/src/composables/appDropHandler.ts b/xmcl-keystone-ui/src/composables/appDropHandler.ts
index 9b594f3b6..0cf9e1850 100644
--- a/xmcl-keystone-ui/src/composables/appDropHandler.ts
+++ b/xmcl-keystone-ui/src/composables/appDropHandler.ts
@@ -77,16 +77,12 @@ export function useAppDropHandler() {
   const { previewUrl } = useService(ImportServiceKey)
 
   const iconMap: Record<string, string> = {
-    forge: '$vuetify.icons.package',
-    fabric: '$vuetify.icons.fabric',
+    mods: '$vuetify.icons.package',
     unclassified: 'question_mark',
-    resourcepack: '$vuetify.icons.zip',
-    shaderpack: '$vuetify.icons.zip',
-    'curseforge-modpack': '$vuetify.icons.curseforge',
-    modpack: '$vuetify.icons.package',
-    'mcbbs-modpack': '$vuetify.icons.package',
-    save: '$vuetify.icons.zip',
-    'modrinth-modpack': '$vuetify.icons.modrinth',
+    resourcepacks: '$vuetify.icons.zip',
+    shaderpacks: '$vuetify.icons.zip',
+    modpacks: '$vuetify.icons.package',
+    saves: '$vuetify.icons.zip',
   }
 
   function getDescription(rsize: number | undefined, url: string) {
@@ -138,6 +134,21 @@ export function useAppDropHandler() {
   }
 
   function getIcon(resource: Resource | undefined) {
+    if (resource?.metadata['curseforge-modpack']) {
+      return '$vuetify.icons.curseforge'
+    }
+    if (resource?.metadata['modrinth-modpack']) {
+      return '$vuetify.icons.modrinth'
+    }
+    if (resource?.metadata['mcbbs-modpack']) {
+      return '$vuetify.icons.package'
+    }
+    if (resource?.metadata.forge) {
+      return '$vuetify.icons.forge'
+    }
+    if (resource?.metadata.fabric) {
+      return '$vuetify.icons.fabric'
+    }
     return resource ? iconMap[resource.domain] ?? 'question_mark' : 'question_mark'
   }
 
diff --git a/xmcl-keystone-ui/src/composables/instances.ts b/xmcl-keystone-ui/src/composables/instances.ts
index bb163ee9d..501e292c1 100644
--- a/xmcl-keystone-ui/src/composables/instances.ts
+++ b/xmcl-keystone-ui/src/composables/instances.ts
@@ -68,7 +68,6 @@ export function useInstances() {
   }
   watch(state, async (newVal, oldVal) => {
     if (!newVal) return
-    debugger
     if (!oldVal) {
       // initialize
       const instances = [...newVal.instances]
diff --git a/xmcl-keystone-ui/src/views/AppExportDialog.vue b/xmcl-keystone-ui/src/views/AppExportDialog.vue
index 080108492..7a9278355 100644
--- a/xmcl-keystone-ui/src/views/AppExportDialog.vue
+++ b/xmcl-keystone-ui/src/views/AppExportDialog.vue
@@ -7,9 +7,9 @@
     scrollable
     width="800"
   >
-    <v-card>
+    <v-card class="rounded-none">
       <v-toolbar
-        class="moveable flex-1 flex-grow-0"
+        class="moveable flex-1 flex-grow-0 rounded-none"
         tabs
         color="green en"
       >
@@ -268,6 +268,7 @@
           </InstanceManifestFileTree>
         </v-layout>
       </div>
+      <div class="flex-grow" />
       <v-card-actions class="items-baseline gap-5">
         <v-btn
           text