diff --git a/README.md b/README.md
index a99f5cf..e4c2698 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,11 @@
 <strong>Filetree</strong> is a minimalistic, self-hosted file manager — browse, upload, preview, and manage files from your browser. No cloud lock-in, no database. Simple YAML or JSON config, single binary deployment.
 </p>
 
+<p align="center">
+  <img src="docs/assets/images/demo.gif" width="800"/>
+</p>
+<hr/>
+
 
 ## Features
 
diff --git a/docs/assets/images/demo.gif b/docs/assets/images/demo.gif
new file mode 100644
index 0000000..c7ed5b5
Binary files /dev/null and b/docs/assets/images/demo.gif differ
diff --git a/docs/overrides/home.html b/docs/overrides/home.html
index 2095876..199e63e 100644
--- a/docs/overrides/home.html
+++ b/docs/overrides/home.html
@@ -178,7 +178,7 @@ <h3 class="md-demo__title">{{ page.meta.demo.title }}</h3>
             <circle cx="38" cy="22" r="4" fill="currentColor" fill-opacity="0.3"/>
             <circle cx="54" cy="22" r="4" fill="currentColor" fill-opacity="0.3"/>
             <!-- GIF inside the frame (content area below title bar) -->
-            <image href="assets/images/filetree-demo.gif" x="10" y="35" width="180" height="105" preserveAspectRatio="xMidYMid slice" clip-path="url(#demo-clip)"/>
+            <image href="assets/images/demo.gif" x="10" y="35" width="180" height="105" preserveAspectRatio="xMidYMid slice" clip-path="url(#demo-clip)"/>
           </svg>
         </div>
       </div>