diff --git a/static/public/css/qing.css b/static/public/css/qing.css
new file mode 100644
index 0000000..3874be6
--- /dev/null
+++ b/static/public/css/qing.css
@@ -0,0 +1,71 @@
+code {
+    color: red;
+    background-color: rgb(254, 235, 238);
+    padding: 5px;
+    border-radius: 5px;
+}
+pre > code {
+    display: block;
+    color: white;
+    background-color: rgb(96, 96, 96);
+    padding: 5px;
+    border-radius: 5px;
+}
+blockquote {
+    margin-right: 0px;
+    background-color: #cfcfcf;
+}
+
+/* by qing */
+body {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fffbf0;
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto,sans-serif;
+    padding: 1rem;
+}
+
+.box {
+    width: 90%;
+}
+
+.card {
+    background-color: #eedeb0;
+    border: 1px solid #000000;
+    border-radius: 1.125rem;
+    padding: 1.5rem 1.25rem;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
+    /*max-width: 480px;*/
+    width: 90%;
+    color: #4d3e2b;
+    transition: box-shadow 0.2s, border-color 0.2s;
+    overflow-wrap: break-word;
+}
+
+.card:hover {
+    border-color: #c7b38a;
+    box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03);
+}
+
+/* 移动端微调 */
+@media (max-width: 480px) {
+    body {
+        padding: 0.8rem;
+    }
+
+    .card {
+        padding: 1.2rem, 1rem;
+        border-radius: 1rem;
+        border-width: 1px;
+    }
+}
+
+/* 极小屏 (宽度 < 360px)  */
+@media (max-width: 360px) {
+    .card {
+        padding: 1rem 0.8rem;
+        border-radius: 0.9rem;
+    }
+}
diff --git a/static/public/dnfs.html b/static/public/dnfs.html
index 7637f0d..73a14a3 100644
--- a/static/public/dnfs.html
+++ b/static/public/dnfs.html
@@ -5,34 +5,26 @@
 		<!-- 移动端适配核心标签 -->
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 		<title>DNFS · 树状笔记</title>
-		<style>
-			code {
-				color: red;
-				background-color: rgb(254, 235, 238);
-				padding: 5px;
-				border-radius: 5px;
-			}
-			pre > code {
-				display: block;
-				color: white;
-				background-color: rgb(96, 96, 96);
-				padding: 5px;
-				border-radius: 5px;
-			}
-			blockquote {
-				margin-right: 0px;
-				background-color: #cfcfcf;
-			}
-		</style>
+		<link rel="stylesheet" href="css/qing.css">
 	</head>
 	<body>
-		<center>
-		<!-- 文章主标题 -->
-		<h1><div id="article-title">title</div></h1>
+		<div class="box">
+			<h1><div id="article-title"></div></h1>
 
-		<!-- 文章详情 -->
-		<div>
-			发布时间：<span id="publish-time">2026-1-1</span>
+			</center>
+			<div id="article-content"></div>
+			<div class="recommend-list" id="recommend-list"></div>
+			<br>
+			<div class="card">
+				<h3>节点操作</h3>
+				<label>新增节点</label><input id="input-note-title"></input><br>
+				<label>节点内容</label><textarea id="input-note-content"></textarea><br>
+				<button id="input-note-submit">提交</button>
+				<button id="input-note-clear">重置</button>
+			</div>
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.0/markdown-it.min.js"></script>
+			<script src="/js/validation.js"></script>
+			<script src="/js/dnfs.js"></script>
 		</div>
 		<div>
 			浏览：<span id="visit-count">999</span>
diff --git a/static/public/js/dnfs.js b/static/public/js/dnfs.js
index 8f3f8d4..c233085 100644
--- a/static/public/js/dnfs.js
+++ b/static/public/js/dnfs.js
@@ -144,21 +144,23 @@ function load_notes(main_node) {
 	}
 	for (i in main_node) {
 		item = main_node[i]
+		var card = document.createElement('div'); 
+		card.className = "card";
 		var ttl = document.createElement('center');
 		ttl.addEventListener('click', function(event) {
 			var id = Number(item.id)
 			stack.push(id)
 			getNode(token, id).then(load_notes)
 		});
-		var ttl1 =document.createElement('h1');
+		var ttl1 =document.createElement('h3');
 		ttl1.textContent = item.title
 		ttl.appendChild(ttl1)
-		recommend_list.appendChild(ttl)
+		card.appendChild(ttl)
 		var ctt = document.createElement('p');
 		renderMarkdown(ctt, item.content);
-		recommend_list.appendChild(ctt)
+		card.appendChild(ctt)
+		recommend_list.appendChild(card)
 		recommend_list.appendChild(document.createElement('br'))
-		recommend_list.appendChild(document.createElement('hr'))
 	}
 };
 
diff --git a/static/public/login.html b/static/public/login.html
index d995f3b..c4aef65 100644
--- a/static/public/login.html
+++ b/static/public/login.html
@@ -5,6 +5,7 @@
 		<!-- 移动端适配核心标签 -->
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 		<title>登录</title>
+		<link rel="stylesheet" href="css/qing.css">
 		<style>
 			.tip-red {color:red;}
 			.tip-yellow {color: orange;}
@@ -12,36 +13,38 @@
 		</style>
 	</head>
 	<body>
