diff --git a/packages/page-storage/src/Query.tsx b/packages/page-storage/src/Query.tsx
index 0ecc260a4f..6ec6e1e868 100644
--- a/packages/page-storage/src/Query.tsx
+++ b/packages/page-storage/src/Query.tsx
@@ -67,7 +67,8 @@ function createComponent (type: string, Component: React.ComponentType<any>, def
     // In order to modify the parameters which are used to render the default component, we can use this method
     refresh: (swallowErrors: boolean, contentShorten: boolean): React.ComponentType<any> =>
       renderHelper(
-        (value: any): React.ReactNode => valueToText(type, value, swallowErrors, contentShorten),
+        (value: any): React.ReactNode =>
+          <pre>{valueToText(type, value, swallowErrors, contentShorten)}</pre>,
         defaultProps
       )
   };
@@ -115,7 +116,8 @@ function getCachedComponent (query: QueryTypes): CacheInstance {
     const defaultProps = { className: 'ui--output' };
     const Component = renderHelper(
       // By default we render a simple div node component with the query results in it
-      (value: any): React.ReactNode => valueToText(type, value, true, true),
+      (value: any): React.ReactNode =>
+        <pre>{valueToText(type, value, true, true)}</pre>,
       defaultProps
     );
 
@@ -228,4 +230,8 @@ export default styled(Query)`
     margin: -10px 0;
     vertical-align: middle;
   }
+
+  pre {
+    margin: 0;
+  }
 `;
diff --git a/packages/page-toolbox/src/Rpc/Results.tsx b/packages/page-toolbox/src/Rpc/Results.tsx
index 3839710531..e7d80e5ef1 100644
--- a/packages/page-toolbox/src/Rpc/Results.tsx
+++ b/packages/page-toolbox/src/Rpc/Results.tsx
@@ -34,7 +34,7 @@ export default function Results ({ queue = [] }: Props): React.ReactElement<Prop
           value={
             error
               ? error.message
-              : <pre>{JSON.stringify(result.toHuman(), null, 2)}</pre>
+              : <pre>{JSON.stringify(result.toHuman(), null, 2).replace(/"/g, '')}</pre>
           }
         />
       ))}
diff --git a/packages/react-params/src/valueToText.tsx b/packages/react-params/src/valueToText.tsx
index 34d57aabeb..978328b40f 100644
--- a/packages/react-params/src/valueToText.tsx
+++ b/packages/react-params/src/valueToText.tsx
@@ -46,13 +46,13 @@ export default function valueToText (type: string, value: any, swallowError = tr
       // HACK Handle Keys as hex-only (this should go away once the node value is
       // consistently swapped to `Bytes`)
       : type === 'Vec<(ValidatorId,Keys)>'
-        ? JSON.stringify(formatKeys(value as [ValidatorId, Keys][]))
+        ? JSON.stringify(formatKeys(value as [ValidatorId, Keys][]), null, 2).replace(/"/g, '')
         : value instanceof Raw
           ? value.isEmpty
             ? '<empty>'
             : value.toString()
           : (value instanceof Option) && value.isNone
             ? '<none>'
-            : JSON.stringify(value.toHuman())
+            : JSON.stringify(value.toHuman(), null, 2).replace(/"/g, '')
   );
 }