diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..6e1432a
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint"],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+};
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index 91d74f7..1c54956 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -1,6 +1,6 @@
 services:
   halo:
-    image: registry.fit2cloud.com/halo/halo:2.22.12
+    image: registry.fit2cloud.com/halo/halo:2.24.2
     volumes:
       - ./data:/root/.halo2
       - ../:/root/.halo2/themes/theme-terminal
diff --git a/i18n/default.properties b/i18n/default.properties
index e80419b..e7572db 100644
--- a/i18n/default.properties
+++ b/i18n/default.properties
@@ -6,3 +6,71 @@ page.tag.title=Tag: {0}
 page.categories.title=Categories
 page.category.title=Category: {0}
 page.about.title=About
+devcm.activity.aria=IDE activity bar
+devcm.activity.link=Link
+devcm.activity.explorer=Explorer
+devcm.activity.search=Search
+devcm.activity.archive=Archive
+devcm.activity.categories=Categories
+devcm.activity.tags=Tags
+devcm.activity.login=Login
+devcm.activity.console=Console
+devcm.activity.logout=Logout
+devcm.action.open=Open
+devcm.action.openPage=Open page
+devcm.action.openCategory=Open category
+devcm.action.closeTab=Close editor tab
+devcm.action.closePostTab=Close post tab
+devcm.action.closePageTab=Close page tab
+devcm.action.closeCategoryTab=Close category tab
+devcm.action.closeTagTab=Close tag tab
+devcm.action.closeTagsTab=Close tags tab
+devcm.action.closeLinksTab=Close links tab
+devcm.action.closeMomentsTab=Close moments tab
+devcm.action.newPost=New post
+devcm.action.toggleTheme=Toggle theme
+devcm.home.subtitle=Development Content Management.
+devcm.home.defaultContent=A Terminal-style Halo theme.
+devcm.home.postCount=> Current page has {0} post(s)
+devcm.post.featured=FEATURED
+devcm.post.readMore=Read more
+devcm.pagination.previous=Previous
+devcm.pagination.next=Next
+devcm.explorer.title=EXPLORER
+devcm.explorer.pages=pages
+devcm.explorer.home=Home
+devcm.explorer.categories=CATEGORIES
+devcm.explorer.tags=TAGS CLOUD
+devcm.right.context=Context panel
+devcm.right.articleInfo=ARTICLE INFO
+devcm.right.author=Author
+devcm.right.publishedAt=Published at
+devcm.right.category=Category
+devcm.right.tags=Tags
+devcm.right.toc=TABLE OF CONTENTS
+devcm.right.nearbyPosts=NEARBY POSTS
+devcm.right.previousPost=Previous
+devcm.right.nextPost=Next
+devcm.right.latestPosts=LATEST POSTS
+devcm.right.posts=posts
+devcm.archive.command=archive --view posts
+devcm.archive.title=Archives
+devcm.archive.description=Browse content by publish date.
+devcm.archive.tableTitle=Archive list
+devcm.archive.columnTitle=Title
+devcm.archive.columnTags=Tags
+devcm.archive.columnDate=Date
+devcm.archive.group=Archive group
+devcm.categories.command=archive --view categories
+devcm.categories.title=Categories
+devcm.categories.description=Browse posts by category and explore the site structure.
+devcm.categories.articleCount={0} articles
+devcm.tags.title=All tags
+devcm.taxonomy.categoryTitle=Category: {0}
+devcm.taxonomy.tagTitle=Tag: {0}
+devcm.taxonomy.postCount=({0} posts)
+devcm.links.defaultGroup=Links
+devcm.comments.file=comments.log
+devcm.comments.title=## Comments
+devcm.status.poweredBy=Powered by
+devcm.status.language=Language
diff --git a/i18n/zh.properties b/i18n/zh.properties
index 9684d3b..a602606 100644
--- a/i18n/zh.properties
+++ b/i18n/zh.properties
@@ -6,3 +6,71 @@ page.tag.title=标签：{0}
 page.categories.title=分类
 page.category.title=分类：{0}
 page.about.title=关于
+devcm.activity.aria=IDE 活动栏
+devcm.activity.link=链接
+devcm.activity.explorer=资源管理器
+devcm.activity.search=搜索
+devcm.activity.archive=归档
+devcm.activity.categories=分类
+devcm.activity.tags=标签
+devcm.activity.login=登录
+devcm.activity.console=控制台
+devcm.activity.logout=登出
+devcm.action.open=打开
+devcm.action.openPage=打开页面
+devcm.action.openCategory=打开分类
+devcm.action.closeTab=关闭编辑器标签
+devcm.action.closePostTab=关闭文章标签
+devcm.action.closePageTab=关闭页面标签
+devcm.action.closeCategoryTab=关闭分类标签
+devcm.action.closeTagTab=关闭标签页
+devcm.action.closeTagsTab=关闭标签列表
+devcm.action.closeLinksTab=关闭链接页
+devcm.action.closeMomentsTab=关闭瞬间页
+devcm.action.newPost=新建文章
+devcm.action.toggleTheme=切换主题
+devcm.home.subtitle=Development Content Management.
+devcm.home.defaultContent=一款 Terminal 风格的 Halo 主题。
+devcm.home.postCount=> 当前页共有 {0} 篇文章
+devcm.post.featured=精选
+devcm.post.readMore=阅读全文
+devcm.pagination.previous=上一页
+devcm.pagination.next=下一页
+devcm.explorer.title=资源管理器
+devcm.explorer.pages=pages
+devcm.explorer.home=首页
+devcm.explorer.categories=分类
+devcm.explorer.tags=标签云
+devcm.right.context=上下文面板
+devcm.right.articleInfo=文章信息
+devcm.right.author=作者
+devcm.right.publishedAt=发布于
+devcm.right.category=分类
+devcm.right.tags=标签
+devcm.right.toc=目录
+devcm.right.nearbyPosts=相邻文章
+devcm.right.previousPost=上一篇
+devcm.right.nextPost=下一篇
+devcm.right.latestPosts=最新文章
+devcm.right.posts=篇文章
+devcm.archive.command=archive --view posts
+devcm.archive.title=文章归档
+devcm.archive.description=按发布时间浏览站点内容。
+devcm.archive.tableTitle=归档列表
+devcm.archive.columnTitle=标题
+devcm.archive.columnTags=标签
+devcm.archive.columnDate=日期
+devcm.archive.group=归档分组
+devcm.categories.command=archive --view categories
+devcm.categories.title=分类
+devcm.categories.description=按分类浏览文章，探索站点内容结构。
+devcm.categories.articleCount={0} 篇文章
+devcm.tags.title=所有标签
+devcm.taxonomy.categoryTitle=分类：{0}
+devcm.taxonomy.tagTitle=标签：{0}
+devcm.taxonomy.postCount=({0} 篇文章)
+devcm.links.defaultGroup=友情链接
+devcm.comments.file=comments.log
+devcm.comments.title=## 评论区
+devcm.status.poweredBy=Powered by
+devcm.status.language=语言
diff --git a/package.json b/package.json
index 73c83ca..b6b3b00 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "theme-terminal",
   "private": true,
-  "version": "1.2.7",
+  "version": "2.0.3",
   "description": "A terminal like theme for Halo.",
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build && theme-package",
     "build-only": "tsc && vite build",
     "lint": "eslint ./src --ext .js,.cjs,.mjs,.ts,.cts,.mts --ignore-path .gitignore",
+    "test:structure": "node scripts/check-devcm-theme.mjs",
     "prettier": "prettier --write './src/**/*.{js,ts,css,json,ml,yaml,html}' './templates/**/*.html'"
   },
   "keywords": [
@@ -51,4 +52,4 @@
     "@iconify/iconify": "^3.0.0",
     "alpinejs": "^3.10.5"
   }
-}
\ No newline at end of file
+}
diff --git a/settings.yaml b/settings.yaml
index 32afca4..f9ca1e8 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -22,30 +22,289 @@ spec:
           label: logo图片链接
           help: 配置后，将展示在导航栏左侧。
           accepts:
-            - "image/png"  
+            - "image/png"
         - $formkit: text
           name: title
           label: 站点标题
           help: 配置后，将展示站点标题。
-          value: 'Terminal'
+          value: "Terminal"
     - group: index
       label: 首页设置
       formSchema:
         - $formkit: text
           name: index_notice_title
           label: 首页公告标题
-          value: 'Hello Halo!'
+          value: "Hello Halo!"
         - $formkit: textarea
           name: index_notice_content
           label: 首页公告内容
-          value: '一款 Terminal 风格的 Halo 主题。'
+          value: "A Terminal-style Halo theme."
+    - group: activity
+      label: 活动栏
+      formSchema:
+        - $formkit: array
+          name: activity_items
+          label: 导航入口
+          help: 按列表顺序渲染左侧 Activity Bar；可拖拽调整顺序。内置入口会自动处理图标、链接和激活状态，自定义入口才需要填写链接地址。
+          itemLabels:
+            - type: text
+              label: $value.label
+            - type: text
+              label: $value.type
+          value:
+            - enabled: true
+              type: home
+              position: up
+              label: 首页
+              icon: folder
+              url: /
+              external: false
+            - enabled: true
+              type: search
+              position: up
+              label: 搜索
+              icon: search
+              url: ""
+              external: false
+            - enabled: true
+              type: archive
+              position: up
+              label: 归档
+              icon: archive
+              url: /archives
+              external: false
+            - enabled: true
+              type: categories
+              position: up
+              label: 分类
+              icon: script-text
+              url: /categories
+              external: false
+            - enabled: true
+              type: tags
+              position: up
+              label: 标签
+              icon: label
+              url: /tags
+              external: false
+            - enabled: true
+              type: login
+              position: down
+              label: 登录
+              icon: user
+              url: /console
+              external: false
+          children:
+            - $formkit: switch
+              name: enabled
+              label: 启用入口
+              value: true
+            - $formkit: select
+              name: type
+              label: 入口类型
+              value: custom
+              options:
+                - label: 首页
+                  value: home
+                - label: 搜索
+                  value: search
+                - label: 归档
+                  value: archive
+                - label: 分类
+                  value: categories
+                - label: 标签
+                  value: tags
+                - label: 登录
+                  value: login
+                - label: 自定义
+                  value: custom
+            - $formkit: text
+              name: label
+              label: 显示名称
+              help: 用于鼠标悬浮提示和无障碍标签；建议自定义入口必填。
+            - $formkit: select
+              name: icon
+              label: 图标
+              value: file
+              help: 内置入口已有默认图标；自定义入口可在这里选择同风格图标。
+              options:
+                - label: 文件夹
+                  value: folder
+                - label: 首页
+                  value: home
+                - label: 搜索
+                  value: search
+                - label: 归档
+                  value: archive
+                - label: 文档
+                  value: script-text
+                - label: 文章
+                  value: article
+                - label: 打开的书
+                  value: book-open
+                - label: 文件
+                  value: file
+                - label: 文件变体
+                  value: file-alt
+                - label: 多文件
+                  value: file-multiple
+                - label: 便签
+                  value: note
+                - label: 多便签
+                  value: notes
+                - label: 标签
+                  value: label
+                - label: 标签变体
+                  value: label-alt
+                - label: 用户
+                  value: user
+                - label: 用户组
+                  value: users
+                - label: 联系人
+                  value: contact
+                - label: Git 分支
+                  value: git-branch
+                - label: Git 提交
+                  value: git-commit
+                - label: Git 合并
+                  value: git-merge
+                - label: Pull Request
+                  value: git-pull-request
+                - label: GitHub
+                  value: github
+                - label: 链接
+                  value: link
+                - label: 外链
+                  value: external-link
+                - label: 打开
+                  value: open
+                - label: 代码
+                  value: code
+                - label: 命令
+                  value: command
+                - label: 缺陷
+                  value: bug
+                - label: 调试
+                  value: debug
+                - label: 服务器
+                  value: server
+                - label: 云
+                  value: cloud
+                - label: 显示器
+                  value: monitor
+                - label: 笔记本
+                  value: device-laptop
+                - label: 仪表盘
+                  value: dashboard
+                - label: 分析
+                  value: analytics
+                - label: 图表
+                  value: chart
+                - label: 柱状图
+                  value: chart-bar
+                - label: 看板
+                  value: kanban
+                - label: 时间线
+                  value: timeline
+                - label: 邮件
+                  value: mail
+                - label: 消息
+                  value: message
+                - label: 聊天
+                  value: chat
+                - label: 评论
+                  value: comment
+                - label: 通知
+                  value: notification
+                - label: 日历
+                  value: calendar
+                - label: 时钟
+                  value: clock
+                - label: 书签
+                  value: bookmark
+                - label: 收藏
+                  value: heart
+                - label: 灵感
+                  value: lightbulb
+                - label: 防护
+                  value: shield
+                - label: 锁
+                  value: lock
+                - label: 图片
+                  value: image
+                - label: 图库
+                  value: image-gallery
+                - label: 相机
+                  value: camera
+                - label: 音乐
+                  value: music
+                - label: 视频
+                  value: video
+                - label: 购物袋
+                  value: shopping-bag
+                - label: 购物车
+                  value: cart
+                - label: 钱包
+                  value: wallet
+                - label: 地图
+                  value: map
+                - label: 图钉
+                  value: pin
+                - label: 旗帜
+                  value: flag
+                - label: 电源
+                  value: power
+                - label: 上传
+                  value: upload
+                - label: 下载
+                  value: download
+                - label: 编辑
+                  value: edit
+                - label: 删除
+                  value: trash
+                - label: 加号
+                  value: plus
+                - label: 关闭
+                  value: close
+                - label: 滑杆
+                  value: sliders
+                - label: 滑杆 2
+                  value: sliders-2
+                - label: 可见
+                  value: visible
+                - label: 查看
+                  value: eye
+                - label: 隐藏
+                  value: eye-closed
+            - $formkit: text
+              name: url
+              label: 链接地址
+              help: 搜索入口可留空；其他入口留空时不会跳转。
+            - $formkit: select
+              name: position
+              label: 所在位置
+              value: up
+              options:
+                - label: 上方
+                  value: up
+                - label: 下方
+                  value: down
+            - $formkit: select
+              name: external
+              label: 打开方式
+              value: false
+              options:
+                - label: 当前窗口
+                  value: false
+                - label: 新窗口
+                  value: true
     - group: footer
       label: 页脚设置
       formSchema:
         - $formkit: text
           name: footer_powered_text
           label: 页脚文本
-          value: 'FillCode'
+          value: "FillCode"
         - $formkit: text
           name: footer_powered_link
           label: 页脚文本链接
@@ -64,4 +323,3 @@ spec:
           name: footer_gongan_link
           label: 公安备案跳转链接
           value: https://www.beian.gov.cn/
-
diff --git a/src/alpine/activity-actions.ts b/src/alpine/activity-actions.ts
new file mode 100644
index 0000000..852b5cc
--- /dev/null
+++ b/src/alpine/activity-actions.ts
@@ -0,0 +1,24 @@
+declare global {
+  interface Window {
+    SearchWidget: { open: (() => void) | undefined } | undefined;
+  }
+}
+
+export const initDevcmActivityActions = () => {
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+
+    if (!(target instanceof Element)) {
+      return;
+    }
+
+    const actionTrigger = target.closest<HTMLElement>('[data-devcm-action="search"]');
+
+    if (!actionTrigger) {
+      return;
+    }
+
+    event.preventDefault();
+    window.SearchWidget?.open?.();
+  });
+};
diff --git a/src/alpine/header-dividing.ts b/src/alpine/header-dividing.ts
deleted file mode 100644
index a164afa..0000000
--- a/src/alpine/header-dividing.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export const headerDividing = () => ({
-  isSticky: false,
-  $el: null as HTMLElement | null,
-  _observer: null as IntersectionObserver | null,
-
-  init() {
-    const centerEl = this.$el as HTMLElement;
-    if (!centerEl) return;
-
-    const header = centerEl.closest('.header') as HTMLElement;
-
-    if (!header) return;
-
-    // 直接观察 header 元素本身
-    this._observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        this.isSticky = entry.boundingClientRect.top < 0 && !entry.isIntersecting;
-      },
-      {
-        threshold: 0, // 只要有任何部分离开就触发
-        rootMargin: '0px' // 无偏移
-      }
-    );
-
-    this._observer.observe(header);
-  },
-
-  destroy() {
-    if (this._observer) {
-      this._observer.disconnect();
-      this._observer = null;
-    }
-  }
-});
diff --git a/src/alpine/index.ts b/src/alpine/index.ts
new file mode 100644
index 0000000..00b544a
--- /dev/null
+++ b/src/alpine/index.ts
@@ -0,0 +1,26 @@
+import type { Alpine } from "alpinejs";
+
+import { headerMenu } from "./header-menu";
+import { postLineNum } from "./post-line-num";
+import { postToc } from "./post-toc";
+import { themeComment } from "./theme-comment";
+import { themeMode } from "./theme-mode";
+import { upvote } from "./upvote";
+import { initDevcmActivityActions } from "./activity-actions";
+import { initTypedText } from "./typed-text";
+
+export const bootDevcmAlpine = (Alpine: Alpine) => {
+  window.Alpine = Alpine;
+
+  Alpine.data("upvote", upvote);
+  Alpine.data("themeMode", themeMode);
+  Alpine.data("postLineNum", postLineNum);
+  Alpine.data("postToc", postToc);
+  Alpine.data("headerMenu", headerMenu);
+  Alpine.data("themeComment", themeComment);
+
+  initDevcmActivityActions();
+  initTypedText();
+
+  Alpine.start();
+};
diff --git a/src/alpine/theme-comment.ts b/src/alpine/theme-comment.ts
new file mode 100644
index 0000000..274abd6
--- /dev/null
+++ b/src/alpine/theme-comment.ts
@@ -0,0 +1,88 @@
+import commentWidgetThemeStyle from "../styles/devcm-comment-widget.css?raw";
+
+const injectShadowStyle = (root: ShadowRoot | null | undefined, id: string, css: string) => {
+  if (!root || root.querySelector(`#${id}`)) {
+    return;
+  }
+
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  root.appendChild(style);
+};
+
+const themeCommentRoot = (root: ParentNode | null | undefined) => {
+  if (!root) {
+    return;
+  }
+
+  root.querySelectorAll<HTMLElement>("*").forEach((element) => {
+    if (element.shadowRoot) {
+      injectShadowStyle(element.shadowRoot, "devcm-comment-widget-theme", commentWidgetThemeStyle);
+      themeCommentRoot(element.shadowRoot);
+    }
+  });
+};
+
+const commentScopeSelector = ".devcm-comments, .devcm-moment-comments";
+
+const getCommentScopes = (root: ParentNode) => {
+  const scopes = Array.from(root.querySelectorAll<HTMLElement>(commentScopeSelector));
+  if (root instanceof HTMLElement && root.matches(commentScopeSelector)) {
+    scopes.unshift(root);
+  }
+  return scopes;
+};
+
+const themeCommentWidget = (root: ParentNode) => {
+  const commentScopes = getCommentScopes(root);
+  if (!commentScopes.length) {
+    return;
+  }
+
+  commentScopes.forEach((comments) => {
+    themeCommentRoot(comments);
+
+    comments.querySelectorAll<HTMLElement>("comment-widget").forEach((widget) => {
+      injectShadowStyle(widget.shadowRoot, "devcm-comment-widget-theme", commentWidgetThemeStyle);
+
+      const form = widget.shadowRoot?.querySelector<HTMLElement>("comment-form");
+      injectShadowStyle(form?.shadowRoot, "devcm-comment-form-theme", commentWidgetThemeStyle);
+
+      const baseForm = form?.shadowRoot?.querySelector<HTMLElement>("base-form");
+      injectShadowStyle(baseForm?.shadowRoot, "devcm-comment-base-form-theme", commentWidgetThemeStyle);
+    });
+  });
+};
+
+type ThemeCommentState = {
+  $el: HTMLElement;
+  observer: MutationObserver | null;
+  timers: number[];
+  init: () => void;
+  destroy: () => void;
+  refresh: () => void;
+};
+
+export const themeComment = (): ThemeCommentState => ({
+  $el: null as unknown as HTMLElement,
+  observer: null,
+  timers: [],
+  init() {
+    this.refresh();
+    this.timers = [120, 500, 1200, 2400].map((delay) => window.setTimeout(() => this.refresh(), delay));
+
+    this.observer = new MutationObserver(() => this.refresh());
+    this.observer.observe(this.$el, {
+      childList: true,
+      subtree: true,
+    });
+  },
+  destroy() {
+    this.observer?.disconnect();
+    this.timers.forEach((timer) => window.clearTimeout(timer));
+  },
+  refresh() {
+    themeCommentWidget(this.$el);
+  },
+});
diff --git a/src/alpine/theme-mode.ts b/src/alpine/theme-mode.ts
index 714e04e..dc8c37b 100644
--- a/src/alpine/theme-mode.ts
+++ b/src/alpine/theme-mode.ts
@@ -4,16 +4,16 @@ interface ThemeModeState {
   handleToggleThemeMode(): void;
 }
 
