diff --git a/src/backend/base/langflow/base/agents/crewai/crew.py b/src/backend/base/langflow/base/agents/crewai/crew.py
index a4c70a51c3a..70137518c0c 100644
--- a/src/backend/base/langflow/base/agents/crewai/crew.py
+++ b/src/backend/base/langflow/base/agents/crewai/crew.py
@@ -67,7 +67,9 @@ def step_callback(agent_output: Union[AgentFinish, List[Tuple[AgentAction, str]]
                 self.log(cast(dict, messages[0].to_json()), name=f"Finish (Agent: {_id})")
             elif isinstance(agent_output, list):
                 _messages_dict = {f"Action {i}": action.messages for i, (action, _) in enumerate(agent_output)}
-                messages_dict = {k: v[0] if len(v) == 1 else v for k, v in _messages_dict.items()}
+                # Serialize the messages with to_json() to avoid issues with circular references
+                serializable_dict = {k: [m.to_json() for m in v] for k, v in _messages_dict.items()}
+                messages_dict = {k: v[0] if len(v) == 1 else v for k, v in serializable_dict.items()}
                 self.log(messages_dict, name=f"Step (Agent: {_id})")
 
         return step_callback
@@ -76,5 +78,5 @@ async def build_output(self) -> Message:
         crew = self.build_crew()
         result = await crew.kickoff_async()
         message = Message(text=result, sender="Machine")
-        self.status = "\n\n".join([result] + [str(message) for message in self._logs])
+        self.status = message
         return message
diff --git a/src/backend/base/langflow/custom/custom_component/component.py b/src/backend/base/langflow/custom/custom_component/component.py
index 8df5f6c2b8d..af1dfe26184 100644
--- a/src/backend/base/langflow/custom/custom_component/component.py
+++ b/src/backend/base/langflow/custom/custom_component/component.py
@@ -9,7 +9,6 @@
 from langflow.schema.artifact import get_artifact_type, post_process_raw
 from langflow.schema.data import Data
 from langflow.schema.message import Message
-from langflow.services.tracing.schema import Log
 from langflow.template.field.base import UNDEFINED, Output
 
 from .custom_component import CustomComponent
@@ -39,7 +38,6 @@ class Component(CustomComponent):
     inputs: List[InputTypes] = []
     outputs: List[Output] = []
     code_class_base_inheritance: ClassVar[str] = "Component"
-    _output_logs: dict[str, Log] = {}
 
     def __init__(self, **data):
         self._inputs: dict[str, InputTypes] = {}
diff --git a/src/backend/base/langflow/custom/custom_component/custom_component.py b/src/backend/base/langflow/custom/custom_component/custom_component.py
index 8ffeb5b0e72..4a75ec33db6 100644
--- a/src/backend/base/langflow/custom/custom_component/custom_component.py
+++ b/src/backend/base/langflow/custom/custom_component/custom_component.py
@@ -86,6 +86,7 @@ class CustomComponent(BaseComponent):
     _flows_data: Optional[List[Data]] = None
     _outputs: List[OutputValue] = []
     _logs: List[Log] = []
+    _output_logs: dict[str, Log] = {}
     tracing_service: Optional["TracingService"] = None
 
     def set_attributes(self, parameters: dict):
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 783a0036b85..e683fe5e02c 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
@@ -1,3 +1,4 @@
+import { LogsLogType, OutputLogType } from "@/types/api";
 import DataOutputComponent from "../../../../../../components/dataOutputComponent";
 import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
 import {
@@ -13,26 +14,28 @@ import ErrorOutput from "./components";
 interface SwitchOutputViewProps {
   nodeId: string;
   outputName: string;
+  type: "Outputs" | "Logs";
 }
 const SwitchOutputView: React.FC<SwitchOutputViewProps> = ({
   nodeId,
   outputName,
+  type,
 }) => {
   const flowPool = useFlowStore((state) => state.flowPool);
   const flowPoolNode = (flowPool[nodeId] ?? [])[
     (flowPool[nodeId]?.length ?? 1) - 1
   ];
-  let results = flowPoolNode?.data?.outputs[outputName] ?? "";
-  if (Array.isArray(results)) {
-    return;
-  }
+  let results: OutputLogType | LogsLogType =
+    (type === "Outputs"
+      ? flowPoolNode?.data?.outputs[outputName]
+      : flowPoolNode?.data?.logs[outputName]) ?? {};
   const resultType = results?.type;
-  let resultMessage = results?.message;
+  let resultMessage = results?.message ?? {};
   const RECORD_TYPES = ["data", "object", "array", "message"];
   if (resultMessage?.raw) {
     resultMessage = resultMessage.raw;
   }
-  return (
+  return type === "Outputs" ? (
     <>
       <Case condition={!resultType || resultType === "unknown"}>
         <div>NO OUTPUT</div>
@@ -54,7 +57,9 @@ const SwitchOutputView: React.FC<SwitchOutputViewProps> = ({
               ? (resultMessage as Array<any>).every((item) => item.data)
                 ? (resultMessage as Array<any>).map((item) => item.data)
                 : resultMessage
-              : [resultMessage]
+              : Object.keys(resultMessage).length > 0
+                ? [resultMessage]
+                : []
           }
           pagination={true}
           columnMode="union"
@@ -78,6 +83,20 @@ const SwitchOutputView: React.FC<SwitchOutputViewProps> = ({
         </div>
       </Case>
     </>
+  ) : (
+    <DataOutputComponent
+      rows={
+        Array.isArray(results)
+          ? (results as Array<any>).every((item) => item.data)
+            ? (results as Array<any>).map((item) => item.data)
+            : results
+          : Object.keys(results).length > 0
+            ? [results]
+            : []
+      }
+      pagination={true}
+      columnMode="union"
+    />
   );
 };
 
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
index e34ee6ec114..c8fdfa1a93c 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
@@ -1,3 +1,5 @@
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useState } from "react";
 import { Button } from "../../../../components/ui/button";
 import BaseModal from "../../../../modals/baseModal";
 import SwitchOutputView from "./components/switchOutputView";
@@ -8,15 +10,32 @@ export default function OutputModal({
   nodeId,
   outputName,
 }): JSX.Element {
+  const [activeTab, setActiveTab] = useState<"Outputs" | "Logs">("Outputs");
   return (
-    <BaseModal open={open} setOpen={setOpen} size="medium-tall">
+    <BaseModal open={open} setOpen={setOpen} size="large">
       <BaseModal.Header description="Inspect the output of the component below.">
         <div className="flex items-center">
           <span className="pr-2">Component Output</span>
         </div>
       </BaseModal.Header>
       <BaseModal.Content>
-        <SwitchOutputView nodeId={nodeId} outputName={outputName} />
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as "Outputs" | "Logs")}
+          className={
+            "absolute top-6 flex flex-col self-center overflow-hidden rounded-md border bg-muted text-center"
+          }
+        >
+          <TabsList>
+            <TabsTrigger value="Outputs">Outputs</TabsTrigger>
+            <TabsTrigger value="Logs">Logs</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <SwitchOutputView
+          nodeId={nodeId}
+          outputName={outputName}
+          type={activeTab}
+        />
       </BaseModal.Content>
       <BaseModal.Footer>
         <div className="flex w-full justify-end pt-2">
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 6a74f9b446e..9b93b3da1b1 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -201,12 +201,18 @@ export type OutputLogType = {
   message: any | ErrorLogType;
   type: string;
 };
+export type LogsLogType = {
+  name: string;
+  message: any | ErrorLogType;
+  type: string;
+};
 
 // data is the object received by the API
 // it has results, artifacts, timedelta, duration
 export type VertexDataTypeAPI = {
   results: { [key: string]: string };
   outputs: { [key: string]: OutputLogType };
+  logs: { [key: string]: LogsLogType };
   messages: ChatOutputType[] | ChatInputType[];
   inactive?: boolean;
   timedelta?: number;