diff --git a/change/@acedatacloud-nexior-3e383e03-d004-417d-8433-96d33f72ed7c.json b/change/@acedatacloud-nexior-3e383e03-d004-417d-8433-96d33f72ed7c.json
new file mode 100644
index 00000000..08bfb504
--- /dev/null
+++ b/change/@acedatacloud-nexior-3e383e03-d004-417d-8433-96d33f72ed7c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update navbar and index bg color",
+  "packageName": "@acedatacloud/nexior",
+  "email": "office@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/index.html b/index.html
index abdaa3bc..73757f40 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-    <title>Nexior</title>
+    <title>Ace Data Cloud</title>
   </head>
   <body>
     <div id="app">
diff --git a/src/components/common/Logo.vue b/src/components/common/Logo.vue
index 99596c31..196132ca 100644
--- a/src/components/common/Logo.vue
+++ b/src/components/common/Logo.vue
@@ -4,17 +4,45 @@
 
 <script lang="ts">
 import { getCookie } from 'typescript-cookie';
-import { defineComponent } from 'vue';
+import { BASE_URL_HUB } from '@/constants';
 
-export default defineComponent({
+export default {
   emits: ['click'],
-  computed: {
+  data() {
+    return {
+      url1: 'https://cdn.acedata.cloud/logo.png/thumb_450x_',
+      url2: 'https://cdn.acedata.cloud/logo2.png/thumb_450x_',
+      dark: getCookie('THEME') === 'dark',
+      url: '',
+      isOfficial: window.location.origin === BASE_URL_HUB,
+      interval: undefined as number | undefined
+    };
+  },
+  watch: {
     dark() {
-      return getCookie('THEME') === 'dark';
+      this.updateUrl();
+    }
+  },
+  mounted() {
+    this.interval = window.setInterval(this.checkCookie, 500);
+    this.updateUrl();
+  },
+  unmounted() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
+  methods: {
+    checkCookie() {
+      this.dark = getCookie('THEME') === 'dark';
     },
-    url() {
-      return this.$store.state.site?.logo;
+    updateUrl() {
+      if (this.isOfficial) {
+        this.url = this.dark ? this.url2 : this.url1;
+      } else {
+        this.url = this.$store.state.site?.logo || '';
+      }
     }
   }
-});
+};
 </script>
diff --git a/src/components/common/TopHeader.vue b/src/components/common/TopHeader.vue
index 0f553c12..14a990f3 100644
--- a/src/components/common/TopHeader.vue
+++ b/src/components/common/TopHeader.vue
@@ -4,7 +4,7 @@
       <logo @click="onHome" />
     </el-col>
     <el-col :md="16" :xs="13">
-      <el-menu :default-active="active" mode="horizontal" :ellipsis="false" @select="onSelect">
+      <el-menu :default-active="active" mode="horizontal" class="menu" :ellipsis="true" @select="onSelect">
         <el-sub-menu :index="1">
           <template #title>{{ $t('common.nav.products') }}</template>
           <el-menu-item v-if="site?.features?.chat?.enabled" v-t="'index.title.chat'" index="/chat"></el-menu-item>
@@ -156,12 +156,14 @@ $height: 60px;
     float: right;
   }
 
-  .el-menu {
+  .el-menu.menu {
     --el-menu-hover-bg-color: var(--el-bg-color);
     --el-menu-active-color: var(--el-color-primary);
     background: none;
     border: none;
     height: $height;
+    min-width: 300px;
+    overflow-x: hidden;
     .el-menu-item {
       height: $height;
       color: inherit !important;
diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
index 6eaa20e7..255d1d52 100644
--- a/src/pages/index/Index.vue
+++ b/src/pages/index/Index.vue
@@ -64,7 +64,7 @@
         </el-row>
       </div>
     </div>
-    <div id="chat" class="block">
+    <div v-if="site?.features?.chat?.enabled" id="chat" class="block">
       <div class="container">
         <el-row>
           <el-col :md="16" :xs="24" class="preview">
@@ -90,7 +90,7 @@
         </el-row>
       </div>
     </div>
-    <div id="midjourney" class="block">
+    <div v-if="site?.features?.midjourney?.enabled" id="midjourney" class="block">
       <div class="container">
         <el-row>
           <el-col :md="8" :xs="24" class="info">
@@ -116,15 +116,7 @@
         </el-row>
       </div>
     </div>
-    <div
-      id="qrart"
-      class="block"
-      @click="
-        $router.push({
-          path: '/qrart'
-        })
-      "
-    >
+    <div v-if="site?.features?.qrart?.enabled" id="qrart" class="block">
       <div class="container">
         <el-row>
           <el-col :md="16" :xs="24" class="preview">
@@ -134,28 +126,38 @@
           <el-col :md="8" :xs="24" class="info">
             <h2 class="title">{{ $t('index.title.qrart') }}</h2>
             <p class="subtitle">{{ $t('index.subtitle.qrart') }}</p>
-            <el-button type="primary" round class="btn-try">
+            <el-button
+              type="primary"
+              round
+              class="btn-try"
+              @click="
+                $router.push({
+                  path: '/qrart'
+                })
+              "
+            >
               {{ $t('index.button.try') }}
             </el-button>
           </el-col>
         </el-row>
       </div>
     </div>
-    <div
-      id="suno"
-      class="block"
-      @click="
-        $router.push({
-          path: '/suno'
-        })
-      "
-    >
+    <div v-if="site?.features?.suno?.enabled" id="suno" class="block">
       <div class="container">
         <el-row>
           <el-col :md="8" :xs="24" class="info">
             <h2 class="title">{{ $t('index.title.suno') }}</h2>
             <p class="subtitle">{{ $t('index.subtitle.suno') }}</p>
-            <el-button type="primary" round class="btn-try">
+            <el-button
+              type="primary"
+              round
+              class="btn-try"
+              @click="
+                $router.push({
+                  path: '/suno'
+                })
+              "
+            >
               {{ $t('index.button.try') }}
             </el-button>
           </el-col>
@@ -166,15 +168,7 @@
         </el-row>
       </div>
     </div>
-    <div
-      id="luma"
-      class="block"
-      @click="
-        $router.push({
-          path: '/luma'
-        })
-      "
-    >
+    <div v-if="site?.features?.luma?.enabled" id="luma" class="block">
       <div class="container">
         <el-row>
           <el-col :md="16" :xs="24" class="preview">
@@ -184,7 +178,16 @@
           <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">
+            <el-button
+              type="primary"
+              round
+              class="btn-try"
+              @click="
+                $router.push({
+                  path: '/luma'
+                })
+              "
+            >
               {{ $t('index.button.try') }}
             </el-button>
           </el-col>
@@ -381,7 +384,8 @@ export default defineComponent({
       color: var(--el-text-color-primary);
     }
     .subtitle {
-      font-size: 24px;
+      font-size: 20px;
+      padding: 0 20px;
       color: var(--el-text-color-secondary);
     }
     .btn-try {
@@ -395,7 +399,7 @@ export default defineComponent({
 }
 
 #banner {
-  padding: 100px 0;
+  padding: 50px 0;
   .left {
     .info {
       @media (max-width: 767px) {
@@ -474,14 +478,14 @@ export default defineComponent({
 #introduction,
 #midjourney,
 #suno {
-  background: linear-gradient(90deg, #ebe7ff, #f2faff 53%, #e0f5fe);
+  background: #f5f7fa;
 }
 
 .dark {
   #introduction,
   #midjourney,
   #suno {
-    background-image: linear-gradient(270deg, #277186 0%, #330867 100%);
+    background: #1e1e1e;
   }
 }
 
