diff --git a/client/css/form-animation.css b/client/css/form-animation.css
index 4d5fea0..b7da935 100644
--- a/client/css/form-animation.css
+++ b/client/css/form-animation.css
@@ -14,7 +14,7 @@
   display: inline-block;
   font-size: 1.1rem;
   color: #888;
-  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transition: 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   min-width: 5px;
 }
 
diff --git a/client/index.html b/client/index.html
index af842bb..d3cfa83 100644
--- a/client/index.html
+++ b/client/index.html
@@ -9,23 +9,9 @@
 </head>
 <body>	<div class="login-container" id="login-container">
 		<h1>Enter a Node</h1>
-		<form id="login-form">			<div class="input-group"> 
-				<input id="userName" type="text" autocomplete="username" required minlength="1" maxlength="15" placeholder=""> 
-				<label for="userName" class="floating-label">
-					<span style="transition-delay:0ms">U</span><span style="transition-delay:50ms">s</span><span style="transition-delay:100ms">e</span><span style="transition-delay:150ms">r</span><span style="transition-delay:200ms">n</span><span style="transition-delay:250ms">a</span><span style="transition-delay:300ms">m</span><span style="transition-delay:350ms">e</span>
-				</label>
-			</div>			<div class="input-group"> 
-				<input id="roomName" type="text" required minlength="1" maxlength="15" placeholder=""> 
-				<label for="roomName" class="floating-label">
-					<span style="transition-delay:0ms">N</span><span style="transition-delay:50ms">o</span><span style="transition-delay:100ms">d</span><span style="transition-delay:150ms">e</span><span style="transition-delay:200ms"> </span><span style="transition-delay:250ms">N</span><span style="transition-delay:300ms">a</span><span style="transition-delay:350ms">m</span><span style="transition-delay:400ms">e</span>
-				</label>
-			</div>			<div class="input-group"> 
-				<input id="password" type="password" autocomplete="current-password" minlength="1" maxlength="15" placeholder=""> 
-				<label for="password" class="floating-label">
-					<span style="transition-delay:0ms">N</span><span style="transition-delay:50ms">o</span><span style="transition-delay:100ms">d</span><span style="transition-delay:150ms">e</span><span style="transition-delay:200ms"> </span><span style="transition-delay:250ms">P</span><span style="transition-delay:300ms">a</span><span style="transition-delay:350ms">s</span><span style="transition-delay:400ms">s</span><span style="transition-delay:450ms">w</span><span style="transition-delay:500ms">o</span><span style="transition-delay:550ms">r</span><span style="transition-delay:600ms">d</span><span style="transition-delay:650ms"> </span><span style="transition-delay:700ms" class="optional">(optional)</span>
-				</label>
-			</div>
-			<button type="submit" class="login-btn">ENTER</button>
+		<form id="login-form">
+			<!-- 登录表单内容将由JavaScript动态生成 -->
+			<!-- Login form content will be dynamically generated by JavaScript -->
 		</form>
 	</div>
 	<div class="container" id="chat-container" style="display:none;">