-export const themeMode =  ():ThemeModeState => ({
-  storedTheme: '',
+export const themeMode = (): ThemeModeState => ({
+  storedTheme: "",
 
   init() {
-    const storedTheme = localStorage.getItem("theme-mode") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    const storedTheme = localStorage.getItem("theme-mode") || "dark";
 
     if (!storedTheme) return;
 
     document.documentElement.setAttribute("data-color-scheme", storedTheme);
-    
+
     this.storedTheme = storedTheme;
   },
 
@@ -21,9 +21,9 @@ export const themeMode =  ():ThemeModeState => ({
     const targetTheme = this.storedTheme === "dark" ? "light" : "dark";
 
     document.documentElement.setAttribute("data-color-scheme", targetTheme);
-    
+
     this.storedTheme = targetTheme;
 
     localStorage.setItem("theme-mode", targetTheme);
   },
-});
\ No newline at end of file
+});
diff --git a/src/alpine/typed-text.ts b/src/alpine/typed-text.ts
new file mode 100644
index 0000000..09b5ce3
--- /dev/null
+++ b/src/alpine/typed-text.ts
@@ -0,0 +1,50 @@
+const runWhenReady = (callback: () => void) => {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", callback, { once: true });
+    return;
+  }
+
+  callback();
+};
+
+const typewriterEffect = (selector: string) => {
+  const typedTextContainer = document.querySelector<HTMLDivElement>(selector);
+
+  if (!typedTextContainer) {
+    return;
+  }
+
+  const text = typedTextContainer.innerText;
+  const followingPromptLine = typedTextContainer.parentElement?.querySelector<HTMLElement>(
+    ".devcm-prompt-line--after-typed"
+  );
+
+  typedTextContainer.innerText = "";
+  typedTextContainer.classList.add("typed-text--typing");
+  typedTextContainer.classList.remove("typed-text--complete");
+  followingPromptLine?.classList.add("devcm-prompt-line--pending");
+  followingPromptLine?.setAttribute("aria-hidden", "true");
+
+  let index = 0;
+
+  const typeNextCharacter = () => {
+    if (index >= text.length) {
+      typedTextContainer.classList.remove("typed-text--typing");
+      typedTextContainer.classList.add("typed-text--complete");
+      followingPromptLine?.classList.remove("devcm-prompt-line--pending");
+      followingPromptLine?.removeAttribute("aria-hidden");
+      return;
+    }
+
+    typedTextContainer.innerText += text.charAt(index);
+    index += 1;
+
+    window.setTimeout(typeNextCharacter, Math.random() * 200 + 50);
+  };
+
+  typeNextCharacter();
+};
+
+export const initTypedText = (selector = ".typed-text") => {
+  runWhenReady(() => typewriterEffect(selector));
+};
diff --git a/src/main.ts b/src/main.ts
index d1d0ffe..4b22cc3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,24 +2,7 @@ import "./styles/style.scss";
 import "./styles/font-hack.scss";
 import "./styles/font-pixel.scss";
 
-import Alpine from 'alpinejs'
-import {upvote} from './alpine/upvote'
-import {themeMode} from './alpine/theme-mode'
-import {postLineNum} from './alpine/post-line-num'
-import {postToc} from './alpine/post-toc'
-import {headerDividing} from './alpine/header-dividing'
-import {headerMenu} from './alpine/header-menu'
-import {typewriterEffect} from './utils'
+import Alpine from "alpinejs";
+import { bootDevcmAlpine } from "./alpine";
 
