diff --git a/web/src/assets/images/index/index_bg.png b/web/src/assets/images/index/index_bg.png
new file mode 100644
index 00000000..69f6402c
Binary files /dev/null and b/web/src/assets/images/index/index_bg.png differ
diff --git a/web/src/assets/images/index/index_bg@2x.png b/web/src/assets/images/index/index_bg@2x.png
deleted file mode 100644
index fbf30083..00000000
Binary files a/web/src/assets/images/index/index_bg@2x.png and /dev/null differ
diff --git a/web/src/assets/images/login/bg.mp4 b/web/src/assets/images/login/bg.mp4
new file mode 100644
index 00000000..7d0f7b2d
Binary files /dev/null and b/web/src/assets/images/login/bg.mp4 differ
diff --git a/web/src/assets/images/login/check.png b/web/src/assets/images/login/check.png
deleted file mode 100644
index f412854e..00000000
Binary files a/web/src/assets/images/login/check.png and /dev/null differ
diff --git a/web/src/assets/images/login/check.svg b/web/src/assets/images/login/check.svg
new file mode 100644
index 00000000..93b7a447
--- /dev/null
+++ b/web/src/assets/images/login/check.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>勾选</title>
+    <g id="空间外层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录页面" transform="translate(-64, -611)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组-8" transform="translate(64, 608)">
+                <g id="勾选" transform="translate(0, 3)">
+                    <path d="M12,0 C14.209139,0 16,1.790861 16,4 L16,12 C16,14.209139 14.209139,16 12,16 L4,16 C1.790861,16 0,14.209139 0,12 L0,4 C0,1.790861 1.790861,4.4408921e-16 4,0 L12,0 Z M11.9182266,4.80024782 C11.7273831,4.80024782 11.5444062,4.87629473 11.4097812,5.0115625 L6.552,9.86932813 L4.4284375,7.74489063 C4.29381317,7.60962766 4.11083967,7.53358379 3.92,7.53358379 C3.72916033,7.53358379 3.54618683,7.60962766 3.4115625,7.74489063 C3.27602096,7.87955071 3.19979999,8.06271883 3.19979999,8.25378125 C3.19979999,8.44484367 3.27602096,8.62801179 3.4115625,8.76267188 L6.0453125,11.3946719 C6.17993745,11.5299396 6.3629143,11.6059866 6.55375781,11.6059866 C6.74460132,11.6059866 6.92757818,11.5299396 7.06220312,11.3946719 L12.4311094,6.02667188 C12.5659036,5.89187668 12.6412595,5.70881589 12.6404302,5.51818919 C12.639587,5.3275625 12.5626279,5.14516989 12.4266562,5.0115625 C12.2920469,4.87629473 12.1090701,4.80024782 11.9182266,4.80024782 Z" id="形状结合"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/images/login/title_en.png b/web/src/assets/images/login/title_en.png
new file mode 100644
index 00000000..4bff6c93
Binary files /dev/null and b/web/src/assets/images/login/title_en.png differ
diff --git a/web/src/assets/images/login/title_zh.png b/web/src/assets/images/login/title_zh.png
new file mode 100644
index 00000000..faa37372
Binary files /dev/null and b/web/src/assets/images/login/title_zh.png differ
diff --git a/web/src/styles/index.css b/web/src/styles/index.css
index 0bbacb51..ac30b867 100644
--- a/web/src/styles/index.css
+++ b/web/src/styles/index.css
@@ -467,4 +467,29 @@ input:-webkit-autofill:active {
   animation-name: onAutoFillStart;
   animation-duration: 1ms;
 }
