diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 706ada35..505c5408 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -10,7 +10,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
diff --git a/frontend/src/assets/login-bg-sqlbot.jpg b/frontend/src/assets/login-bg-sqlbot.jpg
new file mode 100644
index 00000000..a21e3e74
Binary files /dev/null and b/frontend/src/assets/login-bg-sqlbot.jpg differ
diff --git a/frontend/src/assets/login-desc-de.png b/frontend/src/assets/login-desc-de.png
deleted file mode 100644
index 8fdf51b3..00000000
Binary files a/frontend/src/assets/login-desc-de.png and /dev/null differ
diff --git a/frontend/src/assets/login-desc.png b/frontend/src/assets/login-desc.png
deleted file mode 100644
index bf078d55..00000000
Binary files a/frontend/src/assets/login-desc.png and /dev/null differ
diff --git a/frontend/src/assets/logo-bg.jpg b/frontend/src/assets/logo-bg.jpg
deleted file mode 100644
index a6de7851..00000000
Binary files a/frontend/src/assets/logo-bg.jpg and /dev/null differ
diff --git a/frontend/src/components/layout/index.vue b/frontend/src/components/layout/index.vue
index 83b3336c..9395ed0e 100644
--- a/frontend/src/components/layout/index.vue
+++ b/frontend/src/components/layout/index.vue
@@ -50,7 +50,7 @@
                 <span>System manage</span>
               </div>
             </el-tooltip>
-            <el-tooltip content="Help" placement="bottom">
+            <!-- <el-tooltip content="Help" placement="bottom">
               <div class="header-icon-btn">
                 <el-icon><question-filled /></el-icon>
                 <span>Help</span>
@@ -61,7 +61,7 @@
                 <el-icon><BellFilled /></el-icon>
                 <span>Notice</span>
               </div>
-            </el-tooltip>
+            </el-tooltip> -->
             <el-dropdown trigger="click">
               <div class="user-info">
                 <el-avatar size="small">{{ name?.charAt(0) }}</el-avatar>