-window.Alpine = Alpine
-
-Alpine.data('upvote', upvote)
-Alpine.data('themeMode', themeMode)
-Alpine.data('postLineNum', postLineNum)
-Alpine.data('postToc', postToc)
-Alpine.data('headerMenu', headerMenu)
-Alpine.data('headerDividing', headerDividing)
-
-Alpine.start()
-
-document.addEventListener('DOMContentLoaded', () => typewriterEffect('.typed-text'))
+bootDevcmAlpine(Alpine);
diff --git a/src/styles/devcm-comment-widget.css b/src/styles/devcm-comment-widget.css
new file mode 100644
index 0000000..4a677b2
--- /dev/null
+++ b/src/styles/devcm-comment-widget.css
@@ -0,0 +1,97 @@
+:host {
+  color: var(--devcm-text, #586e75);
+  font-family: Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
+  position: relative;
+}
+
+.comment-widget {
+  color: var(--devcm-text, #586e75);
+}
+
+.comment-widget__wrapper {
+  display: grid;
+  gap: 12px;
+}
+
+.comment-widget__stats {
+  padding-bottom: 10px;
+  border-bottom: 1px dashed var(--devcm-line, rgba(101, 123, 131, 0.2));
+  color: var(--devcm-green, #859900);
+  font-size: 13px;
+}
+
+.comment-widget__list {
+  color: var(--devcm-text, #586e75);
+}
+
+.form {
+  position: relative;
+  display: grid;
+  gap: 10px;
+}
+
+.form__editor {
+  width: 100%;
+  min-height: 96px;
+  padding: 12px 14px;
+  border: 1px solid var(--devcm-line, rgba(101, 123, 131, 0.2));
+  border-radius: 8px;
+  outline: none;
+  background: linear-gradient(
+    180deg,
+    var(--devcm-panel, rgba(10, 12, 9, 0.94)),
+    var(--devcm-panel-soft, rgba(5, 7, 5, 0.92))
+  );
+  box-shadow: var(--devcm-shadow, inset 0 0 0 1px rgba(181, 137, 0, 0.16));
+  color: var(--devcm-text, #586e75);
+  caret-color: var(--devcm-amber, #b58900);
+  font: 14px/1.7 Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
+  resize: vertical;
+}
+
+.form__editor::placeholder {
+  color: var(--devcm-dim, rgba(221, 214, 185, 0.42));
+}
+
+.form__editor:focus {
+  border-color: var(--devcm-green, rgba(133, 153, 0, 0.45));
+  box-shadow: 0 0 0 1px var(--devcm-green-soft, rgba(133, 153, 0, 0.16));
+}
+
+.form__footer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.form__actions {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.form__button--login,
+.form__button--submit {
+  min-height: 32px;
+  padding: 6px 12px;
+  border: 1px solid var(--devcm-line, rgba(101, 123, 131, 0.2)) !important;
+  border-radius: 8px;
+  background: var(--devcm-panel-soft, rgba(238, 232, 213, 0.78)) !important;
+  color: var(--devcm-amber, #b58900) !important;
+  cursor: pointer;
+  font: 13px/1 Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
+}
+
+.form__button--submit {
+  border-color: var(--devcm-green, rgba(133, 153, 0, 0.28)) !important;
+  background: var(--devcm-green-soft, rgba(133, 153, 0, 0.14)) !important;
+  color: var(--devcm-green, #859900) !important;
+}
+
+.form__button--login:hover,
+.form__button--submit:hover {
+  background: var(--devcm-panel-warm, rgba(238, 232, 213, 0.62)) !important;
+}
diff --git a/src/styles/devcm-editor.scss b/src/styles/devcm-editor.scss
new file mode 100644
index 0000000..b38346f
--- /dev/null
+++ b/src/styles/devcm-editor.scss
@@ -0,0 +1,1012 @@
+@import "variables";
+
+.devcm-editor {
+  min-width: 0;
+  min-height: 0;
+  padding: 24px 30px 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.devcm-terminal-window,
+.devcm-editor-window,
+.devcm-post-card,
+.devcm-category-card,
+.devcm-archive-table,
+.devcm-comments {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(255, 176, 0, 0.26);
+  border-radius: var(--devcm-radius);
+  background: linear-gradient(180deg, rgba(14, 16, 12, 0.96), rgba(9, 11, 8, 0.94));
+  box-shadow: var(--devcm-shadow);
+}
+
+html[data-color-scheme="light"] .devcm-terminal-window,
+html[data-color-scheme="light"] .devcm-editor-window,
+html[data-color-scheme="light"] .devcm-post-card,
+html[data-color-scheme="light"] .devcm-category-card,
+html[data-color-scheme="light"] .devcm-archive-table,
+html[data-color-scheme="light"] .devcm-comments {
+  border-color: rgba(181, 137, 0, 0.28);
+  background: rgba(253, 246, 227, 0.9);
+}
+
+html[data-color-scheme="light"] .devcm-terminal-window::before,
+html[data-color-scheme="light"] .devcm-editor-window::before,
+html[data-color-scheme="light"] .devcm-post-card::before,
+html[data-color-scheme="light"] .devcm-category-card::before,
+html[data-color-scheme="light"] .devcm-archive-table::before,
+html[data-color-scheme="light"] .devcm-comments::before {
+  opacity: 0;
+}
+
+.devcm-terminal-window::before,
+.devcm-editor-window::before,
+.devcm-post-card::before,
+.devcm-category-card::before,
+.devcm-archive-table::before,
+.devcm-comments::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 176, 0, 0.035), transparent);
+  opacity: 0.34;
+  pointer-events: none;
+}
+
+.devcm-window-titlebar,
+.devcm-editor-tabs {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid rgba(255, 176, 0, 0.18);
+  background: rgba(255, 176, 0, 0.035);
+}
+
+html[data-color-scheme="light"] .devcm-window-titlebar,
+html[data-color-scheme="light"] .devcm-editor-tabs,
+html[data-color-scheme="light"] .devcm-comment-titlebar {
+  border-bottom-color: rgba(101, 123, 131, 0.18);
+  background: rgba(238, 232, 213, 0.78);
+}
+
+.devcm-window-titlebar {
+  padding: 0 15px;
+}
+
+.devcm-window-dot {
+  width: 11px;
+  height: 11px;
+  border: 1px solid rgba(255, 176, 0, 0.72);
+  border-radius: 50%;
+}
+
+.devcm-window-dot:nth-child(1) {
+  background: #db8b16;
+}
+
+.devcm-window-dot:nth-child(2) {
+  background: #ffbd2e;
+}
+
+.devcm-window-dot:nth-child(3) {
+  background: rgba(104, 243, 127, 0.15);
+}
+
+.devcm-home-hero,
+.devcm-archive-hero {
+  margin-bottom: 22px;
+}
+
+.devcm-hero {
+  display: grid;
+  min-height: 190px;
+  grid-template-columns: minmax(0, 1fr) 160px;
+  gap: 24px;
+  align-items: center;
+  padding: 22px 24px 24px;
+}
+
+.devcm-prompt-line {
+  margin-bottom: 14px;
+  color: var(--devcm-green);
+  text-shadow: 0 0 12px rgba(104, 243, 127, 0.18);
+}
+
+.devcm-prompt-line span:first-child {
+  color: var(--devcm-green);
+}
+
+.devcm-prompt-line span:not(:first-child) {
+  color: #e0b55c;
+}
+
+.devcm-prompt-line--pending {
+  display: none;
+}
+
+html[data-color-scheme="light"] .devcm-prompt-line span:first-child {
+  color: var(--devcm-green);
+}
+
+html[data-color-scheme="light"] .devcm-prompt-line span:not(:first-child) {
+  color: var(--devcm-amber);
+}
+
+.devcm-hero__title,
+.devcm-page-title,
+.devcm-article-title {
+  margin: 0 0 12px;
+  color: var(--devcm-amber);
+  font-weight: 900;
+  letter-spacing: 0;
+  text-shadow: 0 0 24px rgba(255, 176, 0, 0.26);
+}
+
+.devcm-hero__title {
+  font-size: clamp(26px, 2.4vw, 40px);
+  line-height: 1.15;
+}
+
+.devcm-hero__subtitle {
+  margin-bottom: 16px;
+  color: #d7c18d;
+  font-size: 16px;
+  word-spacing: 12px;
+}
+
+html[data-color-scheme="light"] .devcm-hero__subtitle {
+  color: var(--devcm-muted);
+}
+
+html[data-color-scheme="light"] .devcm-hero__title,
+html[data-color-scheme="light"] .devcm-page-title,
+html[data-color-scheme="light"] .devcm-article-title {
+  text-shadow: none;
+}
+
+.devcm-hero__desc {
+  padding-top: 13px;
+  border-top: 1px solid rgba(104, 243, 127, 0.24);
+  color: var(--devcm-text);
+  line-height: 1.85;
+}
+
+.devcm-hero__desc > :first-child {
+  margin-top: 0;
+}
+
+.devcm-hero__desc > :last-child {
+  margin-bottom: 0;
+}
+
+.devcm-cursor {
+  display: inline-block;
+  width: 9px;
+  height: 16px;
+  background: var(--devcm-amber);
+  box-shadow: 0 0 14px rgba(255, 176, 0, 0.48);
+  vertical-align: -2px;
+  animation: devcm-blink 1s steps(1) infinite;
+}
+
+@keyframes devcm-blink {
+  50% {
+    opacity: 0.08;
+  }
+}
+
+.devcm-ascii-badge {
+  position: relative;
+  display: grid;
+  width: min(160px, 100%);
+  height: fit-content;
+  min-height: 0;
+  align-self: center;
+  justify-self: center;
+  place-items: center;
+  padding: 12px 10px;
+  overflow: hidden;
+  border: 1px dashed rgba(255, 176, 0, 0.46);
+  background: radial-gradient(circle at 50% 32%, rgba(255, 176, 0, 0.14), transparent 42%),
+    linear-gradient(180deg, rgba(22, 18, 10, 0.58), rgba(6, 8, 6, 0.68));
+  box-shadow: inset 0 0 32px rgba(255, 176, 0, 0.07), 0 0 18px rgba(255, 176, 0, 0.04);
+  color: rgba(255, 176, 0, 0.82);
+  text-align: center;
+}
+
+.devcm-ascii-badge__grid {
+  position: absolute;
+  inset: 8px;
+  border: 1px dotted rgba(255, 176, 0, 0.18);
+  background: repeating-linear-gradient(
+      0deg,
+      rgba(255, 176, 0, 0.03) 0,
+      rgba(255, 176, 0, 0.03) 1px,
+      transparent 1px,
+      transparent 10px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(104, 243, 127, 0.025) 0,
+      rgba(104, 243, 127, 0.025) 1px,
+      transparent 1px,
+      transparent 10px
+    );
+}
+
+.devcm-ascii-badge__inner {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  width: 100%;
+  justify-items: center;
+  gap: 8px;
+}
+
+.devcm-ascii-badge__label {
+  justify-self: start;
+  padding-left: 6px;
+  color: var(--devcm-green);
+  font-size: 10px;
+  line-height: 1;
+  opacity: 0.72;
+}
+
+.devcm-ascii-badge pre {
+  margin: 0;
+  border: 0;
+  color: var(--devcm-amber);
+  font: 900 clamp(34px, 3.1vw, 46px) / 0.78 var(--devcm-mono);
+  letter-spacing: 0;
+  text-shadow: 0 0 18px rgba(255, 176, 0, 0.3);
+  transform: scaleX(1.04);
+}
+
+.devcm-ascii-badge small {
+  display: block;
+  color: var(--devcm-amber);
+  opacity: 0.8;
+}
+
+.devcm-ascii-badge__scan {
+  width: min(96px, 82%);
+  height: 4px;
+  background: repeating-linear-gradient(
+    90deg,
+    rgba(255, 176, 0, 0.75) 0,
+    rgba(255, 176, 0, 0.75) 7px,
+    transparent 7px,
+    transparent 12px
+  );
+  opacity: 0.5;
+}
+
+html[data-color-scheme="light"] .devcm-ascii-badge {
+  border-color: rgba(181, 137, 0, 0.42);
+  background: rgba(238, 232, 213, 0.72);
+  box-shadow: none;
+  color: var(--devcm-amber);
+}
+
+html[data-color-scheme="light"] .devcm-ascii-badge pre {
+  text-shadow: none;
+}
+
+.devcm-editor-window {
+  margin-top: 22px;
+}
+
+.devcm-shell--home .devcm-editor-window {
+  min-height: clamp(360px, 43vh, 520px);
+}
+
+.devcm-editor-tabs {
+  justify-content: space-between;
+  padding: 0 16px;
+  overflow-x: auto;
+}
+
+.devcm-editor-tabs__left {
+  display: flex;
+  min-height: 38px;
+  align-items: stretch;
+}
+
+.devcm-editor-tab {
+  display: flex;
+  min-width: 132px;
+  min-height: 38px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px;
+  border-right: 1px solid rgba(255, 176, 0, 0.14);
+  background: rgba(255, 176, 0, 0.025);
+  color: #d79d31;
+  line-height: 1;
+}
+
+.devcm-editor-tab > span {
+  display: inline-flex;
+  min-height: 18px;
+  align-items: center;
+  line-height: 1;
+}
+
+.devcm-editor-tab--active {
+  background: rgba(255, 176, 0, 0.08);
+  box-shadow: inset 0 2px 0 var(--devcm-amber);
+  color: var(--devcm-amber);
+}
+
+.devcm-editor-tab__close {
+  display: inline-grid;
+  width: 18px;
+  height: 18px;
+  align-self: center;
+  flex: 0 0 18px;
+  place-items: center;
+  padding: 0;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  font: 700 13px/1 var(--devcm-mono);
+  line-height: 1;
+  opacity: 0.48;
+  text-decoration: none;
+}
+
+.devcm-editor-tab__close:hover {
+  box-shadow: none;
+  opacity: 0.74;
+}
+
+.devcm-editor-tab__add {
+  display: grid;
+  flex: 0 0 38px;
+  width: 38px;
+  min-width: 38px;
+  min-height: 38px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--devcm-amber);
+  cursor: pointer;
+  opacity: 0.7;
+  text-decoration: none;
+}
+
+.devcm-editor-tab__add:hover {
+  background: rgba(255, 176, 0, 0.08);
+  box-shadow: inset 0 -2px 0 rgba(255, 176, 0, 0.76);
+  opacity: 1;
+}
+
+.devcm-editor-body {
+  position: relative;
+  padding: 20px;
+}
+
+.devcm-post-list-body {
+  padding: 14px 18px 18px;
+  background: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(255, 176, 0, 0.035) 28px);
+}
+
+.devcm-line-layout {
+  position: relative;
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 14px;
+}
+
+.devcm-line-layout::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(255, 176, 0, 0.045) 28px);
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.devcm-line-layout > * {
+  position: relative;
+  z-index: 1;
+}
+
+.devcm-shell--home .devcm-line-layout {
+  min-height: clamp(250px, 31vh, 390px);
+  align-content: start;
+}
+
+.devcm-gutter {
+  display: grid;
+  gap: 14px;
+  padding-top: 6px;
+  color: rgba(255, 176, 0, 0.36);
+  text-align: right;
+  user-select: none;
+}
+
+.devcm-post-stack,
+.devcm-moments {
+  display: grid;
+  gap: 14px;
+}
+
+.devcm-post-list-body .devcm-post-stack {
+  gap: 11px;
+}
+
+.devcm-shell--home .devcm-post-stack {
+  min-height: 100%;
+}
+
+.devcm-post-card {
+  padding: 18px 20px;
+  border-color: rgba(255, 176, 0, 0.2);
+  border-radius: 8px;
+  background: linear-gradient(135deg, rgba(20, 25, 15, 0.9), rgba(7, 8, 6, 0.84));
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.devcm-post-list-body .devcm-post-card {
+  padding: 14px 16px;
+}
+
+html[data-color-scheme="light"] .devcm-post-card {
+  background: rgba(253, 246, 227, 0.86);
+}
+
+html[data-color-scheme="light"] .devcm-post-card:hover {
+  border-color: rgba(181, 137, 0, 0.42);
+  box-shadow: none;
+}
+
+.devcm-post-card:hover {
+  border-color: rgba(255, 176, 0, 0.46);
+  box-shadow: 0 0 26px rgba(255, 176, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.devcm-post-card--featured::after {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 5px;
+  background: linear-gradient(var(--devcm-green), rgba(104, 243, 127, 0.3));
+  box-shadow: var(--devcm-green-glow);
+}
+
+.devcm-post-card__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 10px;
+  color: var(--devcm-amber);
+  font-size: 21px;
+  letter-spacing: 0;
+}
+
+.devcm-post-list-body .devcm-post-card__title {
+  margin-bottom: 8px;
+}
+
+.devcm-post-card__title a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.devcm-badge {
+  padding: 3px 7px;
+  border: 1px solid rgba(104, 243, 127, 0.32);
+  border-radius: 6px;
+  background: var(--devcm-green-soft);
+  color: var(--devcm-green);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.devcm-post-card__meta,
+.devcm-article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 13px;
+  margin-bottom: 10px;
+  color: #a9915a;
+  font-size: 13px;
+}
+
+html[data-color-scheme="light"] .devcm-post-card__meta,
+html[data-color-scheme="light"] .devcm-article-meta {
+  color: var(--devcm-muted);
+}
+
+.devcm-post-card__tag,
+.devcm-article-meta a {
+  color: var(--devcm-green);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.devcm-post-card__excerpt {
+  margin: 0 0 11px;
+  color: #cfc4a5;
+  line-height: 1.65;
+}
+
+html[data-color-scheme="light"] .devcm-post-card__excerpt {
+  color: var(--devcm-text);
+}
+
+.devcm-post-list-body .devcm-post-card__excerpt {
+  margin-bottom: 9px;
+}
+
+.devcm-read-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #93f0a0;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+html[data-color-scheme="light"] .devcm-read-more {
+  color: var(--devcm-green);
+}
+
+.devcm-list-footnote {
+  margin-top: 10px;
+  color: var(--devcm-dim);
+  font-size: 13px;
+  text-align: center;
+}
+
+.devcm-shell--home .devcm-list-footnote {
+  align-self: end;
+  padding-top: 6px;
+  border-top: 1px dashed rgba(255, 176, 0, 0.1);
+}
+
+.devcm-article {
+  margin-top: 0;
+}
+
+.devcm-article-body {
+  position: relative;
+  margin: 0;
+  padding: 18px 22px 18px 66px;
+}
+
+.devcm-article-body .post-line-gutter {
+  left: 0;
+  top: 18px;
+  width: 50px;
+  opacity: 0.62;
+  border-right-color: rgba(255, 176, 0, 0.13);
+}
+
+.devcm-article-content {
+  color: #cfc3a1;
+  line-height: 1.78;
+}
+
+html[data-color-scheme="light"] .devcm-article-content {
+  color: var(--devcm-text);
+}
+
+.devcm-article-title {
+  font-size: 24px;
+  line-height: 1.38;
+}
+
+.devcm-article-content h1,
+.devcm-article-content h2,
+.devcm-article-content h3 {
+  color: var(--devcm-green);
+  letter-spacing: 0;
+}
+
+.devcm-article-content p,
+.devcm-article-content li {
+  color: #cfc3a1;
+}
+
+html[data-color-scheme="light"] .devcm-article-content p,
+html[data-color-scheme="light"] .devcm-article-content li {
+  color: var(--devcm-text);
+}
+
+html[data-color-scheme="light"] .devcm-article-content pre {
+  border-color: rgba(101, 123, 131, 0.24);
+  background: rgba(238, 232, 213, 0.55);
+  color: #586e75;
+}
+
+html[data-color-scheme="light"] .devcm-article-content code {
+  color: #586e75;
+}
+
+.devcm-article-content pre {
+  border: 1px solid rgba(255, 176, 0, 0.22);
+  border-radius: 9px;
+  background: rgba(5, 7, 5, 0.72);
+  color: #e5d4a4;
+  padding: 12px 14px;
+}
+
+.devcm-article-content code {
+  color: #e5d4a4;
+}
+
+.devcm-comments {
+  margin-top: 16px;
+  padding: 0;
+  overflow: visible;
+  background: linear-gradient(180deg, rgba(12, 14, 11, 0.92), rgba(7, 9, 6, 0.86));
+}
+
+html[data-color-scheme="light"] .devcm-comments {
+  background: rgba(253, 246, 227, 0.9);
+}
+
+.devcm-comments h2 {
+  margin: 0 0 10px;
+  color: var(--devcm-green);
+}
+
+.devcm-comment-titlebar {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+  border-bottom: 1px solid rgba(255, 176, 0, 0.18);
+  background: rgba(255, 176, 0, 0.045);
+  color: var(--devcm-amber);
+}
+
+.devcm-comment-titlebar strong {
+  margin-left: 6px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.devcm-comment-body {
+  position: relative;
+  padding: 14px;
+  overflow: visible;
+  background: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(255, 176, 0, 0.035) 28px);
+}
+
+.devcm-prev-next {
+  margin-top: 12px;
+}
+
+.devcm-editor .pagination {
+  margin-top: 16px;
+}
+
+.devcm-editor .pagination__buttons {
+  gap: 12px;
+}
+
+.devcm-editor .button {
+  max-width: 48%;
+  border: 1px solid rgba(255, 176, 0, 0.22);
+  border-radius: 8px;
+  background: rgba(255, 176, 0, 0.035);
+  color: var(--devcm-amber);
+}
+
+.devcm-editor .button:hover {
+  border-color: rgba(255, 176, 0, 0.45);
+  background: rgba(255, 176, 0, 0.08);
+}
+
+.devcm-editor .button a {
+  min-width: 118px;
+  justify-content: center;
+  padding: 8px 14px;
+}
+
+.devcm-category-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 13px;
+}
+
+.devcm-category-card {
+  min-height: 142px;
+  padding: 16px;
+  border-radius: 9px;
+  background: rgba(15, 17, 12, 0.74);
+  color: #b7a77b;
+  text-decoration: none;
+}
+
+html[data-color-scheme="light"] .devcm-category-card {
+  background: rgba(253, 246, 227, 0.86);
+  color: var(--devcm-text);
+}
+
+.devcm-category-card h2 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+  color: var(--devcm-amber);
+  font-size: 17px;
+}
+
+.devcm-category-card strong {
+  display: block;
+  margin-bottom: 8px;
+  color: #dac082;
+  font-size: 14px;
+}
+
+html[data-color-scheme="light"] .devcm-category-card strong {
+  color: var(--devcm-amber);
+}
+
+.devcm-category-card p {
+  margin: 0;
+  color: #b7a77b;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+html[data-color-scheme="light"] .devcm-category-card p {
+  color: var(--devcm-text);
+}
+
+.devcm-archive-table {
+  border-radius: 10px;
+  background: rgba(7, 9, 6, 0.72);
+}
+
+.devcm-archive-table__title {
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(255, 176, 0, 0.18);
+  color: var(--devcm-amber);
+  font-weight: 900;
+}
+
+.devcm-archive-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(120px, 1fr) 80px;
+  gap: 14px;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(255, 176, 0, 0.08);
+  color: #c9ba90;
+  font-size: 13px;
+  text-decoration: none;
+}
+
+html[data-color-scheme="light"] .devcm-archive-row {
+  border-bottom-color: rgba(101, 123, 131, 0.12);
+  color: var(--devcm-text);
+}
+
+.devcm-archive-row--header {
+  background: rgba(255, 176, 0, 0.035);
+  color: #9f8a5e;
+}
+
+html[data-color-scheme="light"] .devcm-archive-row--header {
+  background: rgba(238, 232, 213, 0.64);
+  color: var(--devcm-muted);
+}
+
+.devcm-archive-row--month {
+  grid-template-columns: 1fr;
+  background: rgba(255, 176, 0, 0.055);
+  color: var(--devcm-amber);
+  font-weight: 800;
+}
+
+html[data-color-scheme="light"] .devcm-archive-row--month {
+  background: rgba(238, 232, 213, 0.78);
+}
+
+.devcm-archive-row b {
+  color: var(--devcm-green);
+  font-weight: 600;
+}
+
+.devcm-moment-media {
+  display: grid;
+  width: min(100%, 620px);
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.devcm-moment-media--one {
+  grid-template-columns: 1fr;
+}
+
+.devcm-moment-media--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.devcm-moment-media--three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.devcm-moment-media img,
+.devcm-moment-media video {
+  width: 100%;
+  border: 1px solid rgba(255, 176, 0, 0.18);
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.devcm-moment-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.devcm-action-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  color: var(--devcm-muted);
+  cursor: pointer;
+}
+
+.devcm-action-link:hover,
+.devcm-action-link--active {
+  color: var(--devcm-amber);
+}
+
+.devcm-moment-comments {
+  margin-top: 12px;
+}
+
+.devcm-link-group + .devcm-link-group {
+  margin-top: 24px;
+}
+
+.devcm-link-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.devcm-link-card {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid rgba(255, 176, 0, 0.2);
+  border-radius: 9px;
+  background: rgba(255, 176, 0, 0.04);
+  color: #cdbd92;
+  text-decoration: none;
+}
+
+html[data-color-scheme="light"] .devcm-link-card {
+  border-color: rgba(101, 123, 131, 0.2);
+  background: rgba(238, 232, 213, 0.42);
+  color: var(--devcm-text);
+}
+
+.devcm-link-card img {
+  width: 64px;
+  height: 64px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.devcm-link-card__body {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.devcm-link-card__body strong {
+  color: var(--devcm-amber);
+}
+
+.devcm-link-card__body small {
+  overflow: hidden;
+  color: var(--devcm-green);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.devcm-rightbar .post-toc {
+  position: relative;
+  width: auto;
+  max-height: calc(100vh - 340px);
+  opacity: 1;
+}
+
+.devcm-rightbar .toc-tree {
+  padding-left: 0;
+}
+
+.devcm-rightbar .toc-tree::before,
+.devcm-rightbar .toc-item::before {
+  display: none;
+}
+
+@media (max-width: 1320px) {
+  .devcm-category-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1060px) {
+  .devcm-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .devcm-ascii-badge {
+    display: none;
+  }
+
+  .devcm-category-grid,
+  .devcm-link-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .devcm-editor {
+    padding: 14px 12px;
+  }
+
+  .devcm-shell--home .devcm-editor-window,
+  .devcm-shell--home .devcm-line-layout {
+    min-height: auto;
+  }
+
+  .devcm-line-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .devcm-gutter {
+    display: none;
+  }
+
+  .devcm-hero {
+    min-height: auto;
+    padding: 18px;
+  }
+
+  .devcm-hero__title {
+    font-size: 25px;
+  }
+
+  .devcm-article-body {
+    padding: 14px;
+  }
+
+  .devcm-article-body .post-line-gutter {
+    display: none;
+  }
+
+  .devcm-category-grid,
+  .devcm-link-grid,
+  .devcm-moment-media--two,
+  .devcm-moment-media--three {
+    grid-template-columns: 1fr;
+  }
+
+  .devcm-archive-row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+}
diff --git a/src/styles/devcm-shell.scss b/src/styles/devcm-shell.scss
new file mode 100644
index 0000000..56d0efc
--- /dev/null
+++ b/src/styles/devcm-shell.scss
@@ -0,0 +1,932 @@
+@import "variables";
+
+html {
+  height: 100%;
+  background: var(--devcm-bg-deep);
+}
+
+body.devcm-body {
+  height: 100vh;
+  min-height: 0;
+  background: radial-gradient(circle at 46% 0%, rgba(104, 243, 127, 0.11), transparent 28%),
+    radial-gradient(circle at 85% 18%, rgba(255, 176, 0, 0.1), transparent 28%),
+    linear-gradient(180deg, #090b09 0%, #050706 100%);
+  color: var(--devcm-text);
+  font-family: var(--devcm-mono);
+  overflow: hidden;
+}
+
+body.devcm-body.pixel_style {
+  --devcm-mono: Pixel, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
+  font-family: var(--devcm-mono);
+}
+
+html[data-color-scheme="light"] body.devcm-body {
+  background: #eee8d5;
+}
+
+html[data-color-scheme="light"] body.devcm-body::before {
+  opacity: 0.34;
+  background: repeating-linear-gradient(
+      0deg,
+      rgba(147, 161, 161, 0.08) 0,
+      rgba(147, 161, 161, 0.08) 1px,
+      transparent 1px,
+      transparent 28px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(147, 161, 161, 0.08) 0,
+      rgba(147, 161, 161, 0.08) 1px,
+      transparent 1px,
+      transparent 28px
+    );
+  mix-blend-mode: normal;
+}
+
+html[data-color-scheme="light"] body.devcm-body::after {
+  opacity: 0;
+}
+
+body.devcm-body::before,
+body.devcm-body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  pointer-events: none;
+}
+
+body.devcm-body::before {
+  opacity: 0.16;
+  background: repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.035) 0,
+      rgba(255, 255, 255, 0.035) 1px,
+      transparent 1px,
+      transparent 3px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(255, 176, 0, 0.025) 0,
+      rgba(255, 176, 0, 0.025) 1px,
+      transparent 1px,
+      transparent 28px
+    );
+  mix-blend-mode: screen;
+}
+
+body.devcm-body::after {
+  background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.52) 100%);
+  opacity: 0.62;
+}
+
+.devcm-shell {
+  position: relative;
+  z-index: 2;
+  width: min(1720px, 100vw);
+  height: 100vh;
+  min-height: 0;
+  margin: 0 auto;
+  overflow: hidden;
+  border-right: 1px solid rgba(255, 176, 0, 0.14);
+  border-left: 1px solid rgba(255, 176, 0, 0.14);
+  box-shadow: 0 0 54px rgba(0, 0, 0, 0.38);
+}
+
+html[data-color-scheme="light"] .devcm-shell {
+  border-color: rgba(101, 123, 131, 0.18);
+  box-shadow: none;
+}
+
+.devcm-app {
+  display: grid;
+  height: 100vh;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  background: linear-gradient(90deg, rgba(255, 176, 0, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
+    linear-gradient(180deg, rgba(255, 176, 0, 0.032) 1px, transparent 1px) 0 0 / 28px 28px,
+    linear-gradient(180deg, rgba(8, 10, 8, 0.98), rgba(6, 8, 6, 0.98));
+}
+
+html[data-color-scheme="light"] .devcm-app {
+  background: linear-gradient(90deg, rgba(147, 161, 161, 0.12) 1px, transparent 1px) 0 0 / 28px 28px,
+    linear-gradient(180deg, rgba(147, 161, 161, 0.1) 1px, transparent 1px) 0 0 / 28px 28px, #fdf6e3;
+}
+
+.devcm-topbar {
+  position: relative;
+  z-index: 16;
+  min-height: var(--devcm-topbar-height);
+  padding: 18px 28px 0;
+  border-bottom: 1px solid rgba(255, 176, 0, 0.22);
+  background: linear-gradient(180deg, rgba(13, 13, 10, 0.96), rgba(8, 10, 8, 0.94)),
+    radial-gradient(circle at 54% 12%, rgba(104, 243, 127, 0.12), transparent 28%);
+  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
+}
+
+html[data-color-scheme="light"] .devcm-topbar {
+  border-bottom-color: rgba(101, 123, 131, 0.22);
+  background: #eee8d5;
+  box-shadow: none;
+}
+
+.devcm-topbar__main {
+  display: grid;
+  grid-template-columns: max-content minmax(160px, 1fr) max-content;
+  gap: 18px;
+  align-items: center;
+}
+
+.devcm-brand {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 12px;
+  color: var(--devcm-amber);
+  text-decoration: none;
+}
+
+.devcm-brand__image,
+.devcm-brand__mark {
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  border: 1px solid var(--devcm-line-strong);
+  border-radius: 8px;
+  background: rgba(255, 176, 0, 0.05);
+  box-shadow: var(--devcm-shadow);
+}
+
+.devcm-brand__image {
+  object-fit: contain;
+  padding: 3px;
+}
+
+.devcm-brand__mark {
+  display: grid;
+  place-items: center;
+  color: var(--devcm-amber);
+  font-size: 10px;
+  font-weight: 900;
+  line-height: 0.83;
+  text-align: center;
+  text-shadow: 0 0 12px rgba(255, 176, 0, 0.5);
+}
+
+.devcm-brand__name {
+  overflow: hidden;
+  color: var(--devcm-amber);
+  font-size: 29px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  text-shadow: 0 0 18px rgba(255, 176, 0, 0.36);
+  white-space: nowrap;
+}
+
+.devcm-prompt-stream {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  min-height: 34px;
+  min-width: 0;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+  overflow: visible;
+  isolation: isolate;
+}
+
+.devcm-prompt-stream__name {
+  color: var(--devcm-green);
+  text-shadow: 0 0 12px rgba(104, 243, 127, 0.24);
+  white-space: nowrap;
+}
+
+.devcm-prompt-stream__line {
+  min-width: 0;
+  opacity: 0.78;
+  filter: drop-shadow(0 0 7px rgba(104, 243, 127, 0.18));
+}
+
+.devcm-topbar__actions {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.devcm-icon-button {
+  display: grid;
+  flex: 0 0 34px;
+  width: 34px;
+  min-width: 34px;
+  height: 34px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--devcm-amber);
+  cursor: pointer;
+  font-size: 22px;
+  line-height: 1;
+  text-shadow: 0 0 14px rgba(255, 176, 0, 0.34);
+}
+
+.devcm-icon-button:hover {
+  background: rgba(255, 176, 0, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(255, 176, 0, 0.24);
+}
+
+.devcm-workspace {
+  display: grid;
+  height: 100%;
+  min-height: 0;
+  grid-template-columns: var(--devcm-activity-width) var(--devcm-sidebar-width) minmax(640px, 1fr) var(
+      --devcm-rightbar-width
+    );
+  overflow: hidden;
+}
+
+.devcm-activity {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  padding: 20px 0 16px;
+  border-right: 1px solid rgba(255, 176, 0, 0.18);
+  background: rgba(5, 7, 5, 0.78);
+}
+
+.devcm-activity__group {
+  display: flex;
+  width: 100%;
+  min-height: 0;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.devcm-activity__group--down {
+  margin-top: auto;
+}
+
+.devcm-activity__icon-bank {
+  display: none;
+}
+
+.devcm-activity__button {
+  position: relative;
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  color: rgba(255, 221, 142, 0.84);
+  font-size: 21px;
+  text-decoration: none;
+}
+
+.devcm-activity__button::after {
+  content: attr(data-label);
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 10px);
+  z-index: 40;
+  padding: 5px 8px;
+  border: 1px solid rgba(255, 176, 0, 0.28);
+  border-radius: 6px;
+  background: rgba(8, 10, 7, 0.96);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
+  color: var(--devcm-amber);
+  font-size: 12px;
+  line-height: 1;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-4px, -50%);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  white-space: nowrap;
+}
+
+.devcm-activity__button:hover::after {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+
+.devcm-activity__button:hover,
+.devcm-activity__button--active {
+  border-color: rgba(255, 176, 0, 0.35);
+  background: rgba(255, 176, 0, 0.07);
+  box-shadow: 0 0 16px rgba(255, 176, 0, 0.08);
+  color: var(--devcm-amber);
+}
+
+.devcm-activity__button--active::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: -10px;
+  width: 3px;
+  border-radius: 999px;
+  background: var(--devcm-amber);
+  box-shadow: 0 0 16px rgba(255, 176, 0, 0.44);
+}
+
+.devcm-activity__spacer {
+  flex: 1;
+}
+
+.devcm-sidebar,
+.devcm-rightbar {
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: rgba(8, 10, 7, 0.78);
+  overscroll-behavior: contain;
+}
+
+html[data-color-scheme="light"] .devcm-sidebar,
+html[data-color-scheme="light"] .devcm-rightbar {
+  background: rgba(238, 232, 213, 0.72);
+}
+
+html[data-color-scheme="light"] .devcm-activity {
+  border-right-color: rgba(101, 123, 131, 0.22);
+  background: #eee8d5;
+}
+
+html[data-color-scheme="light"] .devcm-activity__button {
+  color: #657b83;
+}
+
+html[data-color-scheme="light"] .devcm-activity__button:hover,
+html[data-color-scheme="light"] .devcm-activity__button--active {
+  border-color: rgba(181, 137, 0, 0.34);
+  background: rgba(181, 137, 0, 0.09);
+  box-shadow: none;
+  color: var(--devcm-amber);
+}
+
+.devcm-sidebar {
+  padding: 18px 0 20px;
+  border-right: 1px solid rgba(255, 176, 0, 0.18);
+}
+
+.devcm-rightbar {
+  padding: 24px 16px 20px;
+  border-left: 1px solid rgba(255, 176, 0, 0.18);
+  background: linear-gradient(180deg, rgba(8, 10, 7, 0.84), rgba(5, 7, 5, 0.76));
+}
+
+.devcm-rightbar--hidden {
+  display: none;
+}
+
+.devcm-shell--page .devcm-workspace,
+.devcm-shell--links .devcm-workspace,
+.devcm-shell--moments .devcm-workspace {
+  grid-template-columns: var(--devcm-activity-width) var(--devcm-sidebar-width) minmax(640px, 1fr);
+}
+
+.devcm-side-section {
+  margin-bottom: 18px;
+  padding: 0 18px 18px;
+  border-bottom: 1px solid rgba(255, 176, 0, 0.16);
+}
+
+.devcm-side-section:last-child {
+  border-bottom: 0;
+}
+
+.devcm-section-title,
+.devcm-widget__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+  color: var(--devcm-amber);
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.devcm-tree,
+.devcm-tree__nested {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  color: var(--devcm-muted);
+  font-size: 14px;
+  list-style: none;
+}
+
+.devcm-tree__nested {
+  margin-left: 16px;
+  padding-left: 9px;
+  border-left: 1px dotted rgba(255, 176, 0, 0.14);
+}
+
+.devcm-tree-folder {
+  display: grid;
+  gap: 5px;
+}
+
+.devcm-tree-folder > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.devcm-tree-folder > summary::-webkit-details-marker {
+  display: none;
+}
+
+.devcm-tree-folder > summary:focus {
+  outline: none;
+}
+
+.devcm-tree-folder > summary:focus-visible {
+  box-shadow: inset 0 0 0 1px rgba(104, 243, 127, 0.36), 0 0 0 1px rgba(255, 176, 0, 0.22);
+}
+
+.devcm-tree-folder[open] > summary > .devcm-tree__chev {
+  transform: rotate(90deg);
+}
+
+.devcm-tree__item {
+  display: grid;
+  min-height: 24px;
+  grid-template-columns: 16px 18px minmax(0, 1fr) max-content;
+  gap: 6px;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 6px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.devcm-tree__icon {
+  color: #cda44a;
+  font-size: 15px;
+  opacity: 0.82;
+}
+
+html[data-color-scheme="light"] .devcm-tree__icon {
+  color: #657b83;
+}
+
+.devcm-tree__open {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--devcm-dim);
+  font-size: 12px;
+  text-decoration: none;
+}
+
+.devcm-tree__open i {
+  font-size: 13px;
+}
+
+.devcm-tree__open:hover {
+  color: var(--devcm-green);
+}
+
+.devcm-tree__item--external .devcm-tree__icon,
+.devcm-tree__open--external {
+  color: var(--devcm-cyan);
+  opacity: 0.92;
+}
+
+.devcm-tree__item--external:hover .devcm-tree__icon,
+.devcm-tree__open--external:hover {
+  color: var(--devcm-green);
+}
+
+.devcm-tree__item:hover,
+.devcm-tree__item--root {
+  background: rgba(255, 176, 0, 0.07);
+  color: #f4d89c;
+}
+
+html[data-color-scheme="light"] .devcm-tree__item:hover,
+html[data-color-scheme="light"] .devcm-tree__item--root {
+  background: rgba(181, 137, 0, 0.08);
+  color: #586e75;
+}
+
+.devcm-tree__item--root {
+  background: transparent;
+  color: #e5c36c;
+  font-weight: 800;
+}
+
+html[data-color-scheme="light"] .devcm-tree__item--root {
+  background: transparent;
+  color: #657b83;
+}
+
+.devcm-tree__chev {
+  position: relative;
+  display: inline-grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  color: var(--devcm-amber);
+  opacity: 0.8;
+  transition: transform 0.16s ease;
+}
+
+.devcm-tree__chev::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid currentColor;
+}
+
+.devcm-tree__item:not(.devcm-tree__item--folder) .devcm-tree__chev::before {
+  width: 3px;
+  height: 3px;
+  border: 0;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.devcm-tree__count {
+  color: #8a7c56;
+}
+
+.devcm-tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.devcm-tag {
+  display: inline-flex;
+  min-height: 28px;
+  align-items: center;
+  padding: 4px 9px;
+  border: 1px solid rgba(255, 176, 0, 0.16);
+  border-radius: 7px;
+  background: rgba(255, 176, 0, 0.05);
+  color: #cdb37a;
+  font-size: 13px;
+  text-decoration: none;
+}
+
+html[data-color-scheme="light"] .devcm-tag {
+  border-color: rgba(101, 123, 131, 0.22);
+  background: rgba(238, 232, 213, 0.62);
+  color: #657b83;
+}
+
+.devcm-tag:hover {
+  border-color: rgba(255, 176, 0, 0.36);
+  color: var(--devcm-amber);
+}
+
+.devcm-widget {
+  position: relative;
+  margin-bottom: 16px;
+  padding: 14px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 176, 0, 0.26);
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(14, 16, 12, 0.96), rgba(9, 11, 8, 0.94));
+  box-shadow: var(--devcm-shadow);
+}
+
+html[data-color-scheme="light"] .devcm-widget {
+  background: rgba(253, 246, 227, 0.88);
+}
+
+.devcm-widget::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, rgba(255, 176, 0, 0.04), transparent 38%, rgba(104, 243, 127, 0.025));
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.devcm-widget--empty {
+  min-height: 112px;
+}
+
+.devcm-widget__body {
+  min-height: 50px;
+}
+
+.devcm-widget > * {
+  position: relative;
+  z-index: 1;
+}
+
+.devcm-panel-list {
+  display: grid;
+  gap: 9px;
+}
+
+.devcm-panel-link {
+  display: grid;
+  gap: 3px;
+  padding: 9px 0;
+  border-bottom: 1px dashed rgba(255, 176, 0, 0.12);
+  color: #cdb78b;
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.devcm-panel-link:last-child {
+  border-bottom: 0;
+}
+
+.devcm-panel-link:hover {
+  color: var(--devcm-amber);
+}
+
+.devcm-panel-link strong {
+  overflow: hidden;
+  color: inherit;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.devcm-panel-link span {
+  color: #8c7950;
+}
+
+html[data-color-scheme="light"] .devcm-panel-link {
+  border-bottom-color: rgba(101, 123, 131, 0.16);
+  color: #586e75;
+}
+
+html[data-color-scheme="light"] .devcm-panel-link span {
+  color: #93a1a1;
+}
+
+.devcm-info-list {
+  display: grid;
+  gap: 10px;
+}
+
+.devcm-info-list__row {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 10px;
+  color: #c9bb91;
+  font-size: 13px;
+}
+
+html[data-color-scheme="light"] .devcm-info-list__row {
+  color: #657b83;
+}
+
+.devcm-info-list__row strong {
+  overflow: hidden;
+  color: var(--devcm-green);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.devcm-statusbar {
+  position: relative;
+  z-index: 18;
+  display: grid;
+  box-sizing: border-box;
+  height: var(--devcm-status-height);
+  min-height: 0;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 18px;
+  align-items: center;
+  padding: 0 28px;
+  border-top: 1px solid rgba(255, 176, 0, 0.2);
+  background: rgba(5, 7, 5, 0.92);
+  color: #b99f67;
+  font-size: 13px;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+}
+
+html[data-color-scheme="light"] .devcm-statusbar {
+  border-top-color: rgba(101, 123, 131, 0.22);
+  background: #eee8d5;
+  color: #657b83;
+}
+
+.devcm-statusbar__left,
+.devcm-statusbar__right,
+.devcm-statusbar__center,
+.devcm-statusbar__beian {
+  display: flex;
+  height: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 12px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.devcm-statusbar span,
+.devcm-statusbar a {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.devcm-statusbar__right {
+  justify-content: flex-end;
+}
+
+.devcm-statusbar__center {
+  justify-content: center;
+}
+
+.devcm-statusbar__beian {
+  display: inline-flex;
+  height: auto;
+  justify-content: center;
+  gap: 8px;
+  padding: 0;
+  font-size: inherit;
+}
+
+.devcm-statusbar__beian:empty {
+  display: none;
+}
+
+.devcm-statusbar__beian img {
+  display: inline-block;
+  height: 1.2em;
+}
+
+.devcm-statusbar a {
+  color: var(--devcm-amber);
+  text-decoration: none;
+}
+
+.devcm-statusbar__dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--devcm-green);
+  box-shadow: 0 0 10px rgba(104, 243, 127, 0.6);
+}
+
+@media (max-width: 1320px) {
+  :root {
+    --devcm-sidebar-width: 250px;
+    --devcm-rightbar-width: 270px;
+  }
+
+  .devcm-workspace {
+    grid-template-columns: var(--devcm-activity-width) var(--devcm-sidebar-width) minmax(520px, 1fr) var(
+        --devcm-rightbar-width
+      );
+  }
+
+  .devcm-shell--page .devcm-workspace,
+  .devcm-shell--links .devcm-workspace,
+  .devcm-shell--moments .devcm-workspace {
+    grid-template-columns: var(--devcm-activity-width) var(--devcm-sidebar-width) minmax(520px, 1fr);
+  }
+}
+
+@media (max-width: 1060px) {
+  .devcm-workspace {
+    align-content: stretch;
+    grid-auto-rows: auto;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .devcm-workspace > .devcm-sidebar,
+  .devcm-rightbar {
+    display: none;
+  }
+
+  .devcm-activity {
+    display: flex;
+    flex-direction: row;
+    grid-column: 1 / -1;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    padding: 8px 12px;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid rgba(255, 176, 0, 0.18);
+  }
+
+  .devcm-activity__group {
+    width: auto;
+    flex: 0 0 auto;
+    flex-direction: row;
+    gap: 10px;
+  }
+
+  .devcm-activity__group--down {
+    margin-top: 0;
+    margin-left: auto;
+  }
+
+  .devcm-activity__button {
+    flex: 0 0 auto;
+  }
+
+  .devcm-activity__button::after {
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translate(-50%, -4px);
+  }
+
+  .devcm-activity__button:hover::after {
+    transform: translate(-50%, 0);
+  }
+
+  .devcm-activity__button--active::before {
+    top: auto;
+    right: 8px;
+    bottom: 0;
+    left: 8px;
+    width: auto;
+    height: 3px;
+  }
+
+  .devcm-activity__spacer {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .devcm-topbar {
+    min-height: auto;
+    padding: 14px 12px 0;
+  }
+
+  .devcm-topbar__main {
+    grid-template-columns: max-content minmax(0, 1fr) max-content;
+    gap: 10px;
+  }
+
+  .devcm-prompt-stream {
+    min-height: 30px;
+    grid-template-columns: max-content minmax(24px, 1fr);
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  .devcm-prompt-stream__name {
+    font-size: 11px;
+  }
+
+  .devcm-brand {
+    gap: 8px;
+  }
+
+  .devcm-brand__image,
+  .devcm-brand__mark {
+    width: 30px;
+    height: 30px;
+    border-radius: 7px;
+  }
+
+  .devcm-brand__name {
+    font-size: 20px;
+  }
+
+  .devcm-workspace {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .devcm-statusbar {
+    height: auto;
+    min-height: var(--devcm-status-height);
+    align-content: center;
+    grid-template-columns: 1fr;
+    justify-items: center;
+    gap: 4px;
+    padding: 7px;
+  }
+
+  .devcm-statusbar__left,
+  .devcm-statusbar__right,
+  .devcm-statusbar__center {
+    height: auto;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+}
diff --git a/src/styles/devcm-tokens.scss b/src/styles/devcm-tokens.scss
new file mode 100644
index 0000000..8fc7bbd
--- /dev/null
+++ b/src/styles/devcm-tokens.scss
@@ -0,0 +1,80 @@
+:root,
+html[data-color-scheme="dark"] {
+  color-scheme: dark;
+  --devcm-bg: #070908;
+  --devcm-bg-deep: #040504;
+  --devcm-panel: rgba(12, 14, 11, 0.94);
+  --devcm-panel-soft: rgba(18, 20, 14, 0.88);
+  --devcm-panel-warm: rgba(22, 18, 10, 0.74);
+  --devcm-line: rgba(255, 176, 0, 0.22);
+  --devcm-line-strong: rgba(255, 176, 0, 0.48);
+  --devcm-text: #ddd6b9;
+  --devcm-muted: #a79c78;
+  --devcm-dim: #756b4d;
+  --devcm-amber: #ffb000;
+  --devcm-amber-soft: #d88900;
+  --devcm-green: #68f37f;
+  --devcm-green-soft: rgba(104, 243, 127, 0.15);
+  --devcm-cyan: #00e5ff;
+  --devcm-purple: #b58cff;
+  --devcm-red: #ff5d5d;
+  --devcm-radius: 12px;
+  --devcm-activity-width: 58px;
+  --devcm-sidebar-width: 284px;
+  --devcm-rightbar-width: 308px;
+  --devcm-topbar-height: 88px;
+  --devcm-status-height: 34px;
+  --devcm-mono: Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
+  --devcm-shadow: 0 0 22px rgba(255, 176, 0, 0.08), inset 0 0 0 1px rgba(255, 176, 0, 0.16);
+  --devcm-green-glow: 0 0 18px rgba(104, 243, 127, 0.14);
+
+  --background: var(--devcm-bg);
+  --foreground: var(--devcm-text);
+  --selectionBackground: rgba(104, 243, 127, 0.24);
+  --blue: var(--devcm-cyan);
+  --green: var(--devcm-green);
+  --red: var(--devcm-red);
+  --yellow: var(--devcm-amber);
+  --brightBlue: var(--devcm-cyan);
+  --brightGreen: var(--devcm-green);
+  --brightRed: var(--devcm-red);
+}
+
+html[data-color-scheme="light"] {
+  color-scheme: light;
+  --devcm-bg: #fdf6e3;
+  --devcm-bg-deep: #eee8d5;
+  --devcm-panel: rgba(253, 246, 227, 0.94);
+  --devcm-panel-soft: rgba(238, 232, 213, 0.78);
+  --devcm-panel-warm: rgba(238, 232, 213, 0.62);
+  --devcm-line: rgba(101, 123, 131, 0.2);
+  --devcm-line-strong: rgba(181, 137, 0, 0.42);
+  --devcm-text: #586e75;
+  --devcm-muted: #657b83;
+  --devcm-dim: #93a1a1;
+  --devcm-amber: #b58900;
+  --devcm-amber-soft: #cb4b16;
+  --devcm-green: #859900;
+  --devcm-green-soft: rgba(133, 153, 0, 0.14);
+  --devcm-cyan: #2aa198;
+  --devcm-purple: #6c71c4;
+  --devcm-red: #dc322f;
+  --devcm-shadow: inset 0 0 0 1px rgba(181, 137, 0, 0.16);
+  --devcm-green-glow: 0 0 0 1px rgba(133, 153, 0, 0.12);
+
+  --background: var(--devcm-bg);
+  --foreground: var(--devcm-text);
+  --selectionBackground: rgba(42, 161, 152, 0.18);
+  --blue: var(--devcm-cyan);
+  --green: var(--devcm-green);
+  --red: var(--devcm-red);
+  --yellow: var(--devcm-amber);
+  --brightBlue: var(--devcm-cyan);
+  --brightGreen: var(--devcm-green);
+  --brightRed: var(--devcm-red);
+}
+
+::selection {
+  background: rgba(104, 243, 127, 0.26);
+  color: #fff6d4;
+}
diff --git a/src/styles/footer.scss b/src/styles/footer.scss
index 0482137..a44b8f6 100644
--- a/src/styles/footer.scss
+++ b/src/styles/footer.scss
@@ -3,7 +3,7 @@
 .footer {
   padding: 40px 0 0 0;
   flex-grow: 0;
-  opacity: .5;
+  opacity: 0.5;
 
   &__inner {
     display: flex;
@@ -79,5 +79,10 @@
       gap: 4px;
       padding: 0 8px;
     }
+
+    &__icon {
+      display: inline-block;
+      height: 1.2em;
+    }
   }
 }
diff --git a/src/styles/header-dividing.scss b/src/styles/header-dividing.scss
index ec33e7a..a8a8d92 100644
--- a/src/styles/header-dividing.scss
+++ b/src/styles/header-dividing.scss
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import "./variables.scss";
 
 .dividing {
   flex: 1;
@@ -10,48 +10,35 @@
   --dash-spacing: 10px;
   --dash-width: 2px;
 
-  // 进入动画初始状态（仅 sticky 激活时播放）
   opacity: 1;
   transition: opacity 0.3s ease-in-out;
 
   // 虚线背景层 - 带遮罩
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: repeating-linear-gradient(
-                    90deg,
-                    var(--foreground),
-                    var(--foreground) var(--dash-width),
-                    transparent 0,
-                    transparent var(--dash-spacing)
+      90deg,
+      var(--foreground),
+      var(--foreground) var(--dash-width),
+      transparent 0,
+      transparent var(--dash-spacing)
     );
     background-size: var(--dash-spacing) 100%;
     animation: line-flow 3s linear infinite;
 
     // 遮罩层实现虚线淡入淡出效果
-    mask-image: linear-gradient(
-                    90deg,
-                    transparent 0%,
-                    black 3%,
-                    black 97%,
-                    transparent 100%
-    );
-    -webkit-mask-image: linear-gradient(
-                    90deg,
-                    transparent 0%,
-                    black 3%,
-                    black 97%,
-                    transparent 100%
-    );
+    mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
+    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
   }
 
   // 扫描光效 - 模拟终端扫描线
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     left: -5%;
     top: 50%;
@@ -59,48 +46,13 @@
     width: 30%;
     height: 120%;
     filter: blur(4px);
-    background: linear-gradient(
-                    90deg,
-                    transparent 0%,
-                    var(--green) 80%,
-                    transparent 100%
-    );
+    background: linear-gradient(90deg, transparent 0%, var(--green) 80%, transparent 100%);
     opacity: 0.3;
     animation: scan-line 5s ease-in-out infinite;
     pointer-events: none;
     z-index: 10;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
-
-  &.sticky {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 5px;
-    z-index: 100;
-    --dash-spacing: 6px;
-    --dash-width: 2px;
-    background-color: color-mix(in srgb, var(--background) 90%, transparent);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-    // 进入动画：透明度由0到1
-    animation: sticky-in 0.5s ease-in-out forwards;
-    opacity: 1;
-
-    &::before {
-      top: calc(50% - 1px);
-      height: 2px;
-    }
-
-    &::after {
-      opacity: 0.6;
-      filter: blur(3px);
-      // 调整扫描线高度以适应 5px 容器
-      height: 200%;
-      width: 25%;
-    }
-  }
 }
 
 // 虚线流动动画 - 模拟加载进度
@@ -122,22 +74,13 @@
   }
   30% {
     width: 30%;
-    opacity: .3;
+    opacity: 0.3;
   }
   70% {
-    opacity: .3;
+    opacity: 0.3;
   }
   100% {
     left: 80%;
     opacity: 0;
   }
 }
-
-@keyframes sticky-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 2660f63..4ec3c68 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -2,16 +2,19 @@
 @tailwind utilities;
 @tailwind components;
 
-@import 'main';
-@import 'logo';
-@import 'buttons';
-@import 'header';
-@import 'header-dividing';
-@import 'post';
-@import 'post-line-num';
-@import 'post-toc';
-@import 'pagination';
-@import 'footer';
-@import 'typed-text';
+@import "main";
+@import "logo";
+@import "buttons";
+@import "header";
+@import "header-dividing";
+@import "post";
+@import "post-line-num";
+@import "post-toc";
+@import "pagination";
+@import "footer";
+@import "typed-text";
 
-@import 'theme';
\ No newline at end of file
+@import "theme";
+@import "devcm-tokens";
+@import "devcm-shell";
+@import "devcm-editor";
diff --git a/src/styles/typed-text.scss b/src/styles/typed-text.scss
index 049defa..3801677 100644
--- a/src/styles/typed-text.scss
+++ b/src/styles/typed-text.scss
@@ -1,10 +1,23 @@
 /* 光标样式 */
 .typed-text::after {
-  content: '|';
+  content: none;
+}
+
+.typed-text.typed-text--typing::after {
+  content: "";
   display: inline-block;
-  opacity: 0;
+  width: 0.16em;
+  height: 0.78em;
+  margin-left: 0.08em;
+  background: var(--devcm-amber);
+  box-shadow: 0 0 8px rgba(255, 176, 0, 0.34);
+  opacity: 0.82;
   animation: blink 0.7s infinite alternate; /* 闪烁动画 */
-  vertical-align: text-bottom;
+  vertical-align: 0.04em;
+}
+
+.typed-text.typed-text--complete::after {
+  content: none;
 }
 
 /* 闪烁动画 */
@@ -12,4 +25,4 @@
   to {
     opacity: 1;
   }
-}
\ No newline at end of file
+}
diff --git a/src/utils.ts b/src/utils.ts
deleted file mode 100644
index 7337dcb..0000000
--- a/src/utils.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// 文字打字机效果
-export const typewriterEffect = (selectors: string) => {
-  const typedTextContainer = document.querySelector<HTMLDivElement>(selectors)
-
-  if (!typedTextContainer) return
-
-  const text = typedTextContainer.innerText
-
-  // 清除原有的文本
-  typedTextContainer.innerText = ''
-
-  // 实现打字机效果
-  let i = 0
-
-  const typewriter = () => {
-    if (i >= text.length) return
-
-    typedTextContainer.innerText += text.charAt(i++)
-
-    setTimeout(typewriter, Math.random() * 200 + 50)
-  }
-
-  typewriter()
-}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 29fe940..427ab87 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,83 @@
 /** @type {import('tailwindcss').Config} */
 const { Icons } = require("tailwindcss-plugin-icons");
+
+const devcmActivityIcons = [
+  "folder",
+  "home",
+  "search",
+  "archive",
+  "script-text",
+  "article",
+  "book-open",
+  "file",
+  "file-alt",
+  "file-multiple",
+  "note",
+  "notes",
+  "label",
+  "label-alt",
+  "user",
+  "users",
+  "contact",
+  "git-branch",
+  "git-commit",
+  "git-merge",
+  "git-pull-request",
+  "github",
+  "link",
+  "external-link",
+  "open",
+  "code",
+  "command",
+  "bug",
+  "debug",
+  "server",
+  "cloud",
+  "monitor",
+  "device-laptop",
+  "dashboard",
+  "analytics",
+  "chart",
+  "chart-bar",
+  "kanban",
+  "timeline",
+  "mail",
+  "message",
+  "chat",
+  "comment",
+  "notification",
+  "calendar",
+  "clock",
+  "bookmark",
+  "heart",
+  "lightbulb",
+  "shield",
+  "lock",
+  "image",
+  "image-gallery",
+  "camera",
+  "music",
+  "video",
+  "shopping-bag",
+  "cart",
+  "wallet",
+  "map",
+  "pin",
+  "flag",
+  "power",
+  "upload",
+  "download",
+  "edit",
+  "trash",
+  "plus",
+  "close",
+  "sliders",
+  "sliders-2",
+  "visible",
+  "eye",
+  "eye-closed",
+];
+
 module.exports = {
   content: ["./templates/**/*.html", "./src/main.ts"],
   theme: {
@@ -12,9 +90,14 @@ module.exports = {
       pixelarticons: {
         includeAll: true,
       },
+      "radix-icons": {
+        icons: {
+          gear: {},
+        },
+      },
     })),
   ],
-  darkMode: ['class', '[data-color-scheme="dark"]'],
+  darkMode: ["class", '[data-color-scheme="dark"]'],
   safelist: [
     "prose-sm",
     "prose-base",
@@ -26,5 +109,6 @@ module.exports = {
     "prose-zinc",
     "prose-neutral",
     "prose-stone",
+    ...devcmActivityIcons.map((icon) => `i-pixelarticons-${icon}`),
   ],
-};
\ No newline at end of file
+};
diff --git a/templates/archives.html b/templates/archives.html
index 2ad4459..b1ff4a9 100644
--- a/templates/archives.html
+++ b/templates/archives.html
@@ -1,66 +1,68 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.archives.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.archives.title} - ${site.title}|, pageType = 'archive', terminalUserName = ${archives != null and archives.items != null and !#lists.isEmpty(archives.items) and archives.items[0].months != null and !#lists.isEmpty(archives.items[0].months) and archives.items[0].months[0].posts != null and !#lists.isEmpty(archives.items[0].months[0].posts) and archives.items[0].months[0].posts[0].owner != null and !#strings.isEmpty(archives.items[0].months[0].posts[0].owner.name) ? archives.items[0].months[0].posts[0].owner.name : 'admin'}, content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <div class="content">
-      <div class="post">
-        <h1 class="post-title" th:text="文章归档">文章归档</h1>
-        <th:block th:each="archive : ${archives.items}">
-          <ul>
-            <th:block th:each="month : ${archive.months}">
-              <li class="post-list" th:each="post : ${month.posts}">
-                <a th:href="${post.status.permalink}">
-                  <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
-                    >发布时间</span
-                  >
-                  <span class="post-separator">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                  </span>
-                  <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
-                  <span class="post-tags-inline">
-                    <span class="post-separator">
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                    </span>
-                    <span th:each="tag : ${post.tags}">
-                      <a
-                      th:href="${tag.status.permalink}"
-                      th:title="${tag.spec.displayName}"
-                      th:text="'#'+${tag.spec.displayName}"
-                      class="post-tag"
-                      >#Tag
-                    </a>
-                    </span>
-                  </span>
-                </a>
-              </li>
-            </th:block>
-          </ul>
-        </th:block>
+    <section class="devcm-terminal-window devcm-archive-hero">
+      <div class="devcm-window-titlebar">
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
       </div>
-      <div class="pagination" th:if="${archives.hasPrevious() || archives.hasNext()}">
-        <div class="pagination__buttons">
-          <span class="button previous" th:if="${archives.hasPrevious()}">
-            <a th:href="@{${archives.prevUrl}}">
-              <span class="button__icon"><&nbsp;</span>
-              <span class="button__text">上一页</span>
-            </a>
-          </span>
-          <span class="button next" th:if="${archives.hasNext()}">
-            <a th:href="@{${archives.nextUrl}}">
-              <span class="button__text">下一页</span>
-              <span class="button__icon">&nbsp;></span>
-            </a>
-          </span>
+      <div class="devcm-hero">
+        <div class="devcm-hero__copy">
+          <div class="devcm-prompt-line">
+            <span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
+            <span th:text="#{devcm.archive.command}">archive --view posts</span>
+          </div>
+          <h1 class="devcm-hero__title" th:text="#{devcm.archive.title}">Archives</h1>
+          <p class="devcm-hero__desc" th:text="#{devcm.archive.description}">Browse content by publish date.</p>
         </div>
       </div>
+    </section>
+
+    <section class="devcm-archive-table">
+      <div class="devcm-archive-table__title" th:text="#{devcm.archive.tableTitle}">Archive list</div>
+      <div class="devcm-archive-row devcm-archive-row--header">
+        <span th:text="#{devcm.archive.columnTitle}">Title</span>
+        <span th:text="#{devcm.archive.columnTags}">Tags</span>
+        <span th:text="#{devcm.archive.columnDate}">Date</span>
+      </div>
+      <th:block th:each="archive : ${archives.items}">
+        <th:block th:each="month : ${archive.months}">
+          <div class="devcm-archive-row devcm-archive-row--month">
+            <span>
+              <span th:text="#{devcm.archive.group}">Archive group</span>
+              (<span th:text="${#lists.size(month.posts)}">0</span>)
+            </span>
+          </div>
+          <a class="devcm-archive-row" th:each="post : ${month.posts}" th:href="${post.status.permalink}">
+            <span th:text="${post.spec.title}">文章标题</span>
+            <span>
+              <b th:each="tag : ${post.tags}" th:text="'#' + ${tag.spec.displayName} + ' '">#tag</b>
+            </span>
+            <span th:text="${#dates.format(post.spec.publishTime,'MM-dd')}">01-01</span>
+          </a>
+        </th:block>
+      </th:block>
+    </section>
+
+    <div class="pagination" th:if="${archives.hasPrevious() || archives.hasNext()}">
+      <div class="pagination__buttons">
+        <span class="button previous" th:if="${archives.hasPrevious()}">
+          <a th:href="@{${archives.prevUrl}}">
+            <span class="button__icon"><&nbsp;</span>
+            <span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
+          </a>
+        </span>
+        <span class="button next" th:if="${archives.hasNext()}">
+          <a th:href="@{${archives.nextUrl}}">
+            <span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
+            <span class="button__icon">&nbsp;></span>
+          </a>
+        </span>
+      </div>
     </div>
   </th:block>
 </html>
diff --git a/templates/categories.html b/templates/categories.html
index 5c88ca3..37e55a8 100644
--- a/templates/categories.html
+++ b/templates/categories.html
@@ -1,16 +1,43 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.categories.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.categories.title} - ${site.title}|, pageType = 'categories', terminalUserName = 'admin', content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <div class="content">
-      <div class="post">
-        <h1 class="post-title">所有分类</h1>
-        <ul>
-          <li th:replace="~{modules/category-tree :: single(categories=${categories})}"></li>
-        </ul>
+    <section class="devcm-terminal-window devcm-archive-hero">
+      <div class="devcm-window-titlebar">
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
       </div>
-    </div>
+      <div class="devcm-hero">
+        <div class="devcm-hero__copy">
+          <div class="devcm-prompt-line">
+            <span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
+            <span th:text="#{devcm.categories.command}">archive --view categories</span>
+          </div>
+          <h1 class="devcm-hero__title" th:text="#{devcm.categories.title}">Categories</h1>
+          <p class="devcm-hero__desc" th:text="#{devcm.categories.description}">
+            Browse posts by category and explore the site structure.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section class="devcm-category-grid">
+      <a class="devcm-category-card" th:each="category : ${categories}" th:href="${category.status.permalink}">
+        <h2>
+          <i class="i-pixelarticons-folder"></i>
+          <span th:text="${category.spec.displayName}">Category</span>
+        </h2>
+        <strong
+          th:text="#{devcm.categories.articleCount(${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0})}"
+          >0 articles</strong
+        >
+        <p th:if="${not #strings.isEmpty(category.spec.description)}" th:text="${category.spec.description}">
+          Category description
+        </p>
+      </a>
+    </section>
   </th:block>
 </html>
diff --git a/templates/category.html b/templates/category.html
index 0ac4b59..232b25c 100644
--- a/templates/category.html
+++ b/templates/category.html
@@ -1,68 +1,53 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.category.title(${category.spec.displayName})} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.category.title(${category.spec.displayName})} - ${site.title}|, pageType = 'category', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <div class="content">
-      <div class="post">
-        <h1
-          class="post-title"
-          th:text="'分类：'+${category.spec.displayName}+' ('+${category.status.visiblePostCount?:0}+' 篇文章)'"
-        >
-          分类：分类名 (n 篇文章)
-        </h1>
-        <a href="/categories"> 所有分类 </a>
-        <ul>
-          <li class="post-list" th:each="post : ${posts.items}">
-            <a th:href="${post.status.permalink}">
-              <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
-                >发布时间</span
-              >
-              <span class="post-separator">
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-              </span>
-              <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
-              <span class="post-tags-inline">
-                <span class="post-separator">
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                </span>
-                <span th:each="tag : ${post.tags}">
-                  <a
-                  th:href="${tag.status.permalink}"
-                  th:title="${tag.spec.displayName}"
-                  th:text="'#'+${tag.spec.displayName}"
-                  class="post-tag"
-                  >#Tag
-                </a>
-                </span>
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
-        <div class="pagination__buttons">
-          <span class="button previous" th:if="${posts.hasPrevious()}">
-            <a th:href="@{${posts.prevUrl}}">
-              <span class="button__icon"><</span>
-              <span class="button__text">上一页</span>
-            </a>
-          </span>
-          <span class="button next" th:if="${posts.hasNext()}">
-            <a th:href="@{${posts.nextUrl}}">
-              <span class="button__text">下一页</span>
-              <span class="button__icon">></span>
-            </a>
-          </span>
+    <section class="devcm-editor-window">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tab devcm-editor-tab--active">
+          <span th:text="${category.spec.displayName} + '.md'">category.md</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/categories"
+            th:aria-label="#{devcm.action.closeCategoryTab}"
+            th:title="#{devcm.action.closeCategoryTab}"
+            >×</a
+          >
         </div>
       </div>
