diff --git a/src/example/Course_about.jsx b/src/example/Course_about.jsx
index 579bbd4..1ef19e5 100644
--- a/src/example/Course_about.jsx
+++ b/src/example/Course_about.jsx
@@ -301,6 +301,7 @@ const About = () => {
         </AnimationOnScroll>
         <div className="">
           <div className="course-info-banner">
+            <AnimationOnScroll duration={2.2} animateIn="animate__animated animate__fadeInDown">
             <span className="info-tab">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
                 <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
@@ -374,6 +375,7 @@ const About = () => {
                 View Course
               </a>
             )}
+            </AnimationOnScroll>
           </div>
           <div>
             <img
@@ -382,6 +384,7 @@ const About = () => {
               alt={data?.course_name}
             />
           </div>
+          <AnimationOnScroll duration={1.5} animateIn="animate__animated animate__fadeInLeft">
           <div className="course-info-banner2">
             <div className="tabs">
             {tabItems.map(({ id, title, section_class }) => (
@@ -405,6 +408,7 @@ const About = () => {
             </div>
             </div>
           </div>
+          </AnimationOnScroll>
 
           <div className="content wrapper-continer">
             {tabItems.map(({ id, section_class }) => {