diff --git a/src/app.css b/src/app.css
index aed1d0e..a9d8b82 100644
--- a/src/app.css
+++ b/src/app.css
@@ -253,28 +253,7 @@ a:hover {
 	cursor: pointer;
 	padding: 10px;
 	z-index: 1100;
-}
-
-.mobile-menu-btn span {
-	display: block;
-	width: 25px;
-	height: 3px;
-	background-color: var(--header-text);
-	margin: 5px 0;
-	transition: all 0.3s;
-	border-radius: 2px;
-}
-
-.mobile-menu-btn.open span:nth-child(1) {
-	transform: rotate(45deg) translate(5px, 6px);
-}
-
-.mobile-menu-btn.open span:nth-child(2) {
-	opacity: 0;
-}
-
-.mobile-menu-btn.open span:nth-child(3) {
-	transform: rotate(-45deg) translate(5.5px, -6.5px);
+	color: var(--header-text);
 }
 
 @media screen and (max-width: 767px) {
@@ -293,11 +272,11 @@ a:hover {
 		top: 58px;
 		left: 0;
 		width: 100%;
-		height: 0;
+		max-height: 0;
 		overflow: hidden;
 		flex-direction: column;
 		background-color: var(--header-bg);
-		transition: height 0.3s ease;
+		transition: max-height 0.3s ease;
 		justify-content: flex-start;
 	}
 	@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
@@ -308,8 +287,9 @@ a:hover {
 		}
 	}
 	.header nav.open {
-		height: calc(100vh - 58px);
+		max-height: 400px;
 		overflow-y: auto;
+		padding-bottom: 10px;
 	}
 	.header nav a,
 	.header nav .nav-dropdown-trigger {
@@ -1285,7 +1265,7 @@ footer section p:first-child {
 	bottom: 0;
 	left: 0;
 	right: 0;
-	background: rgba(255, 255, 255, 0.85);
+	background: rgba(0, 0, 0, 0.4);
 	z-index: 3;
 	opacity: 0;
 	visibility: hidden;
@@ -1486,15 +1466,6 @@ footer section p:first-child {
 	}
 }
 
-/* 移动端默认不显示目录 */
-@media screen and (max-width: 767px) {
-	#toggle-toc,
-	.TOC,
-	.toc-mask {
-		display: none !important;
-	}
-}
-
 /* Tags Styling (VOID style) */
 .tags {
 	margin: 1.5rem 0;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 103c32d..3f581bb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -64,13 +64,41 @@
 					>{$page.data.site?.title || 'BlogFlare'}</a
 				>
 				<button
-					class="mobile-menu-btn {isMobileMenuOpen ? 'open' : ''}"
+					class="mobile-menu-btn"
 					onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
 					aria-label="Toggle menu"
 				>
-					<span></span>
-					<span></span>
-					<span></span>
+					{#if isMobileMenuOpen}
+						<svg
+							aria-hidden="true"
+							focusable="false"
+							role="img"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 320 512"
+							width="20"
+							height="20"
+						>
+							<path
+								fill="currentColor"
+								d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
+							></path>
+						</svg>
+					{:else}
+						<svg
+							aria-hidden="true"
+							focusable="false"
+							role="img"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 448 512"
+							width="20"
+							height="20"
+						>
+							<path
+								fill="currentColor"
+								d="M16 132h416c8.8 0 16-7.2 16-16V76c0-8.8-7.2-16-16-16H16C7.2 60 0 67.2 0 76v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16z"
+							></path>
+						</svg>
+					{/if}
 				</button>
 				<nav class={isMobileMenuOpen ? 'open' : ''}>
 					<a