-@keyframes onAutoFillStart { from {} to {} }
\ No newline at end of file
+@keyframes onAutoFillStart { from {} to {} }
+/* Login input placeholder */
+.login-input input::placeholder {
+  color: #A8A9AA !important;
+}
+
+.login-input {
+  border-color: #A8A9AA;
+}
+
+/* Login input hover/focus border */
+.login-input:hover,
+.login-input:focus-within {
+  border-color: #FFFFFF !important;
+  box-shadow: none !important;
+}
+
+/* Override browser autofill styles */
+.login-input input:-webkit-autofill,
+.login-input input:-webkit-autofill:hover,
+.login-input input:-webkit-autofill:focus,
+.login-input input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0px 1000px #0A0A0A inset !important;
+  -webkit-text-fill-color: #FFFFFF !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
\ No newline at end of file
diff --git a/web/src/views/Index/index.tsx b/web/src/views/Index/index.tsx
index 1e4bdcdd..ce9e793f 100644
--- a/web/src/views/Index/index.tsx
+++ b/web/src/views/Index/index.tsx
@@ -102,7 +102,7 @@ const Index = () => {
     <Flex gap={12} wrap="nowrap" className="rb:w-full! rb:h-full! rb:overflow-y-auto">
       <div className="rb:flex-1 rb:min-w-0">
         <Flex vertical>
-          <div className='rb:w-full rb:h-26 rb:p-4 rb:bg-cover rb:bg-[url("@/assets/images/index/index_bg@2x.png")] rb:rounded-xl rb:overflow-hidden'>
+          <div className='rb:w-full rb:h-26 rb:p-4 rb:bg-cover rb:bg-[url("@/assets/images/index/index_bg.png")] rb:rounded-xl rb:overflow-hidden'>
             <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-white rb:text-[18px] rb:leading-7">
               {t('index.spaceTitle')}
             </div>
diff --git a/web/src/views/Login/index.tsx b/web/src/views/Login/index.tsx
index 6a5f31cd..6f6230c3 100644
--- a/web/src/views/Login/index.tsx
+++ b/web/src/views/Login/index.tsx
@@ -14,27 +14,33 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input, Form, App } from 'antd';
 import type { FormProps } from 'antd';
+import clsx from 'clsx';
 
 import { useUser, type LoginInfo } from '@/store/user';
 import { login } from '@/api/user'
-import loginBg from '@/assets/images/login/loginBg.png'
-import check from '@/assets/images/login/check.png'
+import loginBg from '@/assets/images/login/bg.mp4'
+import check from '@/assets/images/login/check.svg'
 import email from '@/assets/images/login/email.svg'
 import lock from '@/assets/images/login/lock.svg'
 import type { LoginForm } from './types';
+import { useI18n } from '@/store/locale'
 
 /**
  * Input field styling
  */
