diff --git a/change/@acedatacloud-nexior-71dd2841-5a15-4d66-8a1c-3721ea51f0bc.json b/change/@acedatacloud-nexior-71dd2841-5a15-4d66-8a1c-3721ea51f0bc.json
new file mode 100644
index 00000000..b22868cb
--- /dev/null
+++ b/change/@acedatacloud-nexior-71dd2841-5a15-4d66-8a1c-3721ea51f0bc.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "opt luma",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/luma/OperationPanel.vue b/src/components/luma/OperationPanel.vue
index 62a5f38c..66b8633a 100644
--- a/src/components/luma/OperationPanel.vue
+++ b/src/components/luma/OperationPanel.vue
@@ -7,7 +7,7 @@
       <div class="actions">
         <el-button type="primary" class="btn w-full" round @click="onGenerate">
           <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
-          {{ $t('qrart.button.generate') }}
+          {{ $t('luma.button.generate') }}
         </el-button>
       </div>
     </el-card>
diff --git a/src/components/luma/config/PromptInput.vue b/src/components/luma/config/PromptInput.vue
index fbeb36b7..8aa74b89 100644
--- a/src/components/luma/config/PromptInput.vue
+++ b/src/components/luma/config/PromptInput.vue
@@ -29,9 +29,6 @@ export default defineComponent({
     ElInput,
     InfoIcon
   },
-  data() {
-    return {};
-  },
   computed: {
     prompt: {
       get() {
@@ -60,11 +57,15 @@ export default defineComponent({
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: space-between; // Add this line to move the icon to the right
     position: relative;
     .title {
       font-size: 14px;
       margin-bottom: 10px;
     }
   }
+  .info {
+    margin-left: auto; // Ensure the icon stays on the right
+  }
 }
 </style>
diff --git a/src/components/luma/task/Detail.vue b/src/components/luma/task/Detail.vue
deleted file mode 100644
index a6e592d4..00000000
--- a/src/components/luma/task/Detail.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div v-if="task" class="detail">
-    <el-row class="h-full">
-      <el-col :span="24" class="h-full">
-        <el-row class="h-full main">
-          <el-col :span="12" class="h-full p-4">
-            <el-image
-              v-if="task?.response?.image_url"
-              :src="task?.response?.image_url"
-              :preview-src-list="[task?.response?.image_url as string]"
-              class="image"
-              fit="contain"
-              @error="onReload($event)"
-            />
-            <el-alert v-else-if="task?.response?.success === false" :closable="false" class="failure">
-              <template #template>
-                <font-awesome-icon icon="fa-solid fa-exclamation-triangle" class="mr-1" />
-                {{ $t('qrart.name.failure') }}
-              </template>
-              <p class="description">
-                <font-awesome-icon icon="fa-solid fa-circle-info" class="mr-1" />
-                {{ $t('qrart.name.failureReason') }}:
-                {{ task?.response?.error?.message }}
-                <copy-to-clipboard :content="task?.response?.error?.message!" class="btn-copy" />
-              </p>
-              <p class="description">
-                <font-awesome-icon icon="fa-solid fa-hashtag" class="mr-1" />
-                {{ $t('qrart.name.traceId') }}:
-                {{ task?.response?.trace_id }}
-                <copy-to-clipboard :content="task?.response?.trace_id" class="btn-copy" />
-              </p>
-            </el-alert>
-            <el-image v-else class="image error">
-              <template #error>
-                <div class="image-slot">{{ $t('qrart.message.generating') }}</div>
-              </template>
-            </el-image>
-          </el-col>
-          <el-col :span="12" class="h-full overflow-scroll">
-            <el-descriptions title="" :column="1">
-              <el-descriptions-item :label="$t('qrart.name.taskId')">
-                {{ task?.id }}
-                <copy-to-clipboard :content="task?.id" class="btn-copy" />
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('qrart.name.type')">
-                {{ task?.request?.type }}
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('qrart.name.content')">
-                {{ task?.request?.content }}
-                <copy-to-clipboard :content="task?.request?.content!" class="btn-copy" />
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('qrart.name.prompt')">
-                {{ task?.request?.prompt }}
-                <copy-to-clipboard v-if="task?.request?.prompt" :content="task?.request?.prompt" class="btn-copy" />
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('qrart.name.size')">
-                {{ task?.response?.image_width }} x {{ task?.response?.image_height }}
-              </el-descriptions-item>
-              <el-descriptions-item v-if="task?.created_at" :label="$t('qrart.name.createdAt')">
-                {{ $dayjs.format('' + new Date(parseFloat(task?.created_at) * 1000)) }}
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('qrart.name.seed')">
-                {{ task?.request?.seed || task?.response?.seed }}
-                <copy-to-clipboard
-                  v-if="task?.request?.seed || task?.response?.seed"
-                  :content="task?.request?.seed || task?.response?.seed"
-                  class="btn-copy"
-                />
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('qrart.name.steps')">
-                {{ task?.request?.steps }}
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('qrart.name.qrw')">
-                {{ task?.request?.qrw }}
-              </el-descriptions-item>
-              <el-descriptions-item :label="$t('qrart.name.preset')">
-                {{ task?.request?.preset }}
-              </el-descriptions-item>
-            </el-descriptions>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { ElImage, ElRow, ElCol, ElDescriptions, ElDescriptionsItem, ElAlert } from 'element-plus';
-import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-export default defineComponent({
-  name: 'TaskDetail',
-  components: {
-    ElImage,
-    ElAlert,
-    FontAwesomeIcon,
-    CopyToClipboard,
-    ElDescriptions,
-    ElDescriptionsItem,
-    ElRow,
-    ElCol
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    application() {
-      return this.$store.state.qrart?.application;
-    },
-    task() {
-      return this.$store.state.qrart?.tasks?.active;
-    }
-  },
-  methods: {
-    onReload(event: Event) {
-      const target = event.target as HTMLImageElement;
-      // append a random url query to existing url query, to force reload the image
-      // extract exiting url query
-      const url = new URL(target.src);
-      // extract `retry` query
-      const retry = url.searchParams.get('retry');
-      if (!retry) {
-        // if no retry query, set it as random string
-        url.searchParams.set('retry', '1');
-      } else if (parseInt(retry) < 2) {
-        // if retry < 3, increase it by 1
-        url.searchParams.set('retry', (parseInt(retry) + 1).toString());
-      } else {
-        return;
-      }
-      // set the new url
-      target.src = url.toString();
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.detail {
-  height: 100%;
-  padding: 5px 0;
-  .main {
-    padding: 15px;
-    border: 1px solid var(--el-border-color);
-    border-radius: 15px;
-  }
-
-  .image {
-    height: 100%;
-    display: block;
-    margin: auto;
-  }
-}
-</style>
-
-<style lang="scss">
-.detail {
-  .image.error {
-    background: var(--el-bg-color-page);
-    .image-slot {
-      font-size: 18px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-  .failure {
-    background: var(--el-fill-color-light);
-    height: 100%;
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/components/luma/task/Preview.vue b/src/components/luma/task/Preview.vue
index a9b941a4..d0865fdd 100644
--- a/src/components/luma/task/Preview.vue
+++ b/src/components/luma/task/Preview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="preview">
     <div class="left">
-      <el-image src="https://cdn.acedata.cloud/yu04pc.png" class="avatar" />
+      <el-image src="https://cdn.acedata.cloud/ahjfwi.png" class="avatar" />
     </div>
     <div class="main">
       <div class="bot">
@@ -70,7 +70,14 @@
         </el-alert>
       </div>
       <!-- Display error message -->
-      <div v-if="!modelValue?.response" :class="{ content: true }">
+      <div
+        v-if="
+          !modelValue?.response ||
+          modelValue?.response?.data?.state === 'processing' ||
+          modelValue?.response?.data?.state === 'pending'
+        "
+        :class="{ content: true }"
+      >
         <el-alert :closable="false" class="info">
           <template #template>
             <font-awesome-icon icon="fa-solid fa-exclamation-triangle" class="mr-1" />
@@ -182,7 +189,7 @@ $left-width: 70px;
   .left {
     width: $left-width;
     .avatar {
-      background-color: white;
+      background-color: rgb(0, 0, 0);
       padding: 2px;
       width: 50px;
       height: 50px;
diff --git a/src/constants/luma.ts b/src/constants/luma.ts
index 8539f955..d4e5dd45 100644
--- a/src/constants/luma.ts
+++ b/src/constants/luma.ts
@@ -1,5 +1,5 @@
 export const LUMA_SERVICE_ID = 'dff45a0d-2858-4936-8e2b-3d49c52aff11';
 
-export const LUMA_DEFAULT_ENHANCEMENT = false;
+export const LUMA_DEFAULT_ENHANCEMENT = true;
 export const LUMA_DEFAULT_LOOP = false;
 export const LUMA_DEFAULT_CUSTOM = false;
diff --git a/src/i18n/zh-CN/index.json b/src/i18n/zh-CN/index.json
index 1aa719af..ee1b57e8 100644
--- a/src/i18n/zh-CN/index.json
+++ b/src/i18n/zh-CN/index.json
@@ -47,6 +47,10 @@
     "message": "支持多种音乐风格，轻松生成你想要的音乐，并支持灵活的长度扩展选项。",
     "description": "AI 音乐章节标题"
   },
+  "subtitle.luma": {
+    "message": "对接最新的 Luma 模型，一键生成自定义的视频，并支持灵活的视频扩展选项。",
+    "description": "AI 音乐章节标题"
+  },
   "subtitle.comments": {
     "message": "我们很高兴能够帮助这些客户，他们对我们的服务给予了很高的评价。",
     "description": "客户评价章节标题"
diff --git a/src/i18n/zh-CN/luma.json b/src/i18n/zh-CN/luma.json
index b22caf9e..6a11856f 100644
--- a/src/i18n/zh-CN/luma.json
+++ b/src/i18n/zh-CN/luma.json
@@ -80,7 +80,7 @@
     "description": "要生成的 QR 码的高级设置"
   },
   "name.custom": {
-    "message": "自定义扩展",
+    "message": "自定义视频扩展",
     "description": "自定义扩展视频"
   },
   "name.extend": {
diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
index 41bca09c..78940ff9 100644
--- a/src/pages/index/Index.vue
+++ b/src/pages/index/Index.vue
@@ -49,7 +49,7 @@
           <el-col
             v-for="(capability, capabilityIndex) in capabilities"
             :key="capabilityIndex"
-            :md="24 / capabilities.length"
+            :md="6"
             :xs="24"
             class="mb-4"
           >
@@ -166,6 +166,31 @@
         </el-row>
       </div>
     </div>
+    <div
+      id="luma"
+      class="block"
+      @click="
+        $router.push({
+          path: '/luma'
+        })
+      "
+    >
+      <div class="container">
+        <el-row>
+          <el-col :md="16" :xs="24" class="preview">
+            <img src="https://cdn.acedata.cloud/gyogar.png" class="image desktop" />
+            <img src="https://cdn.acedata.cloud/5kunm0.png" class="image mobile" />
+          </el-col>
+          <el-col :md="8" :xs="24" class="info">
+            <h2 class="title">{{ $t('index.title.luma') }}</h2>
+            <p class="subtitle">{{ $t('index.subtitle.luma') }}</p>
+            <el-button type="primary" round class="btn-try">
+              {{ $t('index.button.try') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
     <div id="comments">
       <div class="container">
         <el-row class="mb-6">
@@ -287,6 +312,15 @@ export default defineComponent({
                 icon: 'fa-solid fa-music'
               }
             ]
+          : []),
+        ...(this.site?.features?.luma?.enabled
+          ? [
+              {
+                title: this.$t('index.title.luma'),
+                subtitle: this.$t('index.subtitle.luma'),
+                icon: 'fa-solid fa-film'
+              }
+            ]
           : [])
       ];
     }