diff --git a/demo/source/_posts/code_snippet.md b/demo/source/_posts/code_snippet.md
index ffd30b8d..cdedf57e 100644
--- a/demo/source/_posts/code_snippet.md
+++ b/demo/source/_posts/code_snippet.md
@@ -1,6 +1,8 @@
 ---
 title: Code Snippet
 date: 2023-01-05 15:08:29
+tags: [code]
+categories: 测试分类四
 ---
 
 {% include_code lang:yaml config.yml %}
diff --git a/demo/source/_posts/hello-world.md b/demo/source/_posts/hello-world.md
index bcfa6fd4..915dc832 100644
--- a/demo/source/_posts/hello-world.md
+++ b/demo/source/_posts/hello-world.md
@@ -3,6 +3,8 @@ title: Hello Theme Async
 date: 2022-09-21 15:08:29
 cover: [https://hexo-theme-async.imalun.com/imgs/demo2.png]
 sticky: 1
+categories: 测试分类三
+tags: [hexo-theme-async]
 ---
 ![1663833969157.png](https://hexo-theme-async.imalun.com/imgs/demo2.png)_示例图_
 
diff --git a/demo/source/_posts/katex.md b/demo/source/_posts/katex.md
index a996fe87..f62354b7 100644
--- a/demo/source/_posts/katex.md
+++ b/demo/source/_posts/katex.md
@@ -3,6 +3,8 @@ title: KaTeX
 date: 2022-09-22 15:45:29
 katex: true
 toc: false
+categories: 测试分类二
+tags: [KaTeX]
 ---
 ## KaTeX
 
diff --git a/demo/source/_posts/markdown.md b/demo/source/_posts/markdown.md
index 1e27fe03..e887ef21 100644
--- a/demo/source/_posts/markdown.md
+++ b/demo/source/_posts/markdown.md
@@ -3,6 +3,7 @@ title: Markdown
 date: 2022-09-21 15:25:29
 categories: 测试分类
 katex: true
+tags: [Markdown]
 ---
 
 主题 Hexo-theme-async 文章页面适配预览。
diff --git a/demo/source/_posts/tag_plugins.md b/demo/source/_posts/tag_plugins.md
index 71403d1e..37684a96 100644
--- a/demo/source/_posts/tag_plugins.md
+++ b/demo/source/_posts/tag_plugins.md
@@ -2,6 +2,7 @@
 title: Tag Plugins
 date: 2022-12-30 15:08:29
 categories: Plugins
+tags: [plugins]
 ---
 主题内置的一些标签插件说明和示例。
 
diff --git a/demo/source/tags/index.md b/demo/source/tags/index.md
new file mode 100644
index 00000000..9f11fdb9
--- /dev/null
+++ b/demo/source/tags/index.md
@@ -0,0 +1,5 @@
+---
+title: 标签
+date: 2019-11-16 10:46:27
+layout: tag
+---
diff --git a/packages/hexo-theme-async/layout/_partial/page/archive.ejs b/packages/hexo-theme-async/layout/_partial/page/archive.ejs
index cf7b9c3b..059b117c 100644
--- a/packages/hexo-theme-async/layout/_partial/page/archive.ejs
+++ b/packages/hexo-theme-async/layout/_partial/page/archive.ejs
@@ -5,18 +5,18 @@
                 <% if(is_archive()){%>
                     <%- list_archives({
                         type: "yearly",
-                        ulclass: "row trm",
-                        liclass: "col-lg-4 trm"
+                        ulclass: "trm-tag",
+                        liclass: "trm-tag"
                     }) %>
                 <% } else if (is_category()){ %>
                     <%- list_categories({
-                        ulclass: "row trm",
-                        liclass: "col-lg-4 trm"
+                        ulclass: "trm-tag",
+                        liclass: "trm-tag"
                     }) %>
                 <% } else if (is_tag()) { %>
                     <%- list_tags({ class: {
-                        ul: "row trm-tag-list trm-list",
-                        li:"col-lg-4 trm-list-item"
+                        ul: "trm-tag-list",
+                        li:"trm-tag-list-item"
                     } }) %>
                 <% } %>
             </div>
diff --git a/packages/hexo-theme-async/layout/_partial/page/category.ejs b/packages/hexo-theme-async/layout/_partial/page/category.ejs
index 8300f378..60c4c709 100644
--- a/packages/hexo-theme-async/layout/_partial/page/category.ejs
+++ b/packages/hexo-theme-async/layout/_partial/page/category.ejs
@@ -2,7 +2,7 @@
     <div class="col-lg-12">
         <div class="trm-card">
             <div style="padding: 0 20px;">
-                <%- list_categories({ ulclass: "row trm" , liclass: "col-lg-4 trm" }) %>
+                <%- list_categories({ ulclass: "trm-tag" , liclass: "trm-tag" }) %>
             </div>
         </div>
     </div>
diff --git a/packages/hexo-theme-async/layout/_partial/page/tag.ejs b/packages/hexo-theme-async/layout/_partial/page/tag.ejs
index 80276688..7955ad83 100644
--- a/packages/hexo-theme-async/layout/_partial/page/tag.ejs
+++ b/packages/hexo-theme-async/layout/_partial/page/tag.ejs
@@ -3,7 +3,7 @@
         <div class="trm-card">
             <div style="padding: 0 20px;">
                 <!-- <%- tagcloud(site.tags,{ min_font:20,max_font:36 }) %> -->
-                <%- list_tags({ class: { ul: "row trm-tag-list trm-list" , li:"col-lg-4 trm-list-item" } }) %>
+                <%- list_tags({ class: { ul: "trm-tag-list" , li:"trm-tag-list-item" } }) %>
             </div>
         </div>
     </div>
diff --git a/packages/hexo-theme-async/scripts/helper/list_archives.js b/packages/hexo-theme-async/scripts/helper/list_archives.js
index 149e8093..b378059d 100644
--- a/packages/hexo-theme-async/scripts/helper/list_archives.js
+++ b/packages/hexo-theme-async/scripts/helper/list_archives.js
@@ -65,12 +65,12 @@ function listArchivesHelper(options = {}) {
 	};
 
 	if (style === 'list') {
-		result += `<ul class="${ulClassName}-list" style="margin-bottom: 0px;">`;
+		result += `<ul class="${ulClassName}-list">`;
 
 		for (let i = 0, len = data.length; i < len; i++) {
 			const item = data[i];
 
-			result += `<li class="${liClassName}-list-item" style="margin: 6px 0;">`;
+			result += `<li class="${liClassName}-list-item">`;
 
 			result += `<a class="${className}-list-link" href="${link(item)}">`;
 			result += transform ? transform(item.name) : item.name;
@@ -90,11 +90,11 @@ function listArchivesHelper(options = {}) {
 
 			if (i) result += separator;
 
-			result += `<a class="${className}-link" href="${link(item)}">`;
+			result += `<a class="${className}-tag-link" href="${link(item)}">`;
 			result += transform ? transform(item.name) : item.name;
 
 			if (showCount) {
-				result += `<span class="${className}-count">（${item.count}）</span>`;
+				result += `<span class="${className}-tag-count">（${item.count}）</span>`;
 			}
 
 			result += '</a>';
diff --git a/packages/hexo-theme-async/scripts/helper/list_categories.js b/packages/hexo-theme-async/scripts/helper/list_categories.js
index 573c5561..996b10f8 100644
--- a/packages/hexo-theme-async/scripts/helper/list_categories.js
+++ b/packages/hexo-theme-async/scripts/helper/list_categories.js
@@ -62,7 +62,7 @@ function listCategoriesHelper(categories, options) {
 
 			const additionalClassName = child && childrenIndicator ? ` ${childrenIndicator}` : '';
 
-			result += `<li class="${liClassName}-list-item ${additionalClassName}" style="margin: 6px 0;">`;
+			result += `<li class="${liClassName}-list-item ${additionalClassName}">`;
 
 			result += `<a class="${className}-list-link${isCurrent ? ' current' : ''}" href="${url_for.call(this, cat.path)}${suffix}">`;
 			result += transform ? transform(cat.name) : cat.name;
diff --git a/packages/hexo-theme-async/source/css/_components/list.less b/packages/hexo-theme-async/source/css/_components/list.less
index 495079b8..2a36b590 100644
--- a/packages/hexo-theme-async/source/css/_components/list.less
+++ b/packages/hexo-theme-async/source/css/_components/list.less
@@ -27,16 +27,47 @@
 }
 
 .trm-tag-list {
-	li {
-		white-space: nowrap;
-		margin: 6px 0 !important;
+	list-style: none;
+	display: flex;
+	padding: 0;
+	margin: 0;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 0.6em;
+
+	.trm-tag-list-item {
+		border: 1px solid var(--tab-border-color);
+		padding: 0.4em 0.8em;
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
 
-		.tag-list-count::before {
-			content: "（";
+		.transition-mixin();
+
+		&::before {
+			content: "#";
+			margin-right: 0.2em;
+			font-size: 1.2em;
+			font-weight: 600;
 		}
 
-		.tag-list-count::after {
-			content: "）";
+		&:hover {
+			background-color: var(--primary);
+			color: #fcfcfe;
+			transform: scale(1.1);
 		}
 	}
+	// li {
+	// 	white-space: nowrap;
+	// 	margin: 6px 0 !important;
+
+	// 	.tag-list-count::before {
+	// 		content: "（";
+	// 	}
+
+	// 	.tag-list-count::after {
+	// 		content: "）";
+	// 	}
+	// }
 }