@@ -87,9 +73,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="rightbar-tabs tabs" id="member-tabs"> </div>
-			<div class="members" id="member-list"> </div>
-		</div>	</div>
-	<script type="module" src="./js/main.js"></script>
+			<div class="rightbar-tabs tabs" id="member-tabs"> </div>		<div class="members" id="member-list"> </div>
+		</div>	</div>	<script type="module" src="./js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/client/js/main.js b/client/js/main.js
index 8c3dde2..e486edc 100644
--- a/client/js/main.js
+++ b/client/js/main.js
@@ -50,15 +50,16 @@ import {
 
 // 从 ui.js 中导入 UI 界面相关的功能
 // Import user interface functions from ui.js
-import {
-	renderUserList,       // 渲染用户列表 / Render user list
+import {	renderUserList,       // 渲染用户列表 / Render user list
 	renderMainHeader,     // 渲染主标题栏 / Render main header
 	setupMoreBtnMenu,     // 设置更多按钮的下拉菜单 / Setup "more" button menu
 	preventSpaceInput,    // 防止输入空格 / Prevent space input in form fields
 	loginFormHandler,     // 登录表单提交处理器 / Login form handler
 	openLoginModal,       // 打开登录窗口 / Open login modal
 	setupTabs,            // 设置页面标签切换 / Setup tab switching
-	autofillRoomPwd       // 自动填充房间密码 / Autofill room password
+	autofillRoomPwd,      // 自动填充房间密码 / Autofill room password
+	generateLoginForm,    // 生成登录表单HTML / Generate login form HTML
+	initLoginForm         // 初始化登录表单 / Initialize login form
 } from './ui.js';
 
 // 设置全局配置参数
@@ -78,6 +79,9 @@ window.setupEmojiPicker = setupEmojiPicker;
 // 当 DOM 内容加载完成后执行初始化逻辑
 // Run initialization logic when the DOM content is fully loaded
 window.addEventListener('DOMContentLoaded', () => {
+	// 初始化登录表单 / Initialize login form
+	initLoginForm();
+
 	const loginForm = $id('login-form');               // 登录表单 / Login form
 
 	if (loginForm) {
diff --git a/client/js/ui.js b/client/js/ui.js
index a896c7a..0bca29c 100644
--- a/client/js/ui.js
+++ b/client/js/ui.js
@@ -294,12 +294,36 @@ export function loginFormHandler(modal) {
 	}
 }
 
-// Open the login modal dialog
-// 打开登录弹窗
+// 生成登录表单HTML
+// Generate login form HTML
+export function generateLoginForm(isModal = false) {
+	const idPrefix = isModal ? '-modal' : '';
+	return `
+		<div class="input-group">
+			<input id="userName${idPrefix}" type="text" autocomplete="username" required minlength="1" maxlength="15" placeholder="">
+			<label for="userName${idPrefix}" class="floating-label">
+				<span style="transition-delay:0ms">U</span><span style="transition-delay:40ms">s</span><span style="transition-delay:80ms">e</span><span style="transition-delay:120ms">r</span><span style="transition-delay:160ms">n</span><span style="transition-delay:200ms">a</span><span style="transition-delay:240ms">m</span><span style="transition-delay:280ms">e</span>
+			</label>
+		</div>
+		<div class="input-group">
+			<input id="roomName${idPrefix}" type="text" required minlength="1" maxlength="15" placeholder="">
+			<label for="roomName${idPrefix}" class="floating-label">
+				<span style="transition-delay:0ms">N</span><span style="transition-delay:40ms">o</span><span style="transition-delay:80ms">d</span><span style="transition-delay:120ms">e</span><span style="transition-delay:160ms"> </span><span style="transition-delay:200ms">N</span><span style="transition-delay:240ms">a</span><span style="transition-delay:280ms">m</span><span style="transition-delay:320ms">e</span>
+			</label>
+		</div>
+		<div class="input-group">
+			<input id="password${idPrefix}" type="password" autocomplete="${isModal ? 'off' : 'current-password'}" minlength="1" maxlength="15" placeholder="">
+			<label for="password${idPrefix}" class="floating-label">
+				<span style="transition-delay:0ms">N</span><span style="transition-delay:40ms">o</span><span style="transition-delay:80ms">d</span><span style="transition-delay:120ms">e</span><span style="transition-delay:160ms"> </span><span style="transition-delay:200ms">P</span><span style="transition-delay:240ms">a</span><span style="transition-delay:280ms">s</span><span style="transition-delay:320ms">s</span><span style="transition-delay:360ms">w</span><span style="transition-delay:400ms">o</span><span style="transition-delay:440ms">r</span><span style="transition-delay:480ms">d</span><span style="transition-delay:520ms"> </span><span style="transition-delay:560ms" class="optional">(optional)</span>
+			</label>
+		</div>
+		<button type="submit" class="login-btn">ENTER</button>
+	`;
+}
 export function openLoginModal() {
 	const modal = document.createElement('div');
 	modal.className = 'login-modal';
-	modal.innerHTML = `<div class="login-modal-bg"></div><div class="login-modal-card"><button class="login-modal-close login-modal-close-abs">&times;</button><h1>Enter a Node</h1><form id="login-form-modal"><div class="input-group"><label for="userName-modal">Username</label><input id="userName-modal"type="text"autocomplete="username"required minlength="1"maxlength="15"></div><div class="input-group"><label for="roomName-modal">Node Name</label><input id="roomName-modal"type="text"required minlength="1"maxlength="15"></div><div class="input-group"><label for="password-modal">Node Password<span class="optional">(optional)</span></label><input id="password-modal"type="password"autocomplete="off"minlength="1"maxlength="15"></div><button type="submit"class="login-btn">ENTER</button></form></div>`;
+	modal.innerHTML = `<div class="login-modal-bg"></div><div class="login-modal-card"><button class="login-modal-close login-modal-close-abs">&times;</button><h1>Enter a Node</h1><form id="login-form-modal">${generateLoginForm(true)}</form></div>`;
 	document.body.appendChild(modal);
 	modal.querySelector('.login-modal-close').onclick = () => modal.remove();
 	preventSpaceInput(modal.querySelector('#userName-modal'));
@@ -347,4 +371,13 @@ export function autofillRoomPwd(formPrefix = '') {
 	if (room || pwd) {
 		window.history.replaceState({}, '', location.pathname)
 	}
+}
+
+// 初始化登录表单
+// Initialize login form
+export function initLoginForm() {
+	const loginFormContainer = document.getElementById('login-form');
+	if (loginFormContainer) {
+		loginFormContainer.innerHTML = generateLoginForm(false);
+	}
 }
\ No newline at end of file