diff --git a/public/css/layouts/bg-page.css b/public/css/layouts/bg-page.css
new file mode 100644
index 0000000..a15b3bd
--- /dev/null
+++ b/public/css/layouts/bg-page.css
@@ -0,0 +1,54 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: Arial, sans-serif;
+    color: #333;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.page-layout {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.page {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+
+    max-width: 1226px;
+    margin-right: auto;
+    margin-left: auto;
+    color: white;
+
+}
+
+.content {
+    flex: 1;
+    width: 0;
+}
+
+@media screen and (max-width: 768px) {
+    .content {
+        padding: 0 10px;
+        padding-top: 40px;
+    }
+}
+
+.card {
+    padding: 20px;
+    border-radius: 28px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    color: #fff;
+}
\ No newline at end of file
diff --git a/public/css/layouts/root.css b/public/css/layouts/root.css
new file mode 100644
index 0000000..815ff25
--- /dev/null
+++ b/public/css/layouts/root.css
@@ -0,0 +1,14 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: Arial, sans-serif;
+    color: #333;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/public/css/page/index.css b/public/css/page/index.css
index 7498e1e..2c8f30b 100644
--- a/public/css/page/index.css
+++ b/public/css/page/index.css
@@ -33,7 +33,7 @@
     transform-origin: center center;
     transition: 0.5s transform ease-in-out, 0.5s left ease-in-out;
 }
