diff --git a/index.html b/index.html
index 99de31a..f20fb40 100644
--- a/index.html
+++ b/index.html
@@ -70,6 +70,7 @@
               <li><a id="nav~~lecture05" href="#lecture05" alt="">05. ML & AI</a></li>
               <li><a id="nav~~lecture06" href="#lecture06" alt="">06. Software design</a></li>
               <li><a id="nav~~lecture07" href="#lecture07" alt="">07. State Management & Navigation</a></li> 
+              <li><a id="nav~~lecture08" href="#lecture08" alt="">08. Animations</a></li> 
 
               <!-- <li><a id="nav~~lecture02" href="#lecture02" alt="">02. CSS</a></li>
               <li><a id="nav~~lecture03" href="#lecture03" alt="">03. Javascript - the Basics</a></li>
@@ -255,6 +256,10 @@ <h1 class="section-heading">Announcement</h1>
               <p>2024/04/23 - <a id="announcement~~lecture07" href="#lecture07" alt="">07. State Management & Navigation </a>: slides
                 announced</p>
             </li>              
+            <li>
+              <p>2024/04/30 - <a id="announcement~~lecture08" href="#lecture08" alt="">08. Animations </a>: slides
+                announced</p>
+            </li>   
           </ul>
           <!-- <div id="announcement-more" class="collapse">
             <ul>
@@ -440,6 +445,21 @@ <h4><span class="glyphicon glyphicon-pencil"></span> Lab 07 </h4>
                 class="btn btn-primary"><span class="fa fa-gitlab" aria-hidden="true"></span> GitLab</a>
             </p>
           </div>
+
+          <h4 id="lecture08" class="anchor">Lecture 08</h4>
+          <div class="well">
+            <h4><span class="glyphicon glyphicon-blackboard"></span> Animations</h4> 
+            <p class="text-right">
+              <a id="lecture08~~slides" href="slides/2024-ss/08_Animation.pdf" class="btn btn-primary"><span
+                  class="glyphicon glyphicon-blackboard"></span> Slides</a>
+            </p>
+            <h4><span class="glyphicon glyphicon-pencil"></span> meals app with animation - example </h4>
+            <p class="text-right">
+              <a id="lecture08~~htmllab"
+                href="https://shwu10.cs.nthu.edu.tw/courses/software-studio/2024-spring/lab-flutter-basics-dart-meals-app-animation-example"
+                class="btn btn-primary"><span class="fa fa-gitlab" aria-hidden="true"></span> GitLab</a>
+            </p>
+          </div>
         </div>
           <!-- <h4 id="lecture03" class="anchor">Lecture 03</h4>
           <div class="well">
diff --git a/slides/2024-ss/08_Animation.pdf b/slides/2024-ss/08_Animation.pdf
new file mode 100644
index 0000000..b145759
Binary files /dev/null and b/slides/2024-ss/08_Animation.pdf differ