diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
index 2ce8d39a..12cb99d0 100644
--- a/public/pages/workflow_detail/resizable_workspace.tsx
+++ b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -235,24 +235,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                               onToggleCollapsedInternal={() =>
                                 onToggleToolsChange()
                               }
-                              style={{ marginBottom: '-24px' }}
+                              style={{ marginBottom: '-16px' }}
                             >
-                              <EuiFlexGroup
-                                direction="column"
-                                gutterSize="s"
-                                style={{
-                                  height: '100%',
-                                }}
-                              >
-                                <EuiFlexItem>
-                                  <EuiPanel paddingSize="m">
-                                    <Tools
-                                      workflow={workflow}
-                                      ingestResponse={ingestResponse}
-                                    />
-                                  </EuiPanel>
-                                </EuiFlexItem>
-                              </EuiFlexGroup>
+                              <Tools
+                                workflow={workflow}
+                                ingestResponse={ingestResponse}
+                              />
                             </EuiResizablePanel>
                           </>
                         );
diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
index dcf672b6..c11528f4 100644
--- a/public/pages/workflow_detail/tools/tools.tsx
+++ b/public/pages/workflow_detail/tools/tools.tsx
@@ -5,9 +5,11 @@
 
 import React, { useState } from 'react';
 import {
+  EuiCodeBlock,
   EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPanel,
   EuiSpacer,
   EuiTab,
   EuiTabs,
@@ -57,76 +59,102 @@ const inputTabs = [
  */
 export function Tools(props: ToolsProps) {
   const [selectedTabId, setSelectedTabId] = useState<string>(TAB_ID.INGEST);
+
+  console.log('ingestresponse in tools: ', props.ingestResponse);
   return (
-    <>
-      <EuiTitle>
-        <h2>Tools</h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <>
-        <EuiTabs size="m" expand={false}>
-          {inputTabs.map((tab, idx) => {
-            return (
-              <EuiTab
-                onClick={() => setSelectedTabId(tab.id)}
-                isSelected={tab.id === selectedTabId}
-                disabled={tab.disabled}
-                key={idx}
-              >
-                {tab.name}
-              </EuiTab>
-            );
-          })}
-        </EuiTabs>
-        <EuiSpacer size="m" />
-        <EuiFlexGroup
-          direction="column"
-          justifyContent="spaceBetween"
-          style={{
-            height: '80%',
-          }}
+    <EuiPanel paddingSize="m" grow={true} style={{ height: '100%' }}>
+      <EuiFlexGroup
+        direction="column"
+        //justifyContent="spaceBetween"
+        style={{
+          height: '100%',
+        }}
+      >
+        <EuiFlexItem grow={false}>
+          <EuiTitle>
+            <h2>Tools</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiTabs size="m" expand={false}>
+            {inputTabs.map((tab, idx) => {
+              return (
+                <EuiTab
+                  onClick={() => setSelectedTabId(tab.id)}
+                  isSelected={tab.id === selectedTabId}
+                  disabled={tab.disabled}
+                  key={idx}
+                >
+                  {tab.name}
+                </EuiTab>
+              );
+            })}
+          </EuiTabs>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={true}
+          style={
+            {
+              // overflowY: 'scroll',
+              // overflowX: 'hidden',
+            }
+          }
         >
-          {selectedTabId === TAB_ID.INGEST && (
+          <EuiFlexGroup direction="column">
             <EuiFlexItem
               grow={true}
-              style={{
-                overflowY: 'scroll',
-                overflowX: 'hidden',
-              }}
+              // style={{
+              //   overflowY: 'scroll',
+              //   overflowX: 'hidden',
+              // }}
             >
-              <EuiCodeEditor
-                mode="json"
-                theme="textmate"
-                width="100%"
-                height="100%"
-                value={props.ingestResponse}
-                onChange={(input) => {}}
-                readOnly={true}
-                setOptions={{
-                  fontSize: '14px',
-                }}
-                aria-label="Code Editor"
-                tabSize={2}
-              />
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.QUERY && (
-            <EuiFlexItem>
-              <EuiText>TODO: Run queries placeholder</EuiText>
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.ERRORS && (
-            <EuiFlexItem>
-              <EuiText>TODO: View errors placeholder</EuiText>
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.RESOURCES && (
-            <EuiFlexItem>
-              <Resources workflow={props.workflow} />
+              <>
+                {selectedTabId === TAB_ID.INGEST && (
+                  //TODO: investigate existing editor more
+                  <EuiCodeEditor
+                    mode="json"
+                    theme="textmate"
+                    width="100%"
+                    height="100%"
+                    onScroll={(event) => {
+                      console.log('scroll event fired!');
+                    }}
+                    value={props.ingestResponse}
+                    onChange={(input) => {}}
+                    readOnly={true}
+                    setOptions={{
+                      fontSize: '14px',
+                    }}
+                    aria-label="Code Editor"
+                    tabSize={2}
+                  />
+                  // <EuiCodeBlock
+                  //   language="json"
+                  //   fontSize="m"
+                  //   paddingSize="m"
+                  //   // TODO: dynamically fetch the available space to determine the overflow height.
+                  //   overflowHeight={100}
+                  //   // style={{
+                  //   //   height: '100%',
+                  //   // }}
+                  // >
+                  //   {props.ingestResponse}
+                  // </EuiCodeBlock>
+                )}
+                {selectedTabId === TAB_ID.QUERY && (
+                  <EuiText>TODO: Run queries placeholder</EuiText>
+                )}
+                {selectedTabId === TAB_ID.ERRORS && (
+                  <EuiText>TODO: View errors placeholder</EuiText>
+                )}
+                {selectedTabId === TAB_ID.RESOURCES && (
+                  <Resources workflow={props.workflow} />
+                )}
+              </>
             </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </>
-    </>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
   );
 }
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
index cce3d516..2acb7ef3 100644
--- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -153,7 +153,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
         dispatch(ingest({ index: indexName, doc }))
           .unwrap()
           .then(async (resp) => {
-            props.setIngestResponse(JSON.stringify(resp));
+            props.setIngestResponse(JSON.stringify(resp, undefined, 2));
           })
           .catch((error: any) => {
             getCore().notifications.toasts.addDanger(error);