diff --git a/docs/public/liveness-demo.mp4 b/docs/public/liveness-demo.mp4
deleted file mode 100644
index 6ed6b6c21c9..00000000000
Binary files a/docs/public/liveness-demo.mp4 and /dev/null differ
diff --git a/docs/public/liveness/web-app-screens.png b/docs/public/liveness/web-app-screens.png
new file mode 100644
index 00000000000..375aa7c2b38
Binary files /dev/null and b/docs/public/liveness/web-app-screens.png differ
diff --git a/docs/src/pages/[platform]/connected-components/liveness/intro.react.mdx b/docs/src/pages/[platform]/connected-components/liveness/intro.react.mdx
index 039867e8b0a..639b62c9b82 100644
--- a/docs/src/pages/[platform]/connected-components/liveness/intro.react.mdx
+++ b/docs/src/pages/[platform]/connected-components/liveness/intro.react.mdx
@@ -1,3 +1,3 @@
-<video controls width="100%" style={{maxWidth: '320px'}}>
-  <source src="/liveness-demo.mp4" type="video/mp4" />
-</video>
+import { Image } from '@aws-amplify/ui-react';
+
+<Image alt="Screen shots of Liveness component on Web" width="100%" src="/liveness/web-app-screens.png" />