diff --git a/app/components/button.js b/app/components/button.js
index 1ef8661..b354690 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -40,7 +40,7 @@ export default class ButtonComponent extends Component {
         <this.icon
           @spin={{this.isPending}}
           @size={{get iconSizes this.size}}
-          class="mr-1"
+          class={{if this.text "mr-1"}}
         />
       {{/if}}
 
diff --git a/app/controllers/admin/indexes/item/documents/index.js b/app/controllers/admin/indexes/item/documents/index.js
index 9fa13f0..f3bd8b8 100644
--- a/app/controllers/admin/indexes/item/documents/index.js
+++ b/app/controllers/admin/indexes/item/documents/index.js
@@ -1,7 +1,7 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { Magnify, Table, MapOutline } from 'ember-mdi';
+import { Magnify, Table, /* MapOutline, */ CodeJson } from 'ember-mdi';
 
 export default class AdminIndexesItemDocumentsIndexController extends Controller {
   @tracked q = null;
@@ -19,7 +19,7 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   // key: view name, value: icon
   views = {
     table: Table,
-    map: MapOutline,
+    json: CodeJson,
   };
 
   get attributes() {
diff --git a/app/templates/admin/indexes/item/documents/index.hbs b/app/templates/admin/indexes/item/documents/index.hbs
index fdad16a..ccf3945 100644
--- a/app/templates/admin/indexes/item/documents/index.hbs
+++ b/app/templates/admin/indexes/item/documents/index.hbs
@@ -60,81 +60,103 @@
 </div> --}}
 
 {{#if (gt @model.data.estimatedTotalHits 0)}}
-  <SimpleTable
-    @data={{@model.data.hits}}
-    @sortingProp={{this.sort}}
-    @onSort={{this.onSort}}
-    class='w-full'
-    as |Column data|
-  >
-    {{#let
-      (array @model.index.uid (get data @model.index.primaryKey))
-      as |models|
-    }}
-      {{#each this.attributes as |field|}}
-        {{#if (not (includes field this.hiddenFields))}}
-          <Column
-            @name={{capitalize field}}
-            @prop={{field}}
-            @sortable={{includes field @model.sortableAttributes}}
-          >
-            {{#let (get data field) as |value|}}
-              {{#if (eq @model.index.primaryKey field)}}
+  <div class='mb-4'>
+    {{#each-in this.views as |key icon|}}
+      <Button
+        @icon={{icon}}
+        class='w-auto'
+        @onClick={{set this 'dataView'}}
+        @value={{key}}
+      />
+    {{/each-in}}
+  </div>
+
+  {{#if (eq this.dataView 'table')}}
+    <SimpleTable
+      @data={{@model.data.hits}}
+      @sortingProp={{this.sort}}
+      @onSort={{this.onSort}}
+      class='w-full'
+      as |Column data|
+    >
+      {{#let
+        (array @model.index.uid (get data @model.index.primaryKey))
+        as |models|
+      }}
+        {{#each this.attributes as |field|}}
+          {{#if (not (includes field this.hiddenFields))}}
+            <Column
+              @name={{capitalize field}}
+              @prop={{field}}
+              @sortable={{includes field @model.sortableAttributes}}
+            >
+              {{#let (get data field) as |value|}}
+                {{#if (eq @model.index.primaryKey field)}}
+                  <LinkTo
+                    @route='admin.indexes.item.documents.document'
+                    @models={{models}}
+                  >{{value}}</LinkTo>
+                {{else if (eq (type-of value) 'object')}}
+                  {{json-stringify value}}
+                {{else}}
+                  {{value}}
+                {{/if}}
+              {{/let}}
+            </Column>
+          {{/if}}
+        {{/each}}
+        <Column class='relative'>
+          {{#let
+            'flex items-center px-4 py-2 text-inherit no-underline text-sm hover:bg-base-6 hover:text-base-1'
+            as |linkClasses|
+          }}
+            <Menu as |menu|>
+              <menu.Button class='inline-flex items-center'>
+                <Icons::DotsHorizontal />
+              </menu.Button>
+              <menu.Items
+                class='absolute z-dropdown right-0 w-28 mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
+              >
                 <LinkTo
                   @route='admin.indexes.item.documents.document'
                   @models={{models}}
-                >{{value}}</LinkTo>
-              {{else if (eq (type-of value) 'object')}}
-                {{json-stringify value}}
-              {{else}}
-                {{value}}
-              {{/if}}
-            {{/let}}
-          </Column>
-        {{/if}}
-      {{/each}}
-      <Column class='relative'>
-        {{#let
-          'flex items-center px-4 py-2 text-inherit no-underline text-sm hover:bg-base-6 hover:text-base-1'
-          as |linkClasses|
-        }}
-          <Menu as |menu|>
-            <menu.Button class='inline-flex items-center'>
-              <Icons::DotsHorizontal />
-            </menu.Button>
-            <menu.Items
-              class='absolute z-dropdown right-0 w-28 mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
-            >
-              <LinkTo
-                @route='admin.indexes.item.documents.document'
-                @models={{models}}
-                class={{linkClasses}}
-              >
-                <Icons::FileDocumentOutline @size={{18}} class='mr-1' />
-                View
-              </LinkTo>
-              <LinkTo
-                @route='admin.indexes.item.documents.document.edit'
-                @models={{models}}
-                class={{linkClasses}}
-              >
-                <Icons::PencilOutline @size={{18}} class='mr-1' />
-                Edit
-              </LinkTo>
-              <LinkTo
-                @route='admin.indexes.item.documents.document.delete'
-                @models={{models}}
-                class={{linkClasses}}
-              >
-                <Icons::TrashCanOutline @size={{18}} class='mr-1' />
-                Delete
-              </LinkTo>
-            </menu.Items>
-          </Menu>
-        {{/let}}
-      </Column>
-    {{/let}}
-  </SimpleTable>
+                  class={{linkClasses}}
+                >
+                  <Icons::FileDocumentOutline @size={{18}} class='mr-1' />
+                  View
+                </LinkTo>
+                <LinkTo
+                  @route='admin.indexes.item.documents.document.edit'
+                  @models={{models}}
+                  class={{linkClasses}}
+                >
+                  <Icons::PencilOutline @size={{18}} class='mr-1' />
+                  Edit
+                </LinkTo>
+                <LinkTo
+                  @route='admin.indexes.item.documents.document.delete'
+                  @models={{models}}
+                  class={{linkClasses}}
+                >
+                  <Icons::TrashCanOutline @size={{18}} class='mr-1' />
+                  Delete
+                </LinkTo>
+              </menu.Items>
+            </Menu>
+          {{/let}}
+        </Column>
+      {{/let}}
+    </SimpleTable>
+  {{else if (eq this.dataView 'json')}}
+    {{#each @model.data.hits as |item|}}
+      <MonacoEditor
+        @value={{json-stringify item}}
+        @language='json'
+        @readOnly={{true}}
+        class='mb-4'
+      />
+    {{/each}}
+  {{/if}}
 
   <div class='flex items-center'>
     {{this.fromHits}}