diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index cd5b665..af46e2c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -413,18 +413,18 @@ const setup = () => {
 		}
 	});
 	window.swup.hooks.on('visit:end', (visit: {to: {url: string}}) => {
-		// execute 1s later
 		setTimeout(() => {
 			const heightExtend = document.getElementById('page-height-extend')
 			if (heightExtend) {
 				heightExtend.classList.add('hidden')
 			}
-		}, 200)
 
-		const toc = document.getElementById('toc-wrapper');
-		if (toc) {
-			toc.classList.remove('toc-not-ready')
-		}
+            // Just make the transition looks better
+            const toc = document.getElementById('toc-wrapper');
+            if (toc) {
+                toc.classList.remove('toc-not-ready')
+            }
+        }, 200)
 	});
 }
 if (window?.swup?.hooks) {
@@ -447,7 +447,7 @@ function scrollFunction() {
 		}
 	}
 
-	if (toc) {
+	if (bannerEnabled && toc) {
 		if (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight) {
 			toc.classList.remove('toc-hide')
 		} else {
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index 189a9a6..1021712 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -93,9 +93,11 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAI
 <div class="absolute w-full z-0">
     <div class="relative max-w-[var(--page-width)] mx-auto">
         <!-- TOC component -->
-        {siteConfig.toc.enable && <div id="toc-wrapper" class="transition absolute top-0 -right-[var(--toc-width)] w-[var(--toc-width)] flex items-center toc-hide">
+        {siteConfig.toc.enable && <div id="toc-wrapper" class:list={["transition absolute top-0 -right-[var(--toc-width)] w-[var(--toc-width)] flex items-center",
+            {"toc-hide": siteConfig.banner.enable}]}
+        >
             <div id="toc-inner-wrapper" class="fixed top-14 w-[var(--toc-width)] h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">
-                <div id="toc" class="w-full h-full transition-swup-fade">
+                <div id="toc" class="w-full h-full transition-swup-fade ">
                     <div class="h-8 w-full"></div>
                     <TOC headings={headings}></TOC>
                     <div class="h-8 w-full"></div>