diff --git a/src/components/note/Note.astro b/src/components/note/Note.astro
index 6e1c64b..5e57a1c 100644
--- a/src/components/note/Note.astro
+++ b/src/components/note/Note.astro
@@ -3,7 +3,7 @@ import { type CollectionEntry, render } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import type { HTMLTag, Polymorphic } from "astro/types";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
-import { Icon } from "astro-icon/components";
+import ArticleContainer from "../ArticleContainer.astro";
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	note: CollectionEntry<"note">;
 	isPreview?: boolean | undefined;
@@ -33,12 +33,10 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 }
 ---
 
-<article
-	class:list={[
-		isPreview &&
-			"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]",
-	]}
-	data-pagefind-body={isPreview ? false : true}
+<ArticleContainer
+	className={isPreview &&
+		"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"}
+	dataPagefindBody={isPreview ? false : true}
 >
 	<Tag class="title" class:list={{ "text-base": isPreview }}>
 		{
@@ -65,109 +63,12 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 			)
 		}
 	</div>
-	<div class="prose prose-sm prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0">
-		<Content />
-		<div id="myModal" class="modal">
-			<span class="close">
-				<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:close" />
-			</span>
-			<img class="modal-content" id="img01" />
-			<div id="caption"></div>
+	<div class="group w-full overflow-auto">
+		<div
+			class="prose prose-sm prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-th:before:content-none max-w-[100%]"
+		>
+			<Content />
 		</div>
 	</div>
 	{!isPreview && <GiscusComment client:load />}
-</article>
-<style>
-	.modal {
-		display: none;
-		position: fixed;
-		z-index: 100;
-		margin: auto;
-		padding: 50px;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		overflow: auto;
-		background-color: rgba(0, 0, 0, 0.9);
-		align-items: center;
-		justify-content: center;
-	}
-
-	.modal-content {
-		margin: auto;
-		display: block;
-		width: 80%;
-	}
-
-	.close {
-		position: fixed;
-		top: 15px;
-		right: 35px;
-		color: #f1f1f1;
-		font-size: 40px;
-		font-weight: bold;
-		transition: 0.3s;
-	}
-
-	.close:hover,
-	.close:focus {
-		color: #bbb;
-		text-decoration: none;
-		cursor: pointer;
-	}
-
-	/* 修改图片相关样式 */
-	:global(article img) {
-		opacity: 0;
-		position: relative;
-		background-color: #f0f0f0;
-		transition: all 0.5s ease-in-out;
-	}
-
-	:global(article img.loading) {
-		opacity: 1;
-		filter: blur(10px);
-	}
-
-	:global(article img.loaded) {
-		opacity: 1;
-		filter: blur(0);
-	}
-</style>
-
-<script>
-	const modal = document.getElementById("myModal");
-	const modalImg = document.getElementById("img01") as HTMLImageElement;
-	const imgs = document.querySelectorAll("article img") as NodeListOf<HTMLImageElement>;
-
-	imgs.forEach(function (img) {
-		// 检查图片是否已经加载完成
-		if (img.complete) {
-			img.classList.add("loaded");
-		} else {
-			img.classList.add("loading");
-			img.onload = () => {
-				img.classList.remove("loading");
-				img.classList.add("loaded");
-			};
-		}
-
-		img.style.cursor = "pointer";
-
-		img.addEventListener("click", () => {
-			if (modal && modalImg) {
-				modal.style.display = "flex";
-				document.body.style.overflow = "hidden";
-				modalImg.src = img.src;
-			}
-		});
-	});
-
-	const span = document.getElementsByClassName("close")[0];
-	span?.addEventListener("click", () => {
-		if (modal) {
-			modal.style.display = "none";
-			document.body.style.overflow = "auto";
-		}
-	});
-</script>
+</ArticleContainer>