diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ac698ec3..2eb57c6e 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -22,6 +22,10 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     Icon: typeof import('./src/components/icon-custom/src/Icon.vue')['default']
     Layout: typeof import('./src/components/layout/index.vue')['default']
diff --git a/frontend/src/assets/svg/chat.svg b/frontend/src/assets/svg/chat.svg
index 8c36acb0..47cd362c 100644
--- a/frontend/src/assets/svg/chat.svg
+++ b/frontend/src/assets/svg/chat.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h1024v1024.00512H0z" fill="#FFFFFF" /><path d="M853.82656 169.9328C762.34752 78.45888 640.8704 28.1344 511.6416 28.1344c-128.256-0.49152-251.1872 50.81088-341.69344 141.7984C23.296 316.09856-13.96736 539.70432 77.99808 725.06368l-20.81792 157.77792c-2.90816 21.2992 3.87072 42.60352 17.90976 58.56768a73.81504 73.81504 0 0 0 65.82272 24.67328l157.78304-20.79744a486.28736 486.28736 0 0 0 213.44256 49.36192c128.26112 0.47104 251.19232-50.82624 341.68832-141.33248 91.47904-91.47904 141.80352-212.94592 141.80352-342.17472 0-129.20832-50.82112-250.20416-141.80352-341.20704z m-330.08128 611.28704c-7.74144 3.38944-16.46592 3.38944-24.68352 0-6.76352-2.89792-12.58496-8.22272-15.488-15.48288-6.77888-15.49312 0.48128-33.40288 15.488-40.18176 7.74144-3.38432 16.4608-3.38432 24.68352 0a30.2848 30.2848 0 0 1 15.48288 15.488c7.24992 15.488 0 33.38752-15.48288 40.17664z m145.66912-315.56096c-16.94208 29.0304-44.04736 50.3296-67.75808 69.20192-6.28736 4.84352-12.58496 9.68704-18.87232 15.00672-25.65632 22.26688-40.64768 54.69696-40.17152 88.57088 0 16.46592-13.54752 30.01344-29.99808 30.01344-16.46592 0-30.01856-13.54752-30.01856-30.01344 0-52.2752 23.22944-102.59968 61.95712-135.02976a390.016 390.016 0 0 1 20.80256-16.45568c20.3264-15.97952 41.63584-32.42496 52.76672-51.30752 15.00672-26.13248 10.62912-64.3584-10.65472-90.02496-27.09504-32.90624-74.53696-36.29056-93.90592-36.29056-109.85472 0-114.70336 88.56576-114.70336 98.72384-0.48128 16.46592-15.47776 28.07808-30.48448 30.01344-16.45568 0-30.0032-13.54752-30.0032-30.01344 0-54.69184 37.26848-158.74048 175.19104-158.74048 59.04896 0 110.35648 21.2992 140.84608 58.56256 36.31616 44.52352 43.07968 109.86496 15.00672 157.78304z" fill="#666666" /></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 11.776C228.352 11.776 0 210.944 0 458.752c0 137.216 70.144 257.536 179.2 340.992 8.192 6.656 12.8 14.848 12.8 24.576v158.208c0 23.04 26.112 37.376 45.568 26.112l169.472-102.912c6.656-3.072 12.8-5.12 19.456-3.072 27.648 5.12 55.296 6.656 84.992 6.656 282.112 0 512-200.704 512-446.976-1.024-251.392-229.376-450.56-511.488-450.56z m-3.072 727.552c-24.576 0-44.032-19.456-44.032-44.032 0-26.112 19.456-45.568 44.032-45.568s44.032 19.456 44.032 44.032c0 25.6-19.968 45.568-44.032 45.568z m158.208-334.336c-11.264 19.456-32.768 45.568-63.488 73.216-19.456 17.92-34.304 32.768-38.912 40.96-6.656 8.192-9.728 17.92-12.8 27.648-1.536 6.656-3.072 14.848-3.072 26.112-1.536 19.456-17.92 35.84-38.912 35.84-19.456 0-35.84-16.384-37.376-35.84-1.536-17.92-1.536-37.376 6.656-56.832 5.12-11.264 14.848-31.232 27.648-47.104 8.192-11.264 24.576-26.112 47.104-45.568 20.992-19.456 35.84-34.304 40.96-45.568 6.656-9.728 9.728-23.04 8.192-34.304 0-23.04-8.192-42.496-26.112-60.416s-38.912-26.112-65.024-26.112c-24.576 0-45.568 8.192-61.952 24.576-11.264 11.264-20.992 27.648-27.648 49.152-6.656 16.384-23.04 29.184-40.96 29.184h-5.12c-11.264-1.536-23.04-8.192-29.184-17.92-6.656-9.728-8.192-23.04-5.12-35.84 9.728-32.768 24.576-58.88 47.104-78.336 31.232-27.648 71.68-40.96 120.832-40.96 52.224 0 96.256 14.848 126.976 44.032 32.768 29.184 47.104 65.024 47.104 107.52 1.024 24.064-5.632 47.104-16.896 66.56z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/chat1.svg b/frontend/src/assets/svg/chat1.svg
new file mode 100644
index 00000000..8c36acb0
--- /dev/null
+++ b/frontend/src/assets/svg/chat1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h1024v1024.00512H0z" fill="#FFFFFF" /><path d="M853.82656 169.9328C762.34752 78.45888 640.8704 28.1344 511.6416 28.1344c-128.256-0.49152-251.1872 50.81088-341.69344 141.7984C23.296 316.09856-13.96736 539.70432 77.99808 725.06368l-20.81792 157.77792c-2.90816 21.2992 3.87072 42.60352 17.90976 58.56768a73.81504 73.81504 0 0 0 65.82272 24.67328l157.78304-20.79744a486.28736 486.28736 0 0 0 213.44256 49.36192c128.26112 0.47104 251.19232-50.82624 341.68832-141.33248 91.47904-91.47904 141.80352-212.94592 141.80352-342.17472 0-129.20832-50.82112-250.20416-141.80352-341.20704z m-330.08128 611.28704c-7.74144 3.38944-16.46592 3.38944-24.68352 0-6.76352-2.89792-12.58496-8.22272-15.488-15.48288-6.77888-15.49312 0.48128-33.40288 15.488-40.18176 7.74144-3.38432 16.4608-3.38432 24.68352 0a30.2848 30.2848 0 0 1 15.48288 15.488c7.24992 15.488 0 33.38752-15.48288 40.17664z m145.66912-315.56096c-16.94208 29.0304-44.04736 50.3296-67.75808 69.20192-6.28736 4.84352-12.58496 9.68704-18.87232 15.00672-25.65632 22.26688-40.64768 54.69696-40.17152 88.57088 0 16.46592-13.54752 30.01344-29.99808 30.01344-16.46592 0-30.01856-13.54752-30.01856-30.01344 0-52.2752 23.22944-102.59968 61.95712-135.02976a390.016 390.016 0 0 1 20.80256-16.45568c20.3264-15.97952 41.63584-32.42496 52.76672-51.30752 15.00672-26.13248 10.62912-64.3584-10.65472-90.02496-27.09504-32.90624-74.53696-36.29056-93.90592-36.29056-109.85472 0-114.70336 88.56576-114.70336 98.72384-0.48128 16.46592-15.47776 28.07808-30.48448 30.01344-16.45568 0-30.0032-13.54752-30.0032-30.01344 0-54.69184 37.26848-158.74048 175.19104-158.74048 59.04896 0 110.35648 21.2992 140.84608 58.56256 36.31616 44.52352 43.07968 109.86496 15.00672 157.78304z" fill="#666666" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/icon-setting.svg b/frontend/src/assets/svg/icon-setting.svg
new file mode 100644
index 00000000..857e45a0
--- /dev/null
+++ b/frontend/src/assets/svg/icon-setting.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.32881 19.7336L4.01769 19.3947C2.92844 18.2083 2.11122 16.7932 1.63213 15.2477L1.49707 14.8121L3.54513 12L1.49707 9.18788L1.63213 8.7522C2.11122 7.20676 2.92844 5.79166 4.01769 4.60522L4.32881 4.26634L7.77063 4.64253L9.16859 1.4557L9.61685 1.35478C10.3936 1.17991 11.1916 1.09088 12.0005 1.09088C12.8093 1.09088 13.6073 1.17991 14.3841 1.35478L14.8323 1.4557L16.2303 4.64253L19.6721 4.26634L19.9832 4.60522C21.0725 5.79166 21.8897 7.20676 22.3688 8.7522L22.5038 9.18788L20.4558 12L22.5038 14.8121L22.3688 15.2477C21.8897 16.7932 21.0725 18.2083 19.9832 19.3947L19.6721 19.7336L16.2303 19.3574L14.8323 22.5442L14.3841 22.6452C13.6073 22.82 12.8093 22.9091 12.0005 22.9091C11.1916 22.9091 10.3936 22.82 9.61685 22.6452L9.16859 22.5442L7.77063 19.3574L4.32881 19.7336ZM7.8139 17.5236C8.46003 17.453 9.07723 17.8099 9.33833 18.4051L10.4588 20.9593C10.9641 21.0466 11.4792 21.0908 12.0005 21.0908C12.5217 21.0908 13.0368 21.0466 13.5421 20.9593L14.6626 18.4051C14.9237 17.8099 15.5409 17.453 16.187 17.5236L18.9412 17.8247C19.6064 17.024 20.1309 16.1142 20.4889 15.1338L18.8445 12.876C18.4643 12.3538 18.4643 11.646 18.8445 11.1239L20.4889 8.86603C20.1309 7.88562 19.6064 6.97584 18.9412 6.17518L16.187 6.47621C15.5409 6.54684 14.9237 6.18994 14.6626 5.59472L13.5421 3.04054C13.0368 2.95327 12.5217 2.90901 12.0005 2.90901C11.4792 2.90901 10.9641 2.95327 10.4588 3.04054L9.33833 5.59472C9.07723 6.18994 8.46003 6.54684 7.8139 6.47621L5.05969 6.17518C4.39449 6.97584 3.87002 7.88562 3.51199 8.86603L5.15637 11.1239C5.53664 11.646 5.53664 12.3538 5.15637 12.876L3.51199 15.1338C3.87002 16.1142 4.39449 17.024 5.05969 17.8247L7.8139 17.5236ZM12.0005 16.5454C9.49866 16.5454 7.47232 14.5094 7.47232 12C7.47232 9.49055 9.49866 7.45451 12.0005 7.45451C14.5023 7.45451 16.5286 9.49055 16.5286 12C16.5286 14.5094 14.5023 16.5454 12.0005 16.5454ZM12.0005 14.7273C13.4961 14.7273 14.7104 13.5072 14.7104 12C14.7104 10.4928 13.4961 9.27275 12.0005 9.27275C10.5048 9.27275 9.2905 10.4928 9.2905 12C9.2905 13.5072 10.5048 14.7273 12.0005 14.7273Z"/>
+</svg>
diff --git a/frontend/src/assets/svg/operate/ope-add.svg b/frontend/src/assets/svg/operate/ope-add.svg
new file mode 100644
index 00000000..8840a050
--- /dev/null
+++ b/frontend/src/assets/svg/operate/ope-add.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M848.64 464h-288v-288a48 48 0 0 0-96 0v288h-288a48 48 0 0 0 0 96h288v288a48 48 0 0 0 96 0v-288h288a48 48 0 0 0 0-96z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/operate/ope-close.svg b/frontend/src/assets/svg/operate/ope-close.svg
new file mode 100644
index 00000000..eefc47a7
--- /dev/null
+++ b/frontend/src/assets/svg/operate/ope-close.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M760.96 195.2L512 444.16 263.04 195.2a48 48 0 0 0-67.84 67.84L444.16 512l-248.96 248.96A48 48 0 0 0 263.04 832L512 579.84 760.96 832A48 48 0 0 0 832 760.96L579.84 512 832 263.04a48 48 0 0 0-67.84-67.84z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/operate/ope-delete.svg b/frontend/src/assets/svg/operate/ope-delete.svg
new file mode 100644
index 00000000..50308603
--- /dev/null
+++ b/frontend/src/assets/svg/operate/ope-delete.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M800 256h-576a30.08 30.08 0 0 0-32 32 30.08 30.08 0 0 0 32 32H256v576a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V320h32a30.08 30.08 0 0 0 32-32 30.08 30.08 0 0 0-32-32zM448 799.36a33.28 33.28 0 0 1-64 0v-384a33.28 33.28 0 0 1 64 0z m192 0a33.28 33.28 0 0 1-64 0v-384a33.28 33.28 0 0 1 64 0zM800 128H640v-32a32.64 32.64 0 0 0-32-32h-192a32 32 0 0 0-32 32V128H224a30.08 30.08 0 0 0-32 32 30.08 30.08 0 0 0 32 32h576a30.08 30.08 0 0 0 32-32 30.08 30.08 0 0 0-32-32z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/operate/ope-download.svg b/frontend/src/assets/svg/operate/ope-download.svg
new file mode 100644
index 00000000..1b163e72
--- /dev/null
+++ b/frontend/src/assets/svg/operate/ope-download.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M864 832h-704a32 32 0 0 0 0 64h704a32 32 0 0 0 0-64zM801.28 400.64H640V161.92A33.92 33.92 0 0 0 606.08 128h-192a33.92 33.92 0 0 0-30.08 33.92v238.72H222.72a30.08 30.08 0 0 0-21.76 51.84l289.28 289.92a32 32 0 0 0 43.52 0l289.28-289.92a30.08 30.08 0 0 0-21.76-51.84z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/operate/ope-edit.svg b/frontend/src/assets/svg/operate/ope-edit.svg
new file mode 100644
index 00000000..c27f257a
--- /dev/null
+++ b/frontend/src/assets/svg/operate/ope-edit.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M796.8 406.4l-179.2-179.2 44.8-44.8a64 64 0 0 1 89.6 0l89.6 89.6a64 64 0 0 1 0 89.6zM320 860.8H163.2v-153.6a58.24 58.24 0 0 1 19.2-44.8l364.8-371.2 179.2 179.2-364.8 364.8a48 48 0 0 1-41.6 25.6z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/operate/ope-upload.svg b/frontend/src/assets/svg/operate/ope-upload.svg
new file mode 100644
index 00000000..fa5d673c
--- /dev/null
+++ b/frontend/src/assets/svg/operate/ope-upload.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M864 832h-704a32 32 0 0 0 0 64h704a32 32 0 0 0 0-64zM222.72 478.08H384v238.72a34.56 34.56 0 0 0 33.92 34.56h192a34.56 34.56 0 0 0 30.08-34.56V478.08h160.64a30.08 30.08 0 0 0 21.76-51.84L533.76 136.96a30.72 30.72 0 0 0-43.52 0L200.96 426.24a30.08 30.08 0 0 0 21.76 51.84z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/professional.svg b/frontend/src/assets/svg/professional.svg
new file mode 100644
index 00000000..ae6ade19
--- /dev/null
+++ b/frontend/src/assets/svg/professional.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M778.24 100.16c8.576 0 17.152 0.448 25.792 1.216 27.008 2.56 47.68 25.216 47.552 52.288v589.568c0 28.288-22.4 51.392-50.56 52.416-50.88 1.92-94.08 8.704-129.344 20.48-46.336 15.488-91.392 43.52-135.04 84.16v-659.2a275.52 275.52 0 0 1 135.04-119.232 277.056 277.056 0 0 1 106.56-21.696z m125.952 655.488V217.6c13.888 0 27.328 5.504 37.12 15.36 9.792 9.92 15.36 23.232 15.36 37.12v533.76c0 41.728-26.112 109.184-104.96 102.4-55.616-4.736-59.2-6.72-106.048-5.888-45.952 0.768-110.208-0.832-167.68 12.672 32.192-26.88 79.296-45.888 110.464-52.48 31.104-6.72 69.952-9.6 115.648-11.328 57.984-2.048 100.096-45.632 100.096-93.632zM242.624 100.16c36.288 0 71.808 7.296 106.624 21.76a275.008 275.008 0 0 1 134.912 119.104V900.48c-43.52-40.704-88.64-68.8-134.912-84.224-35.328-11.648-78.4-18.56-129.408-20.352a52.352 52.352 0 0 1-50.496-52.48V153.6c0-27.072 20.608-49.664 47.616-52.16 8.512-0.896 17.088-1.28 25.664-1.28zM116.672 755.648c0 43.264 32 91.136 101.12 93.632 45.824 1.728 74.432 6.72 114.752 11.328 40.32 4.48 79.04 25.664 111.232 52.48-57.472-13.44-116.928-12.672-168.512-12.672-40.64 0-47.744 5.888-106.112 5.888-68.864 0-105.088-62.272-105.088-102.4V270.08a52.48 52.48 0 0 1 52.48-52.48v538.112h0.128z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/setting.svg b/frontend/src/assets/svg/setting.svg
new file mode 100644
index 00000000..2c5c20e2
--- /dev/null
+++ b/frontend/src/assets/svg/setting.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M385.621333 87.381333a42.666667 42.666667 0 0 1 51.2 21.418667c14.826667 29.376 43.477333 48.042667 75.178667 48.042667 30.997333 0 59.093333-17.834667 74.176-46.122667l1.130667-2.176a42.666667 42.666667 0 0 1 51.050666-21.162667 422.656 422.656 0 0 1 164.522667 99.456 42.666667 42.666667 0 0 1 6.848 52.565334 96.554667 96.554667 0 0 0-1.706667 95.744c16.789333 30.442667 47.018667 46.037333 76.736 44.864a42.666667 42.666667 0 0 1 43.392 33.557333C935.04 445.269333 938.666667 478.208 938.666667 512c0 33.770667-3.626667 66.730667-10.517334 98.432a42.666667 42.666667 0 0 1-43.392 33.578667c-29.717333-1.194667-59.946667 14.4-76.757333 44.842666a96.554667 96.554667 0 0 0 1.728 95.722667 42.666667 42.666667 0 0 1-6.848 52.586667 422.656 422.656 0 0 1-164.544 99.434666 42.666667 42.666667 0 0 1-51.2-21.418666c-14.784-29.376-43.434667-48.042667-75.136-48.042667-31.701333 0-60.373333 18.666667-75.178667 48.064a42.666667 42.666667 0 0 1-51.2 21.397333 422.485333 422.485333 0 0 1-164.522666-99.477333 42.666667 42.666667 0 0 1-6.826667-52.586667 96.448 96.448 0 0 0 1.706667-95.68c-16.789333-30.442667-47.018667-46.058667-76.736-44.885333a42.666667 42.666667 0 0 1-43.370667-33.536A462.250667 462.250667 0 0 1 85.333333 512c0-33.792 3.626667-66.730667 10.496-98.432a42.666667 42.666667 0 0 1 43.413334-33.578667c29.717333 1.194667 59.946667-14.4 76.757333-44.842666a96.554667 96.554667 0 0 0-1.706667-95.722667 42.666667 42.666667 0 0 1 6.826667-52.565333 422.4 422.4 0 0 1 164.501333-99.477334z" fill="#000000" /><path d="M341.333333 512a170.666667 170.666667 0 1 1 341.333334 0 170.666667 170.666667 0 0 1-341.333334 0z" fill="#FFFFFF" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/system.svg b/frontend/src/assets/svg/system.svg
new file mode 100644
index 00000000..0c107e9b
--- /dev/null
+++ b/frontend/src/assets/svg/system.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M526.3872 0a654.8992 654.8992 0 0 1-438.9376 146.0224v379.1872c0 181.0432 233.1648 498.7392 439.808 498.7392 206.6944 0 438.9888-318.5664 438.9888-499.6096V146.0224A654.1312 654.1312 0 0 1 526.3872 0zM448.6656 318.5664a123.97568 123.97568 0 0 1 85.4016-33.3312v-0.8704c1.4336-0.0512 2.8672-0.0512 4.3008 0 65.0752 0.9728 117.0432 54.4768 116.1216 119.6032 0.8192 32.1024-11.8784 63.1296-35.0208 85.4016-48.4864 43.8784-122.3168 43.8784-170.8032 0-2.7648-2.5088-5.4272-5.1712-7.936-7.936-42.752-47.1552-39.2192-120.064 7.936-162.8672z m280.1664 421.0688h-403.968c-0.1536-38.6048 2.9696-77.2096 9.3696-115.3024 8.3456-44.3392 46.2848-76.9536 91.392-78.592a1450.496 1450.496 0 0 1 206.6944 0c52.3776 5.6832 93.0816 48.1792 96.512 100.7616v93.1328z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/train.svg b/frontend/src/assets/svg/train.svg
new file mode 100644
index 00000000..ef707fb2
--- /dev/null
+++ b/frontend/src/assets/svg/train.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M905.846154 423.778462v176.836923a29.538462 29.538462 0 0 1-59.076923 0v-147.889231l-334.769231 164.233846L89.521231 409.993846a36.785231 36.785231 0 0 1-6.695385-42.712615c3.780923-7.404308 9.984-13.390769 17.624616-17.053539l394.259692-188.770461a40.132923 40.132923 0 0 1 34.579692 0l394.24 188.770461c19.298462 9.235692 27.175385 31.842462 17.644308 50.491077-1.634462 3.209846-3.741538 6.144-6.183385 8.743385L905.846154 423.778462z m-118.153846 101.80923V748.307692h-0.787693c-10.830769 66.087385-129.772308 118.153846-274.904615 118.153846-145.132308 0-264.073846-52.066462-274.904615-118.153846H236.307692V525.784615l267.027693 130.796308a19.692308 19.692308 0 0 0 17.32923 0L787.692308 525.587692z" fill="" /></svg>
\ No newline at end of file
diff --git a/frontend/src/components/layout/index.vue b/frontend/src/components/layout/index.vue
index d0e49ba1..6ab86bb7 100644
--- a/frontend/src/components/layout/index.vue
+++ b/frontend/src/components/layout/index.vue
@@ -45,19 +45,22 @@
           <h1>{{ currentPageTitle }}</h1>
           <div class="header-actions">
             <el-tooltip content="System manage" placement="bottom">
