diff --git a/tools/ota_analysis/src/components/BasicInfo.vue b/tools/ota_analysis/src/components/BasicInfo.vue
index 6fdd8bf09..8a3a2ecb2 100644
--- a/tools/ota_analysis/src/components/BasicInfo.vue
+++ b/tools/ota_analysis/src/components/BasicInfo.vue
@@ -1,6 +1,9 @@
 <template>
   <h3>Basic infos</h3>
-  <div v-if="zipFile">
+  <div
+    v-if="zipFile"
+    v-bind="$attrs"
+  >
     <ul class="align">
       <li><strong> File name </strong> {{ zipFile.name }}</li>
       <li><strong> File size </strong> {{ zipFile.size }} Bytes</li>
@@ -18,26 +21,26 @@
         <span v-if="payload.manifest.partitions[0].oldPartitionInfo">
           &#9989;
         </span>
-        <span v-else> &#10062; </span>
+        <span v-else> &#10060; </span>
       </li>
       <li>
         <strong> Partial </strong>
         <span v-if="payload.manifest.partialUpdate"> &#9989; </span>
-        <span v-else> &#10062; </span>
+        <span v-else> &#10060; </span>
       </li>
       <li>
         <strong> VAB </strong>
         <span v-if="payload.manifest.dynamicPartitionMetadata.snapshotEnabled">
           &#9989;
         </span>
-        <span v-else> &#10062; </span>
+        <span v-else> &#10060; </span>
       </li>
       <li>
         <strong> VABC </strong>
         <span v-if="payload.manifest.dynamicPartitionMetadata.vabcEnabled">
           &#9989;
         </span>
-        <span v-else> &#10062; </span>
+        <span v-else> &#10060; </span>
       </li>
     </ul>
   </div>
diff --git a/tools/ota_analysis/src/components/PartitionDetail.vue b/tools/ota_analysis/src/components/PartitionDetail.vue
index 6648378dd..6a64448dd 100644
--- a/tools/ota_analysis/src/components/PartitionDetail.vue
+++ b/tools/ota_analysis/src/components/PartitionDetail.vue
@@ -1,9 +1,48 @@
 <template>
-  <p
+  <h4> {{ partition.partitionName }} </h4>
+  <p v-if="partition.estimateCowSize">
+    <strong> Estimate COW Size: </strong> {{ partition.estimateCowSize }} Bytes
+  </p>
+  <p v-else>
+    <strong> Estimate COW Size: </strong> 0 Bytes
+  </p>
+  <div
     class="toggle"
-    @click="toggle()"
+    @click="toggle('showInfo')"
   >
-    Total Operations: {{ partition.operations.length }}
+    <h4> Partition Infos </h4>
+    <ul v-if="showInfo">
+      <li v-if="partition.oldPartitionInfo">
+        <strong>
+          Old Partition Size:
+        </strong>
+        {{ partition.oldPartitionInfo.size }} Bytes
+      </li>
+      <li v-if="partition.oldPartitionInfo">
+        <strong>
+          Old Partition Hash:
+        </strong>
+        {{ octToHex(partition.oldPartitionInfo.hash, false, 16) }}
+      </li>
+      <li>
+        <strong>
+          New Partition Size:
+        </strong>
+        {{ partition.newPartitionInfo.size }} Bytes
+      </li>
+      <li>
+        <strong>
+          New Partition Hash:
+        </strong>
+        {{ octToHex(partition.newPartitionInfo.hash, false, 16) }}
+      </li>
+    </ul>
+  </div>
+  <div
+    class="toggle"
+    @click="toggle('showOPs')"
+  >
+    <h4> Total Operations: {{ partition.operations.length }} </h4>
     <ul
       v-if="showOPs"
     >
@@ -17,11 +56,11 @@
         />
       </li>
     </ul>
-  </p>
+  </div>
 </template>
 
 <script>
-import { OpType } from '@/services/payload.js'
+import { OpType, octToHex } from '@/services/payload.js'
 import OperationDetail from '@/components/OperationDetail.vue'
 
 export default {
@@ -37,6 +76,7 @@ export default {
   data() {
     return {
       showOPs: false,
+      showInfo: false,
       opType: null,
     }
   },
@@ -44,9 +84,10 @@ export default {
     this.opType = new OpType()
   },
   methods: {
-    toggle() {
-      this.showOPs = !this.showOPs
+    toggle(key) {
+      this[key] = !this[key]
     },
+    octToHex: octToHex,
   },
 }
 </script>
@@ -55,7 +96,7 @@ export default {
 .toggle {
   display: block;
   cursor: pointer;
-  color: #00c255;
+  color: #762ace;
 }
 
 li {
diff --git a/tools/ota_analysis/src/components/PayloadDetail.vue b/tools/ota_analysis/src/components/PayloadDetail.vue
index 75a56ac2c..15bb93705 100644
--- a/tools/ota_analysis/src/components/PayloadDetail.vue
+++ b/tools/ota_analysis/src/components/PayloadDetail.vue
@@ -23,13 +23,6 @@
           shaped
           class="partial-info"
         >
-          <h4> {{ partition.partitionName }} </h4>
-          <p v-if="partition.estimateCowSize">
-            <strong> Estimate COW Size: </strong> {{ partition.estimateCowSize }} Bytes
-          </p>
-          <p v-else>
-            <strong> Estimate COW Size: </strong> 0 Bytes
-          </p>
           <PartitionDetail :partition="partition" />
         </v-card>
       </v-col>
@@ -50,7 +43,7 @@
 <script>
 import PartitionDetail from './PartitionDetail.vue'
 import BasicInfo from '@/components/BasicInfo.vue'
-import { Payload } from '@/services/payload.js'
+import { Payload, octToHex } from '@/services/payload.js'
 
 export default {
   components: {
@@ -71,17 +64,6 @@ export default {
     octToHex: octToHex,
   },
 }
-
-function octToHex(bufferArray) {
-  let hex_table = ''
-  for (let i = 0; i < bufferArray.length; i++) {
-    hex_table += bufferArray[i].toString(16) + ' '
-    if ((i + 1) % 16 == 0) {
-      hex_table += '\n'
-    }
-  }
-  return hex_table
-}
 </script>
 
 <style scoped>
diff --git a/tools/ota_analysis/src/services/payload.js b/tools/ota_analysis/src/services/payload.js
index 542a58246..5fdb95f88 100644
--- a/tools/ota_analysis/src/services/payload.js
+++ b/tools/ota_analysis/src/services/payload.js
@@ -144,4 +144,19 @@ export class MergeOpType {
       this.mapType.set(types[key], key)
     }
   }
+}
+
+export function octToHex(bufferArray, space = true, maxLine = 16) {
+  let hex_table = ''
+  for (let i = 0; i < bufferArray.length; i++) {
+    if (bufferArray[i].toString(16).length===2) {
+      hex_table += bufferArray[i].toString(16) + (space ? ' ' : '')
+    } else {
+      hex_table += '0' + bufferArray[i].toString(16) + (space ? ' ' : '')
+    }
+    if ((i + 1) % maxLine == 0) {
+      hex_table += '\n'
+    }
+  }
+  return hex_table
 }
\ No newline at end of file