diff --git a/docs/index.assets/animation.mp4 b/docs/index.assets/animation.mp4
new file mode 100644
index 000000000..cf3838e79
Binary files /dev/null and b/docs/index.assets/animation.mp4 differ
diff --git a/docs/index.assets/comment.mp4 b/docs/index.assets/comment.mp4
new file mode 100644
index 000000000..3f9ea340c
Binary files /dev/null and b/docs/index.assets/comment.mp4 differ
diff --git a/docs/index.assets/running_code.mp4 b/docs/index.assets/running_code.mp4
new file mode 100644
index 000000000..c946fbd68
Binary files /dev/null and b/docs/index.assets/running_code.mp4 differ
diff --git a/docs/index.html b/docs/index.html
index 6383459fc..f1dec6193 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -179,11 +179,11 @@
                     <p class="intro-quote">"A picture is worth a thousand words."<br>“一图胜千言”</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/animation.gif" alt="Animation example">
+            <video class="intro-image" src="index.assets/animation.mp4" autoplay loop muted playsinline aria-label="Animation example"></video>
         </div>
 
         <div class="intro-container">
-            <img class="intro-image" src="index.assets/running_code.gif" alt="Running code example">
+            <video class="intro-image" src="index.assets/running_code.mp4" autoplay loop muted playsinline aria-label="Running code example"></video>
             <div class="intro-text">
                 <div>
                     <div style="display: flex; align-items: center;">
@@ -211,7 +211,7 @@
                     <p class="intro-quote">"Learning by teaching."<br>“教学相长”</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/comment.gif" alt="Comments example">
+            <video class="intro-image" src="index.assets/comment.mp4" autoplay loop muted playsinline aria-label="Comments example"></video>
         </div>
 
     </div>
diff --git a/en/docs/index.assets/animation.mp4 b/en/docs/index.assets/animation.mp4
new file mode 100644
index 000000000..cf3838e79
Binary files /dev/null and b/en/docs/index.assets/animation.mp4 differ
diff --git a/en/docs/index.assets/comment.mp4 b/en/docs/index.assets/comment.mp4
new file mode 100644
index 000000000..3f9ea340c
Binary files /dev/null and b/en/docs/index.assets/comment.mp4 differ
diff --git a/en/docs/index.assets/running_code.mp4 b/en/docs/index.assets/running_code.mp4
new file mode 100644
index 000000000..c946fbd68
Binary files /dev/null and b/en/docs/index.assets/running_code.mp4 differ
diff --git a/en/docs/index.html b/en/docs/index.html
index e30e8cbb6..6e4c29ecb 100644
--- a/en/docs/index.html
+++ b/en/docs/index.html
@@ -179,11 +179,11 @@
                     <p class="intro-quote">"A picture is worth a thousand words."</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/animation.gif" alt="Animation example">
+            <video class="intro-image" src="index.assets/animation.mp4" autoplay loop muted playsinline aria-label="Animation example"></video>
         </div>
 
         <div class="intro-container">
-            <img class="intro-image" src="index.assets/running_code.gif" alt="Running code example">
+            <video class="intro-image" src="index.assets/running_code.mp4" autoplay loop muted playsinline aria-label="Running code example"></video>
             <div class="intro-text">
                 <div>
                     <div style="display: flex; align-items: center;">
@@ -211,7 +211,7 @@
                     <p class="intro-quote">"Learning by teaching."</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/comment.gif" alt="Comments example">
+            <video class="intro-image" src="index.assets/comment.mp4" autoplay loop muted playsinline aria-label="Comments example"></video>
         </div>
 
     </div>
diff --git a/ja/docs/index.assets/animation.mp4 b/ja/docs/index.assets/animation.mp4
new file mode 100644
index 000000000..cf3838e79
Binary files /dev/null and b/ja/docs/index.assets/animation.mp4 differ
diff --git a/ja/docs/index.assets/comment.mp4 b/ja/docs/index.assets/comment.mp4
new file mode 100644
index 000000000..3f9ea340c
Binary files /dev/null and b/ja/docs/index.assets/comment.mp4 differ
diff --git a/ja/docs/index.assets/running_code.mp4 b/ja/docs/index.assets/running_code.mp4
new file mode 100644
index 000000000..c946fbd68
Binary files /dev/null and b/ja/docs/index.assets/running_code.mp4 differ
diff --git a/ja/docs/index.html b/ja/docs/index.html
index 35716d6b2..68aef3153 100644
--- a/ja/docs/index.html
+++ b/ja/docs/index.html
@@ -179,11 +179,11 @@
                     <p class="intro-quote">"A picture is worth a thousand words."<br>「一枚の絵は千の言葉に値する」</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/animation.gif" alt="Animation example">
+            <video class="intro-image" src="index.assets/animation.mp4" autoplay loop muted playsinline aria-label="Animation example"></video>
         </div>
 
         <div class="intro-container">
-            <img class="intro-image" src="index.assets/running_code.gif" alt="Running code example">
+            <video class="intro-image" src="index.assets/running_code.mp4" autoplay loop muted playsinline aria-label="Running code example"></video>
             <div class="intro-text">
                 <div>
                     <div style="display: flex; align-items: center;">
