diff --git a/components/dataViews/TransactionInfo/TxMsgExecuteContractDetails.tsx b/components/dataViews/TransactionInfo/TxMsgExecuteContractDetails.tsx
index ad41b7b..f333334 100644
--- a/components/dataViews/TransactionInfo/TxMsgExecuteContractDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgExecuteContractDetails.tsx
@@ -1,9 +1,12 @@
 import { fromUtf8 } from "@cosmjs/encoding";
 import { MsgExecuteContract } from "cosmjs-types/cosmwasm/wasm/v1/tx";
+import dynamic from "next/dynamic";
 import { useChains } from "../../../context/ChainsContext";
 import { printableCoins } from "../../../lib/displayHelpers";
 import HashView from "../HashView";
 
+const JsonEditor = dynamic(() => import("../../inputs/JsonEditor"), { ssr: false });
+
 interface TxMsgExecuteContractDetailsProps {
   readonly msgValue: MsgExecuteContract;
 }
@@ -27,8 +30,7 @@ const TxMsgExecuteContractDetails = ({ msgValue }: TxMsgExecuteContractDetailsPr
         <div>{printableCoins(msgValue.funds, chain)}</div>
       </li>
       <li>
-        <label>Msg:</label>
-        <div>{fromUtf8(msgValue.msg)}</div>
+        <JsonEditor readOnly content={{ json: JSON.parse(fromUtf8(msgValue.msg, true)) }} />
       </li>
       <style jsx>{`
         li:not(:has(h3)) {
diff --git a/components/dataViews/TransactionInfo/TxMsgInstantiateContract2Details.tsx b/components/dataViews/TransactionInfo/TxMsgInstantiateContract2Details.tsx
index e869900..8629567 100644
--- a/components/dataViews/TransactionInfo/TxMsgInstantiateContract2Details.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgInstantiateContract2Details.tsx
@@ -1,9 +1,12 @@
 import { fromUtf8 } from "@cosmjs/encoding";
 import { MsgInstantiateContract2 } from "cosmjs-types/cosmwasm/wasm/v1/tx";
+import dynamic from "next/dynamic";
 import { useChains } from "../../../context/ChainsContext";
 import { printableCoins } from "../../../lib/displayHelpers";
 import HashView from "../HashView";
 
+const JsonEditor = dynamic(() => import("../../inputs/JsonEditor"), { ssr: false });
+
 interface TxMsgInstantiateContract2DetailsProps {
   readonly msgValue: MsgInstantiateContract2;
 }
@@ -47,8 +50,7 @@ const TxMsgInstantiateContract2Details = ({ msgValue }: TxMsgInstantiateContract
         <div>{printableCoins(msgValue.funds, chain)}</div>
       </li>
       <li>
-        <label>Msg:</label>
-        <div>{fromUtf8(msgValue.msg)}</div>
+        <JsonEditor readOnly content={{ json: JSON.parse(fromUtf8(msgValue.msg, true)) }} />
       </li>
       <style jsx>{`
         li:not(:has(h3)) {
diff --git a/components/dataViews/TransactionInfo/TxMsgInstantiateContractDetails.tsx b/components/dataViews/TransactionInfo/TxMsgInstantiateContractDetails.tsx
index 47777ea..c50db10 100644
--- a/components/dataViews/TransactionInfo/TxMsgInstantiateContractDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgInstantiateContractDetails.tsx
@@ -1,9 +1,12 @@
 import { fromUtf8 } from "@cosmjs/encoding";
 import { MsgInstantiateContract } from "cosmjs-types/cosmwasm/wasm/v1/tx";
+import dynamic from "next/dynamic";
 import { useChains } from "../../../context/ChainsContext";
 import { printableCoins } from "../../../lib/displayHelpers";
 import HashView from "../HashView";
 
+const JsonEditor = dynamic(() => import("../../inputs/JsonEditor"), { ssr: false });
+
 interface TxMsgInstantiateContractDetailsProps {
   readonly msgValue: MsgInstantiateContract;
 }
@@ -39,8 +42,7 @@ const TxMsgInstantiateContractDetails = ({ msgValue }: TxMsgInstantiateContractD
         <div>{printableCoins(msgValue.funds, chain)}</div>
       </li>
       <li>
-        <label>Msg:</label>
-        <div>{fromUtf8(msgValue.msg)}</div>
+        <JsonEditor readOnly content={{ json: JSON.parse(fromUtf8(msgValue.msg, true)) }} />
       </li>
       <style jsx>{`
         li:not(:has(h3)) {
diff --git a/components/dataViews/TransactionInfo/TxMsgMigrateContractDetails.tsx b/components/dataViews/TransactionInfo/TxMsgMigrateContractDetails.tsx
index 8e095a1..09be796 100644
--- a/components/dataViews/TransactionInfo/TxMsgMigrateContractDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgMigrateContractDetails.tsx
@@ -1,7 +1,10 @@
 import { fromUtf8 } from "@cosmjs/encoding";
 import { MsgMigrateContract } from "cosmjs-types/cosmwasm/wasm/v1/tx";
+import dynamic from "next/dynamic";
 import HashView from "../HashView";
 
+const JsonEditor = dynamic(() => import("../../inputs/JsonEditor"), { ssr: false });
+
 interface TxMsgMigrateContractDetailsProps {
   readonly msgValue: MsgMigrateContract;
 }
@@ -22,8 +25,7 @@ const TxMsgMigrateContractDetails = ({ msgValue }: TxMsgMigrateContractDetailsPr
       <div>{msgValue.codeId.toString()}</div>
     </li>
     <li>
-      <label>Msg:</label>
-      <div>{fromUtf8(msgValue.msg)}</div>
+      <JsonEditor readOnly content={{ json: JSON.parse(fromUtf8(msgValue.msg, true)) }} />
     </li>
     <style jsx>{`
       li:not(:has(h3)) {