+      <div class="devcm-editor-body">
+        <h1 class="devcm-page-title">
+          <span th:text="#{devcm.taxonomy.categoryTitle(${category.spec.displayName})}">Category</span>
+          <small
+            th:text="#{devcm.taxonomy.postCount(${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0})}"
+            >(0 posts)</small
+          >
+        </h1>
+        <div class="devcm-post-stack">
+          <th:block th:each="post,iterStat : ${posts.items}">
+            <th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
+          </th:block>
+        </div>
+      </div>
+    </section>
+
+    <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
+      <div class="pagination__buttons">
+        <span class="button previous" th:if="${posts.hasPrevious()}">
+          <a th:href="@{${posts.prevUrl}}">
+            <span class="button__icon"><</span>
+            <span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
+          </a>
+        </span>
+        <span class="button next" th:if="${posts.hasNext()}">
+          <a th:href="@{${posts.nextUrl}}">
+            <span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
+            <span class="button__icon">></span>
+          </a>
+        </span>
+      </div>
     </div>
   </th:block>
 </html>
diff --git a/templates/index.html b/templates/index.html
index f4e71ce..6f8c1c7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,63 +1,97 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = ${site.title}, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = ${site.title}, pageType = 'home', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <div class="content">
-      <div class="index-content framed">
-        <h1 class="typed-text" th:text="${theme.config.index.index_notice_title}"></h1>
-        <div th:utext="${theme.config.index.index_notice_content}"></div>
+    <section class="devcm-terminal-window devcm-home-hero">
+      <div class="devcm-window-titlebar">
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
       </div>
