diff --git a/frontend/app_flowy/packages/appflowy_editor/README.md b/frontend/app_flowy/packages/appflowy_editor/README.md
index a317119829..5b8119aae2 100644
--- a/frontend/app_flowy/packages/appflowy_editor/README.md
+++ b/frontend/app_flowy/packages/appflowy_editor/README.md
@@ -27,7 +27,7 @@ and the Flutter guide for
 </p>
 
 <div align="center">
-    <img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.mp4?raw=true" width = "700" style = "padding: 100"/>
+    <img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.gif?raw=true" width = "700" style = "padding: 100"/>
 </div>
 
 ## Key Features
diff --git a/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.gif b/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.gif
new file mode 100644
index 0000000000..3b1b97f847
Binary files /dev/null and b/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.gif differ
diff --git a/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.mp4 b/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.mp4
deleted file mode 100644
index 8ff6c7de3e..0000000000
Binary files a/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.mp4 and /dev/null differ