diff --git a/dashboard/src/components/AppInstallDialog.vue b/dashboard/src/components/AppInstallDialog.vue
index 2d7c78052..182c0d257 100644
--- a/dashboard/src/components/AppInstallDialog.vue
+++ b/dashboard/src/components/AppInstallDialog.vue
@@ -1,6 +1,6 @@
 <template>
-  <Dialog ref="dialogHandle" :show-x="true" @close="step = STEP.DETAILS">
-    <div class="content">
+  <Dialog ref="dialogHandle" @close="onClose()">
+    <div class="content" :class="{ 'step-detail': step === STEP.DETAILS, 'step-install': step === STEP.INSTALL }">
       <div class="header">
         <div class="summary">
           <div class="title">{{ manifest.title }}</div>
@@ -172,6 +172,10 @@ async function submit() {
   }
 }
 
+function onClose() {
+  setTimeout(() => step.value = STEP.DETAILS, 2000);
+}
+
 onMounted(async () => {
   domains.value = await domainsModel.list();
   const config = await dashboardModel.getConfig();
@@ -211,19 +215,26 @@ defineExpose({
 
 .slide-left-enter-from {
   opacity: 0;
-  transform: translateX(30px);
+  transform: translateY(50px);
 }
 
 .slide-left-leave-to {
   opacity: 0;
-  transform: translateX(-30px);
+  transform: translateY(-50px);
 }
 
 .content {
-  width: 1024px;
   max-width: 100%;
-  height: 1024px;
   max-height: 100%;
+  transition: all 0.2s;
+}
+
+.step-detail {
+  width: 1024px;
+}
+
+.step-install {
+  width: 480px;
 }
 
 .header {