-      <div class="posts">
-        <div class="post on-list" th:each="post : ${posts.items}">
-          <h1 class="post-title">
-            <a th:text="'< ' + ${post.spec.title} + ' >'" th:href="${post.status.permalink}">Post Title</a>
+      <div class="devcm-hero">
+        <div class="devcm-hero__copy">
+          <div class="devcm-prompt-line">
+            <span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span> <span>./welcome.sh</span>
+          </div>
+          <h1 class="devcm-hero__title typed-text" th:text="${theme.config.index.index_notice_title}">
+            Welcome to DevCM.
           </h1>
-          <div class="post-meta">
-            <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
-              Post CreateTime
-            </span>
-            <span class="post-separator">
-              <span></span>
-              <span></span>
-              <span></span>
-              <span></span>
-            </span>
-            <span class="post-author" th:with="contributor = ${post.contributors[0]}" th:text="${contributor.displayName}">
-              Author
-            </span>
-            <span class="post-tags-inline" th:each="tag : ${post.tags}">
-              <a th:href="${tag.status.permalink}"
-                 th:title="${tag.spec.displayName}"
-                 th:text="'#'+${tag.spec.displayName}"
-                 class="post-tag"
-              >#Tag
-              </a>
-            </span>
+          <div class="devcm-hero__subtitle" th:text="#{devcm.home.subtitle}">Development Content Management.</div>
+          <div class="devcm-hero__desc" th:utext="${theme.config.index.index_notice_content}">
+            <span th:text="#{devcm.home.defaultContent}">A Terminal-style Halo theme.</span>
           </div>
-          <div class="post-content" th:text="${post.status.excerpt}">Post Excerpt...</div>
-
-          <div>
-            <a class="read-more button" th:href="${post.status.permalink}">阅读更多 ></a>
+          <div class="devcm-prompt-line devcm-prompt-line--after-typed">
+            <span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span> <span class="devcm-cursor"></span>
+          </div>
+        </div>
+        <div class="devcm-ascii-badge" aria-hidden="true">
+          <span class="devcm-ascii-badge__grid"></span>
+          <div class="devcm-ascii-badge__inner">
+            <span class="devcm-ascii-badge__label">DEV.CM</span>
+            <pre>
+DEV
+CM</pre
+            >
+            <small>&lt; <span th:text="${#dates.year(#dates.createNow())}">2026</span> /&gt;</small>
+            <span class="devcm-ascii-badge__scan"></span>
           </div>
         </div>
       </div>
-      <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
-        <div class="pagination__buttons">
-          <span class="button previous" th:if="${posts.hasPrevious()}">
-            <a th:href="@{${posts.prevUrl}}">
-              <span class="button__icon"><&nbsp;</span>
-              <span class="button__text">上一页</span>
+    </section>
+
+    <section class="devcm-editor-window" x-data="{ postsOpen: true }">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tabs__left">
+          <div class="devcm-editor-tab devcm-editor-tab--active" x-show="postsOpen">
+            <span>posts.md</span>
+            <a
+              href="#"
+              class="devcm-editor-tab__close"
+              role="button"
+              @click.prevent="postsOpen = false"
+              th:aria-label="#{devcm.action.closeTab}"
+              th:title="#{devcm.action.closeTab}"
+            >
+              ×
             </a>
-          </span>
-          <span class="button next" th:if="${posts.hasNext()}">
-            <a th:href="@{${posts.nextUrl}}">
-              <span class="button__text">下一页</span>
-              <span class="button__icon">&nbsp;></span>
-            </a>
-          </span>
+          </div>
         </div>
