diff --git a/src/components/ThemedJsonViewer.vue b/src/components/ThemedJsonViewer.vue
index ae9f8c0..710d7b2 100644
--- a/src/components/ThemedJsonViewer.vue
+++ b/src/components/ThemedJsonViewer.vue
@@ -1,23 +1,38 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 import type { UseColorModeReturn } from '@vueuse/core'
 import { JsonViewer } from "vue3-json-viewer"
 import { prefersDarkColorScheme } from '@/utils'
 
 const props = defineProps<{
     data: object,
+    expanded?: boolean,
 }>()
 
 const colorMode = inject<UseColorModeReturn>('colorMode')!
 const theme = computed(() => {
     return (colorMode.value === 'dark' || (prefersDarkColorScheme() && colorMode.value === 'auto')) ? 'dark' : 'light'
 })
+
+const expandToggled = ref(0)
+const expandedDataDepth = ref(1)
+watch(() => props.expanded, (newVal) => {
+    expandToggled.value++
+    if (newVal) {
+        expandedDataDepth.value = 999
+    } else {
+        expandedDataDepth.value = 1
+    }
+})
 </script>
 
 <template>
     <JsonViewer
+        :key="expandToggled"
         :value="props.data"
         :theme="theme"
+        :expanded="props.expanded"
+        :expandDepth="expandedDataDepth"
     />
 </template>
 
@@ -54,4 +69,4 @@ const theme = computed(() => {
 .jv-node:after {
     color: #949494 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/meilisearch/DocumentHitJsonRow.vue b/src/components/meilisearch/DocumentHitJsonRow.vue
index dd39cb5..bf5549c 100644
--- a/src/components/meilisearch/DocumentHitJsonRow.vue
+++ b/src/components/meilisearch/DocumentHitJsonRow.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { looksLikeAnImageUrl } from '@/utils'
-import { Pencil, Trash2 } from 'lucide-vue-next'
+import { Expand, Minimize2, Pencil, Trash2 } from 'lucide-vue-next'
 import type { Hit } from 'meilisearch'
 import ThemedJsonViewer from '../ThemedJsonViewer.vue'
 
@@ -13,6 +13,11 @@ const props = defineProps<{
 defineEmits(['edit', 'delete'])
 
 const image = computed(() => Object.values(props.hit).find(looksLikeAnImageUrl) as string | null)
+
+const expandedJson = ref(false)
+function toggleJsonExpanded() {
+    expandedJson.value = !expandedJson.value
+}
 </script>
 
 <template>
@@ -42,9 +47,21 @@ const image = computed(() => Object.values(props.hit).find(looksLikeAnImageUrl)
                     <ThemedJsonViewer
                         class="py-2 rounded-lg"
                         :data="props.hit"
+                        :expanded="expandedJson"
                     />
                 </div>
                 <div class="flex flex-row sm:flex-col justify-end gap-4">
+                    <Button
+                        v-tooltip.left="`${expandedJson ? 'Minimize' : 'Expand'} Data`"
+                        severity="secondary"
+                        outlined
+                        @click="toggleJsonExpanded()"
+                    >
+                        <template #icon>
+                            <Minimize2 v-if="expandedJson" />
+                            <Expand v-else />
+                        </template>
+                    </Button>
                     <Button
                         v-tooltip.left="'Edit Document'"
                         severity="secondary"