diff --git a/src/frontend/src/components/recordsOutputComponent/index.tsx b/src/frontend/src/components/recordsOutputComponent/index.tsx
index a917d00fd..65c86e859 100644
--- a/src/frontend/src/components/recordsOutputComponent/index.tsx
+++ b/src/frontend/src/components/recordsOutputComponent/index.tsx
@@ -1,19 +1,22 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
-import { FlowPoolObjectType } from "../../types/chat";
-import TableComponent from "../tableComponent";
 import { extractColumnsFromRows } from "../../utils/utils";
+import TableComponent from "../tableComponent";
 
 function RecordsOutputComponent({
-  flowPoolObject,
   pagination,
+  rows,
+  columnMode,
+  columnDefsRow,
 }: {
-  flowPoolObject: FlowPoolObjectType;
   pagination: boolean;
+  rows: any;
+  columnMode: "intersection" | "union" | "all";
+  columnDefsRow?: Array<Object>;
 }) {
-  const rows = flowPoolObject?.data?.artifacts?.records ?? [];
-  const columns = extractColumnsFromRows(rows, "union");
+  const columns = extractColumnsFromRows(columnDefsRow ?? rows, columnMode);
+
   const columnDefs = columns.map((col, idx) => ({
     ...col,
     resizable: idx !== columns.length - 1,
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 6113316be..7fc687a78 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -1,7 +1,7 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import { ElementRef, forwardRef, useCallback } from "react";
+import { ElementRef, forwardRef } from "react";
 import {
   DEFAULT_TABLE_ALERT_MSG,
   DEFAULT_TABLE_ALERT_TITLE,
@@ -59,7 +59,9 @@ const TableComponent = forwardRef<
           className={cn(props.className, "custom-scroll")}
           defaultColDef={{
             minWidth: 100,
+            autoHeight: true,
           }}
+          tooltipInteraction={true}
           ref={ref}
         />
       </div>
diff --git a/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/helpers/convert-to-table-rows.ts b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/helpers/convert-to-table-rows.ts
new file mode 100644
index 000000000..db61acaa3
--- /dev/null
+++ b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/helpers/convert-to-table-rows.ts
@@ -0,0 +1,4 @@
+export const convertToTableRows = (obj: Object) => {
+  const tokensArray = [Object.values(obj)[0]];
+  return tokensArray;
+};
diff --git a/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/index.tsx b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/index.tsx
index a81aadb7a..0c91059d2 100644
--- a/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/outputModal/components/switchOutputView/index.tsx
@@ -2,23 +2,24 @@ import RecordsOutputComponent from "../../../../../../components/recordsOutputCo
 import { Case } from "../../../../../../shared/components/caseComponent";
 import TextOutputView from "../../../../../../shared/components/textOutputView";
 import useFlowStore from "../../../../../../stores/flowStore";
+import { convertToTableRows } from "./helpers/convert-to-table-rows";
 
 export default function SwitchOutputView(nodeId): JSX.Element {
-  const nodes = useFlowStore((state) => state.nodes);
-  const setNode = useFlowStore((state) => state.setNode);
-  const flowPool = useFlowStore((state) => state.flowPool);
-  const node = nodes.find((node) => node?.id === nodeId?.nodeId);
+  const nodeIdentity = nodeId.nodeId;
 
-  const flowPoolNode = (flowPool[node!.id] ?? [])[
-    (flowPool[node!.id]?.length ?? 1) - 1
+  const nodes = useFlowStore((state) => state.nodes);
+  const flowPool = useFlowStore((state) => state.flowPool);
+  const node = nodes.find((node) => node?.id === nodeIdentity);
+
+  const flowPoolNode = (flowPool[nodeIdentity] ?? [])[
+    (flowPool[nodeIdentity]?.length ?? 1) - 1
   ];
 
   const results = flowPoolNode?.data?.logs[0] ?? "";
+  const resultType = results?.type;
+  const resultMessage = results?.message;
 
-  const checkType = () => {
-    const typeOutput = typeof results;
-    return typeOutput;
-  };
+  console.log("results", resultMessage);
 
   return (
     <>
@@ -26,14 +27,23 @@ export default function SwitchOutputView(nodeId): JSX.Element {
         <div>NO OUTPUT</div>
       </Case>
 
-      <Case condition={node && checkType() === "object"}>
-        <TextOutputView left={false} flowPool={flowPool} node={node} vaç />
+      <Case condition={node && resultType === "text"}>
+        <TextOutputView left={false} value={resultMessage} />
       </Case>
 
-      <Case condition={node && Array.isArray(results)}>
+      <Case condition={resultType === "record"}>
         <RecordsOutputComponent
-          flowPoolObject={flowPoolNode}
+          rows={[resultMessage] ?? []}
           pagination={true}
+          columnMode="union"
+        />
+      </Case>
+
+      <Case condition={resultType === "object"}>
+        <RecordsOutputComponent
+          rows={convertToTableRows(resultMessage)}
+          pagination={true}
+          columnMode="union"
         />
       </Case>
     </>
diff --git a/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx b/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx
index fbddc0275..4185a1d50 100644
--- a/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/outputModal/index.tsx
@@ -4,7 +4,7 @@ import SwitchOutputView from "./components/switchOutputView";
 
 export default function OutputModal({ open, setOpen, nodeId }): JSX.Element {
   return (
-    <BaseModal open={open} setOpen={setOpen} size="medium-h-full">
+    <BaseModal open={open} setOpen={setOpen} size="medium-log">
       <BaseModal.Header description="Output Visualization">
         <div className="flex items-center">
           <span className="pr-2">Output View</span>
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
index f73995c7a..e841797be 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
@@ -49,6 +49,8 @@ export default function IOFieldView({
     (flowPool[node!.id] ?? [])[(flowPool[node!.id]?.length ?? 1) - 1]?.data
       .results.result ?? "";
 
+  console.log(flowPoolNode?.data?.artifacts?.records);
+
   function handleOutputType() {
     if (!node) return <>"No node found!"</>;
     switch (type) {
@@ -161,14 +163,7 @@ export default function IOFieldView({
       case InputOutput.OUTPUT:
         switch (fieldType) {
           case "TextOutput":
-            return (
-              <TextOutputView
-                left={left}
-                node={node}
-                flowPool={flowPool}
-                value={textOutputValue}
-              />
-            );
+            return <TextOutputView left={left} value={textOutputValue} />;
           case "PDFOutput":
             return left ? (
               <div>{PDFViewConstant}</div>
@@ -256,8 +251,9 @@ export default function IOFieldView({
             return (
               <div className={left ? "h-56" : "h-full"}>
                 <RecordsOutputComponent
-                  flowPoolObject={flowPoolNode}
                   pagination={!left}
+                  rows={flowPoolNode?.data?.artifacts?.records ?? []}
+                  columnMode="union"
                 />
               </div>
             );
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index dbde0969e..8f2a1e84d 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -86,7 +86,8 @@ interface BaseModalProps {
     | "medium-h-full"
     | "md-thin"
     | "sm-thin"
-    | "smaller-h-full";
+    | "smaller-h-full"
+    | "medium-log";
 
   disable?: boolean;
   onChangeOpenModal?: (open?: boolean) => void;
@@ -172,8 +173,13 @@ function BaseModal({
     case "large-h-full":
       minWidth = "min-w-[80vw]";
       height = "h-full max-h-[70vh]";
-
       break;
+
+    case "medium-log":
+      minWidth = "min-w-[60vw]";
+      height = "h-[30vh]";
+      break;
+
     default:
       minWidth = "min-w-[80vw]";
       height = "h-[80vh]";
diff --git a/src/frontend/src/shared/components/textOutputView/index.tsx b/src/frontend/src/shared/components/textOutputView/index.tsx
index 38d0ca498..a73c5938f 100644
--- a/src/frontend/src/shared/components/textOutputView/index.tsx
+++ b/src/frontend/src/shared/components/textOutputView/index.tsx
@@ -1,16 +1,13 @@
 import { Textarea } from "../../../components/ui/textarea";
 
-const TextOutputView = ({ left, node, flowPool, value }) => {
+const TextOutputView = ({ left, value }) => {
   return (
     <>
       <Textarea
         className={`w-full custom-scroll ${left ? " min-h-32" : " h-full"}`}
         placeholder={"Empty"}
         // update to real value on flowPool
-        value={
-          (flowPool[node.id] ?? [])[(flowPool[node.id]?.length ?? 1) - 1]?.data
-            .results.result ?? ""
-        }
+        value={value}
         readOnly
       />
     </>
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index bcae42d51..8f4bd190e 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -1,6 +1,5 @@
 import { Edge, Node, Viewport } from "reactflow";
 import { ChatOutputType, chatInputType } from "../chat";
-import { Log } from "../components";
 import { FlowType } from "../flow";
 //kind and class are just representative names to represent the actual structure of the object received by the API
 export type APIDataType = { [key: string]: APIKindType };
@@ -154,17 +153,20 @@ export type VertexBuildTypeAPI = {
   valid: boolean;
   data: VertexDataTypeAPI;
   timestamp: string;
+  params: any;
+  messages: ChatOutputType[] | chatInputType[];
 };
 
 // data is the object received by the API
 // it has results, artifacts, timedelta, duration
 export type VertexDataTypeAPI = {
-  results: { [key: string]:  string  };
-  logs:{message:string}[];
+  results: { [key: string]: string };
+  logs: { message: string; type: string }[];
   messages: ChatOutputType[] | chatInputType[];
   inactive?: boolean;
   timedelta?: number;
   duration?: string;
+  artifacts?: any;
 };
 
 export type CodeErrorDataTypeAPI = {
diff --git a/src/frontend/src/types/chat/index.ts b/src/frontend/src/types/chat/index.ts
index 6fc4365c6..7b9fd556b 100644
--- a/src/frontend/src/types/chat/index.ts
+++ b/src/frontend/src/types/chat/index.ts
@@ -31,6 +31,6 @@ export type FlowPoolObjectType = {
   valid: boolean;
   // list of chat outputs or list of chat inputs
   messages: Array<ChatOutputType | chatInputType> | [];
-  data: { artifacts: any; results: any | ChatOutputType | chatInputType };
+  data: { artifacts?: any; results: any | ChatOutputType | chatInputType };
   id: string;
 };
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 790a04d05..bf63747c2 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -76,6 +76,7 @@ export type InputListComponentType = {
   disabled: boolean;
   editNode?: boolean;
   componentName?: string;
+  playgroundDisabled?: boolean;
 };
 
 export type InputGlobalComponentType = {
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 223586986..0faba2e5e 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -2,8 +2,6 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TableAutoCellRender from "../components/tableAutoCellRender";
-import { priorityFields } from "../constants/constants";
-import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants";
 import { APIDataType, TemplateVariableType } from "../types/api";
 import {
   groupedObjType,
@@ -353,7 +351,7 @@ export function isTimeStampString(str: string): boolean {
 
 export function extractColumnsFromRows(
   rows: object[],
-  mode: "intersection" | "union",
+  mode: "intersection" | "union" | "all",
 ): (ColDef<any> | ColGroupDef<any>)[] {
   const columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
   if (rows.length === 0) {
@@ -366,7 +364,6 @@ export function extractColumnsFromRows(
         field: key,
         cellRenderer: TableAutoCellRender,
         filter: true,
-        autoHeight: true,
       };
     }
     for (const row of rows) {
@@ -385,14 +382,19 @@ export function extractColumnsFromRows(
           field: key,
           filter: true,
           cellRenderer: TableAutoCellRender,
+          suppressAutoSize: true,
+          tooltipField: key,
         };
       }
     }
   }
+
   if (mode === "intersection") {
     intersection();
-  } else {
+  } else if (mode === "union") {
     union();
+  } else {
+    return rows;
   }
 
   return Object.values(columnsKeys);