diff --git a/telemetry/ui/src/components/routes/app/DataView.tsx b/telemetry/ui/src/components/routes/app/DataView.tsx
index b1f00963..1a957353 100644
--- a/telemetry/ui/src/components/routes/app/DataView.tsx
+++ b/telemetry/ui/src/components/routes/app/DataView.tsx
@@ -2,6 +2,10 @@ import React, { useState } from 'react';
 import { Step } from '../../../api';
 import JsonView from '@uiw/react-json-view';
 import { Button } from '../../common/button';
+import { Switch, SwitchField } from '../../common/switch';
+import { Label } from '../../common/fieldset';
+import { classNames } from '../../../utils/tailwind';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid';
 
 const StateButton = (props: { label: string; selected: boolean; setSelected: () => void }) => {
   const color = props.selected ? 'zinc' : 'light';
@@ -13,46 +17,45 @@ const StateButton = (props: { label: string; selected: boolean; setSelected: ()
 };
 
 export const ErrorView = (props: { error: string }) => {
-  return <pre className="text-dwred rounded-sm p-2  text-wrap text-xs">{props.error}</pre>;
+  return (
+    <>
+      <pre className="text-dwred rounded-sm p-2  text-wrap text-xs">{props.error}</pre>
+    </>
+  );
 };
 export const DataView = (props: { currentStep: Step | undefined; priorStep: Step | undefined }) => {
   const [whichState, setWhichState] = useState<'after' | 'before'>('after');
   const stepToExamine = whichState === 'after' ? props.currentStep : props.priorStep;
   const stateData = stepToExamine?.step_end_log?.state;
-  const resultData = stepToExamine?.step_end_log?.result;
+  const resultData = stepToExamine?.step_end_log?.result || undefined;
   const inputs = stepToExamine?.step_start_log?.inputs;
   const error = props.currentStep?.step_end_log?.exception;
   const [viewRawData, setViewRawData] = useState<'raw' | 'render'>('render');
 
   return (
-    <div className="h-full pl-3 pt-2 flex flex-col gap-2">
-      <div className="flex flex-row justify-between">
-        <h1 className="text-2xl text-gray-600 font-semibold">State</h1>
+    <div className="pl-0 flex flex-col gap-2">
+      <div className="flex flex-row justify-between sticky top-0 z-20 bg-white">
+        <h1 className="text-2xl text-gray-600 font-semibold pt-0">State</h1>
         <div className="flex flex-row justify-end gap-2 pr-2">
+          <SwitchField>
+            <Switch
+              name="test"
+              checked={viewRawData === 'raw'}
+              onChange={(checked) => {
+                setViewRawData(checked ? 'raw' : 'render');
+              }}
+            ></Switch>
+            <Label className="-mx-4">Rendered</Label>
+          </SwitchField>
+
           {stateData !== undefined && (
-            <>
-              <StateButton
-                label="raw"
-                selected={viewRawData === 'raw'}
-                setSelected={() => {
-                  setViewRawData('raw');
-                }}
-              />
-              <StateButton
-                label="render"
-                selected={viewRawData === 'render'}
-                setSelected={() => {
-                  setViewRawData('render');
-                }}
-              />
-              <StateButton
-                label="after"
-                selected={whichState === 'after'}
-                setSelected={() => {
-                  setWhichState('after');
-                }}
-              />
-            </>
+            <StateButton
+              label="after"
+              selected={whichState === 'after'}
+              setSelected={() => {
+                setWhichState('after');
+              }}
+            />
           )}
 
           {
@@ -67,136 +70,182 @@ export const DataView = (props: { currentStep: Step | undefined; priorStep: Step
         </div>
       </div>
 
-      {stateData !== undefined && viewRawData === 'render' && (
-        // <JsonView value={stateData} collapsed={2} enableClipboard={false} />
-        <FormRenderer data={stateData} />
-      )}
-      {stateData !== undefined && viewRawData === 'raw' && (
-        <JsonView value={stateData} collapsed={2} enableClipboard={false} />
-      )}
+      <StateView stateData={stateData} viewRawData={viewRawData} />
       {error && (
         <>
           <h1 className="text-2xl text-gray-600 font-semibold">Error</h1>
           <ErrorView error={error} />
         </>
       )}
+      <h1 className="text-2xl text-gray-600 font-semibold sticky top-8 bg-white">Result</h1>
+      <ResultView resultData={resultData} viewRawData={viewRawData} />
+      {inputs && <InputsView inputs={inputs || {}} />}
+    </div>
+  );
+};
+
+export const StateView = (props: {
+  stateData: DataType | undefined;
+  viewRawData: 'render' | 'raw';
+}) => {
+  const { stateData, viewRawData } = props;
+  return (
+    <>
+      {stateData !== undefined && viewRawData === 'render' && <FormRenderer data={stateData} />}
+      {stateData !== undefined && viewRawData === 'raw' && (
+        <JsonView value={stateData} collapsed={2} enableClipboard={false} />
+      )}
+    </>
+  );
+};
+
+export const ResultView = (props: {
+  resultData: DataType | undefined;
+  viewRawData: 'render' | 'raw';
+}) => {
+  const { resultData, viewRawData } = props;
+  return (
+    <>
       {resultData && viewRawData === 'render' && (
         <>
-          <h1 className="text-2xl text-gray-600 font-semibold">Result</h1>
           <FormRenderer data={resultData} />
         </>
       )}
       {resultData && viewRawData === 'raw' && (
         <>
-          <h1 className="text-2xl text-gray-600 font-semibold">Result</h1>
           <JsonView value={resultData} collapsed={2} enableClipboard={false} />
         </>
       )}
+    </>
+  );
+};
+
+export const InputsView = (props: { inputs: object }) => {
+  const { inputs } = props;
+  return (
+    <>
       {Object.keys(inputs || {}).length > 0 && (
         <>
           <h1 className="text-2xl text-gray-600 font-semibold">Inputs</h1>
           <JsonView value={inputs} collapsed={2} enableClipboard={false} />
         </>
       )}
-    </div>
+    </>
   );
 };
 
-interface StringComponentProps {
-  name: string;
-  value: string;
-  level: number;
-}
-// String component is used to render string data
-const StringComponent: React.FC<StringComponentProps> = ({ name, value, level }) => {
-  const renderField = (name: string, value: string, level: number) => {
-    return (
-      <div key={name + '-' + String(level)} className="border">
-        <label className="border text-xl font-semibold">{name}</label>
-        <br />
-        <pre
-          className=""
-          style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', maxWidth: '1000px' }}
-        >
-          {value}
-        </pre>
-      </div>
-    );
-  };
-  return <div>{renderField(name, value, level)}</div>;
-};
+type DataType = Record<string, string | number | boolean | object>;
 
 interface FormRendererProps {
   data: Record<string, string | number | boolean | object>;
 }
 
-// This component is used to render the form data in a structured way
-const FormRenderer: React.FC<FormRendererProps> = ({ data }) => {
-  const renderField = (value: string | number | boolean | object, key: string, level: number) => {
-    // TODO: have max level depth.
-    if (typeof value === 'string') {
-      return <StringComponent name={key} value={value} level={level} />;
-    } else if (Array.isArray(value)) {
-      return (
-        <div key={key + '-' + String(level)} className="border">
-          <label className="border text-xl font-semibold">{key}</label>
-          <br />
-          <div>
-            {value.map((v, i) => {
-              return (
-                <div key={key + '-' + i.toString()} className="border-2">
-                  {renderField(v, key + '-' + i.toString(), level + 1)}
-                </div>
-              );
-            })}
+const Header = (props: {
+  name: string;
+  isExpanded: boolean;
+  setExpanded: (expanded: boolean) => void;
+}) => {
+  const MinimizeMaximizeIcon = props.isExpanded ? ChevronUpIcon : ChevronDownIcon;
+
+  return (
+    <div className="flex flex-row gap-1 z-10 pb-2 items-center">
+      <h1 className="text-xl text-gray-500 font-semibold text-under">{props.name}</h1>
+      <MinimizeMaximizeIcon
+        className={classNames(
+          'text-gray-500',
+          'h-7 w-7 hover:bg-gray-50 rounded-md hover:cursor-pointer hover:scale-105'
+        )}
+        aria-hidden="true"
+        onClick={() => {
+          props.setExpanded(!props.isExpanded);
+        }}
+      />
+    </div>
+  );
+};
+const RenderedField = (props: {
+  value: string | number | boolean | object;
+  keyName: string;
+  level: number;
+}) => {
+  const [isExpanded, setExpanded] = useState(true);
+  // TODO: have max level depth.
+  const { value, keyName: key, level } = props;
+  const bodyClassNames =
+    'border-gray-100 border-l-[8px] pl-1 hover:bg-gray-100 text-sm text-gray-700';
+  if (key.startsWith('__')) {
+    return null;
+  }
+  return (
+    <>
+      <Header name={key} isExpanded={isExpanded} setExpanded={setExpanded} />
+      {isExpanded &&
+        (typeof value === 'string' ? (
+          <div key={key + '-' + String(level)}>
+            <pre
+              className={bodyClassNames}
+              style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', maxWidth: '1000px' }}
+            >
+              {value}
+            </pre>
           </div>
-        </div>
-      );
-    } else if (typeof value === 'object') {
-      return (
-        <div key={key} className="border">
-          <label className="border text-xl font-semibold">{key}</label>
-          <br />
-          <div>
-            {value === null ? (
-              <span>NULL</span>
-            ) : (
-              Object.entries(value).map(([k, v]) => {
+        ) : Array.isArray(value) ? (
+          <div key={key + String(level)}>
+            <div>
+              {value.map((v, i) => {
                 return (
-                  <div key={key + '-' + k} className="border-2">
-                    {renderField(v, k, level + 1)}
+                  <div key={key + '-' + i.toString()} className={bodyClassNames}>
+                    <RenderedField
+                      value={v}
+                      keyName={key + '[' + i.toString() + ']'}
+                      level={level + 1}
+                    />
                   </div>
                 );
-              })
-            )}
+              })}
+            </div>
           </div>
-        </div>
-      );
-    } else if (value === null) {
-      <div key={key + '-' + String(level)} className="border">
-        <label className="border text-xl font-semibold">{key}</label>
-        <br />
-        <span>NULL</span>
-      </div>;
-    } else {
-      return (
-        <div key={key + '-' + String(level)} className="border">
-          <label className="border text-xl font-semibold">{key}</label>
-          <br />
-          <span>{value.toString()}</span>
-        </div>
-      );
-    }
-  };
-
-  const renderFields = () => {
-    if (data !== null) {
-      return Object.entries(data).map(([key, value]) => renderField(value, key, 0));
-    }
-    return null;
-  };
+        ) : typeof value === 'object' ? (
+          <div key={key}>
+            <div>
+              {value === null ? (
+                <span>NULL</span>
+              ) : (
+                Object.entries(value).map(([k, v]) => {
+                  return (
+                    <div key={key + '-' + k} className={bodyClassNames}>
+                      <RenderedField value={v} keyName={k} level={level + 1} />
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        ) : value === null ? (
+          <div key={key + '-' + String(level)}>
+            <pre className={bodyClassNames}>NULL</pre>
+          </div>
+        ) : (
+          <div key={key + '-' + String(level)} className="">
+            <pre>{value.toString()}</pre>
+          </div>
+        ))}
+    </>
+  );
+};
 
-  return <div>{renderFields()}</div>;
+// This component is used to render the form data in a structured way
+const FormRenderer: React.FC<FormRendererProps> = ({ data }) => {
+  if (data !== null) {
+    return (
+      <>
+        {Object.entries(data).map(([key, value]) => {
+          return <RenderedField keyName={key} value={value} level={0} key={key} />;
+        })}
+      </>
+    );
+  }
+  return null;
 };
 
 export default FormRenderer;
diff --git a/telemetry/ui/src/components/routes/app/StateMachine.tsx b/telemetry/ui/src/components/routes/app/StateMachine.tsx
index b2b6901e..c9e44472 100644
--- a/telemetry/ui/src/components/routes/app/StateMachine.tsx
+++ b/telemetry/ui/src/components/routes/app/StateMachine.tsx
@@ -31,7 +31,7 @@ export const AppStateView = (props: {
   return (
     <>
       <Tabs tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
-      <div className="px-10 h-full w-full overflow-y-auto">
+      <div className="px-4 h-full w-full overflow-y-auto">
         {currentTab === 'graph' && (
           <GraphView
             stateMachine={props.stateMachine}