-const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
+const inputClassName = "login-input rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]! rb:bg-transparent! rb:text-[#FFFFFF]! [&_input]:rb:text-[#FFFFFF]! [&_input]:rb:caret-[#FFFFFF]!"
 
 /**
  * Login page component
  */const LoginPage: React.FC = () => {
   const { t } = useTranslation();
   const { clearUserInfo, updateLoginInfo, getUserInfo } = useUser();
+  const { language } = useI18n()
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm<LoginForm>();
+  const emailVal = Form.useWatch('email', form);
+  const passwordVal = Form.useWatch('password', form);
+  const canLogin = !!(emailVal && passwordVal);
   const { message } = App.useApp();
 
   useEffect(() => {
@@ -43,6 +49,7 @@ const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
 
   /** Handle login form submission */
   const handleLogin: FormProps<LoginForm>['onFinish'] = async (values) => {
+    if (!canLogin) return;
     if (!values.email) {
       message.warning(t('login.emailPlaceholder'));
       return;
@@ -64,42 +71,45 @@ const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
 
 
   return (
-    <div className="rb:min-h-screen rb:flex rb:h-screen">
+    <div className="rb:min-h-screen rb:flex rb:h-screen rb:bg-[#0A0A0A] rb:text-[#FFFFFF]">
       <div className="rb:relative rb:w-1/2 rb:h-screen rb:overflow-hidden">
-        <img src={loginBg} alt="loginBg" className="rb:w-full rb:h-full rb:object-cover rb:absolute rb:top-1/2 rb:-translate-y-1/2 rb:left-0" />
-        <div className="rb:absolute rb:top-14 rb:left-16">
-          <div className="rb:text-[28px] rb:leading-8.25 rb:font-bold rb:font-[AlimamaShuHeiTi,AlimamaShuHeiTi] rb:mb-4">{t('login.title')}</div>
-          <div className="rb:text-[18px] rb:leading-6.25 rb:font-regular">{t('login.subTitle')}</div>
+        <video src={loginBg} loop autoPlay playsInline muted className="rb:w-full rb:h-full rb:object-cover"></video>
+        <div className="rb:absolute rb:top-10 rb:left-12">
+          <div className={clsx("rb:h-8.25 rb:bg-cover", {
+            "rb:w-89 rb:bg-[url('@/assets/images/login/title_en.png')]": language !== 'zh',
+            "rb:w-42 rb:bg-[url('@/assets/images/login/title_zh.png')]": language === 'zh'
+          })}></div>
+          <div className="rb:text-[18px] rb:text-[rgba(255,255,255,0.7)] rb:leading-6.25 rb:font-regular rb:mt-3">{t('login.subTitle')}</div>
         </div>
 
-        <div className="rb:absolute rb:bottom-20.25 rb:left-16 rb:grid rb:grid-cols-2 rb:gap-x-30 rb:gap-y-10.75">
-          {['intelligentMemory', 'instantRecall', 'knowledgeAssociation'].map(key => (
-            <div key={key} className="rb:flex">
+        <div className="rb:absolute rb:bottom-14 rb:left-12 rb:right-12 rb:grid rb:grid-cols-2 rb:gap-x-30 rb:gap-y-10.75">
+          {['intelligentMemory', 'instantRecall', 'knowledgeAssociation'].map((key, index) => (
+            <div key={key} className={`rb:flex${index === 0 ? ' rb:col-span-2' : ''}`}>
               <img src={check} className="rb:w-4 rb:h-4 rb:mr-2 rb:mt-0.75" />
               <div className="rb:text-[16px] rb:leading-5.5">
                 <div className="rb:font-medium">{t(`login.${key}`)}</div>
-                <div className="rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:font-regular! rb:mt-2">{t(`login.${key}Desc`)}</div>
+                <div className="rb:text-[14px] rb:text-[rgba(255,255,255,0.7)] rb:leading-5 rb:font-regular! rb:mt-2">{t(`login.${key}Desc`)}</div>
               </div>
             </div>
           ))}
         </div>
       </div>
 
-      <div className="rb:bg-[#FFFFFF] rb:flex rb:items-center rb:justify-center rb:flex-[1_1_auto]">
-        <div className="rb:w-100 rb:mx-auto">
-          <div className="rb:text-center rb:text-[28px] rb:font-semibold rb:leading-8 rb:mb-12">{t('login.welcome')}</div>
+      <div className="rb:flex rb:items-center rb:justify-center rb:flex-[1_1_auto]">
+        <div className="rb:w-110 rb:mx-auto">
+          <div className="rb:text-center rb:text-[24px] rb:font-[MiSans-Bold] rb:font-bold rb:leading-8 rb:mb-12">{t('login.welcome')}</div>
           <Form
             form={form}
             onFinish={handleLogin}
           >
-            <Form.Item name="email" className="rb:mb-5!">
+            <Form.Item name="email" className="rb:mb-6!">
               <Input
                 prefix={<img src={email} className="rb:w-5 rb:h-5 rb:mr-2" />}
                 placeholder={t('login.emailPlaceholder')}
                 className={inputClassName}
               />
             </Form.Item>
-            <Form.Item name="password">
+            <Form.Item name="password" className="rb:mb-0!">
               <Input.Password
                 prefix={<img src={lock} className="rb:w-5 rb:h-5 rb:mr-2" />}
                 placeholder={t('login.passwordPlaceholder')}
@@ -111,7 +121,11 @@ const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
               block
               loading={loading}
               htmlType="submit"
-              className="rb:h-10! rb:rounded-lg! rb:mt-4"
+              disabled={!canLogin}
+              className={clsx("rb:h-11.5! rb:rounded-lg! rb:mt-12", {
+                'rb:hover:bg-[#2d6ef1]! rb:bg-[#155EEF]! rb:border-[#155EEF]!': canLogin,
+                'rb:bg-[#171719]! rb:border-[#171719]!': !canLogin
+              })}
             >
               {t('login.loginIn')}
             </Button>
diff --git a/web/src/views/ToolManagement/Market.tsx b/web/src/views/ToolManagement/Market.tsx
index 2c2cb6a9..3d70f08e 100644
--- a/web/src/views/ToolManagement/Market.tsx
+++ b/web/src/views/ToolManagement/Market.tsx
@@ -361,7 +361,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
               )}
             </Flex>
             <div>
-              <div className="rb:font-[MiSans Bold] rb:font-bold rb:text-[16px] rb:leading-5.5">{source.name}</div>
+              <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[16px] rb:leading-5.5">{source.name}</div>
               <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5">{t('tool.availableMcp')} ({mcpTotal})</div>
             </div>
           </Flex>