diff --git a/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue b/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue
index 1cb8740f..25828f63 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue
@@ -10,6 +10,10 @@ import { useRoute } from 'vue-router';
 import type { ContractInfo, PaginabledContractStates, PaginabledContracts } from '../types';
 import { post } from '@/libs';
 
+import { JsonViewer } from "vue3-json-viewer"
+// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
+import "vue3-json-viewer/dist/index.css";
+
 const chainStore = useBlockchain();
 const baseStore = useBaseStore();
 const format = useFormatter();
@@ -86,19 +90,19 @@ function queryContract() {
             wasmStore.wasmClient
                 .getWasmContractRawQuery(contractAddress, query.value)
                 .then((x) => {
-                    result.value = JSON.stringify(x);
+                    result.value = x;
                 })
                 .catch((err) => {
-                    result.value = JSON.stringify(err);
+                    result.value = err;
                 });
         } else {
             wasmStore.wasmClient
                 .getWasmContractSmartQuery(contractAddress, query.value)
                 .then((x) => {
-                    result.value = JSON.stringify(x);
+                    result.value = x;
                 })
                 .catch((err) => {
-                    result.value = JSON.stringify(err);
+                    result.value = err;
                 });
         }
     } catch (err) {
@@ -122,7 +126,7 @@ const radioContent = [
 
 const selectedRadio = ref('raw');
 const query = ref('');
-const result = ref('');
+const result = ref({});
 </script>
 <template>
     <div>
@@ -233,18 +237,9 @@ const result = ref('');
                             <label for="modal-contract-states" class="btn btn-sm btn-circle">✕</label>
                         </div>
                         <div class="overflow-auto">
-                            <table class="table table-compact w-full text-sm">
-                                <tr v-for="(v, index) in state.models" :key="index" class="hover">
-                                    <td class="" :data-tip="format.hexToString(v.key)">
-                                        <span class="font-bold">{{ format.hexToString(v.key) }}</span>
-                                    </td>
-                                    <td class="text-left w-3/4" :title="format.base64ToString(v.value)">
-                                        {{ format.base64ToString(v.value) }}
-                                    </td>
-                                </tr>
-                            </table>
+                            <JsonViewer :value="state.models?.map(v => ({key: format.hexToString(v.key), value: JSON.parse(format.base64ToString(v.value))}))" :theme="baseStore.theme" style="background: transparent;" copyable boxed sort :expand-depth="5"/>
                             <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total"
-                                :callback="pageload" />
+                                :callback="pageloadState" />
                         </div>
                     </div>
                 </label>
@@ -279,8 +274,9 @@ const result = ref('');
                                 </div>
                                 <textarea v-model="query" placeholder="Query String, {}" label="Query String"
                                     class="my-2 textarea textarea-bordered w-full" />
-                                <textarea v-model="result" readonly placeholder="Query Result" label="Result"
-                                    class="textarea textarea-bordered w-full" />
+                                
+                                <JsonViewer :value="result" :theme="baseStore.theme" style="background: transparent;" copyable boxed sort :expand-depth="5"/>
+
                             </div>
                             <div class="mt-4 mb-4 text-center">
                                 <button class="btn btn-primary px-4 text-white" @click="queryContract()">