-		<h2>用户登录</h2>
-		<form action="" id="form" method="post">
-			<div>
-			<label>用户名/推荐邮箱：</label>
-			<input type="text" id="loginUsername" name="username" placeholder="请输入用户名">
-			<span id="msgTip" ></span>
-			<br>
-			<label>密码：</label>
-			<input type="password" id="loginPassword" name="password" placeholder="请输入密码">
-			<span id="pwdTip"></span>
-			</div>
-			<div>
-			<label>验证邮箱：</label>
-			<input type="email" id="loginEmail" name="email" placeholder="请输入验证邮箱">
-			<span id="emlSub">
-				<input type="submit" value="发送验证码">
-			</span>
-			<span id="emlTip"></span>
-			</div>
-			<div>
-				<button type="button" id="registerBtn">注册</button>
-				<input type="submit" id="loginBtn" value="登录">
-				<input type="reset" id="resetUser" value="重置">
-			</div>
-			<div>
-				<input type="checkbox" id="agreeBox" name="agree" value="access">
-				<label id="agreement">同意该系统相关用户使用条例</label>
-				<span id="agreeTip"></span>
-			</div>
-		</form>
+		<div class="card">
+			<h2>用户登录</h2>
+			<form action="" id="form" method="post">
+				<div>
+				<label>用户名/推荐邮箱：</label>
+				<input type="text" id="loginUsername" name="username" placeholder="请输入用户名">
+				<span id="msgTip" ></span>
+				<br>
+				<label>密码：</label>
+				<input type="password" id="loginPassword" name="password" placeholder="请输入密码">
+				<span id="pwdTip"></span>
+				</div>
+				<div>
+				<label>验证邮箱：</label>
+				<input type="email" id="loginEmail" name="email" placeholder="请输入验证邮箱">
+				<span id="emlSub">
+					<input type="submit" value="发送验证码">
+				</span>
+				<span id="emlTip"></span>
+				</div>
+				<div>
+					<button type="button" id="registerBtn">注册</button>
+					<input type="submit" id="loginBtn" value="登录">
+					<input type="reset" id="resetUser" value="重置">
+				</div>
+				<div>
+					<input type="checkbox" id="agreeBox" name="agree" value="access">
+					<label id="agreement">同意该系统相关用户使用条例</label>
+					<span id="agreeTip"></span>
+				</div>
+			</form>
+		</div>
 		<script src="js/validation.js"></script>
 		<script src="js/login.js"></script>
 	</body>
diff --git a/static/public/register.html b/static/public/register.html
index 82157fa..e4ffc1f 100644
--- a/static/public/register.html
+++ b/static/public/register.html
@@ -4,6 +4,7 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 		<title>注册页面</title>
+		<link rel="stylesheet" href="css/qing.css">
 		<style>
 			.tip-red {color:red;}
 			.tip-yellow {color: orange;}
@@ -11,34 +12,36 @@
 		</style>
 	</head>
 	<body>
-		<h2>注册页面</h2>
-		<form id="form">
-			<div>
-				<label>用户名/推荐邮箱：</label>
-				<input type="text" id="regusername" placeholder="请输入用户名">
-				<span id="msgTip" ></span>
-				<br>
-				<label>邮箱号：</label>
-				<input type="email" id="regemail" placeholder="请输入邮箱号">
-				<div class="code-box">验证码：
-					<input type="text" id="code" placeholder="请输入6位验证码" inputmode="numeric" maxlength="6">
-					<input type="button" id="getCode" value="获取验证码">
-					<span id="codeTip"></span>
+		<div class="card">
+			<h2>注册页面</h2>
+			<form id="form">
+				<div>
+					<label>用户名/推荐邮箱：</label>
+					<input type="text" id="regusername" placeholder="请输入用户名">
+					<span id="msgTip" ></span>
+					<br>
+					<label>邮箱号：</label>
+					<input type="email" id="regemail" placeholder="请输入邮箱号">
+					<div class="code-box">验证码：
+						<input type="text" id="code" placeholder="请输入6位验证码" inputmode="numeric" maxlength="6">
+						<input type="button" id="getCode" value="获取验证码">
+						<span id="codeTip"></span>
+					</div>
+					<span id="emlTip"></span>
+					<br>
+					<label>密码：</label>
+					<input type="password" id="regpsw" placeholder="密码至少6位">
+					<label>验证密码：</label>
+					<input type="password" id="repwd" placeholder="请再次输入密码">
+					<span id="pwdTip"></span>
 				</div>
-				<span id="emlTip"></span>
-				<br>
-				<label>密码：</label>
-				<input type="password" id="regpsw" placeholder="密码至少6位">
-				<label>验证密码：</label>
-				<input type="password" id="repwd" placeholder="请再次输入密码">
-				<span id="pwdTip"></span>
-			</div>
-			<div>
-				<input id="formsub" type="submit" value="提交"> 
-				<input id="resetUser" type="reset" value="重置">
-				<input type="button" value="返回登录" onclick="location.href='login.html'"> 
-			</div>
-		</form>
+				<div>
+					<input id="formsub" type="submit" value="提交"> 
+					<input id="resetUser" type="reset" value="重置">
+					<input type="button" value="返回登录" onclick="location.href='login.html'"> 
+				</div>
+			</form>
+		</div>
 		<script src="js/validation.js"></script>
 		<script src="js/register.js?v=6"></script>
 	</body>