diff --git a/extension/package-lock.json b/extension/package-lock.json
index 1fb5a00..5b15a94 100644
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -11,6 +11,7 @@
         "ansi-to-html": "^0.7.2",
         "highlight.js": "^11.9.0",
         "pinia": "^2.1.7",
+        "pretty-print-json": "^3.0.0",
         "primeicons": "^7.0.0",
         "primevue": "^3.49.1",
         "vue": "^3.4.19"
@@ -1903,6 +1904,11 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/pretty-print-json": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-print-json/-/pretty-print-json-3.0.0.tgz",
+      "integrity": "sha512-1993HBv7RNqoPNgaajOK3RLm544t3jongECDFw6Y5faYiBeg2tg62jDT1EDmXRRDn296ykH49A8tphkQBHUSTA=="
+    },
     "node_modules/primeicons": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
diff --git a/extension/package.json b/extension/package.json
index 4fe6bfd..8ad2c5e 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -14,6 +14,7 @@
     "ansi-to-html": "^0.7.2",
     "highlight.js": "^11.9.0",
     "pinia": "^2.1.7",
+    "pretty-print-json": "^3.0.0",
     "primeicons": "^7.0.0",
     "primevue": "^3.49.1",
     "vue": "^3.4.19"
diff --git a/extension/src/components/ActionParams.vue b/extension/src/components/ActionParams.vue
index d0b3362..6f10caf 100644
--- a/extension/src/components/ActionParams.vue
+++ b/extension/src/components/ActionParams.vue
@@ -1,14 +1,37 @@
 <template>
-<DetailsTable :value="store.selectedParams">
-  <Column field="name" header="Name" />
-  <Column field="value" header="Value" />    
-</DetailsTable>
+  <DetailsTable :value="store.selectedParams">
+    <Column field="name" header="Name" class="font-bold"/>
+      <Column field="value" header="Value">
+        <template #body="slotProps">
+          <pre v-html="pretty(slotProps.data.value)" class="whitespace-pre-wrap"></pre>
+        </template>
+    </Column>
+  </DetailsTable>
 </template>
 
 <script setup>
 import { useEventsStore } from '../stores/events';
 import Column from 'primevue/column';
 import DetailsTable from './wrappers/DetailsTable.vue';
+import { prettyPrintJson } from 'pretty-print-json';
 
 const store = useEventsStore()
+
+const prettyOptions = {
+  indent: 2,
+  quoteKeys: true,
+  quoteStyle: 'double',
+  trailingCommas: false,
+  linkUrls: false,
+};
+
+function pretty(obj) {
+  try {
+    return prettyPrintJson.toHtml(obj, prettyOptions);
+  } catch (e) {
+    console.log(e);
+    return obj;
+  }
+}
+
 </script>
diff --git a/extension/src/components/ActiveRecordQueries.vue b/extension/src/components/ActiveRecordQueries.vue
index 65cb481..7307e01 100644
--- a/extension/src/components/ActiveRecordQueries.vue
+++ b/extension/src/components/ActiveRecordQueries.vue
@@ -9,7 +9,7 @@
     <Column field="type" header="Type" class="whitespace-nowrap"/>
     <Column field="query" header="Query">
       <template #body="slotProps">
-        <div v-html="hljs.highlight(slotProps.data.query, { language: 'sql' }).value" class="font-mono"></div>
+        <pre v-html="hljs.highlight(slotProps.data.query, { language: 'sql' }).value" class="font-mono whitespace-pre-wrap"></pre>
       </template>
     </Column>
     <Column field="binds" header="Binds"> 
diff --git a/extension/src/style.css b/extension/src/style.css
index ed7b813..c410fd8 100644
--- a/extension/src/style.css
+++ b/extension/src/style.css
@@ -33,8 +33,3 @@
     --primary-950: 69 10 10;  
 
 }
-
-/* custom scrollbar */
-/* ::-webkit-scrollbar {
-  width: 0px;
-} */
\ No newline at end of file