diff --git a/components/Progress.js b/components/Progress.js
index 7e8a2550..23ced0be 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -25,7 +25,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [percent])
 
   return (<div className='h-4 w-full shadow-2xl bg-gray-400'>
-      <div className='h-4 bg-red-400 duration-200' style={{ width: `${percent}%` }}>
+      <div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
         {showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
       </div>
   </div>)
diff --git a/components/Tabs.js b/components/Tabs.js
index 337d5715..f7239506 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -39,7 +39,7 @@ const Tabs = ({ children }) => {
           })}
         </ul>
         {children.map((item, index) => {
-          return <section key={index} className={`${currentTab === index ? 'block' : 'hidden'}`}>
+          return <section key={index} className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
               {item}
             </section>
         })}
diff --git a/components/Toc.js b/components/Toc.js
index 9d8c6672..73df6bd7 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -71,7 +71,7 @@ const Toc = ({ toc, targetRef }) => {
                           display: 'inline-block',
                           marginLeft: tocItem.indentLevel * 16
                         }}
-                        className={`${activeSection === id && ' font-bold text-red-400 animate__animated animate__jello'}`}
+                        className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
                       >
                         {tocItem.text}
                       </span>