diff --git a/ui/src/router/index.tsx b/ui/src/router/index.tsx
index b9dbb2de..99d44723 100644
--- a/ui/src/router/index.tsx
+++ b/ui/src/router/index.tsx
@@ -1,6 +1,8 @@
 import React, { Suspense, lazy } from 'react';
 import { RouteObject, createBrowserRouter } from 'react-router-dom';
 
+import Layout from '@answer/pages/Layout';
+
 import routeConfig, { RouteNode } from '@/router/route-config';
 import RouteRules from '@/router/route-rules';
 
@@ -8,17 +10,21 @@ const routes: RouteObject[] = [];
 
 const routeGen = (routeNodes: RouteNode[], root: RouteObject[]) => {
   routeNodes.forEach((rn) => {
-    rn.page = rn.page.replace('pages/', '');
-    /**
-     * cannot use a fully dynamic import statement
-     * ref: https://webpack.js.org/api/module-methods/#import-1
-     */
-    const Control = lazy(() => import(`@/pages/${rn.page}`));
-    rn.element = (
-      <Suspense>
-        <Control />
-      </Suspense>
-    );
+    if (rn.path === '/') {
+      rn.element = <Layout />;
+    } else {
+      /**
+       * cannot use a fully dynamic import statement
+       * ref: https://webpack.js.org/api/module-methods/#import-1
+       */
+      rn.page = rn.page.replace('pages/', '');
+      const Control = lazy(() => import(`@/pages/${rn.page}`));
+      rn.element = (
+        <Suspense>
+          <Control />
+        </Suspense>
+      );
+    }
     root.push(rn);
     if (Array.isArray(rn.rules)) {
       const ruleFunc: Function[] = [];