-              <el-button class="header-icon-btn">
-                <el-icon><setting /></el-icon>
-              </el-button>
+              <div class="header-icon-btn">
+                <el-icon><iconsystem /></el-icon>
+                <span>System manage</span>
+              </div>
             </el-tooltip>
             <el-tooltip content="Help" placement="bottom">
-              <el-button class="header-icon-btn">
+              <div class="header-icon-btn">
                 <el-icon><question-filled /></el-icon>
-              </el-button>
+                <span>Help</span>
+              </div>
             </el-tooltip>
             <el-tooltip content="Notice" placement="bottom">
-              <el-button class="header-icon-btn">
-                <el-icon><bell /></el-icon>
-              </el-button>
+              <div class="header-icon-btn">
+                <el-icon><BellFilled /></el-icon>
+                <span>Notice</span>
+              </div>
             </el-tooltip>
             <el-dropdown trigger="click">
               <div class="user-info">
@@ -90,16 +93,17 @@ import folder from '@/assets/svg/folder.svg'
 import ds from '@/assets/svg/ds.svg'
 import dashboard from '@/assets/svg/dashboard.svg'
 import chat from '@/assets/svg/chat.svg'
+import iconsetting from '@/assets/svg/setting.svg'
+import iconsystem from '@/assets/svg/system.svg'
 import {
-  Setting,
   QuestionFilled,
-  Bell
+  BellFilled
 } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const route = useRoute()
 const userStore = useUserStore()