@@ -211,7 +211,7 @@
                     <p class="intro-quote">"Learning by teaching."<br>「教えることで学ぶ」</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/comment.gif" alt="Comments example">
+            <video class="intro-image" src="index.assets/comment.mp4" autoplay loop muted playsinline aria-label="Comments example"></video>
         </div>
 
     </div>
diff --git a/overrides/zensical/stylesheets/extra.css b/overrides/zensical/stylesheets/extra.css
index 5ec4a29e9..3352322a1 100644
--- a/overrides/zensical/stylesheets/extra.css
+++ b/overrides/zensical/stylesheets/extra.css
@@ -573,7 +573,7 @@ a:hover .device-on-hover {
 }
 
 .intro-text svg path {
-  fill: #3b3b3b;
+  fill: var(--md-primary-bg-color);
 }
 
 .endor-text {
diff --git a/overrides/zensical/zensical.toml b/overrides/zensical/zensical.toml
index 60b6d9994..65f6ff3ba 100644
--- a/overrides/zensical/zensical.toml
+++ b/overrides/zensical/zensical.toml
@@ -17,7 +17,6 @@ features = [
   "content.tabs.link",
   "content.tooltips",
   "navigation.indexes",
-  "navigation.top",
   "navigation.tracking",
   "search.highlight",
   "search.share",
diff --git a/ru/docs/index.assets/animation.mp4 b/ru/docs/index.assets/animation.mp4
new file mode 100644
index 000000000..cf3838e79
Binary files /dev/null and b/ru/docs/index.assets/animation.mp4 differ
diff --git a/ru/docs/index.assets/comment.mp4 b/ru/docs/index.assets/comment.mp4
new file mode 100644
index 000000000..3f9ea340c
Binary files /dev/null and b/ru/docs/index.assets/comment.mp4 differ
diff --git a/ru/docs/index.assets/running_code.mp4 b/ru/docs/index.assets/running_code.mp4
new file mode 100644
index 000000000..c946fbd68
Binary files /dev/null and b/ru/docs/index.assets/running_code.mp4 differ
diff --git a/ru/docs/index.html b/ru/docs/index.html
index 4fd148dd6..3750d14e9 100644
--- a/ru/docs/index.html
+++ b/ru/docs/index.html
@@ -167,11 +167,11 @@
                     <p class="intro-quote">"A picture is worth a thousand words."<br>«Одна схема стоит тысячи слов»</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/animation.gif" alt="Animation example">
+            <video class="intro-image" src="index.assets/animation.mp4" autoplay loop muted playsinline aria-label="Animation example"></video>
         </div>
 
         <div class="intro-container">
-            <img class="intro-image" src="index.assets/running_code.gif" alt="Running code example">
+            <video class="intro-image" src="index.assets/running_code.mp4" autoplay loop muted playsinline aria-label="Running code example"></video>
             <div class="intro-text">
                 <div>
                     <div style="display: flex; align-items: center;">
@@ -199,7 +199,7 @@
                     <p class="intro-quote">"Learning by teaching."<br>«Обучая других, учишься сам»</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/comment.gif" alt="Comments example">
+            <video class="intro-image" src="index.assets/comment.mp4" autoplay loop muted playsinline aria-label="Comments example"></video>
         </div>
 
     </div>
diff --git a/zh-hant/docs/index.assets/animation.mp4 b/zh-hant/docs/index.assets/animation.mp4
new file mode 100644
index 000000000..cf3838e79
Binary files /dev/null and b/zh-hant/docs/index.assets/animation.mp4 differ
diff --git a/zh-hant/docs/index.assets/comment.mp4 b/zh-hant/docs/index.assets/comment.mp4
new file mode 100644
index 000000000..3f9ea340c
Binary files /dev/null and b/zh-hant/docs/index.assets/comment.mp4 differ
diff --git a/zh-hant/docs/index.assets/running_code.mp4 b/zh-hant/docs/index.assets/running_code.mp4
new file mode 100644
index 000000000..c946fbd68
Binary files /dev/null and b/zh-hant/docs/index.assets/running_code.mp4 differ
diff --git a/zh-hant/docs/index.html b/zh-hant/docs/index.html
index 9ae027ad2..da4d88e95 100644
--- a/zh-hant/docs/index.html
+++ b/zh-hant/docs/index.html
@@ -179,11 +179,11 @@
                     <p class="intro-quote">"A picture is worth a thousand words."<br>“一圖勝千言”</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/animation.gif" alt="Animation example">
+            <video class="intro-image" src="index.assets/animation.mp4" autoplay loop muted playsinline aria-label="Animation example"></video>
         </div>
 
         <div class="intro-container">
-            <img class="intro-image" src="index.assets/running_code.gif" alt="Running code example">
+            <video class="intro-image" src="index.assets/running_code.mp4" autoplay loop muted playsinline aria-label="Running code example"></video>
             <div class="intro-text">
                 <div>
                     <div style="display: flex; align-items: center;">
@@ -211,7 +211,7 @@
                     <p class="intro-quote">"Learning by teaching."<br>“教學相長”</p>
                 </div>
             </div>
-            <img class="intro-image" src="index.assets/comment.gif" alt="Comments example">
+            <video class="intro-image" src="index.assets/comment.mp4" autoplay loop muted playsinline aria-label="Comments example"></video>
         </div>
 
     </div>