+        <a
+          class="devcm-editor-tab__add"
+          href="/console"
+          th:aria-label="#{devcm.action.newPost}"
+          th:title="#{devcm.action.newPost}"
+          >＋</a
+        >
+      </div>
+      <div id="devcm-posts-panel" class="devcm-editor-body devcm-post-list-body" x-show="postsOpen">
+        <div class="devcm-post-stack">
+          <th:block th:each="post,iterStat : ${posts.items}">
+            <th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
+          </th:block>
+          <div class="devcm-list-footnote" th:if="${posts.items != null}">
+            <span th:text="#{devcm.home.postCount(${#lists.size(posts.items)})}">&gt; Current page has 0 post(s)</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
+      <div class="pagination__buttons">
+        <span class="button previous" th:if="${posts.hasPrevious()}">
+          <a th:href="@{${posts.prevUrl}}">
+            <span class="button__icon"><&nbsp;</span>
+            <span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
+          </a>
+        </span>
+        <span class="button next" th:if="${posts.hasNext()}">
+          <a th:href="@{${posts.nextUrl}}">
+            <span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
+            <span class="button__icon">&nbsp;></span>
+          </a>
+        </span>
       </div>
     </div>
   </th:block>
diff --git a/templates/links.html b/templates/links.html
index 5a09ea5..c0f6862 100644
--- a/templates/links.html
+++ b/templates/links.html
@@ -1,43 +1,46 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, pageType = 'links', terminalUserName = 'admin', content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <script th:src="@{/assets/libs/pixelit.js}"></script>
-    <div>
-      <section class="">
-        <div class="">
-          <div class="mb-6" th:each="group : ${groups}">
-            <div class="">
-              <h2
-                class="post-title"
-                th:text="${!#strings.isEmpty(group.spec.displayName) ? group.spec.displayName:'友情链接'}"
-              >
-                链接分组
-              </h2>
-            </div>
-            <div class="">
-              <a th:each="link : ${group.links}" th:href="${link.spec.url}" target="_blank" class="mb-2 block">
-                <div class="flex bg-[#a9c1e2] dark:bg-[#3b5070] p-1">
-                  <div class="">
-                    <img class="w-16" src="sky.jpg" th:src="${link.spec.logo}" id="pixelitimg" th:alt="${link.spec.displayName}">
-                  </div>
-                  <div class="ml-4 flex flex-col justify-around">
-                      <div class="m-0 text-[#003e8a] dark:text-[#6ca4f8]"><span th:text="${link.spec.displayName}"></span><span th:text="| (${link.spec.url})|"></span></div>
-                      <div class="m-0 text-[#3e3e3e] dark:text-[#8b949e]" th:text="${link.spec.description}"></div>
-                  </div>
-                </div>
-              </a>
-            </div>
+    <section class="devcm-editor-window">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tab devcm-editor-tab--active">
+          <span>links.md</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/"
+            th:aria-label="#{devcm.action.closeLinksTab}"
+            th:title="#{devcm.action.closeLinksTab}"
+            >×</a
+          >
+        </div>
+      </div>
+      <div class="devcm-editor-body">
+        <div class="devcm-link-group" th:each="group : ${groups}">
+          <h2
+            class="devcm-page-title"
+            th:text="${!#strings.isEmpty(group.spec.displayName) ? group.spec.displayName : #messages.msg('devcm.links.defaultGroup')}"
+          >
+            Links
+          </h2>
+          <div class="devcm-link-grid">
+            <a class="devcm-link-card" th:each="link : ${group.links}" th:href="${link.spec.url}" target="_blank">
+              <img
+                th:if="${not #strings.isEmpty(link.spec.logo)}"
+                th:src="${link.spec.logo}"
+                th:alt="${link.spec.displayName}"
+              />
+              <span class="devcm-link-card__body">
+                <strong th:text="${link.spec.displayName}">Link</strong>
+                <small th:text="${link.spec.url}">https://example.com</small>
+                <span th:text="${link.spec.description}">description</span>
+              </span>
+            </a>
           </div>
         </div>
-      </section>
-      <script>
-        //create object
-        const px = new pixelit();
-        px.draw().pixelate();
-      </script>
-    </div>
+      </div>
+    </section>
   </th:block>
 </html>
diff --git a/templates/modules/activity-bar.html b/templates/modules/activity-bar.html
new file mode 100644
index 0000000..d745c62
--- /dev/null
+++ b/templates/modules/activity-bar.html
@@ -0,0 +1,213 @@
+<aside class="devcm-activity" th:fragment="activity-bar (pageType)" th:aria-label="#{devcm.activity.aria}">
+  <span class="devcm-activity__icon-bank" aria-hidden="true">
+    <i class="i-pixelarticons-folder"></i>
+    <i class="i-pixelarticons-search"></i>
+    <i class="i-pixelarticons-archive"></i>
+    <i class="i-pixelarticons-script-text"></i>
+    <i class="i-pixelarticons-label"></i>
+    <i class="i-pixelarticons-user"></i>
+    <i class="i-radix-icons-gear"></i>
+    <i class="i-pixelarticons-git-branch"></i>
+    <i class="i-pixelarticons-git-commit"></i>
+    <i class="i-pixelarticons-git-merge"></i>
+    <i class="i-pixelarticons-git-pull-request"></i>
+    <i class="i-pixelarticons-github"></i>
+  </span>
+
+  <th:block th:with="items=${theme.config.activity.activity_items}">
+    <div class="devcm-activity__group devcm-activity__group--up">
+      <th:block th:if="${items != null and !#lists.isEmpty(items)}">
+        <th:block
+          th:each="item : ${items}"
+          th:with="placement=${#strings.isEmpty(item.position) ? 'up' : item.position},
+            itemType=${!#strings.isEmpty(item.type) ? item.type : (!#strings.isEmpty(item.key) ? item.key : 'custom')},
+            entryAction=${itemType == 'search' or item.action == 'search' ? 'search' : 'link'},
+            entryHref=${entryAction == 'search' ? '#' : (!#strings.isEmpty(item.url) ? item.url : (!#strings.isEmpty(item.href) ? item.href : '#'))},
+            entryLabel=${!#strings.isEmpty(item.label) ? item.label : (!#strings.isEmpty(item.labelKey) ? #messages.msg(item.labelKey) : #messages.msg('devcm.activity.link'))}"
+        >
+          <a
+            class="devcm-activity__button"
+            th:if="${placement != 'down' and itemType != 'login' and itemType != 'git' and (item.enabled == null or item.enabled == true or item.enabled == 'true') and (entryAction != 'search' or pluginFinder.available('PluginSearchWidget'))}"
+            th:classappend="${(!#strings.isEmpty(item.activeTypes) and #strings.contains(',' + item.activeTypes + ',', ',' + pageType + ',')) or (itemType == 'home' and pageType == 'home') or (itemType == 'archive' and (pageType == 'archive' or pageType == 'post')) or (itemType == 'categories' and (pageType == 'categories' or pageType == 'category')) or (itemType == 'tags' and (pageType == 'tags' or pageType == 'tag'))} ? ' devcm-activity__button--active' : ''"
+            th:href="${entryHref}"
+            th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
+            th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
+            th:title="${entryLabel}"
+            th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
+          >
+            <i th:class="|i-pixelarticons-${!#strings.isEmpty(item.icon) ? item.icon : 'file'}|"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAnonymous()"
+            th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            th:href="${entryHref}"
+            th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
+            th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
+            th:title="${entryLabel}"
+            th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
+          >
+            <i class="i-pixelarticons-user"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAuthenticated()"
+            th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            href="/console"
+            th:title="#{devcm.activity.console}"
+            th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console},data-devcm-action='link'"
+          >
+            <i class="i-radix-icons-gear"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAuthenticated()"
+            th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            href="/logout"
+            th:title="#{devcm.activity.logout}"
+            th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout},data-devcm-action='link'"
+          >
+            <i class="i-pixelarticons-user"></i>
+          </a>
+        </th:block>
+      </th:block>
+
+      <th:block th:if="${items == null or #lists.isEmpty(items)}">
+        <a
+          class="devcm-activity__button"
+          th:classappend="${pageType == 'home'} ? ' devcm-activity__button--active' : ''"
+          href="/"
+          th:title="#{devcm.activity.explorer}"
+          th:attr="data-label=#{devcm.activity.explorer},aria-label=#{devcm.activity.explorer}"
+        >
+          <i class="i-pixelarticons-folder"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          th:if="${pluginFinder.available('PluginSearchWidget')}"
+          href="#"
+          data-devcm-action="search"
+          th:title="#{devcm.activity.search}"
+          th:attr="data-label=#{devcm.activity.search},aria-label=#{devcm.activity.search}"
+        >
+          <i class="i-pixelarticons-search"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          th:classappend="${pageType == 'archive' or pageType == 'post'} ? ' devcm-activity__button--active' : ''"
+          href="/archives"
+          th:title="#{devcm.activity.archive}"
+          th:attr="data-label=#{devcm.activity.archive},aria-label=#{devcm.activity.archive}"
+        >
+          <i class="i-pixelarticons-archive"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          th:classappend="${pageType == 'categories' or pageType == 'category'} ? ' devcm-activity__button--active' : ''"
+          href="/categories"
+          th:title="#{devcm.activity.categories}"
+          th:attr="data-label=#{devcm.activity.categories},aria-label=#{devcm.activity.categories}"
+        >
+          <i class="i-pixelarticons-script-text"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          th:classappend="${pageType == 'tags' or pageType == 'tag'} ? ' devcm-activity__button--active' : ''"
+          href="/tags"
+          th:title="#{devcm.activity.tags}"
+          th:attr="data-label=#{devcm.activity.tags},aria-label=#{devcm.activity.tags}"
+        >
+          <i class="i-pixelarticons-label"></i>
+        </a>
+      </th:block>
+    </div>
+
+    <div class="devcm-activity__group devcm-activity__group--down">
+      <th:block th:if="${items != null and !#lists.isEmpty(items)}">
+        <th:block
+          th:each="item : ${items}"
+          th:with="placement=${#strings.isEmpty(item.position) ? 'up' : item.position},
+            itemType=${!#strings.isEmpty(item.type) ? item.type : (!#strings.isEmpty(item.key) ? item.key : 'custom')},
+            entryAction=${itemType == 'search' or item.action == 'search' ? 'search' : 'link'},
+            entryHref=${entryAction == 'search' ? '#' : (!#strings.isEmpty(item.url) ? item.url : (!#strings.isEmpty(item.href) ? item.href : '#'))},
+            entryLabel=${!#strings.isEmpty(item.label) ? item.label : (!#strings.isEmpty(item.labelKey) ? #messages.msg(item.labelKey) : #messages.msg('devcm.activity.link'))}"
+        >
+          <a
+            class="devcm-activity__button"
+            th:if="${placement == 'down' and itemType != 'login' and itemType != 'git' and (item.enabled == null or item.enabled == true or item.enabled == 'true') and (entryAction != 'search' or pluginFinder.available('PluginSearchWidget'))}"
+            th:classappend="${(!#strings.isEmpty(item.activeTypes) and #strings.contains(',' + item.activeTypes + ',', ',' + pageType + ',')) or (itemType == 'home' and pageType == 'home') or (itemType == 'archive' and (pageType == 'archive' or pageType == 'post')) or (itemType == 'categories' and (pageType == 'categories' or pageType == 'category')) or (itemType == 'tags' and (pageType == 'tags' or pageType == 'tag'))} ? ' devcm-activity__button--active' : ''"
+            th:href="${entryHref}"
+            th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
+            th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
+            th:title="${entryLabel}"
+            th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
+          >
+            <i th:class="|i-pixelarticons-${!#strings.isEmpty(item.icon) ? item.icon : 'file'}|"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAnonymous()"
+            th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            th:href="${entryHref}"
+            th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
+            th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
+            th:title="${entryLabel}"
+            th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
+          >
+            <i class="i-pixelarticons-user"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAuthenticated()"
+            th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            href="/console"
+            th:title="#{devcm.activity.console}"
+            th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console},data-devcm-action='link'"
+          >
+            <i class="i-radix-icons-gear"></i>
+          </a>
+          <a
+            class="devcm-activity__button"
+            sec:authorize="isAuthenticated()"
+            th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
+            href="/logout"
+            th:title="#{devcm.activity.logout}"
+            th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout},data-devcm-action='link'"
+          >
+            <i class="i-pixelarticons-user"></i>
+          </a>
+        </th:block>
+      </th:block>
+
+      <th:block th:if="${items == null or #lists.isEmpty(items)}">
+        <a
+          class="devcm-activity__button"
+          sec:authorize="isAnonymous()"
+          href="/console"
+          th:title="#{devcm.activity.login}"
+          th:attr="data-label=#{devcm.activity.login},aria-label=#{devcm.activity.login}"
+        >
+          <i class="i-pixelarticons-user"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          sec:authorize="isAuthenticated()"
+          href="/console"
+          th:title="#{devcm.activity.console}"
+          th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console}"
+        >
+          <i class="i-radix-icons-gear"></i>
+        </a>
+        <a
+          class="devcm-activity__button"
+          sec:authorize="isAuthenticated()"
+          href="/logout"
+          th:title="#{devcm.activity.logout}"
+          th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout}"
+        >
+          <i class="i-pixelarticons-user"></i>
+        </a>
+      </th:block>
+    </div>
+  </th:block>
+</aside>
diff --git a/templates/modules/category-tree.html b/templates/modules/category-tree.html
index e3fd3d2..7656163 100644
--- a/templates/modules/category-tree.html
+++ b/templates/modules/category-tree.html
@@ -1,10 +1,33 @@
-<ul th:fragment="next (categories)">
-  <li th:fragment="single (categories)" th:each="category : ${categories}">
-    <a th:href="@{${category.status.permalink}}">
-      <span th:text="${category.spec.displayName}+' ('+${category.status.visiblePostCount?:0}+' 篇文章)'"> </span>
-    </a>
-    <th:block th:if="${not #lists.isEmpty(category.children)}">
+<ul th:fragment="next (categories)" class="devcm-tree__nested">
+  <li th:fragment="single (categories)" th:each="category : ${categories}" class="devcm-tree__node">
+    <details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(category.children)}">
+      <summary class="devcm-tree__item devcm-tree__item--folder">
+        <span class="devcm-tree__chev" aria-hidden="true"></span>
+        <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+        <span th:text="${category.spec.displayName}">Category</span>
+        <a
+          class="devcm-tree__open"
+          th:href="@{${category.status.permalink}}"
+          th:title="#{devcm.action.open}"
+          th:aria-label="#{devcm.action.openCategory}"
+          >↗</a
+        >
+      </summary>
       <th:block th:replace="~{modules/category-tree :: next (categories=${category.children})}"></th:block>
-    </th:block>
+    </details>
+    <a
+      class="devcm-tree__item"
+      th:unless="${not #lists.isEmpty(category.children)}"
+      th:href="@{${category.status.permalink}}"
+    >
+      <span class="devcm-tree__chev" aria-hidden="true"></span>
+      <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+      <span th:text="${category.spec.displayName}">Category</span>
+      <span
+        class="devcm-tree__count"
+        th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}"
+        >0</span
+      >
+    </a>
   </li>
 </ul>
diff --git a/templates/modules/editor-frame.html b/templates/modules/editor-frame.html
new file mode 100644
index 0000000..af24cfc
--- /dev/null
+++ b/templates/modules/editor-frame.html
@@ -0,0 +1,26 @@
+<th:block xmlns:th="https://www.thymeleaf.org">
+  <div class="devcm-terminal-window" th:fragment="terminal-window (content)">
+    <div class="devcm-window-titlebar">
+      <span class="devcm-window-dot"></span>
+      <span class="devcm-window-dot"></span>
+      <span class="devcm-window-dot"></span>
+    </div>
+    <th:block th:replace="${content}" />
+  </div>
+
+  <div class="devcm-editor-window" th:fragment="editor-window (tabTitle, content)">
+    <div class="devcm-editor-tabs">
+      <div class="devcm-editor-tab devcm-editor-tab--active">
+        <span th:text="${tabTitle}">_posts.md</span>
+        <a
+          class="devcm-editor-tab__close"
+          href="/"
+          th:aria-label="#{devcm.action.closeTab}"
+          th:title="#{devcm.action.closeTab}"
+          >×</a
+        >
+      </div>
+    </div>
+    <th:block th:replace="${content}" />
+  </div>
+</th:block>
diff --git a/templates/modules/explorer.html b/templates/modules/explorer.html
new file mode 100644
index 0000000..5ae4595
--- /dev/null
+++ b/templates/modules/explorer.html
@@ -0,0 +1,47 @@
+<aside class="devcm-sidebar" th:fragment="explorer (pageType)" th:aria-label="#{devcm.explorer.title}">
+  <section class="devcm-side-section">
+    <div class="devcm-section-title">
+      <span th:text="#{devcm.explorer.title}">EXPLORER</span>
+      <span aria-hidden="true">...</span>
+    </div>
+    <div class="devcm-tree" th:with="menu = ${menuFinder.getPrimary()}">
+      <details class="devcm-tree-folder" open>
+        <summary class="devcm-tree__item devcm-tree__item--folder">
+          <span class="devcm-tree__chev" aria-hidden="true"></span>
+          <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+          <span th:text="#{devcm.explorer.pages}">pages</span>
+        </summary>
+        <div class="devcm-tree__nested">
+          <th:block th:if="${menu != null}" th:replace="~{modules/menu-tree :: items(items=${menu.menuItems})}" />
+        </div>
+      </details>
+    </div>
+  </section>
+
+  <section class="devcm-side-section" th:if="${categories != null}">
+    <div class="devcm-section-title">
+      <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
+      <span aria-hidden="true">...</span>
+    </div>
+    <ul class="devcm-tree devcm-tree--list">
+      <li th:replace="~{modules/category-tree :: single(categories=${categories})}"></li>
+    </ul>
+  </section>
+
+  <section class="devcm-side-section" th:if="${tags != null}">
+    <div class="devcm-section-title">
+      <span th:text="#{devcm.explorer.tags}">TAGS CLOUD</span>
+      <span aria-hidden="true">...</span>
+    </div>
+    <div class="devcm-tag-cloud">
+      <a
+        class="devcm-tag"
+        th:each="tag : ${tags}"
+        th:href="${tag.status.permalink}"
+        th:text="'#' + ${tag.spec.displayName}"
+      >
+        #tag
+      </a>
+    </div>
+  </section>
+</aside>
diff --git a/templates/modules/footer.html b/templates/modules/footer.html
index cedec36..5fe966f 100644
--- a/templates/modules/footer.html
+++ b/templates/modules/footer.html
@@ -3,7 +3,10 @@
     <div class="copyright">
       <span>
         © <span th:text="${#dates.year(#dates.createNow())}">2024</span> Powered by
-        <a th:href="${theme.config.footer.footer_powered_link}" th:text="${theme.config.footer.footer_powered_text}"></a>
+        <a
+          th:href="${theme.config.footer.footer_powered_link}"
+          th:text="${theme.config.footer.footer_powered_text}"
+        ></a>
       </span>
     </div>
     <div class="beian">
@@ -16,7 +19,7 @@
         ></a
       ></span>
       <span th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}">
-        <img th:src="@{/assets/image/gongan.png}" style="display:inline-block; height: 1.2em;">
+        <img class="beian__icon" th:src="@{/assets/image/gongan.png}" alt="" />
         <a
           href="https://www.beian.gov.cn/"
           target="_blank"
