diff --git a/frontend/app/[locale]/agents/components/agentConfig/McpConfigModal.tsx b/frontend/app/[locale]/agents/components/agentConfig/McpConfigModal.tsx
index e8786c0d2..d458fa96f 100644
--- a/frontend/app/[locale]/agents/components/agentConfig/McpConfigModal.tsx
+++ b/frontend/app/[locale]/agents/components/agentConfig/McpConfigModal.tsx
@@ -610,7 +610,7 @@ export default function McpConfigModal({
         onCancel={actionsLocked ? undefined : onCancel}
         width={1200}
         closable={!actionsLocked}
-        maskClosable={!actionsLocked}
+        mask={{ closable: !actionsLocked }}
         footer={[
           <Button key="cancel" onClick={onCancel} disabled={actionsLocked}>
             {actionsLocked
diff --git a/frontend/app/[locale]/agents/components/agentConfig/tool/ToolConfigModal.tsx b/frontend/app/[locale]/agents/components/agentConfig/tool/ToolConfigModal.tsx
index bd822b243..3b45dcb38 100644
--- a/frontend/app/[locale]/agents/components/agentConfig/tool/ToolConfigModal.tsx
+++ b/frontend/app/[locale]/agents/components/agentConfig/tool/ToolConfigModal.tsx
@@ -1028,8 +1028,7 @@ export default function ToolConfigModal({
   return (
     <>
       <Modal
-        mask={true}
-        maskClosable={false}
+        mask={{ closable: false }}
         title={
           <div className="flex justify-between items-center w-full pr-8">
             <span>{`${tool?.name}`}</span>
diff --git a/frontend/app/[locale]/page.tsx b/frontend/app/[locale]/page.tsx
index d56e06728..9e8d5f400 100644
--- a/frontend/app/[locale]/page.tsx
+++ b/frontend/app/[locale]/page.tsx
@@ -55,27 +55,24 @@ export default function Homepage() {
   const navigateToSpace = () => navigateWithPermissionCheck("/space");
 
   return (
-    <div className="w-full h-full flex flex-col items-center justify-center">
+    <div className="w-full min-h-full flex flex-col items-center justify-start">
       {/* Hero area */}
-      <section className="relative w-full py-4 flex flex-col items-center justify-center text-center">
+      <section className="relative w-full pt-8 pb-4 flex flex-col items-center justify-center text-center">
         <div className="absolute inset-0 bg-grid-slate-200 dark:bg-grid-slate-800 [mask-image:radial-gradient(ellipse_at_center,white_20%,transparent_75%)] -z-10"></div>
         <motion.h2
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
-          className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white mb-4 tracking-tight"
+          className="hero-art-title max-w-5xl text-3xl md:text-4xl lg:text-[3.25rem] font-bold mb-4 px-4"
         >
-          {t("page.title")}
-          <span className="text-blue-600 dark:text-blue-500">
-            {" "}
-            {t("page.subtitle")}
-          </span>
+          <span className="hero-art-title-main block">{t("page.title")}</span>
+          <span className="hero-art-title-accent block mt-1">{t("page.subtitle")}</span>
         </motion.h2>
         <motion.p
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.3 }}
-          className="max-w-2xl text-slate-600 dark:text-slate-300 text-lg md:text-xl mb-8"
+          className="max-w-3xl text-slate-600 dark:text-slate-300 text-base md:text-lg mb-7 px-4"
         >
           {t("page.description")}
         </motion.p>
@@ -217,4 +214,4 @@ function FeatureCard({ icon, title, description }: FeatureCardProps) {
       </CardContent>
     </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/[locale]/tenant-resources/components/resources/AgentList.tsx b/frontend/app/[locale]/tenant-resources/components/resources/AgentList.tsx
index 499c6e297..8bf441f52 100644
--- a/frontend/app/[locale]/tenant-resources/components/resources/AgentList.tsx
+++ b/frontend/app/[locale]/tenant-resources/components/resources/AgentList.tsx
@@ -438,7 +438,7 @@ export default function AgentList({ tenantId }: { tenantId: string | null }) {
           </Button>
         ]}
         width={700}
-        maskClosable={false}
+        mask={{ closable: false }}
       >
         <Spin spinning={isLoadingDetail}>
           <Form form={form} layout="vertical">
diff --git a/frontend/app/[locale]/tenant-resources/components/resources/InvitationList.tsx b/frontend/app/[locale]/tenant-resources/components/resources/InvitationList.tsx
index ac44886cd..45a5d2765 100644
--- a/frontend/app/[locale]/tenant-resources/components/resources/InvitationList.tsx
+++ b/frontend/app/[locale]/tenant-resources/components/resources/InvitationList.tsx
@@ -425,7 +425,7 @@ export default function InvitationList({ tenantId, refreshKey }: { tenantId: str
         okText={t("common.confirm")}
         cancelText={t("common.cancel")}
         width={600}
-        maskClosable={false}
+        mask={{ closable: false }}
       >
         <Form form={form} layout="vertical">
           {!editingInvitation && (
diff --git a/frontend/components/auth/AuthDialogs.tsx b/frontend/components/auth/AuthDialogs.tsx
index bc5e016c3..9fd37f483 100644
--- a/frontend/components/auth/AuthDialogs.tsx
+++ b/frontend/components/auth/AuthDialogs.tsx
@@ -41,7 +41,7 @@ export function AuthDialogs() {
         centered
         closable
         width={480}
-        maskClosable={false}
+        mask={{ closable: false }}
       >
         <div className="relative bg-white p-4 rounded-2xl">
           {/* Logo */}
diff --git a/frontend/components/auth/loginModal.tsx b/frontend/components/auth/loginModal.tsx
index 9b0f43256..fe7aa37ee 100644
--- a/frontend/components/auth/loginModal.tsx
+++ b/frontend/components/auth/loginModal.tsx
@@ -177,7 +177,7 @@ export function LoginModal() {
       width={420}
       centered
       forceRender
-      maskClosable={false}
+      mask={{ closable: false }}
       closable={true}
     >
       <div className="relative bg-white p-4 rounded-2xl">
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
index acfb6e84c..1c0bbea31 100644
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@@ -337,4 +337,26 @@ tr.selected-row > td:first-child::before {
 /* Override antd Tooltip inner border to prevent double borders */
 .ant-tooltip .ant-tooltip-inner {
   border: none !important;
-}
\ No newline at end of file
+}
+
+/* Home hero artistic title */
+.hero-art-title {
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+.hero-art-title-main {
+  background: linear-gradient(98deg, #0f172a 0%, #1e40af 52%, #2563eb 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.hero-art-title-accent {
+  background: linear-gradient(98deg, #2563eb 0%, #3b82f6 56%, #06b6d4 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 0 2px 14px rgba(37, 99, 235, 0.18);
+}