-
+/* 
 .card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(12px);
@@ -43,7 +43,7 @@
     margin: 0 auto;
     margin-bottom: 40px;
     text-align: center;
-}
+} */
 
 @media screen and (max-width: 768px) {
     .home-hero {
diff --git a/public/reset.css b/public/lib/reset.css
similarity index 100%
rename from public/reset.css
rename to public/lib/reset.css
diff --git a/public/styles.css b/public/styles.css
deleted file mode 100644
index 230066b..0000000
--- a/public/styles.css
+++ /dev/null
@@ -1,160 +0,0 @@
-html,
-body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    font-family: Arial, sans-serif;
-    color: #333;
-}
-
-body {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-/* 
-body::after {
-    content: "";
-    position: fixed;
-    pointer-events: none;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background-image: var(--bg);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-color: #000000;
-    background-color: #f9f9f9;
-    filter: brightness(.75);
-    z-index: -2;
-} */
-
-/* .navbar {
-    height: 49px;
-    display: flex;
-    align-items: center;
-    box-shadow: 1px 1px 3px #e4e4e4;
-} */
-
-.title {
-    font-size: 1.5em;
-    margin-left: 10px;
-    color: #333;
-}
-
-.page-layout {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.page {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    position: relative;
-
-    /* max-width: 1400px; */
-    /* margin: 0 auto; */
-}
-
-.content {
-    flex: 1;
-    width: 0;
-}
-
-.footer {}
-
-.nav {
-    padding: 20px;
-}
-
-.flota-nav {
-    position: sticky;
-    left: 0;
-    top: 20px;
-    width: 80px;
-    padding: 40px 0;
-    border-radius: 80px;
-    /* background: linear-gradient(135deg, #4fd1ff 0%, #ff6a6a 100%); */
-    /* 更明亮的渐变色 */
-    /* box-shadow: 0 8px 32px 0 rgba(80, 80, 200, 0.18), 0 2px 16px 0 rgba(255, 106, 106, 0.12); */
-    /* 更明显的阴影 */
-    /* transition: background 0.3s, box-shadow 0.3s; */
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(12px);
-}
-
-.flota-nav .item {
-    display: block;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    color: #fff;
-    text-align: center;
-    cursor: pointer;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 1.1em;
-    letter-spacing: 1px;
-    margin-bottom: 8px;
-    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
-    box-shadow: 0 2px 8px 0 rgba(79, 209, 255, 0.10);
-    /* item 也加轻微阴影 */
-}
-
-.flota-nav .item:hover {
-    background: linear-gradient(90deg, #ffb86c 0%, #4fd1ff 100%);
-    color: #fff200;
-    box-shadow: 0 4px 16px 0 rgba(255, 184, 108, 0.18);
-}
-
-.flota-nav .item.active {
-    background: #fff200;
-    color: #ff6a6a;
-    box-shadow: 0 4px 20px 0 rgba(255, 242, 0, 0.22);
-}
-
-.card {
-    padding: 56px 40px 44px 40px;
-    border-radius: 28px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(12px);
-    color: #fff;
-}
-
-
-@media screen and (max-width: 768px) {
-    .nav {
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        padding: 0;
-        margin: 0;
-    }
-    .flota-nav {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        display: flex;
-        z-index: 9999;
-        padding: 0 10px;
-        height: 40px;
-        border-radius: 0;
-    }
-
-    .flota-nav .item{
-        margin-bottom: 0;
-        padding: 0 10px;
-    }
-
-    .content {
-        padding: 0 10px;
-        padding-top: 40px;
-    }
-}
\ No newline at end of file
diff --git a/src/controllers/Page/PageController.js b/src/controllers/Page/PageController.js
index bdce432..e1841db 100644
--- a/src/controllers/Page/PageController.js
+++ b/src/controllers/Page/PageController.js
@@ -9,15 +9,20 @@ class PageController {
         this.userService = new UserService()
         this.siteConfigService = new SiteConfigService()
     }
+
+    // 首页
     async indexGet(ctx) {
         return await ctx.render("page/index/index", {}, { includeSite: true, includeUser: true })
     }
+
+    // 未授权报错页
     async indexNoAuth(ctx) {
         return await ctx.render("page/auth/no-auth", {})
     }
 
+    // 登录页
     async loginGet(ctx) {
-        if (ctx.state.user) {
+        if (ctx.session.user) {
             ctx.status = 200
             ctx.redirect("/?msg=用户已登录")
             return
@@ -25,6 +30,7 @@ class PageController {
         return await ctx.render("page/login/index", { site_title: "登录" })
     }
 
+    // 处理登录请求
     async loginPost(ctx) {
         const { username, email, password } = ctx.request.body
         const result = await this.userService.login({ username, email, password })
@@ -32,6 +38,7 @@ class PageController {
         ctx.body = { success: true, message: "登录成功" }
     }
 
+    // 获取验证码
     async captchaGet(ctx) {
         var captcha = svgCaptcha.create({
             size: 4, // 个数
@@ -39,7 +46,7 @@ class PageController {
             height: 30, // 高
             fontSize: 38, // 字体大小
             color: true, // 字体颜色是否多变
-            noise: 2, // 干扰线几条
+            noise: 4, // 干扰线几条
         })
         // 记录验证码信息（文本+过期时间）
         // 这里设置5分钟后过期
@@ -52,13 +59,9 @@ class PageController {
         ctx.body = captcha.data
     }
 
+    // 注册页
     async registerGet(ctx) {
-        if (ctx.state.user) {
-            ctx.cookies.set("toast", JSON.stringify({ type: "error", message: encodeURIComponent("用户已登录") }), {
-                maxAge: 1,
-                httpOnly: false,
-                path: "/",
-            })
+        if (ctx.session.user) {
             return ctx.redirect("/?msg=用户已登录")
         }
         // TODO 多个
@@ -66,6 +69,7 @@ class PageController {
         return await ctx.render("page/register/index", { site_title: "注册", randomStr: ctx.session.registerRandomStr })
     }
 
+    // 处理注册请求
     async registerPost(ctx) {
         const { username, password, code, randomStr } = ctx.request.body
 
@@ -101,29 +105,18 @@ class PageController {
 
         delete ctx.session.captcha
 
-        // try {
         await this.userService.register({ username, password, role: "user" })
-        // ctx.cookies.set("toast", JSON.stringify({ type: "success", message: "注册成功" }), {
-        //     maxAge: 1,
-        //     httpOnly: false,
-        //     path: "/",
-        // })
-        // } catch (error) {
-        //     ctx.cookies.set('toast', JSON.stringify({type:"error",message:encodeURIComponent(error.message || error)}), {
-        //         maxAge: 1,
-        //         httpOnly: false,
-        //         path: '/',
-        //     })
-        // }
         return ctx.redirect("/login")
     }
 
+    // 退出登录
     async logout(ctx) {
         ctx.status = 200
         delete ctx.session.user
         ctx.set("hx-redirect", "/")
     }
 
+    // 渲染页面
     pageGet(name, data) {
         return async ctx => {
             return await ctx.render(
diff --git a/src/views/htmx/footer.pug b/src/views/htmx/footer.pug
index b1a4beb..4dc54b1 100644
--- a/src/views/htmx/footer.pug
+++ b/src/views/htmx/footer.pug
@@ -12,10 +12,10 @@
             background: rgba(34,34,34,.25);
             backdrop-filter: blur(12px);
             color: #eee;
-            padding: 40px 0 24px 0;
+            padding: 24px 0 24px 0;
             font-size: 15px;
             margin-top: 40px;
-            min-height: 120px;
+            min-height: 100px;
             display: flex;
             align-items: center;
             justify-content: center;
diff --git a/src/views/layouts/bg-page.pug b/src/views/layouts/bg-page.pug
new file mode 100644
index 0000000..48c4374
--- /dev/null
+++ b/src/views/layouts/bg-page.pug
@@ -0,0 +1,18 @@
+extends /layouts/root.pug
+//- 采用纯背景页面的布局，背景图片随机切换，卡片采用高斯滤镜类玻璃化效果
+//- .card
+
+block $$head
+  +css('css/layouts/bg-page.css')
+  block pageHead
+
+block $$content
+  .page-layout
+    .page
+      block pageContent
+  footer
+    include /htmx/footer.pug
+
+block $$scripts
+  +js('lib/bg-change.js')
+  block pageScripts
diff --git a/src/views/layouts/pure.pug b/src/views/layouts/pure.pug
index d1f8828..7727749 100644
--- a/src/views/layouts/pure.pug
+++ b/src/views/layouts/pure.pug
@@ -5,8 +5,10 @@ block $$head
   block pageHead
 
 block $$content
-  .content(style="flex:1;height:0")
-    block pageContent
+  .page-layout
+    .page
+      .content
+        block pageContent
   footer
     include /htmx/footer.pug
 
diff --git a/src/views/layouts/root.pug b/src/views/layouts/root.pug
index 05e76fd..60733ff 100644
--- a/src/views/layouts/root.pug
+++ b/src/views/layouts/root.pug
@@ -11,9 +11,10 @@ html(lang="zh-CN")
       link(rel="shortcut icon", href=$site.site_favicon)
     meta(charset="utf-8")
     meta(name="viewport" content="width=device-width, initial-scale=1")
-    +css('reset.css')
+    +css('lib/reset.css')
     +css('lib/simplebar.css', true)
     +css('lib/simplebar-shim.css')
+    +css('css/layouts/root.css')
     +js('lib/htmx.min.js')
     +js('lib/tailwindcss.3.4.17.js')
     +js('lib/simplebar.min.js', true)
@@ -35,7 +36,6 @@ html(lang="zh-CN")
       div(style="height: 100%; display: flex; flex-direction: column")
         block $$content
     block $$scripts
-    +js('lib/bg-change.js')
     script.
       //- 处理滚动条位置
       const el = document.querySelector('.simplebar-content-wrapper')
diff --git a/src/views/page/about/index.pug b/src/views/page/about/index.pug
index 814acc2..f2b82d7 100644
--- a/src/views/page/about/index.pug
+++ b/src/views/page/about/index.pug
@@ -1,7 +1,7 @@
-extends /layouts/pure.pug
+extends /layouts/bg-page.pug
 
 block pageContent
-  .about-container
+  .about-container.card
     h1 关于我们
     p 我们致力于打造一个基于 Koa3 的现代 Web 示例项目，帮助开发者快速上手高效、可扩展的 Web 应用开发。
     .about-section
@@ -18,83 +18,3 @@ block pageContent
       p 如有建议或合作意向，欢迎通过
         a(href="mailto:1549469775@qq.com") 联系方式
         |  与我们取得联系。
-
-  style.
-    .about-container {
-      margin: 32px auto 0 auto;
-      padding: 56px 40px 44px 40px;
-      border-radius: 28px;
-      background: rgba(255, 255, 255, 0.25);
-      backdrop-filter: blur(18px);
-      
-      //- max-width: 900px;
-      //- min-width: 340px;
-    }
-    .about-container h1 {
-      font-size: 2.7em;
-      color: rgb(80, 168, 255);
-      margin-bottom: 28px;
-      text-align: center;
-      font-weight: 900;
-      letter-spacing: 2.5px;
-      text-shadow: 0 2px 16px rgba(33,150,243,0.10);
-      background: linear-gradient(90deg,rgb(80, 168, 255) 30%, #7ec6f7 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    .about-container p {
-      font-size: 1.18em;
-      color: #fff;
-      margin-bottom: 26px;
-      line-height: 1.85;
-    }
-    .about-section {
-      margin-bottom: 38px;
-      padding-bottom: 14px;
-      border-bottom: 1px dashed #b2ebf2;
-    }
-    .about-section:last-child {
-      border-bottom: none;
-    }
-    .about-section h2 {
-      font-size: 1.22em;
-      color:rgb(80, 168, 255);
-      margin-bottom: 10px;
-      font-weight: 700;
-      letter-spacing: 1.2px;
-      background: linear-gradient(90deg,rgb(80, 168, 255) 60%, #7ec6f7 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    .about-section ul {
-      padding-left: 28px;
-      margin-bottom: 0;
-    }
-    .about-section li {
-      font-size: 1.08em;
-      color: #fff;
-      margin-bottom: 8px;
-      line-height: 1.7;
-    }
-    .about-container a {
-      color:rgb(80, 168, 255);
-      text-decoration: underline;
-      font-weight: 600;
-      transition: color 0.2s, background 0.2s;
-      border-radius: 8px;
-      padding: 1px 4px;
-    }
-    .about-container a:hover {
-      color: #fff;
-      background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
-      text-decoration: none;
-    }
-    @media (max-width: 900px) {
-      .about-container {
-        max-width: 98vw;
-        padding: 18px 4vw 18px 4vw;
-      }
-      .about-container h1 {
-        font-size: 1.5em;
-      }
-    }
diff --git a/src/views/page/index/index.pug b/src/views/page/index/index.pug
index 394e38b..c7ce24a 100644
--- a/src/views/page/index/index.pug
+++ b/src/views/page/index/index.pug
@@ -1,11 +1,11 @@
-extends /layouts/pure.pug
+extends /layouts/bg-page.pug
 
 block pageHead
   +css("css/page/index.css")
 
 block pageContent
-  div.
-    sadasd
-  //- div(class="mt-[50px]") 
-  //-   +include()
-  //-     include /htmx/navbar.pug
\ No newline at end of file
+  div(class="mt-[20px]") 
+    +include()
+      include /htmx/navbar.pug
+  .card(class="mt-[20px]")
+    img(src="/static/bg2.webp" alt="bg")
\ No newline at end of file