diff --git a/templates/modules/header.html b/templates/modules/header.html
index 5d674ec..a85f5c0 100644
--- a/templates/modules/header.html
+++ b/templates/modules/header.html
@@ -1,77 +1,32 @@
-<header class="header" xmlns:th="http://www.w3.org/1999/xhtml">
-  <div th:fragment="header" th:with="menu = ${menuFinder.getPrimary()}">
-    <div class="header__inner">
-      <a class="logo" href="/" style="text-decoration: none">
-        <img class="icon" th:if="${not #strings.isEmpty(theme.config.basic.logo)}" th:src="${theme.config.basic.logo}" alt="Logo" />
-        <div class="text"  th:if="${not #strings.isEmpty(theme.config.basic.title)}" th:text="${theme.config.basic.title}"></div>
-      </a>
-      <div class="header__center" x-data="headerDividing()">
-        <div class="dividing" :class="{ 'sticky': isSticky }"></div>
-      </div>
+<header class="devcm-topbar header" th:fragment="header (pageType)" th:with="menu = ${menuFinder.getPrimary()}">
+  <div class="devcm-topbar__main header__inner">
+    <a class="devcm-brand logo" href="/" th:aria-label="#{devcm.explorer.home}">
+      <img
+        class="devcm-brand__image icon"
+        th:if="${not #strings.isEmpty(theme.config.basic.logo)}"
+        th:src="${theme.config.basic.logo}"
+        alt="Logo"
+      />
+      <span class="devcm-brand__mark" th:unless="${not #strings.isEmpty(theme.config.basic.logo)}">DEV<br />CM</span>
+      <span class="devcm-brand__name">DevCM</span>
+    </a>
+
+    <div class="devcm-prompt-stream header__center">
+      <span class="devcm-prompt-stream__name" th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
+      <span class="devcm-prompt-stream__line dividing" aria-hidden="true"></span>
+    </div>
+
+    <div class="devcm-topbar__actions">
       <button
         type="button"
-        class="button"
-        th:if="${pluginFinder.available('PluginSearchWidget')}"
-        onclick="SearchWidget.open()"
+        class="devcm-icon-button button"
+        x-data="themeMode()"
+        @click="handleToggleThemeMode()"
+        th:aria-label="#{devcm.action.toggleTheme}"
+        th:title="#{devcm.action.toggleTheme}"
       >
-        <th:block th:unless="${theme.config.basic.pixel_style}">
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
-            <path
-              fill="currentColor"
-              d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3l-1.4 1.4ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"
-            />
-          </svg>
-        </th:block>
-        <th:block th:if="${theme.config.basic.pixel_style}">
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 2h8v2H6zM4 6V4h2v2zm0 8H2V6h2zm2 2H4v-2h2zm8 0v2H6v-2zm2-2h-2v2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm0-8h2v8h-2zm0 0V4h-2v2z"/></svg>
-        </th:block>
-      </button>
-      <button type="button" class="button" x-data="themeMode()" @click="handleToggleThemeMode()">
-        <th:block th:unless="${theme.config.basic.pixel_style}">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            style="vertical-align: -0.125em"
-            width="1.5rem"
-            height="1.5rem"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="currentColor"
-              d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34Z"
-            />
-          </svg>
-        </th:block>
-        <th:block th:if="${theme.config.basic.pixel_style}">
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M11 0h2v4h-2zm1 12H8v2H4v2H2v4h2v2h10v-2h2v-4h-2v-2h-2zm0 2v2h2v4H4v-4h4v2h2v-2H8v-2zM8 6h6v2H8zm0 2v2H6V8zm8 2h-2V8h2zm0 0h2v2h-2zm4-8h2v2h-2zm0 2v2h-2V4zM2 2h2v2H2zm2 2h2v2H4zm20 7h-4v2h4z"/></svg>
-        </th:block>
+        <i class="i-pixelarticons-sun-alt"></i>
       </button>
     </div>
-    <nav class="menu">
-      <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner">
-        <li th:each="menuItem : ${menu.menuItems}" x-data="headerMenu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
-          <a
-            class="text-gray-600 hover:text-blue-600"
-            th:href="${menuItem.status.href}"
-            th:target="${menuItem.spec.target?.value}"
-            th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
-          ></a>
-          <ul 
-            th:if="${not #lists.isEmpty(menuItem.children)}"
-            class="menu__sub-inner" 
-            :class="{'open': isOpen}"
-          >
-            <li th:each="childMenuItem : ${menuItem.children}">
-              <a 
-                class="text-gray-600 hover:text-blue-600" 
-                th:href="${childMenuItem.status.href}"
-                th:target="${childMenuItem.spec.target?.value}"
-                th:text="${childMenuItem.status.displayName}"
-              ></a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </nav>
   </div>
 </header>
diff --git a/templates/modules/layout.html b/templates/modules/layout.html
index 87bd152..7694d82 100644
--- a/templates/modules/layout.html
+++ b/templates/modules/layout.html
@@ -1,36 +1,48 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:lang="${#locale.toLanguageTag}" 
-  th:fragment="html (header, content, footer)">
+  th:lang="${#locale.toLanguageTag}"
+  th:fragment="html (title, pageType, terminalUserName, content)"
+>
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}">
+    <link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}" />
     <title th:text="${title}"></title>
     <link rel="manifest" th:href="@{/assets/dist/manifest.json}" />
-    <link rel="stylesheet" th:href="@{/assets/dist/main.css?version={version}(version=${theme.spec.version})}" href="./assets/dist/style.css" />
+    <link
+      rel="stylesheet"
+      th:href="@{/assets/dist/main.css?version={version}&amp;build=devcm-ide-1.2.8-visual9(version=${theme.spec.version})}"
+      href="./assets/dist/style.css"
+    />
   </head>
