diff --git a/tools/ota_analysis/.gitignore b/tools/ota_analysis/.gitignore
index b81e39b9a..7cf69a02f 100644
--- a/tools/ota_analysis/.gitignore
+++ b/tools/ota_analysis/.gitignore
@@ -3,6 +3,7 @@ node_modules
 /dist
 /target
 /output
+/public
 stderr*
 stdout*
 
diff --git a/tools/ota_analysis/src/App.vue b/tools/ota_analysis/src/App.vue
index c0a6f7772..da111555b 100644
--- a/tools/ota_analysis/src/App.vue
+++ b/tools/ota_analysis/src/App.vue
@@ -28,7 +28,7 @@
 export default {
   data() {
     return {
-      links: ['Analysis', 'About'],
+      links: ['Analysis', 'Demo', 'About'],
     }
   },
 }
diff --git a/tools/ota_analysis/src/components/PayloadComposition.vue b/tools/ota_analysis/src/components/PayloadComposition.vue
index 6f8797301..587442b5d 100644
--- a/tools/ota_analysis/src/components/PayloadComposition.vue
+++ b/tools/ota_analysis/src/components/PayloadComposition.vue
@@ -66,6 +66,7 @@
       md="6"
     >
       <BaseFile
+        v-if="!demo"
         label="Drag and drop or Select The target Android build"
         @file-select="selectBuild"
       />
@@ -74,6 +75,7 @@
 </template>
 
 <script>
+import axios from 'axios'
 import PartialCheckbox from '@/components/PartialCheckbox.vue'
 import PieChart from '@/components/PieChart.vue'
 import BaseFile from '@/components/BaseFile.vue'
@@ -91,6 +93,10 @@ export default {
       type: update_metadata_pb.DeltaArchiveManifest,
       default: () => [],
     },
+    demo: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -107,6 +113,19 @@ export default {
       })
     },
   },
+  async mounted() {
+    if (this.demo) {
+      try {
+        const download = await axios.get(
+          './files/cf_x86_target_file_demo.zip',
+          {responseType: 'blob'}
+        )
+        this.targetFile = new File([download.data], 'target_demo.zip')
+      } catch (err) {
+        console.log('Please put a proper example target file in /public/files/')
+      }
+    }
+  },
   methods: {
     async updateChart(metrics) {
       let partitionSelected = this.manifest.partitions.filter((partition) =>
diff --git a/tools/ota_analysis/src/router/index.js b/tools/ota_analysis/src/router/index.js
index b751cbe2f..7899fb2d0 100644
--- a/tools/ota_analysis/src/router/index.js
+++ b/tools/ota_analysis/src/router/index.js
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import PackageAnalysis from '@/views/PackageAnalysis.vue'
+import Demo from'@/views/Demo.vue'
 import About from '@/views/About.vue'
 
 const routes = [
@@ -11,6 +12,11 @@ const routes = [
       title: 'Analyse OTA package - from AOSP'
     }
   },
+  {
+    path: '/Demo',
+    name: 'Demo',
+    component: Demo
+  },
   {
     path: '/About',
     name: 'About',
diff --git a/tools/ota_analysis/src/views/Demo.vue b/tools/ota_analysis/src/views/Demo.vue
new file mode 100644
index 000000000..0969dc011
--- /dev/null
+++ b/tools/ota_analysis/src/views/Demo.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-row>
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <PayloadDetail
+        v-if="zipFile && payload"
+        :zipFile="zipFile"
+        :payload="payload"
+      />
+    </v-col>
+    <v-divider
+      vertical
+    />
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <PayloadComposition
+        v-if="zipFile && payload.manifest"
+        :manifest="payload.manifest"
+        :demo="true"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import axios from 'axios'
+import PayloadDetail from '@/components/PayloadDetail.vue'
+import PayloadComposition from '@/components/PayloadComposition.vue'
+import { Payload } from '@/services/payload.js'
+
+export default {
+  components: {
+    PayloadDetail,
+    PayloadComposition,
+  },
+  data() {
+    return {
+      zipFile: null,
+      payload: null,
+    }
+  },
+  async created() {
+    // put cf_x86_demo.zip and cf_x86_target_file_demo into
+    // this directory: /public/files
+    try {
+      const download = await axios.get(
+        './files/cf_x86_demo.zip',
+        {responseType: 'blob'}
+      )
+      this.zipFile = new File([download.data], 'ota_demo.zip')
+      this.payload = new Payload(this.zipFile)
+      await this.payload.init()
+    } catch (err) {
+      console.log('Please put a proper example OTA in /public/files/')
+    }
+  },
+  methods: {
+    async unpackOTA(files) {
+      this.zipFile = files[0]
+      try {
+        this.payload = new Payload(this.zipFile)
+        await this.payload.init()
+      } catch (err) {
+        alert('Please check if this is a correct OTA package (.zip).')
+        console.log(err)
+      }
+    },
+  },
+}
+</script>