@@ -114,10 +114,10 @@ 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 {
+/* import {
   QuestionFilled,
   BellFilled
-} from '@element-plus/icons-vue'
+} from '@element-plus/icons-vue' */
 
 const router = useRouter()
 const route = useRoute()
@@ -212,7 +212,7 @@ const toSystem = () => {
       line-height: 68px;
       font-size: 24px;
       font-weight: bold;
-      color: #4285f4;
+      color: var(--el-color-primary);
       text-align: left;
       margin-left: 24px;
     }
@@ -275,7 +275,7 @@ const toSystem = () => {
             column-gap: 4px;
             align-items: center;
             .el-avatar {
-              background-color: #4285f4;
+              background-color: var(--el-color-primary);
               color: #fff;
             }
             .user-name {
diff --git a/frontend/src/style.less b/frontend/src/style.less
index 24bf908e..eba0560f 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -13,7 +13,8 @@
   -moz-osx-font-smoothing: grayscale;
 
 
-  --primary-color: #4285f4;
+  /* --primary-color: var(--el-color-primary); */
+  --primary-color: #1CBA90;
   --primary-light: #e8f0fe;
   --secondary-color: #5f6368;
   --danger-color: #ea4335;
@@ -29,7 +30,7 @@
   --border-radius: 8px;
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
-  --el-color-primary: #4285f4 !important;
+  --el-color-primary: #1CBA90 !important;
 }
 
 a {
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index ea08f1a7..e2973319 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -1,31 +1,38 @@
 <template>
   <div class="login-container">
-    <div class="login-bg">
-      <div class="bg-overlay"></div>
-      <div class="bg-content">
-        <h1>Welcome back</h1>
-        <p>Embark on your ChatBI journey</p>
+    <div class="login-content">
+      <div class="login-left">
+        <div class="illustration">
+        </div>
       </div>
-    </div>
-    <div class="login-form-container">
-      <div class="login-form">
-        <el-card class="login-card">
-          <h2 class="login-title">Login</h2>
+      <div class="login-right">
+        <div class="login-form">
+          <h2 class="title">Login</h2>
           <el-form :model="loginForm" :rules="rules" ref="loginFormRef" @keyup.enter="submitForm">
             <el-form-item prop="username">
-              <el-input v-model="loginForm.username" placeholder="username" prefix-icon="user"></el-input>
+              <el-input 
+                v-model="loginForm.username" 
+                placeholder="Account" 
+                :prefix-icon="User"
+                size="large"
+              ></el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input v-model="loginForm.password" placeholder="password" type="password" prefix-icon="lock"></el-input>
+              <el-input 
+                v-model="loginForm.password" 
+                placeholder="Password" 
+                type="password" 
+                :prefix-icon="Lock"
+                size="large"
+              ></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="submitForm" class="login-btn">Login</el-button>
             </el-form-item>
           </el-form>
-        </el-card>
+        </div>
       </div>
     </div>
-    
   </div>
 </template>
 
@@ -33,6 +40,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
+import { User, Lock } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -43,7 +51,7 @@ const loginForm = ref({
 })
 
 const rules = {
-  username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
+  username: [{ required: true, message: 'Please input account', trigger: 'blur' }],
   password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
 }
 
@@ -62,100 +70,77 @@ const submitForm = () => {
 
 <style lang="less" scoped>
 .login-container {
-  display: flex;
   height: 100vh;
-  width: 100%;
-  overflow: hidden;
+  width: 100vw;
+  background-color: #F0F6F7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  .login-bg {
-    overflow: hidden;
-    height: 100%;
-    width: 40%;
-    min-width: 400px;
-    position: relative;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    background-size: cover;
+  .login-content {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    color: white;
+    width: 1000px;
+    // height: 600px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
     overflow: hidden;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: url('@/assets/login-desc-de.png') center/cover no-repeat;
-      opacity: 0.8;
-    }
 
-    .bg-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.3);
-    }
-
-    .bg-content {
-      position: relative;
-      z-index: 2;
-      text-align: center;
-      padding: 0 40px;
-      
-      h1 {
-        font-size: 2.5rem;
-        margin-bottom: 1rem;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      }
-      
-      p {
-        font-size: 1.2rem;
-        opacity: 0.9;
-      }
-    }
-  }
-  .login-form-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 60%;
-    min-width: 400px;
-    .login-form {
-      width: 500px;
+    .login-left {
+      flex: 1;
+      background: linear-gradient(135deg, #28c76f 0%, #81fbb8 100%);
+      // padding: 40px;
       display: flex;
-      justify-content: center;
+      flex-direction: column;
       align-items: center;
-      background: #fff;
-      padding: 0 40px;
 
-      .login-card {
+
+      .illustration {
+        flex: 1;
         width: 100%;
-        padding: 40px;
-        border: none;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        background-image: url('@/assets/login-bg-sqlbot.jpg');
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
 
-        .login-title {
+    .login-right {
+      flex: 1;
+      padding: 40px;
+      display: flex;
+      align-items: center;
+
+      .login-form {
+        width: 100%;
+        padding: 0 40px;
+
+        .title {
+          font-size: 28px;
+          color: #1a1a1a;
+          margin-bottom: 40px;
           text-align: center;
-          margin-bottom: 30px;
-          color: #409eff;
-          font-size: 1.8rem;
         }
 
         .login-btn {
           width: 100%;
           height: 45px;
-          font-size: 1rem;
-          letter-spacing: 1px;
+          font-size: 16px;
+          border-radius: 4px;
+          margin-top: 20px;
+        }
+
+        .agreement {
+          margin-top: 20px;
+          text-align: center;
+          color: #666;
         }
       }
     }
   }
-  
+}
+
+:deep(.el-input__wrapper) {
+  background-color: #f5f7fa;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/setting/Professional.vue b/frontend/src/views/setting/Professional.vue
index 5988845c..73b7136d 100644
--- a/frontend/src/views/setting/Professional.vue
+++ b/frontend/src/views/setting/Professional.vue
@@ -231,7 +231,7 @@ onMounted(() => {
         border: 1px solid #ddd;
       }
       .primary-btn {
-        background: #1890ff;
+        background: var(--el-color-primary);
         color: white;
       }
       .tool-btn {
@@ -295,7 +295,7 @@ onMounted(() => {
         font-size: 18px;
         &:hover {
           background-color: #e8f0fe;
-          color: #4285f4;
+          color: var(--el-color-primary);
         }
       }
     }
diff --git a/frontend/src/views/system/model/index.vue b/frontend/src/views/system/model/index.vue
index f5bc24c8..14a018ba 100644
--- a/frontend/src/views/system/model/index.vue
+++ b/frontend/src/views/system/model/index.vue
@@ -397,7 +397,7 @@ const batchEnableHandler = () => {
         border: 1px solid #ddd;
       }
       .primary-btn {
-        background: #1890ff;
+        background: var(--el-color-primary);
         color: white;
       }
       .tool-btn {
@@ -464,7 +464,7 @@ const batchEnableHandler = () => {
         font-size: 18px;
         &:hover {
           background-color: #e8f0fe;
-          color: #4285f4;
+          color: var(--el-color-primary);
         }
       }
     }
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 050ba615..5ddfd7db 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -284,7 +284,7 @@ onMounted(() => {
         border: 1px solid #ddd;
       }
       .primary-btn {
-        background: #1890ff;
+        background: var(--el-color-primary);
         color: white;
       }
       .tool-btn {
@@ -351,7 +351,7 @@ onMounted(() => {
         font-size: 18px;
         &:hover {
           background-color: #e8f0fe;
-          color: #4285f4;
+          color: var(--el-color-primary);
         }
       }
     }