diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 23bdbbe8..aec6a6ca 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -10,11 +10,7 @@
 	</div>
 </article>
 
-<!--
-{{ $s := path.Dir (.Permalink | relURL) }}
-{{ $o := index (split $s "/") 1 }}
-<div class="pager"><a href="{{ printf "/%s" $o }}">{{ $o }}</a></div>
--->
+{{ partial "comment.html" . }}
 
 </div>
 {{ partial "footer.html" . }}
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
new file mode 100644
index 00000000..5fd26afb
--- /dev/null
+++ b/layouts/partials/comment.html
@@ -0,0 +1,6 @@
+<link href="https://syui.ai/js/comment/app.js" rel="preload" as="script">
+<link href="https://syui.ai/js/comment/chunk-vendors.js" rel="preload" as="script">
+<div id="comment"></div>
+<script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+<script src="https://syui.ai/js/comment/chunk-vendors.js"></script>
+<script src="https://syui.ai/js/comment/app.js"></script>
diff --git a/static/css/blog.css b/static/css/blog.css
index 68bcf0b3..6c578033 100644
--- a/static/css/blog.css
+++ b/static/css/blog.css
@@ -7,3 +7,5 @@
 		padding: 0;
 	}
 }
+
+
diff --git a/static/css/style.css b/static/css/style.css
index 122b66d2..acae7bec 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -41,8 +41,8 @@ p {
 	word-break: break-all;
 }
 article {
-    padding: 40px;
-    background: #fff;
+	padding: 40px;
+	background: #fff;
 }
 
 footer#footer {
@@ -60,14 +60,17 @@ footer#footer a {
 	color: #fff700;
 }
 
-.containerx p img {
-	padding:20px 0;
-	width:300px;
+.content p img {
 	text-align: center;
-	margin: auto;
+	margin: 0 auto;
+	width: 400px;
 	display: block;
 }
 
+article p img {
+	width: 100%;
+}
+
 .highlight {
 	color: #f1f1f1e3;
 }
@@ -1163,7 +1166,92 @@ blockquote {
 }
 
 a.menu-link-left-black:hover {
-    color: #b6b000;
+	color: #b6b000;
+}
+
+span.comment-time {
+	float: right;
+	padding: 0 5px 0 5px;
+	color: #999;
+}
+
+span.comment-time a {
+	color: #999;
+}
+
+span.comment-time a:hover {
+	color: rgb(16, 131, 254);
+}
+
+span.comment-handle {
+	padding: 0 5px 0 5px;
+	position: absolute;
+}
+
+span.comment-handle a {
+	color: #313131;
+}
+
+img.comment {
+	width:60px;
+}
+
+p.comment-body {
+	border-bottom: solid 1px #eee;
+	padding: 20px;
+}
+
+span.comment-text {
+	padding:10px;
+}
+
+button.comment_open {
+	padding:20px 40px 20px 40px;
+	background-color: rgba(184,207,224,.24);
+	border: none;
+	margin:0;
+}
+button.comment_open:hover {
+	color: rgb(16, 131, 254);
+}
+
+.comment_open {
+	text-align: center;
+	width: 100%;
+}
+
+.comment_open p a {
+	color: rgb(16, 131, 254);
+}
+
+.bsky_comment {
+	background-color: #fff;
+	margin: 0px auto;
+	border: solid 1px #eee;
+}
+
+.bsky_comment_embed {
+	background-color: #fff;
+	width: 600px;
+	margin: 0px auto;
+}
+
+.comment {
+	background-color: #fff;
+}
+
+.loading {
+	background:#f1f1f1;
+	padding:25px;
+}
+.loading_none {
+	background:#f1f1f1;
+	padding:50px;
+}
+
+.bluesky-embed {
+	text-align: center;
+	margin: 0 auto;
 }
 
 @media screen and (max-width:1000px) { 
@@ -1189,4 +1277,7 @@ a.menu-link-left-black:hover {
 	article {
 		padding: 15px;
 	}
+	.content p img {
+		width:100%;
+	}
 }
diff --git a/static/icon/null.jpg b/static/icon/null.jpg
new file mode 100644
index 00000000..016bb40f
Binary files /dev/null and b/static/icon/null.jpg differ