diff --git a/packages/ui/certd-client/src/components/index.ts b/packages/ui/certd-client/src/components/index.ts
index 582bc7401..55abb6297 100644
--- a/packages/ui/certd-client/src/components/index.ts
+++ b/packages/ui/certd-client/src/components/index.ts
@@ -25,8 +25,6 @@ export default {
     app.component("InfoCircleOutlined", InfoCircleOutlined);
     app.component("UndoOutlined", UndoOutlined);
 
-    app.component("TutorialButton", TutorialButton);
-
     app.use(vip);
     app.use(Plugins);
   }
diff --git a/packages/ui/certd-client/src/layout/layout-framework.vue b/packages/ui/certd-client/src/layout/layout-framework.vue
index 93392b712..d8cd7ce60 100644
--- a/packages/ui/certd-client/src/layout/layout-framework.vue
+++ b/packages/ui/certd-client/src/layout/layout-framework.vue
@@ -18,8 +18,8 @@
             <MenuFoldOutlined v-else />
           </div>
           <fs-menu class="header-menu" mode="horizontal" :expand-selected="false" :selectable="false" :menus="frameworkMenus" />
-          <vip-button class="flex-center header-btn" mode="nav" />
           <tutorial-button class="flex-center header-btn" />
+          <vip-button class="flex-center header-btn" mode="nav" />
         </div>
         <div class="header-right header-buttons">
           <!--          <button-->
@@ -85,12 +85,12 @@ import FsThemeSet from "/@/layout/components/theme/index.vue";
 import { env } from "../utils/util.env";
 import FsThemeModeSet from "./components/theme/mode-set.vue";
 import VipButton from "/@/components/vip-button/index.vue";
-import TutorialSteps from "/@/components/tutorial/tutorial-steps.vue";
+import TutorialButton from "/@/components/tutorial/index.vue";
 export default {
   name: "LayoutFramework",
   // eslint-disable-next-line vue/no-unused-components
   components: {
-    TutorialSteps,
+    TutorialButton,
     FsThemeSet,
     MenuFoldOutlined,
     MenuUnfoldOutlined,