diff --git a/packages/bbui/src/Table/BoldRenderer.svelte b/packages/bbui/src/Table/BoldRenderer.svelte
new file mode 100644
index 0000000000..ea882d538e
--- /dev/null
+++ b/packages/bbui/src/Table/BoldRenderer.svelte
@@ -0,0 +1,11 @@
+<script>
+  export let value
+</script>
+
+<div class="bold">{value}</div>
+
+<style>
+  .bold {
+    font-weight: bold;
+  }
+</style>
diff --git a/packages/bbui/src/Table/CodeRenderer.svelte b/packages/bbui/src/Table/CodeRenderer.svelte
new file mode 100644
index 0000000000..a75bec663c
--- /dev/null
+++ b/packages/bbui/src/Table/CodeRenderer.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let value
+</script>
+
+<code>{value}</code>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index c30047f73f..3e86d01a0d 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -61,6 +61,10 @@ export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
 export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
 export { default as Banner } from "./Banner/Banner.svelte"
 
+// Renderers
+export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
+export { default as CodeRenderer } from "./Table/CodeRenderer.svelte"
+
 // Typography
 export { default as Body } from "./Typography/Body.svelte"
 export { default as Heading } from "./Typography/Heading.svelte"
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/variables/ViewDynamicVariables.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/variables/ViewDynamicVariables.svelte
index b000258399..a1e209f846 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/variables/ViewDynamicVariables.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/variables/ViewDynamicVariables.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Body, Table } from "@budibase/bbui"
+  import { Body, Table, BoldRenderer, CodeRenderer } from "@budibase/bbui"
   import { queries as queriesStore } from "stores/backend"
   import { goto } from "@roxi/routify"
 
@@ -12,8 +12,8 @@
 
   const dynamicVariableSchema = {
     name: "",
-    value: "",
     query: "",
+    value: "",
   }
 
   const onClick = dynamicVariable => {
@@ -43,5 +43,9 @@
   allowEditColumns={false}
   allowEditRows={false}
   allowSelectRows={false}
+  customRenderers={[
+    { column: "name", component: BoldRenderer },
+    { column: "value", component: CodeRenderer },
+  ]}
 />
 <Body size="S" />