-const name = ref('')
+const name = ref('admin')
 const activeMenu = computed(() => route.path)
 
 const routerList = computed(() => {
@@ -118,7 +122,8 @@ const resolveIcon = (iconName: any) => {
   const icons: Record<string, any> = {
     'ds': ds,
     'dashboard': dashboard,
-    'chat': chat
+    'chat': chat,
+    'setting': iconsetting
   }
   return typeof icons[iconName] === 'function' ? icons[iconName]() : icons[iconName]
 }
@@ -212,6 +217,41 @@ const logout = () => {
         justify-content: space-between;
         align-items: center;
         margin-bottom: 24px;
+        .header-actions {
+          display: flex;
+          height: 36px;
+          align-items: center;
+          .header-icon-btn {
+            display: flex;
+            column-gap: 12px;
+            align-items: center;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            border: none;
+            font-weight: 500;
+            transition: all 0.3s;
+            font-size: 14px;
+            color: #5f6368;
+            &:hover {
+              background-color: rgba(0, 0, 0, 0.05);
+            }
+          }
+          :deep(.user-info) {
+            display: flex;
+            column-gap: 4px;
+            align-items: center;
+            .el-avatar {
+              background-color: #4285f4;
+              color: #fff;
+            }
+            .user-name {
+              font-size: 14px;
+              font-weight: 500;
+              color: #202124;
+            }
+          }
+        }
       }
     }
     
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 334d4973..6e558f05 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import './style.css'
+import './style.less'
 import App from './App.vue'
 import router from './router'
 // import 'element-plus/dist/index.css'
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 4a63c550..0e97fc11 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -5,6 +5,7 @@ import login from '@/views/login/index.vue'
 import chat from '@/views/chat/index.vue'
 import ds from '@/views/ds/index.vue'
 import dashboard from '@/views/dashboard/index.vue'
+import setting from '@/views/setting/index.vue'
 const router = createRouter({
   history: createWebHistory(),
   routes: [
@@ -51,6 +52,19 @@ const router = createRouter({
           meta: { title: 'Dashboard', icon: 'dashboard' }
         }
       ]
+    },
+    {
+      path: '/setting',
+      component: Layout,
+      redirect: '/setting/index',
+      children: [
+        {
+          path: 'index',
+          name: 'setting',
+          component: setting,
+          meta: { title: 'Setting', icon: 'setting' }
+        }
+      ]
     }
   ]
 })
