diff --git a/src/api/bcd.js b/src/api/bcd.js
index 515d3ad5..5b6dd1cf 100644
--- a/src/api/bcd.js
+++ b/src/api/bcd.js
@@ -518,6 +518,16 @@ export class BetterCallApi {
       })
   }
 
+  getOperationDiff(network, id) {
+    return getCancellable(this.api, `/operation/${network}/${id}/diff`, {})
+      .then((res) => {
+        if (res.status != 200) {
+          throw new RequestFailedError(res);
+        }
+        return res.data
+      })
+  }
+
   getStats() {
     return getCancellable(this.api, `/stats`, {})
       .then((res) => {
diff --git a/src/components/InternalOperation.vue b/src/components/InternalOperation.vue
index 2392ab6c..0e0051db 100644
--- a/src/components/InternalOperation.vue
+++ b/src/components/InternalOperation.vue
@@ -67,21 +67,16 @@
       <v-col
         cols="1"
         class="py-0 d-flex justify-end align-center"
-        v-if="hasParameters || hasStorageDiff"
+        v-if="loadingDiffs || hasParameters || hasStorageDiff"
       >
         <v-btn
-          v-if="showParams"
           text
           small
           @click="showParams = !showParams"
-          class="text--secondary"
+          :class="showParams ? 'text--secondary' : ''"
         >
           <v-icon small class="mr-1">mdi-file-tree</v-icon>
-          <span>Hide details</span>
-        </v-btn>
-        <v-btn v-else text small @click="showParams = !showParams">
-          <v-icon small class="mr-1">mdi-file-tree</v-icon>
-          <span>Show details</span>
+          <span>{{ showParams ? 'Hide' : 'Show' }} details</span>
         </v-btn>
       </v-col>
       <v-col cols="2">
@@ -141,7 +136,7 @@
         </v-row>
         <v-row
           class="my-1 parameters px-2 py-3 canvas"
-          v-if="hasParameters || hasStorageDiff"
+          v-if="loadingDiffs || hasParameters || hasStorageDiff"
           no-gutters
         >
           <v-col :cols="expanded ? 12 : 6">
@@ -161,7 +156,10 @@
             </template>
           </v-col>
           <v-col :cols="expanded ? 12 : 6" :class="expanded ? 'mt-4' : ''">
-            <template v-if="hasStorageDiff">
+            <template v-if="loadingDiffs">
+              <p class="overline" >Loading storage diff...</p>
+            </template>
+            <template v-else-if="hasStorageDiff">
               <span class="overline ml-3">Storage</span>
               <v-tooltip top>
                 <template v-slot:activator="{ on }">
@@ -182,7 +180,7 @@
                 class="text--secondary caption"
                 v-if="data"
               >{{ data.storage_size | bytes}}</span>
-              <MiguelTreeView :miguel="data.storage_diff" :network="data.network" diffMode />
+              <MiguelTreeView :miguel="diffs" :network="data.network" diffMode />
             </template>
           </v-col>
         </v-row>
@@ -225,6 +223,8 @@ export default {
     showRaw: false,
     showParams: false,
     expanded: false,
+    loadingDiffs: false,
+    diffs: null
   }),
   created() {
     this.showParams =
@@ -325,8 +325,8 @@ export default {
       return (
         this.data != null &&
         this.data !== undefined &&
-        this.data.storage_diff != null &&
-        this.data.storage_diff !== undefined
+        this.diffs != null &&
+        this.diffs !== undefined
       );
     },
     statusColor() {
@@ -354,7 +354,30 @@ export default {
     },
   },
   methods: {
-    ...mapActions(["showClipboardOK"]),
+    ...mapActions(["showClipboardOK", "showError"]),
+    getDiff() {
+      if (this.diffs !== null) return;
+
+      this.loadingDiffs = true;
+      this.api.getOperationDiff(this.data.network, this.data.id).
+        then((res) => {
+          this.diffs = res;
+        }).
+        catch(err => {
+          console.log(err);
+          this.showError(err);
+        }).
+        finally(() => {
+          this.loadingDiffs = false;
+        })
+    }
   },
+  watch: {
+    showParams(newValue) {
+      if (newValue && this.diffs === null) {
+        this.getDiff();
+      }
+    }
+  }
 };
 </script>
diff --git a/src/views/contract/ContentItem.vue b/src/views/contract/ContentItem.vue
index c76affd2..4cb691f7 100644
--- a/src/views/contract/ContentItem.vue
+++ b/src/views/contract/ContentItem.vue
@@ -2,7 +2,6 @@
   <v-expansion-panel
     class="bl-1 br-1 bt-1 op-panel"
     active-class="op-active-panel"
-    @change="onPanelStateChange"
   >
     <v-expansion-panel-header
       class="py-0 px-4"
@@ -135,7 +134,6 @@
 import InternalOperation from "@/components/InternalOperation.vue";
 import { getContentItemHeaderClass } from '@/utils/styles';
 import dayjs from "dayjs";
-import Vue from 'vue';
 import relativeTime from "dayjs/plugin/relativeTime";
 
 dayjs.extend(relativeTime);
@@ -263,18 +261,6 @@ export default {
         return null;
       }
     },
-    onPanelStateChange() {
-      if (this.value.storage_diff == undefined && !this.value.mempool) {
-        this.api.getOPG(this.value.hash, false)
-          .then((opg) => {
-            const diffs = Object.fromEntries(opg.map(op => [op.id, op.storage_diff])); 
-            Vue.set(this.value, 'storage_diff', diffs[this.value.id]);
-            for (var i = 0; i < this.value.internal_operations.length; i++) {
-              Vue.set(this.value.internal_operations[i], 'storage_diff', diffs[this.value.internal_operations[i].id]);
-            }
-          })
-      }
-    }
   },
 };
 </script>