-  <!-- 根据情况判断是否添加开启像素化样式 -->
-  <body class="main" th:classappend="${theme.config.basic.pixel_style} ? 'pixel_style' : '' ">
-    <div class="center headings--one-size container">
-      <th:block th:if="${header != null}">
-        <th:block th:replace="${header}" />
-      </th:block>
-      <th:block th:if="${header == null}">
-        <th:block th:replace="~{modules/header :: header(isHome = true)}" />
-      </th:block>
+  <body
+    class="main devcm-body"
+    th:classappend="${theme.config.basic.pixel_style == true or theme.config.basic.pixel_style == 'true'} ? ' pixel_style' : ''"
+    th:with="currentPageType=${#strings.isEmpty(pageType) ? 'home' : pageType},
+      terminalUser=${#strings.isEmpty(terminalUserName) ? 'admin' : terminalUserName}"
+  >
+    <div class="devcm-shell" th:classappend="| devcm-shell--${currentPageType}|">
+      <div class="devcm-app">
+        <th:block th:replace="~{modules/header :: header(pageType=${currentPageType})}" />
 
-      <th:block th:replace="${content}" />
+        <div class="devcm-workspace">
+          <th:block th:replace="~{modules/activity-bar :: activity-bar(pageType=${currentPageType})}" />
+          <th:block th:replace="~{modules/explorer :: explorer(pageType=${currentPageType})}" />
 
-      <th:block th:if="${footer == null}">
-        <th:block th:replace="~{modules/footer}" />
-      </th:block>
-      <th:block th:if="${footer != null}">
-        <th:block th:replace="${footer}" />
-      </th:block>
+          <main class="devcm-editor" id="main-content">
+            <th:block th:replace="${content}" />
+          </main>
+
+          <th:block th:replace="~{modules/right-panel :: right-panel(pageType=${currentPageType})}" />
+        </div>
+
+        <th:block th:replace="~{modules/statusbar :: statusbar(pageType=${currentPageType})}" />
+      </div>
     </div>
-    <script th:src="@{/assets/dist/main.js?version={version}(version=${theme.spec.version})}"></script>
+    <script
+      th:src="@{/assets/dist/main.js?version={version}&amp;build=devcm-ide-1.2.8-visual9(version=${theme.spec.version})}"
+    ></script>
   </body>
 </html>
diff --git a/templates/modules/menu-tree.html b/templates/modules/menu-tree.html
new file mode 100644
index 0000000..9cd8487
--- /dev/null
+++ b/templates/modules/menu-tree.html
@@ -0,0 +1,63 @@
+<th:block th:fragment="items (items)">
+  <th:block
+    th:each="menuItem : ${items}"
+    th:with="menuHref=${menuItem.status.href},
+      menuTarget=${menuItem.spec.target?.value},
+      menuExternal=${!#strings.isEmpty(menuHref) and (#strings.startsWith(menuHref, 'http://') or #strings.startsWith(menuHref, 'https://') or menuTarget == '_blank')}"
+  >
+    <details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(menuItem.children)}">
+      <summary class="devcm-tree__item devcm-tree__item--folder">
+        <span class="devcm-tree__chev" aria-hidden="true"></span>
+        <i class="devcm-tree__icon i-pixelarticons-folder"></i>
+        <span th:text="${menuItem.status.displayName}">Folder</span>
+        <a
+          class="devcm-tree__open devcm-tree__open--external"
+          th:if="${menuExternal}"
+          th:href="${menuHref}"
+          th:target="${menuTarget}"
+          rel="noopener noreferrer"
+          th:title="#{devcm.action.open}"
+          th:aria-label="#{devcm.action.openPage}"
+        >
+          <i class="i-pixelarticons-external-link"></i>
+        </a>
+        <a
+          class="devcm-tree__open"
+          th:unless="${menuExternal}"
+          th:href="${menuHref}"
+          th:target="${menuTarget}"
+          th:title="#{devcm.action.open}"
+          th:aria-label="#{devcm.action.openPage}"
+        >
+          <i class="i-pixelarticons-open"></i>
+        </a>
+      </summary>
+      <div class="devcm-tree__nested">
+        <th:block th:replace="~{modules/menu-tree :: items(items=${menuItem.children})}" />
+      </div>
+    </details>
+
+    <a
+      class="devcm-tree__item devcm-tree__item--external"
+      th:if="${#lists.isEmpty(menuItem.children) and menuExternal}"
+      th:href="${menuHref}"
+      th:target="${menuTarget}"
+      rel="noopener noreferrer"
+    >
+      <span class="devcm-tree__chev" aria-hidden="true"></span>
+      <i class="devcm-tree__icon i-pixelarticons-external-link"></i>
+      <span th:text="${menuItem.status.displayName}">Page</span>
+    </a>
+
+    <a
+      class="devcm-tree__item"
+      th:if="${#lists.isEmpty(menuItem.children) and !menuExternal}"
+      th:href="${menuHref}"
+      th:target="${menuTarget}"
+    >
+      <span class="devcm-tree__chev" aria-hidden="true"></span>
+      <i class="devcm-tree__icon i-pixelarticons-file"></i>
+      <span th:text="${menuItem.status.displayName}">Page</span>
+    </a>
+  </th:block>
+</th:block>
diff --git a/templates/modules/post-card.html b/templates/modules/post-card.html
new file mode 100644
index 0000000..43f063c
--- /dev/null
+++ b/templates/modules/post-card.html
@@ -0,0 +1,33 @@
+<article
+  class="devcm-post-card"
+  th:fragment="post-card (post, featured)"
+  th:classappend="${featured} ? ' devcm-post-card--featured' : ''"
+>
+  <h2 class="devcm-post-card__title">
+    <a th:href="${post.status.permalink}" th:text="${post.spec.title}">Post Title</a>
+    <span class="devcm-badge" th:if="${featured}" th:text="#{devcm.post.featured}">FEATURED</span>
+  </h2>
+  <div class="devcm-post-card__meta">
+    <span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">2026-01-01</span>
+    <span
+      th:if="${post.contributors != null and !#lists.isEmpty(post.contributors)}"
+      th:with="contributor = ${post.contributors[0]}"
+      th:text="${contributor.displayName}"
+    >
+      Author
+    </span>
+    <a
+      class="devcm-post-card__tag"
+      th:each="tag : ${post.tags}"
+      th:href="${tag.status.permalink}"
+      th:title="${tag.spec.displayName}"
+      th:text="'#' + ${tag.spec.displayName}"
+    >
+      #tag
+    </a>
+  </div>
+  <p class="devcm-post-card__excerpt" th:text="${post.status.excerpt}">Post excerpt...</p>
+  <a class="devcm-read-more" th:href="${post.status.permalink}"
+    ><span th:text="#{devcm.post.readMore}">Read more</span> <span aria-hidden="true">→</span></a
+  >
+</article>
diff --git a/templates/modules/right-panel.html b/templates/modules/right-panel.html
new file mode 100644
index 0000000..ddb7a35
--- /dev/null
+++ b/templates/modules/right-panel.html
@@ -0,0 +1,150 @@
+<aside
+  class="devcm-rightbar"
+  th:fragment="right-panel (pageType)"
+  th:classappend="${pageType == 'page' or pageType == 'links' or pageType == 'moments'} ? ' devcm-rightbar--hidden' : ''"
+  th:aria-label="#{devcm.right.context}"
+>
+  <th:block th:if="${pageType == 'post'}">
+    <section class="devcm-widget" th:if="${post != null}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.articleInfo}">ARTICLE INFO</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-info-list">
+        <div class="devcm-info-list__row">
+          <span th:text="#{devcm.right.author}">Author</span>
+          <strong th:text="${post.owner.displayName}">Author</strong>
+        </div>
+        <div class="devcm-info-list__row">
+          <span th:text="#{devcm.right.publishedAt}">Published at</span>
+          <strong th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm')}">Date</strong>
+        </div>
+      </div>
+    </section>
+
+    <section class="devcm-widget" th:if="${post.categories != null and !#lists.isEmpty(post.categories)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-panel-list">
+        <a class="devcm-panel-link" th:each="category : ${post.categories}" th:href="${category.status.permalink}">
+          <strong th:text="${category.spec.displayName}">Category</strong>
+          <span>
+            <span th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}">0</span>
+            <span th:text="#{devcm.right.posts}">posts</span>
+          </span>
+        </a>
+      </div>
+    </section>
+
+    <section class="devcm-widget" th:if="${post.tags != null and !#lists.isEmpty(post.tags)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.tags}">TAGS</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-tag-cloud">
+        <a
+          class="devcm-tag"
+          th:each="tag : ${post.tags}"
+          th:href="${tag.status.permalink}"
+          th:text="'#' + ${tag.spec.displayName}"
+        >
+          #tag
+        </a>
+      </div>
+    </section>
+
+    <section class="devcm-widget" x-data="postToc" x-init="init()" x-show="items.length > 0">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.toc}">TABLE OF CONTENTS</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="post-toc">
+        <ul class="toc-tree">
+          <template x-for="(item, index) in items" :key="index">
+            <li
+              class="toc-item"
+              :class="{ 'toc-item--active': activeId === item.id }"
+              :style="`padding-left: ${getIndent(item.level)}`"
+              @click="scrollTo(item.id)"
+            >
+              <span class="toc-item__toggle toc-item__toggle--empty">▼</span>
+              <span class="toc-item__tag" x-text="item.tagName"></span>
+              <span class="toc-item__title" x-text="item.title"></span>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </section>
+
+    <th:block th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
+      <section class="devcm-widget" th:if="${postCursor.hasPrevious() or postCursor.hasNext()}">
+        <div class="devcm-widget__title">
+          <span th:text="#{devcm.right.nearbyPosts}">NEARBY POSTS</span>
+          <span aria-hidden="true">...</span>
+        </div>
+        <div class="devcm-panel-list">
+          <a
+            class="devcm-panel-link"
+            th:if="${postCursor.hasPrevious()}"
+            th:href="${postCursor.previous?.status?.permalink}"
+          >
+            <span th:text="#{devcm.right.previousPost}">Previous</span>
+            <strong th:text="${postCursor.previous?.spec?.title}">Previous</strong>
+          </a>
+          <a class="devcm-panel-link" th:if="${postCursor.hasNext()}" th:href="${postCursor.next?.status?.permalink}">
+            <span th:text="#{devcm.right.nextPost}">Next</span>
+            <strong th:text="${postCursor.next?.spec?.title}">Next</strong>
+          </a>
+        </div>
+      </section>
+    </th:block>
+  </th:block>
+
+  <th:block th:unless="${pageType == 'post'}">
+    <section class="devcm-widget" th:if="${posts != null and posts.items != null and !#lists.isEmpty(posts.items)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.latestPosts}">LATEST POSTS</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-panel-list">
+        <a class="devcm-panel-link" th:each="post : ${posts.items}" th:href="${post.status.permalink}">
+          <strong th:text="${post.spec.title}">Post title</strong>
+          <span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">2026-01-01</span>
+        </a>
+      </div>
+    </section>
+    <section class="devcm-widget" th:if="${categories != null and !#lists.isEmpty(categories)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-panel-list">
+        <a class="devcm-panel-link" th:each="category : ${categories}" th:href="${category.status.permalink}">
+          <strong th:text="${category.spec.displayName}">Category</strong>
+          <span
+            ><span th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}">0</span>
+            <span th:text="#{devcm.right.posts}">posts</span></span
+          >
+        </a>
+      </div>
+    </section>
+    <section class="devcm-widget" th:if="${tags != null and !#lists.isEmpty(tags)}">
+      <div class="devcm-widget__title">
+        <span th:text="#{devcm.right.tags}">TAGS</span>
+        <span aria-hidden="true">...</span>
+      </div>
+      <div class="devcm-tag-cloud">
+        <a
+          class="devcm-tag"
+          th:each="tag : ${tags}"
+          th:href="${tag.status.permalink}"
+          th:text="'#' + ${tag.spec.displayName}"
+        >
+          #tag
+        </a>
+      </div>
+    </section>
+  </th:block>
+</aside>
diff --git a/templates/modules/statusbar.html b/templates/modules/statusbar.html
new file mode 100644
index 0000000..933c311
--- /dev/null
+++ b/templates/modules/statusbar.html
@@ -0,0 +1,39 @@
+<footer class="devcm-statusbar" th:fragment="statusbar (pageType)">
+  <div class="devcm-statusbar__left">
+    <span th:text="${#strings.isEmpty(theme.config.basic.title) ? site.title : theme.config.basic.title}">DevCM</span>
+    <span th:text="${pageType}">home</span>
+  </div>
+  <div class="devcm-statusbar__center">
+    <span>© <span th:text="${#dates.year(#dates.createNow())}">2026</span></span>
+    <span th:text="#{devcm.status.poweredBy}">Powered by</span>
+    <a th:href="${theme.config.footer.footer_powered_link}" th:text="${theme.config.footer.footer_powered_text}"
+      >FillCode</a
+    >
+    <div class="devcm-statusbar__beian">
+      <span th:if="${not #strings.isEmpty(theme.config.footer.footer_icp_text)}">
+        <a
+          href="https://beian.miit.gov.cn/"
+          target="_blank"
+          th:href="${theme.config.footer.footer_icp_link}"
+          th:text="${theme.config.footer.footer_icp_text}"
+        ></a>
+      </span>
+      <span th:if="${not #strings.isEmpty(theme.config.footer.footer_gongan_text)}">
+        <img th:src="@{/assets/image/gongan.png}" alt="" />
+        <a
+          href="https://www.beian.gov.cn/"
+          target="_blank"
+          th:href="${theme.config.footer.footer_gongan_link}"
+          th:text="${theme.config.footer.footer_gongan_text}"
+        ></a>
+      </span>
+      <halo:footer />
+    </div>
+  </div>
+  <div class="devcm-statusbar__right">
+    <span th:text="${#locale.toLanguageTag()}">en-US</span>
+    <span>UTF-8</span>
+    <span>HTML</span>
+    <i class="devcm-statusbar__dot" aria-hidden="true"></i>
+  </div>
+</footer>
diff --git a/templates/moments.html b/templates/moments.html
index c70f695..1ae8a49 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -1,105 +1,104 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.moments.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.moments.title} - ${site.title}|, pageType = 'moments', terminalUserName = ${moments != null and moments.items != null and !#lists.isEmpty(moments.items) and moments.items[0].owner != null and !#strings.isEmpty(moments.items[0].owner.name) ? moments.items[0].owner.name : 'admin'}, content = ~{::content})}"
 >
   <th:block th:fragment="content">
     <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
     <script src="https://gcore.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
-    <div class="content">
-      <div class="moments" x-data="upvote('moment','moment.halo.run','moments')">
-        <div
-          class="moment on-list post"
-          th:each="moment,iterStat : ${moments.items}"
-          th:with="content=${moment.spec.content}"
-          th:attr="x-data=|{name:'${moment.metadata.name}',showComment:false}|"
-        >
-          <div class="post-meta">
-            <span class="post-date" th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">
-              Moment CreateTime
-            </span>
-            <span class="post-separator">
-              <span></span>
-              <span></span>
-              <span></span>
-              <span></span>
-            </span>
-            <span class="post-author" th:with="owner = ${moment.owner}" th:text="${owner.displayName}">
-              Author
-            </span>
-          </div>
-          <div class="post-content" th:utext="${content.html}">Moment Content...</div>
-          <th:block th:with="medium=${moment.spec.content.medium}">
-            <div
-              th:unless="${#lists.isEmpty(moments)}"
-              class="moment-media mt-4 grid w-4/5 gap-2 sm:w-4/5"
-              th:classappend="${(#lists.size(medium) > 4 ? 'grid-cols-3' : '') + (#lists.size(medium) == 1 ? 'grid-cols-1' :'') + ((#lists.size(medium) > 1 && #lists.size(medium) < 5) ? 'grid-cols-2' :'')}"
-            >
-              <div class="" th:each="media : ${medium}">
-                <a th:class="|glightbox|" th:data-gallery="|gallery${iterStat.count}|" th:href="${media.url}">
-                  <img
-                    th:if="${#strings.equals(media.type,'PHOTO')}"
-                    class="transform-gpu rounded-lg object-cover"
-                    th:src="${media.url}"
-                  />
-                </a>
-                <div th:if="${#strings.equals(media.type,'VIDEO')}" class="w-full">
-                  <video controls th:src="${media.url}" class="rounded-lg object-cover"></video>
+
+    <section class="devcm-editor-window">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tab devcm-editor-tab--active">
+          <span>moments.md</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/"
+            th:aria-label="#{devcm.action.closeMomentsTab}"
+            th:title="#{devcm.action.closeMomentsTab}"
+            >×</a
+          >
+        </div>
+      </div>
+      <div class="devcm-editor-body">
+        <div class="devcm-moments" x-data="upvote('moment','moment.halo.run','moments')">
+          <article
+            class="devcm-post-card devcm-moment-card"
+            th:each="moment,iterStat : ${moments.items}"
+            th:with="content=${moment.spec.content}"
+            th:attr="x-data=|{name:'${moment.metadata.name}',showComment:false}|"
+          >
+            <div class="devcm-post-card__meta">
+              <span th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">Moment CreateTime</span>
+              <span th:with="owner = ${moment.owner}" th:text="${owner.displayName}">Author</span>
+            </div>
+            <div class="devcm-post-card__excerpt" th:utext="${content.html}">Moment Content...</div>
+
+            <th:block th:with="medium=${moment.spec.content.medium}">
+              <div
+                th:unless="${#lists.isEmpty(medium)}"
+                class="devcm-moment-media"
+                th:classappend="${(#lists.size(medium) > 4 ? ' devcm-moment-media--three' : '') + (#lists.size(medium) == 1 ? ' devcm-moment-media--one' :'') + ((#lists.size(medium) > 1 && #lists.size(medium) < 5) ? ' devcm-moment-media--two' :'')}"
+              >
+                <div th:each="media : ${medium}">
+                  <a th:class="|glightbox|" th:data-gallery="|gallery${iterStat.count}|" th:href="${media.url}">
+                    <img
+                      th:if="${#strings.equals(media.type,'PHOTO')}"
+                      th:src="${media.url}"
+                      th:alt="${moment.owner.displayName}"
+                    />
+                  </a>
+                  <video th:if="${#strings.equals(media.type,'VIDEO')}" controls th:src="${media.url}"></video>
                 </div>
               </div>
-            </div>
-          </th:block>
-          <div class="mt-3 flex items-center gap-4">
-            <div
-              class="journal-likes inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-red-700"
-              :class="{'text-red-700': getIsUpvoted(name)}"
-              @click="handleUpvote(name)"
-            >
-              <i class="!h-4 !w-4 i-pixelarticons-heart"></i>
-              <span
-                class="ml-1"
-                th:attr="data-upvote-moment-name=${moment.metadata.name}"
-                th:text="${moment.stats.upvote}"
-              >
-              </span>
-            </div>
-            <div
-              class="inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-black dark:hover:text-white"
-              :class="{'!text-black':showComment && storedTheme == 'light','!text-white':showComment && storedTheme == 'dark' }"
-              @click="showComment = !showComment"
-            >
-              <i class="!h-4 !w-4 i-pixelarticons-comment"></i>
-              <span class="ml-1" th:text="${moment.stats.approvedComment}"> </span>
-            </div>
-          </div>
+            </th:block>
 
-          <div class="mt-2" x-show="showComment">
-            <halo:comment
-              group="moment.halo.run"
-              kind="Moment"
-              th:attr="name=${moment.metadata.name}"
-              colorScheme="storedTheme"
-            />
-          </div>
+            <div class="devcm-moment-actions">
+              <button
+                type="button"
+                class="devcm-action-link"
+                :class="{ 'devcm-action-link--active': getIsUpvoted(name) }"
+                @click="handleUpvote(name)"
+              >
+                <i class="i-pixelarticons-heart"></i>
+                <span th:attr="data-upvote-moment-name=${moment.metadata.name}" th:text="${moment.stats.upvote}"
+                  >0</span
+                >
+              </button>
+              <button type="button" class="devcm-action-link" @click="showComment = !showComment">
+                <i class="i-pixelarticons-comment"></i>
+                <span th:text="${moment.stats.approvedComment}">0</span>
+              </button>
+            </div>
+
+            <div class="devcm-moment-comments" x-data="themeComment()" x-init="init()" x-show="showComment">
+              <halo:comment
+                group="moment.halo.run"
+                kind="Moment"
+                th:attr="name=${moment.metadata.name}"
+                colorScheme="localStorage.getItem('theme-mode')"
+              />
+            </div>
+          </article>
         </div>
       </div>
-      <div class="pagination" th:if="${moments.hasPrevious()} or ${moments.hasNext()}">
-        <div class="pagination__buttons">
-          <span class="button previous" th:if="${moments.hasPrevious()}">
-            <a th:href="@{${moments.prevUrl}}">
-              <div class="button__icon i-pixelarticons-chevron-left !h-6 !w-6"></div>
-              <span class="button__text">上一页</span>
-            </a>
-          </span>
-          <span class="button next" th:if="${moments.hasNext()}">
-            <a th:href="@{${moments.nextUrl}}" class="items-center">
-              <span class="button__text">下一页</span>
-              <div class="button__icon i-pixelarticons-chevron-right !h-6 !w-6"></div>
-            </a>
-          </span>
-        </div>
+    </section>
+
+    <div class="pagination" th:if="${moments.hasPrevious()} or ${moments.hasNext()}">
+      <div class="pagination__buttons">
+        <span class="button previous" th:if="${moments.hasPrevious()}">
+          <a th:href="@{${moments.prevUrl}}">
+            <span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
+          </a>
+        </span>
+        <span class="button next" th:if="${moments.hasNext()}">
+          <a th:href="@{${moments.nextUrl}}">
+            <span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
+          </a>
+        </span>
       </div>
     </div>
+
     <script type="text/javascript">
       const lightbox = GLightbox({
         loop: false,
diff --git a/templates/page.html b/templates/page.html
index 5d320e5..7ef5650 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,35 +1,48 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |${singlePage.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |${singlePage.spec.title} - ${site.title}|, pageType = 'page', terminalUserName = ${singlePage != null and singlePage.owner != null and !#strings.isEmpty(singlePage.owner.name) ? singlePage.owner.name : 'admin'}, content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <div class="post">
-      <h1 class="post-title" th:text="${singlePage.spec.title}">Post Title</h1>
-      <div class="post-meta">
-        <span class="post-date" th:text="${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}">
-          publishTime
-        </span>
-        <span class="post-separator">
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-        </span>
-        <span class="post-author" th:text="${singlePage.owner.displayName}">Author</span>
+    <article class="devcm-editor-window devcm-article">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tab devcm-editor-tab--active">
+          <span th:text="${singlePage.spec.title} + '.md'">page.md</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/"
+            th:aria-label="#{devcm.action.closePageTab}"
+            th:title="#{devcm.action.closePageTab}"
+            >×</a
+          >
+        </div>
       </div>
-      <div class="post-content">
-        <div th:utext="${singlePage.content.content}">Post Content</div>
+      <div class="devcm-editor-body devcm-article-content">
+        <h1 class="devcm-article-title" th:text="${singlePage.spec.title}">Page Title</h1>
+        <div class="devcm-article-meta">
+          <span th:text="${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}">publishTime</span>
+          <span th:text="${singlePage.owner.displayName}">Author</span>
+        </div>
+        <div th:utext="${singlePage.content.content}">Page Content</div>
       </div>
-    </div>
-    <div th:if="${haloCommentEnabled}">
-      <h2>评论</h2>
-      <halo:comment
-        group="content.halo.run"
-        kind="SinglePage"
-        th:attr="name=${singlePage.metadata.name}"
-        colorScheme="localStorage.getItem('theme')"
-      />
-    </div>    
+    </article>
+
+    <section class="comment-wrap devcm-comments" x-data="themeComment()" x-init="init()" th:if="${haloCommentEnabled}">
+      <div class="devcm-comment-titlebar">
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <strong th:text="#{devcm.comments.file}">comments.log</strong>
+      </div>
+      <div class="devcm-comment-body">
+        <h2 th:text="#{devcm.comments.title}">## Comments</h2>
+        <halo:comment
+          group="content.halo.run"
+          kind="SinglePage"
+          th:attr="name=${singlePage.metadata.name}"
+          colorScheme="localStorage.getItem('theme')"
+        />
+      </div>
+    </section>
   </th:block>
 </html>
diff --git a/templates/post.html b/templates/post.html
index e849e69..39e2b44 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -1,86 +1,77 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, pageType = 'post', terminalUserName = ${post != null and post.owner != null and !#strings.isEmpty(post.owner.name) ? post.owner.name : 'admin'}, content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <!-- 目录组件 -->
-    <div class="post-toc-sticky">
-      <div class="post-toc" x-data="postToc" x-init="init()">
-        <div class="toc-header">
-          <span class="toc-header__icon">&lt;&gt;</span>
-          <span class="toc-header__title">Outline</span>
+    <article class="devcm-editor-window devcm-article" x-data="postLineNum" x-init="init()">
+      <div class="devcm-editor-tabs">
+        <div
+          class="devcm-editor-tab devcm-editor-tab--active"
+          th:with="postTabName=${!#strings.isEmpty(post.spec.slug) ? post.spec.slug : post.metadata.name}"
+        >
+          <span th:text="${postTabName}">post</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/archives"
+            th:aria-label="#{devcm.action.closePostTab}"
+            th:title="#{devcm.action.closePostTab}"
+            >×</a
+          >
         </div>
-        <ul class="toc-tree">
-          <template x-for="(item, index) in items" :key="index">
-            <li class="toc-item"
-                :class="{'toc-item--active': activeId === item.id}"
-                :style="`padding-left: ${getIndent(item.level)}`"
-                @click="scrollTo(item.id)">
-              <span class="toc-item__toggle toc-item__toggle--empty">▼</span>
-              <span class="toc-item__icon">&lt;&gt;</span>
-              <span class="toc-item__tag" x-text="item.tagName"></span>
-              <span class="toc-item__title" x-text="item.title"></span>
-            </li>
-          </template>
-        </ul>
       </div>
-    </div>
-    <div class="post" x-data="postLineNum" x-init="init()">
-      <h1 class="post-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
-      <div class="post-meta">
-        <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
-        <span class="post-separator">
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-        </span>
-        <span class="post-author" th:text="${post.owner.displayName}">Author</span>
-        <span class="post-tags-inline" th:each="tag : ${post.tags}">
-          <a th:href="${tag.status.permalink}"
-             th:title="${tag.spec.displayName}"
-             th:text="'#'+${tag.spec.displayName}"
-             class="post-tag"
-          >#Tag
-          </a>
-        </span>
-      </div>
-      <div class="post-body">
-        <!-- 行数组件 -->
+
+      <div class="post-body devcm-article-body">
         <div class="post-line-gutter"></div>
-        <div class="post-content">
-          <div th:utext="${post.content.content}">Post Content</div>
+        <div class="post-content devcm-article-content">
+          <div>
+            <h1 class="devcm-article-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
+            <div class="devcm-article-meta">
+              <span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">publishTime</span>
+              <span th:text="${post.owner.displayName}">Author</span>
+              <a
+                th:each="tag : ${post.tags}"
+                th:href="${tag.status.permalink}"
+                th:title="${tag.spec.displayName}"
+                th:text="'#' + ${tag.spec.displayName}"
+              >
+                #Tag
+              </a>
+            </div>
+            <div th:utext="${post.content.content}">Post Content</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="comment-wrap" th:if="${haloCommentEnabled}">
-      <h2>评论</h2>
-      <halo:comment
-        group="content.halo.run"
-        kind="Post"
-        th:attr="name=${post.metadata.name}"
-      />
-    </div>
-    <div class="pagination">
-      <div class="pagination__title">
-        <span class="pagination__title-h">其他文章</span>
-        <hr />
+    </article>
+
+    <section class="comment-wrap devcm-comments" x-data="themeComment()" x-init="init()" th:if="${haloCommentEnabled}">
+      <div class="devcm-comment-titlebar">
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <span class="devcm-window-dot"></span>
+        <strong th:text="#{devcm.comments.file}">comments.log</strong>
       </div>
-      <div class="pagination__buttons" th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
+      <div class="devcm-comment-body">
+        <h2 th:text="#{devcm.comments.title}">## Comments</h2>
+        <halo:comment group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}" />
+      </div>
+    </section>
+
+    <nav class="pagination devcm-prev-next" th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
+      <div class="pagination__buttons">
         <span th:if="${postCursor.hasPrevious()}" class="button previous">
           <a th:href="${postCursor.previous?.status?.permalink}">
             <span class="button__icon"><&nbsp;</span>
-            <span class="button__text" th:text="${postCursor.previous?.spec?.title}">prevPost</span>
+            <span class="button__text" th:text="${postCursor.previous?.spec?.title}">Previous</span>
           </a>
         </span>
         <span th:if="${postCursor.hasNext()}" class="button next">
           <a th:href="${postCursor.next?.status?.permalink}">
-            <span class="button__text" th:text="${postCursor.next?.spec?.title}">nextPost</span>
+            <span class="button__text" th:text="${postCursor.next?.spec?.title}">Next</span>
             <span class="button__icon">&nbsp;></span>
           </a>
         </span>
       </div>
-    </div>
+    </nav>
   </th:block>
 </html>
diff --git a/templates/tag.html b/templates/tag.html
index 08da920..713c73e 100644
--- a/templates/tag.html
+++ b/templates/tag.html
@@ -1,70 +1,53 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.tag.title(${tag.spec.displayName})} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.tag.title(${tag.spec.displayName})} - ${site.title}|, pageType = 'tag', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <div class="content">
-      <div class="post">
-        <h1
-          class="post-title"
-          th:text="'标签：'+${tag.spec.displayName}+' ('+${tag.status.visiblePostCount?:0}+' 篇文章)'"
-        >
-          标签：标签名 (n 篇文章)
-        </h1>
-
-        <a href="/tags"> 所有标签 </a>
-
-        <ul>
-          <li class="post-list" th:each="post : ${posts.items}">
-            <a th:href="${post.status.permalink}">
-              <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
-                >发布时间</span
-              >
-              <span class="post-separator">
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-              </span>
-              <span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
-              <span class="post-tags-inline">
-                <span class="post-separator">
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                </span>
-                <span th:each="tag : ${post.tags}">
-                  <a
-                  th:href="@{${post.status.permalink}}"
-                  th:title="${tag.spec.displayName}"
-                  th:text="'#'+${tag.spec.displayName}"
-                  class="post-tag"
-                  >#Tag
-                </a>
-                </span>
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
-        <div class="pagination__buttons">
-          <span class="button previous" th:if="${posts.hasPrevious()}">
-            <a th:href="@{${posts.prevUrl}}">
-              <span class="button__icon"><</span>
-              <span class="button__text">上一页</span>
-            </a>
-          </span>
-          <span class="button next" th:if="${posts.hasNext()}">
-            <a th:href="@{${posts.nextUrl}}">
-              <span class="button__text">下一页</span>
-              <span class="button__icon">></span>
-            </a>
-          </span>
+    <section class="devcm-editor-window">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tab devcm-editor-tab--active">
+          <span th:text="'#' + ${tag.spec.displayName} + '.md'">tag.md</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/tags"
+            th:aria-label="#{devcm.action.closeTagTab}"
+            th:title="#{devcm.action.closeTagTab}"
+            >×</a
+          >
         </div>
       </div>
+      <div class="devcm-editor-body">
+        <h1 class="devcm-page-title">
+          <span th:text="#{devcm.taxonomy.tagTitle(${tag.spec.displayName})}">Tag</span>
+          <small
+            th:text="#{devcm.taxonomy.postCount(${tag.status.visiblePostCount != null ? tag.status.visiblePostCount : 0})}"
+            >(0 posts)</small
+          >
+        </h1>
+        <div class="devcm-post-stack">
+          <th:block th:each="post,iterStat : ${posts.items}">
+            <th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
+          </th:block>
+        </div>
+      </div>
+    </section>
+
+    <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
+      <div class="pagination__buttons">
+        <span class="button previous" th:if="${posts.hasPrevious()}">
+          <a th:href="@{${posts.prevUrl}}">
+            <span class="button__icon"><</span>
+            <span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
+          </a>
+        </span>
+        <span class="button next" th:if="${posts.hasNext()}">
+          <a th:href="@{${posts.nextUrl}}">
+            <span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
+            <span class="button__icon">></span>
+          </a>
+        </span>
+      </div>
     </div>
   </th:block>
 </html>
diff --git a/templates/tags.html b/templates/tags.html
index 0ee8ba1..ba9b91b 100644
--- a/templates/tags.html
+++ b/templates/tags.html
@@ -1,23 +1,35 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="~{modules/layout :: html(title = |#{page.tags.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
+  th:replace="~{modules/layout :: html(title = |#{page.tags.title} - ${site.title}|, pageType = 'tags', terminalUserName = 'admin', content = ~{::content})}"
 >
   <th:block th:fragment="content">
-    <div class="content">
-      <div class="post">
-        <h1 class="post-title">所有标签</h1>
-        <ul>
-          <li th:each="tag: ${tags}" class="tag-list">
-            <a
-              th:href="${tag.status.permalink}"
-              th:text="${tag.spec.displayName}+' ('+${tag.status.visiblePostCount?:0}+' 篇文章)'"
-            >
-              标签名 (n 篇文章)
-            </a>
-          </li>
-        </ul>
+    <section class="devcm-editor-window">
+      <div class="devcm-editor-tabs">
+        <div class="devcm-editor-tab devcm-editor-tab--active">
+          <span>tags.md</span>
+          <a
+            class="devcm-editor-tab__close"
+            href="/"
+            th:aria-label="#{devcm.action.closeTagsTab}"
+            th:title="#{devcm.action.closeTagsTab}"
+            >×</a
+          >
+        </div>
       </div>
-    </div>
+      <div class="devcm-editor-body">
+        <h1 class="devcm-page-title" th:text="#{devcm.tags.title}">All tags</h1>
+        <div class="devcm-tag-cloud devcm-tag-cloud--page">
+          <a
+            class="devcm-tag"
+            th:each="tag : ${tags}"
+            th:href="${tag.status.permalink}"
+            th:text="'#' + ${tag.spec.displayName} + ' (' + ${tag.status.visiblePostCount != null ? tag.status.visiblePostCount : 0} + ')'"
+          >
+            #tag
+          </a>
+        </div>
+      </div>
+    </section>
   </th:block>
 </html>
diff --git a/theme.yaml b/theme.yaml
index b0f0304..a0bf814 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -13,5 +13,5 @@ spec:
   repo: https://git.dev.cm/theme-terminal
   settingName: "theme-terminal-setting"
   configMapName: "theme-terminal-configMap"
-  version: 1.2.7
+  version: 2.0.3
   require: ">=2.22.0"