diff --git a/frontend/src/style.css b/frontend/src/style.less
similarity index 73%
rename from frontend/src/style.css
rename to frontend/src/style.less
index 88359799..24bf908e 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.less
@@ -11,6 +11,25 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+
+  --primary-color: #4285f4;
+  --primary-light: #e8f0fe;
+  --secondary-color: #5f6368;
+  --danger-color: #ea4335;
+  --success-color: #34a853;
+  --warning-color: #fbbc05;
+  --text-color: #202124;
+  --text-light: #5f6368;
+  --bg-color: #f8f9fa;
+  --white: #ffffff;
+  --border-color: #dadce0;
+  --sidebar-width: 240px;
+  --header-height: 64px;
+  --border-radius: 8px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  --el-color-primary: #4285f4 !important;
 }
 
 a {
diff --git a/frontend/src/views/setting/Professional.vue b/frontend/src/views/setting/Professional.vue
new file mode 100644
index 00000000..0dbc0076
--- /dev/null
+++ b/frontend/src/views/setting/Professional.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="sqlbot-table-container professional-container">
+    <div class="sqlbot-tool">
+      <div class="tool-left">
+        <el-input
+          v-model="keyword"
+          class="sqlbot-search"
+          placeholder="Search"
+          prefix-icon="el-icon-search"
+          @keyup.enter.native="handleSearch"
+        >
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+      <div class="tool-right">
+        <div class="tool-btn secondary-btn">
+          <el-icon><IconOpeUpload /></el-icon>
+          <span>Import Terminology</span>
+        </div>
+        <div class="tool-btn secondary-btn">
+          <el-icon><IconOpeDownload /></el-icon>
+          <span>Export Terminology</span>
+        </div>
+        <div class="tool-btn primary-btn">
+          <el-icon><IconOpeAdd /></el-icon>
+          <span>Add Terminology</span>
+        </div>
+      </div>
+    </div>
+    <div class="sqlbot-table">
+      <el-table :data="state.tableData" style="width: 100%">
+        <el-table-column prop="term" label="Term" width="280" />
+        <el-table-column prop="definition" label="Definition"  />
+        <el-table-column prop="domain" label="Domain" width="180" />
+        <el-table-column prop="id" label="Actions" width="120" fixed="right">
+          <template #default="scope">
+            <div class="table-operate">
+              <div class="opt-btn" @click="editHandler(scope.row.id)">
+                <el-icon><IconOpeEdit /></el-icon>
+              </div>
+              <div class="opt-btn" @click="deleteHandler(scope.row.id)">
+                <el-icon><IconOpeDelete /></el-icon>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import IconOpeUpload from '@/assets/svg/operate/ope-upload.svg';
+import IconOpeDownload from '@/assets/svg/operate/ope-download.svg';
+import IconOpeAdd from '@/assets/svg/operate/ope-add.svg';
+import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg';
+import IconOpeDelete from '@/assets/svg/operate/ope-delete.svg';
+import { Search } from '@element-plus/icons-vue'
+const keyword = ref('')
+const state = reactive({
+  tableData: [
+    {  
+      term: 'Term 1',
+      definition: 'Definition 1',
+      domain: 'Domain 1',
+      id: '1'
+    },
+    {
+      term: 'Term 2',
+      definition: 'Definition 2',
+      domain: 'Domain 2',
+      id: '2'
+    },
+    {
+      term: 'Term 3',
+      definition: 'Definition 3',
+      domain: 'Domain 3',
+      id: '3'
+    }
+  ]
+})
+const handleSearch = (e: any) => {
+  console.log('search', e);
+}
+const editHandler = (id: any) => {
+  console.log(id)
+}
+const deleteHandler = (id: any) => {
+  console.log(id)
+}
+</script>
+
+<style lang="less" scoped>
+.sqlbot-table-container {
+  width: 100%;
+  height: 100%;
+  .sqlbot-tool {
+    height: 42px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    .tool-left {
+      display: flex;
+      align-items: center;
+      .sqlbot-search {
+        width: 300px;
+        --el-input-inner-height: 40px !important;
+        --el-input-border-radius: 24px;
+        --el-input-bg-color: #f5f7fa;
+        --el-input-border-color: #e5e8ed;        
+      }
+    }
+    .tool-right {
+      display: flex;
+      align-items: center;
+      column-gap: 12px;
+      height: 35px;
+      .secondary-btn {
+        background: #f5f5f5;
+        color: #333;
+        border: 1px solid #ddd;
+      }
+      .primary-btn {
+        background: #1890ff;
+        color: white;
+      }
+      .tool-btn {
+        display: flex;
+        align-items: center;
+        padding: 6px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        outline: none;
+        font-weight: 500;
+        transition: all 0.3s;
+        font-size: 14px;
+        gap: 6px;
+        &:hover {
+          background-color: #f1f3f4;
+        }
+        &.default {
+          color: #2d2e31;
+          font-weight: 500;
+          font-size: 14px;
+          i {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+    }
+  }
+  .sqlbot-table {
+    border-radius: 6px;
+    :deep(.el-table) {
+      --el-table-header-bg-color: #f5f7fa;
+      --el-table-border-color: #ebeef5;
+      --el-table-header-text-color: #606266;
+
+      th {
+        font-weight: 600;
+        height: 48px;
+      }
+
+      td {
+        height: 52px;
+      }
+    }
+    .table-operate {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      .opt-btn {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #5f6368;
+        cursor: pointer;
+        transition: all 0.2s;
+        background-color: #f1f3f4;
+        border: none;
+        font-size: 18px;
+        &:hover {
+          background-color: #e8f0fe;
+          color: #4285f4;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/setting/index.vue b/frontend/src/views/setting/index.vue
new file mode 100644
index 00000000..404d35c6
--- /dev/null
+++ b/frontend/src/views/setting/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="setting-container">
+    <el-tabs v-model="activeName" class="setting-tabs" @tab-click="handleClick">
+      <el-tab-pane label="User" name="0">
+        <template #label>
+          <span class="custom-tabs-label">
+            <el-icon><IconProfessional /></el-icon>
+            <span>Terminology</span>
+          </span>
+        </template>
+        <Professional v-if="activeName == '0'" />
+      </el-tab-pane>
+      <el-tab-pane label="Config" name="1">
+        <template #label>
+          <span class="custom-tabs-label">
+            <el-icon><IconTrain /></el-icon>
+            <span>Data training</span>
+          </span>
+        </template>
+        Data training
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import IconProfessional from '@/assets/svg/professional.svg';
+import IconTrain from '@/assets/svg/train.svg';
+import Professional from './Professional.vue';
+const activeName = ref('0');
+
+const handleClick = (tab: any, event: MouseEvent) => {
+  console.log(tab, event);
+};
+</script>
+
+<style lang="less" scoped>
+.setting-container {
+  height: calc(100% - 48px);
+  background-color: var(--white);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  padding: 24px;
+  :deep(.el-tabs) {
+    --el-tabs-header-height: 55px;
+    .el-tabs__header {
+      margin: 0 0 24px !important;
+    }
+  }
+  .setting-tabs {
+    height: 100%;
+    :deep(.custom-tabs-label) {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      column-gap: 4px;
+      i {
+        font-size: 20px;
+        width: 28px;
+        height: 28px;
+      }
+    }
+    :deep(.el-tabs__item) {
+      padding: 0 16px !important;
+      &:hover {
+        // color: var(--primary-color);
+        background-color: rgba(0, 0, 0, 0.02);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file