diff --git a/seatunnel-ui/src/views/login/index.tsx b/seatunnel-ui/src/views/login/index.tsx
index 9be980c0b0e..87cac2fbe5b 100644
--- a/seatunnel-ui/src/views/login/index.tsx
+++ b/seatunnel-ui/src/views/login/index.tsx
@@ -37,9 +37,9 @@ const Login = defineComponent({
   },
   render() {
     return (
-      <NSpace justify='center' align='center' class='w-full h-screen'>
-        <div>
-          <h2>{this.t('login.login_to_sea_tunnel')}</h2>
+      <NSpace justify='center' align='center' class='w-full h-screen bg-blue-400'>
+        <div class='w-96 bg-white px-10 py-8'>
+          <h2 class='text-2xl mb-6'>{this.t('login.login_to_sea_tunnel')}</h2>
           <NForm rules={this.rules} ref='loginFormRef'>
             <NFormItem
               label={this.t('login.username')}