diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
index 6e416a8b6b..877a17d480 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
@@ -16,8 +16,8 @@ import {
     getContentByAsyncBlocks,
     getPageTOC,
 } from './toc-util';
+import './toc.css';
 import type { ListenerMap, TOCType } from './types';
-
 const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>(
     ({ type, isActive }) => {
         const common = {
@@ -168,6 +168,11 @@ export const TOC = () => {
 
     const onClick = async (blockId?: string) => {
         setActiveBlockId(blockId);
+        const block = await editor.getBlockById(blockId);
+        block.dom.classList.add('toc-scroll-item');
+        setTimeout(() => {
+            block.dom.classList.remove('toc-scroll-item');
+        }, 1000);
         await editor.scrollManager.scrollIntoViewByBlockId(blockId);
     };
 
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css
new file mode 100644
index 0000000000..44364012dc
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css
@@ -0,0 +1,13 @@
+.toc-scroll-item {
+    animation: blinker 1s linear;
+    animation-delay: 1s;
+}
+
+@keyframes blinker {
+    0% {
+        background: rgba(152, 172, 189, 0.1);
+    }
+    100% {
+        background: rgba(152, 172, 189, 0.1);
+    }
+}