diff --git a/ui-work/angular.json b/ui-work/angular.json
index 56e4acd4..1078507c 100644
--- a/ui-work/angular.json
+++ b/ui-work/angular.json
@@ -62,12 +62,33 @@
               {
                 "glob": "**/*",
                 "input": "projects/web/public"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
               }
             ],
             "styles": [
-              "projects/web/src/styles.scss"
+              {
+                "input": "bootstrap/dist/css/bootstrap.css",
+                "bundleName": "bootstrap-module"
+              },
+              {
+                "input": "bootstrap-icons/font/bootstrap-icons.css",
+                "bundleName": "icons-module"
+              },
+              {
+                "input": "projects/web/src/styles.scss",
+                "bundleName": "main-module"
+              }
+            ],
+            "scripts": [
+              {
+                "input": "bootstrap/dist/js/bootstrap.js",
+                "bundleName": "bootstrap-module"
+              }
             ],
-            "scripts": [],
             "server": "projects/web/src/main.server.ts",
             "prerender": true,
             "ssr": {
@@ -79,13 +100,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1024kB",
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kB",
-                  "maximumError": "4kB"
+                  "maximumWarning": "32kB",
+                  "maximumError": "64kB"
                 }
               ],
               "outputHashing": "all"
@@ -105,7 +126,8 @@
               "buildTarget": "web:build:production"
             },
             "development": {
-              "buildTarget": "web:build:development"
+              "buildTarget": "web:build:development",
+              "proxyConfig": "proxy.conf.json"
             }
           },
           "defaultConfiguration": "development"
diff --git a/ui-work/package-lock.json b/ui-work/package-lock.json
index 9ae168ed..92e51564 100644
--- a/ui-work/package-lock.json
+++ b/ui-work/package-lock.json
@@ -18,6 +18,8 @@
         "@angular/platform-server": "^18.0.0",
         "@angular/router": "^18.0.0",
         "@angular/ssr": "^18.0.2",
+        "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.11.3",
         "express": "^4.18.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -3863,6 +3865,17 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-json": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
@@ -5315,6 +5328,41 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "license": "ISC"
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/ui-work/package.json b/ui-work/package.json
index 4234b364..539c5fe7 100644
--- a/ui-work/package.json
+++ b/ui-work/package.json
@@ -24,7 +24,9 @@
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.3",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.0.2",
@@ -42,4 +44,4 @@
     "ng-packagr": "^18.0.0",
     "typescript": "~5.4.2"
   }
-}
\ No newline at end of file
+}
diff --git a/ui-work/projects/web/src/index.html b/ui-work/projects/web/src/index.html
index 1fd53032..29e62abd 100644
--- a/ui-work/projects/web/src/index.html
+++ b/ui-work/projects/web/src/index.html
@@ -1,13 +1,24 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh">
 <head>
   <meta charset="utf-8">
-  <title>Web</title>
+  <meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"/>
+  <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
+  <title>Loading page ....</title>
   <base href="/">
   <meta content="width=device-width, initial-scale=1" name="viewport">
   <link href="favicon.ico" rel="icon" type="image/x-icon">
 </head>
 <body>
-<app-root></app-root>
+<app-root>
+  <div class="d-flex justify-content-center align-items-center h-100 bg-success">
+    <div class="d-block text-center">
+      <div class="spinner-border text-warning" role="status" style="width: 5rem; height: 5rem;">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <span class="d-flex align-self-center" role="status" style="font-size: 3rem;">Loading...</span>
+    </div>
+  </div>
+</app-root>
 </body>
 </html>
diff --git a/ui-work/proxy.conf.json b/ui-work/proxy.conf.json
new file mode 100644
index 00000000..f7488ccd
--- /dev/null
+++ b/ui-work/proxy.conf.json
@@ -0,0 +1,11 @@
+{
+  "/api": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    },
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+}
diff --git a/ui/projects/web/src/index.html b/ui/projects/web/src/index.html
index c646f7e5..34cc8a5b 100644
--- a/ui/projects/web/src/index.html
+++ b/ui/projects/web/src/index.html
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
 <html lang="zh">
-
 <head>
   <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport" />
-  <meta content="ie=edge" http-equiv="X-UA-Compatible" />
+    <meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"/>
+    <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
   <title>Loading page ....</title>
   <base href="/">
-  <link href="favicon.ico" rel="icon" type="image/x-icon" />
+    <link href="favicon.ico" rel="icon" type="image/x-icon"/>
 </head>
 <body>
-  <app-root><div class="d-flex justify-content-center align-items-center h-100 bg-success">
+<app-root>
+    <div class="d-flex justify-content-center align-items-center h-100 bg-success">
     <div class="d-block text-center">
       <div class="spinner-border text-warning" role="status" style="width: 5rem; height: 5rem;">
         <span class="visually-hidden">Loading...</span>
       </div>
       <span class="d-flex align-self-center" role="status" style="font-size: 3rem;">Loading...</span>
     </div>
-  </div></app-root>
+    </div>
+</app-root>
 </body>
-</html>
\ No newline at end of file
+</html>