diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 34b431089..756e9e16e 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -137,7 +137,7 @@
 
     <div>
       <h2 class="font-bold text-2xl mt-8">Claim</h2>
-      <pre>{{ util.inspect(veriClaim, false, null) }}</pre>
+      <pre>{{ yamlVeriClaim }}</pre>
     </div>
 
     <h2 class="font-bold text-2xl mt-8">Full Claim</h2>
@@ -158,7 +158,7 @@
       </button>
     </div>
     <div v-else>
-      <pre>{{ util.inspect(fullClaim, false, null) }}</pre>
+      <pre>{{ yamlFullClaim }}</pre>
     </div>
 
     <a :href="apiServer + '/api/claim/' + veriClaim.id" target="_blank">
@@ -186,6 +186,7 @@ import * as serverUtil from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { Account } from "@/db/tables/accounts";
+import * as yaml from 'js-yaml';
 
 interface Notification {
   group: string;
@@ -300,7 +301,8 @@ export default class ClaimView extends Vue {
     try {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
-        this.veriClaim = resp.data;
+        this.veriClaim = resp.json;
+        this.yamlVeriClaim = yaml.dumps(resp.json);
       } else {
         // actually, axios typically throws an error so we never get here
         console.log("Error getting claim:", resp);
@@ -379,7 +381,8 @@ export default class ClaimView extends Vue {
     try {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
-        this.fullClaim = resp.data;
+        this.fullClaim = resp.json;
+        this.yamlFullClaim = yaml.dump(resp.json);
       } else {
         // actually, axios typically throws an error so we never get here
         console.log("Error getting full claim:", resp);