diff --git a/apps/http-backend/src/routes/userRoutes/executionRoutes.ts b/apps/http-backend/src/routes/userRoutes/executionRoutes.ts
index df43c15..b3687cd 100644
--- a/apps/http-backend/src/routes/userRoutes/executionRoutes.ts
+++ b/apps/http-backend/src/routes/userRoutes/executionRoutes.ts
@@ -29,23 +29,75 @@ execRouter.post('/node', userMiddleware,  async(req: AuthRequest, res: Response)
         if(nodeData){
             const type = nodeData.AvailableNode.type
             const config = dataSafe.data.Config ? dataSafe.data.Config : nodeData.config // for test api data prefered fist then config in db 
-            console.log(`config and type: ${JSON.stringify(config)} & ${type}`)
+            // // console.log(`config and type: ${JSON.stringify(config)} & ${type}`)
             
             const context = {
                 userId: req.user.sub,
                 config: config,
                 credentialId: nodeData.CredentialsID || config?.credentialId || ""
             }
-            
-            console.log(`Execution context: ${JSON.stringify(context)}`)
-            const executionResult = await ExecutionRegister.execute(type, context)
-
-            console.log(`Execution result: ${executionResult}`)
-
-            if(executionResult.success)
-                return res.status(statusCodes.ACCEPTED).json({
-                message: `${nodeData.name} node execution done` ,
-                data: executionResult       
+            const result = await prismaClient.$transaction(async(tx)=>{
+                // // console.log(`Execution context: ${JSON.stringify(context)}`)
+                const workflowExecution = await tx.workflowExecution.create({
+                    data:{
+                        workflowId: nodeData.workflowId || "",
+                        status: "Start",
+                        startAt: new Date(),
+                        metadata:{"isTesting": true},
+                    }
+                })
+                const NodeExecution = await tx.nodeExecution.create({
+                    data:{
+                        status: "Start",
+                        nodeId: nodeData.id,
+                        workflowExecId: workflowExecution.id,
+                        startedAt: new Date(),
+                        inputData: context,
+                        isTest: true
+                    }
+                })
+                const executionResult = await ExecutionRegister.execute(type, context)
+                    
+                
+                // console.log(`Execution result: ${executionResult}`)
+                
+                if(executionResult.success){
+                    await tx.nodeExecution.update({
+                        where: { id: NodeExecution.id},
+                        data:{
+                            status: "Completed",
+                            outputData: executionResult.output,
+                            completedAt: new Date()
+                        }
+                    })
+                    await tx.workflowExecution.update({
+                        where: {id: workflowExecution.id},
+                        data: {
+                            status: "Completed",
+                            completedAt: new Date()
+                        }
+                    })
+                    return res.status(statusCodes.ACCEPTED).json({
+                        message: `${nodeData.name} node execution done` ,
+                        data: executionResult       
+                        })
+                }
+                await tx.nodeExecution.update({
+                    where: {id : NodeExecution.id},
+                    data:{
+                        status: "Failed",
+                        completedAt: new Date(),
+                        error: executionResult.error
+                    }
+                })
+                await tx.workflowExecution.update({
+                    where: {id: workflowExecution.id},
+                    data:{
+                        status: "Failed",
+                        completedAt: new Date(),
+                        error: executionResult.output
+                    }
+                })
             })
 
             return res.status(statusCodes.FORBIDDEN).json({
@@ -57,7 +109,7 @@ execRouter.post('/node', userMiddleware,  async(req: AuthRequest, res: Response)
         })      
 
     }catch(e){
-    console.log("This is the error from executing node", e);
+    // console.log("This is the error from executing node", e);
       return res.status(statusCodes.INTERNAL_SERVER_ERROR).json({
         message: "Internal server Error from node execution ",
       });
diff --git a/apps/http-backend/src/routes/userRoutes/userRoutes.ts b/apps/http-backend/src/routes/userRoutes/userRoutes.ts
index 50664ab..aab360d 100644
--- a/apps/http-backend/src/routes/userRoutes/userRoutes.ts
+++ b/apps/http-backend/src/routes/userRoutes/userRoutes.ts
@@ -44,15 +44,14 @@ router.post("/createAvaliableNode", async (req: AuthRequest, res: Response) => {
       Data: createNode,
     });
   } catch (e) {
-    console.log("This is the error from Node creating", e);
+    // console.log("This is the error from Node creating", e);
     return res.status(statusCodes.INTERNAL_SERVER_ERROR).json({
       message: "Internal server Error from Node creation",
     });
   }
 });
 
-router.get(
-  "/getAvailableNodes",
+router.get("/getAvailableNodes",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     if (!req.user) {
@@ -77,8 +76,7 @@ router.get(
   }
 );
 
-router.post(
-  "/createAvaliableTriggers",
+router.post("/createAvaliableTriggers",
   // userMiddleware,
   async (req: Request, res: Response) => {
     try {
@@ -112,12 +110,11 @@ router.post(
   }
 );
 
-router.get(
-  "/getAvailableTriggers",
+router.get("/getAvailableTriggers",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     try {
-      console.log("RequestRecieved  from the frontend");
+      // console.log("RequestRecieved  from the frontend");
       if (!req.user)
         return res
           .status(statusCodes.UNAUTHORIZED)
@@ -138,8 +135,7 @@ router.get(
 );
 
 
-router.get(
-  "/getCredentials/:type",
+router.get("/getCredentials/:type",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     try {
@@ -151,7 +147,7 @@ router.get(
       }
       const userId = req.user.sub;
       const type = req.params.type;
-      console.log("The type of data comming to backed is ", type)
+      // console.log("The type of data comming to backed is ", type)
       // console.log(userId, " -userid");
 
       if (!type || !userId) {
@@ -208,8 +204,7 @@ router.get(
   }
 );
 
-router.get(
-  "/getAllCreds",
+router.get("/getAllCreds",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     try {
@@ -241,8 +236,7 @@ router.get(
 );
 // ----------------------------------- CREATE WORKFLOW ---------------------------------
 
-router.post(
-  "/create/workflow",
+router.post("/create/workflow",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
 
@@ -289,8 +283,7 @@ router.post(
 
 // ------------------------------------ FETCHING WORKFLOWS -----------------------------------
 
-router.get(
-  "/workflows",
+router.get("/workflows",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     try {
@@ -305,7 +298,7 @@ router.get(
           userId,
         },
       });
-      console.log(workflows);
+      // console.log(workflows);
       return res
         .status(statusCodes.OK)
         .json({ message: "Workflows fetched succesfullu", Data: workflows });
@@ -319,8 +312,7 @@ router.get(
   }
 );
 
-router.get(
-  "/empty/workflow",
+router.get("/empty/workflow",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     try {
@@ -354,8 +346,7 @@ router.get(
   }
 );
 
-router.get(
-  "/workflow/:workflowId",
+router.get("/workflow/:workflowId",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     try {
@@ -373,19 +364,20 @@ router.get(
         },
         include: {
           Trigger: {
-            include: { 
+            include: {
               triggerType: {
-                select:{icon : true}
+                select: { icon: true }
               }
             }
           },
-          nodes: { orderBy: { stage: "asc" }, 
-          include: {
-            AvailableNode: {
-              select: { icon: true}
+          nodes: {
+            orderBy: { stage: "asc" },
+            include: {
+              AvailableNode: {
+                select: { icon: true }
+              }
             }
-          }  
-        },
+          },
         },
       });
       if (!getWorkflow) {
@@ -400,7 +392,7 @@ router.get(
           icon: getWorkflow.Trigger.triggerType.icon || null,
           AvailableTrigger: undefined
         } : null,
-        nodes:  getWorkflow.nodes.map(node=> ({
+        nodes: getWorkflow.nodes.map(node => ({
           ...node,
           icon: node.AvailableNode.icon || null,
           AvailableNode: undefined
@@ -469,8 +461,7 @@ router.put("/workflow/update", userMiddleware, async (req: AuthRequest, res: Res
 //------------------------------------------ TRIGGER AND NODE CREATION ------------------------------
 
 //TRIGGER CREATION
-router.post(
-  "/create/trigger",
+router.post("/create/trigger",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     try {
@@ -481,7 +472,7 @@ router.post(
       }
       const data = req.body;
       const dataSafe = TriggerSchema.safeParse(data);
-      console.log("The error from creation of trigger is ", dataSafe.error);
+      // console.log("The error from creation of trigger is ", dataSafe.error);
 
       if (!dataSafe.success)
         return res.status(statusCodes.BAD_REQUEST).json({
@@ -529,8 +520,7 @@ router.post(
 );
 
 //NODE CREATION
-router.post(
-  "/create/node",
+router.post("/create/node",
   userMiddleware,
   async (req: AuthRequest, res: Response) => {
     try {
@@ -543,7 +533,7 @@ router.post(
       // console.log(" from http-backeden", data);
 
       const dataSafe = NodeSchema.safeParse(data);
-      console.log("The error is ", dataSafe.error);
+      // console.log("The error is ", dataSafe.error);
       if (!dataSafe.success) {
         return res.status(statusCodes.BAD_REQUEST).json({
           message: "Invalid input",
@@ -553,7 +543,7 @@ router.post(
       // Use an empty array for credentials (if required) or don't pass it at all
       // Config must be valid JSON (not an empty string)
       // const stage = dataSafe.data.Position
-      console.log("This is from the backend log of positions", dataSafe.data.position)
+      // console.log("This is from the backend log of positions", dataSafe.data.position)
       const createdNode = await prismaClient.node.create({
         data: {
           name: dataSafe.data.Name,
@@ -607,9 +597,9 @@ router.put("/update/node",
         where: { id: dataSafe.data.NodeId },
         data: {
 
-        ...(dataSafe.data.position !== undefined ? { position: dataSafe.data.position } : {}),
-        ...(dataSafe.data.Config !== undefined ? { config: dataSafe.data.Config } : {}),
-        ...(dataSafe.data.Config?.credentialId ? { CredentialsID: dataSafe.data.Config.credentialId } : {})
+          ...(dataSafe.data.position !== undefined ? { position: dataSafe.data.position } : {}),
+          ...(dataSafe.data.Config !== undefined ? { config: dataSafe.data.Config } : {}),
+          ...(dataSafe.data.Config?.credentialId ? { CredentialsID: dataSafe.data.Config.credentialId } : {})
         }
       });
 
@@ -647,9 +637,9 @@ router.put("/update/trigger",
       const updatedTrigger = await prismaClient.trigger.update({
         where: { id: dataSafe.data.TriggerId },
         data: {
-          ...(dataSafe.data.Config !== undefined ? { config: dataSafe.data.Config} : {}) ,
-          ...(dataSafe.data.CredentialID !== undefined ? { CredentialsID: dataSafe.data.CredentialID} : {}),
-          ...(dataSafe.data.Position !== undefined ? {Position: dataSafe.data.Position} : {})
+          ...(dataSafe.data.Config !== undefined ? { config: dataSafe.data.Config } : {}),
+          ...(dataSafe.data.CredentialID !== undefined ? { CredentialsID: dataSafe.data.CredentialID } : {}),
+          ...(dataSafe.data.Position !== undefined ? { Position: dataSafe.data.Position } : {})
         },
       });
 
@@ -668,7 +658,7 @@ router.put("/update/trigger",
 );
 
 router.post("/executeWorkflow", userMiddleware, async (req: AuthRequest, res: Response) => {
-  console.log("REcieved REquest to the  execute route ")
+  // console.log("REcieved REquest to the  execute route ")
   const Data = req.body
   if (!req.user) {
     return res.status(statusCodes.UNAUTHORIZED).json({
@@ -676,7 +666,7 @@ router.post("/executeWorkflow", userMiddleware, async (req: AuthRequest, res: Re
     })
   }
   const parsedData = ExecuteWorkflow.safeParse(Data);
-  console.log("This is the log data of execute work flow zod", parsedData.error)
+  // console.log("This is the log data of execute work flow zod", parsedData.error)
   if (!parsedData.success) {
     return res.status(statusCodes.BAD_REQUEST).json({
       message: "Error in Zod Schma",
@@ -697,8 +687,8 @@ router.post("/executeWorkflow", userMiddleware, async (req: AuthRequest, res: Re
         message: "Workflow not found or not authorized"
       });
     }
-    console.log("This is the Trigger Name of  the workflow", trigger?.Trigger?.name)
-    console.log("This is the Trigger Data of  the workflow", trigger)
+    // console.log("This is the Trigger Name of  the workflow", trigger?.Trigger?.name)
+    // console.log("This is the Trigger Data of  the workflow", trigger)
 
     if (trigger?.Trigger?.name === "webhook") {
       const data = await axios.post(`${HOOKS_URL}/hooks/catch/${userId}/${workflowId}`, {
@@ -706,7 +696,7 @@ router.post("/executeWorkflow", userMiddleware, async (req: AuthRequest, res: Re
 
       },
         { timeout: 30000 },)
-      console.log("Workflow Execution for webhook  started with Execution Id is ", data.data.workflowExecutionId)
+      // console.log("Workflow Execution for webhook  started with Execution Id is ", data.data.workflowExecutionId)
       const workflowExecutionId = data.data.workflowExecutionId;
       if (!workflowExecutionId) {
         return res.status(statusCodes.INTERNAL_SERVER_ERROR).json({
@@ -735,6 +725,48 @@ router.post("/executeWorkflow", userMiddleware, async (req: AuthRequest, res: Re
   }
 
 })
+
+router.get("/workflow/logs/:workflowId", userMiddleware, async (req: AuthRequest, res) => {
+  try {
+    // if (!req.user)
+    //     return res
+    //       .status(statusCodes.UNAUTHORIZED)
+    //       .json({ message: "User isnot logged in /not authorized" });
+    // const userId = req.user.sub;
+    const workflowId = req.params.workflowId;
+    if (!workflowId)
+      return res.status(statusCodes.BAD_REQUEST).json({
+        message: "Invalid input"
+      })
+
+    const executions = await prismaClient.workflowExecution.findMany({
+      where: { workflowId: workflowId },
+      include: {
+        nodeExecutions: { include: { node: true } },
+      }
+    })
+
+    if (!executions) {
+      return res.status(statusCodes.NOT_FOUND).json({
+        message: `logs not found for ${workflowId}`
+      })
+    }
+
+    return res.status(statusCodes.ACCEPTED).json({
+      message: `logs found for ${workflowId}`,
+      data: executions
+    })
+
+  }
+  catch (e) {
+    console.log("Error workflow logs:", e);
+    return res.status(statusCodes.INTERNAL_SERVER_ERROR).json({
+      message: "Internal Server Error from workflow logs",
+      error: e instanceof Error ? e.message : "Unknown error"
+    })
+  }
+})
+
 router.get("/protected", userMiddleware, (req: AuthRequest, res) => {
   return res.json({
     ok: true,
diff --git a/apps/web/app/components/ExecutionHistoryFooter.tsx b/apps/web/app/components/ExecutionHistoryFooter.tsx
new file mode 100644
index 0000000..95ad1d7
--- /dev/null
+++ b/apps/web/app/components/ExecutionHistoryFooter.tsx
@@ -0,0 +1,289 @@
+'use client';
+
+import React, { useEffect, useState, useRef } from 'react';
+import { WorkflowExecutionLog } from '@/app/types/execution.types';
+import {
+  formatDate,
+  getStatusColor,
+  getStatusLabel,
+} from '@/app/lib/formatters';
+
+interface ExecutionHistoryFooterProps {
+  workflowId: string;
+  onExecutionFetch: (executions: WorkflowExecutionLog[]) => void;
+  isLoading?: boolean;
+  autoRefreshInterval?: number; // in milliseconds, default 5000 (5 seconds)
+}
+
+// Inline table component for simplicity
+const ExecutionListTable: React.FC<{
+  executions: WorkflowExecutionLog[];
+  selectedExecution?: WorkflowExecutionLog | null;
+  onSelectExecution: (execution: WorkflowExecutionLog) => void;
+  onLoadMore: () => void;
+  isLoading?: boolean;
+  hasMore?: boolean;
+}> = ({ executions, selectedExecution, onSelectExecution, isLoading }) => {
+  if (executions.length === 0 && !isLoading) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        <p>No executions found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full overflow-x-auto max-h-64 overflow-y-auto">
+      <table className="w-full border-collapse text-xs">
+        <thead>
+          <tr className="border-b border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 sticky top-0">
+            <th className="text-left px-3 py-2 font-semibold">Started At</th>
+            <th className="text-left px-3 py-2 font-semibold">Status</th>
+            <th className="text-left px-3 py-2 font-semibold">Error</th>
+          </tr>
+        </thead>
+        <tbody>
+          {executions.map((execution) => {
+            const isSelected = selectedExecution?.id === execution.id;
+            const statusColor = getStatusColor(execution.status);
+
+            return (
+              <tr
+                key={execution.id}
+                onClick={() => onSelectExecution(execution)}
+                className={`border-b border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 ${
+                  isSelected ? 'bg-blue-50 dark:bg-blue-900/30' : ''
+                }`}
+              >
+                <td className="px-3 py-2 text-gray-800 dark:text-gray-200">
+                  {formatDate(execution.startAt)}
+                </td>
+                <td className="px-3 py-2">
+                  <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${statusColor}`}>
+                    {getStatusLabel(execution.status)}
+                  </span>
+                </td>
+                <td className="px-3 py-2 text-gray-800 dark:text-gray-200 truncate text-xs">
+                  {execution.error ? execution.error.substring(0, 40) + '...' : '—'}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default function ExecutionHistoryFooter({
+  workflowId,
+  onExecutionFetch,
+  isLoading = false,
+  autoRefreshInterval = 5000,
+}: ExecutionHistoryFooterProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [executions, setExecutions] = useState<WorkflowExecutionLog[]>([]);
+  const [selectedExecution, setSelectedExecution] = useState<WorkflowExecutionLog | null>(null);
+  const [footerLoading, setFooterLoading] = useState(false);
+  const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(true);
+  const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const lastFetchRef = useRef<number>(0);
+
+  // Load initial execution history
+  useEffect(() => {
+    fetchExecutionLogs();
+    
+    // Initialize localStorage state
+    const savedExpandedState = localStorage.getItem('executionFooterExpanded');
+    if (savedExpandedState !== null) {
+      setIsExpanded(JSON.parse(savedExpandedState));
+    }
+  }, [workflowId]);
+
+  // Setup auto-refresh polling
+  useEffect(() => {
+    if (!autoRefreshEnabled) {
+      if (refreshIntervalRef.current) {
+        clearInterval(refreshIntervalRef.current);
+        refreshIntervalRef.current = null;
+      }
+      return;
+    }
+
+    // Initial fetch immediately
+    fetchExecutionLogs();
+
+    // Setup polling interval
+    refreshIntervalRef.current = setInterval(() => {
+      const now = Date.now();
+      // Only fetch if enough time has passed since last fetch
+      if (now - lastFetchRef.current >= autoRefreshInterval) {
+        fetchExecutionLogs();
+      }
+    }, autoRefreshInterval);
+
+    return () => {
+      if (refreshIntervalRef.current) {
+        clearInterval(refreshIntervalRef.current);
+        refreshIntervalRef.current = null;
+      }
+    };
+  }, [autoRefreshEnabled, autoRefreshInterval]);
+
+  // Persist expanded state to localStorage
+  useEffect(() => {
+    localStorage.setItem('executionFooterExpanded', JSON.stringify(isExpanded));
+  }, [isExpanded]);
+
+  const fetchExecutionLogs = async () => {
+    try {
+      setFooterLoading(true);
+      // Import API dynamically to avoid issues
+      const { api } = await import('@/app/lib/api');
+      const logs = await api.executions.getWorkflowLogs(workflowId, 0, 20);
+      const executionsList = Array.isArray(logs) ? logs : [];
+      setExecutions(executionsList);
+      onExecutionFetch(executionsList);
+      lastFetchRef.current = Date.now();
+    } catch (error) {
+      console.error('Failed to fetch execution logs:', error);
+    } finally {
+      setFooterLoading(false);
+    }
+  };
+
+  const lastExecution = executions[0];
+  const lastStatus = lastExecution ? getStatusLabel(lastExecution.status) : 'No executions';
+
+  return (
+    <>
+      {/* Sticky Footer Taskbar */}
+      <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg z-40">
+        <div className="h-14 px-4 flex items-center justify-between">
+          {/* Left side - Title and status */}
+          <div className="flex items-center gap-3 flex-1 min-w-0">
+            <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 whitespace-nowrap">
+              📊 Execution History
+            </span>
+            <span className="text-xs text-gray-500 dark:text-gray-400 truncate">
+              Last: {lastStatus}
+            </span>
+          </div>
+
+          {/* Right side - Action buttons */}
+          <div className="flex items-center gap-2">
+            <button
+              onClick={fetchExecutionLogs}
+              disabled={footerLoading}
+              className="px-3 py-1 text-xs bg-blue-500 hover:bg-blue-600 disabled:bg-blue-400 text-white rounded transition-colors font-medium"
+              title="Refresh execution logs"
+            >
+              {footerLoading ? '⟳' : '🔄'}
+            </button>
+            <button
+              onClick={() => setAutoRefreshEnabled(!autoRefreshEnabled)}
+              className={`px-3 py-1 text-xs rounded transition-colors font-medium ${
+                autoRefreshEnabled
+                  ? 'bg-green-500 hover:bg-green-600 text-white'
+                  : 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200'
+              }`}
+              title={autoRefreshEnabled ? 'Auto-refresh enabled' : 'Auto-refresh disabled'}
+            >
+              {autoRefreshEnabled ? '✓' : '✗'}
+            </button>
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="px-3 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded transition-colors font-medium"
+              title={isExpanded ? 'Minimize' : 'Expand'}
+            >
+              {isExpanded ? '▼' : '▲'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Expanded Panel */}
+      {isExpanded && (
+        <div className="fixed bottom-14 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg z-40 overflow-hidden transition-all"
+        style={{ height: '60vh', maxHeight: '60vh' }}>
+          <div className="h-full flex flex-col">
+            {/* Header */}
+            <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex items-center justify-between">
+              <h2 className="font-semibold text-gray-800 dark:text-gray-200">Execution History</h2>
+              <button
+                onClick={() => setIsExpanded(false)}
+                className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-auto p-4">
+              {footerLoading && executions.length === 0 ? (
+                <div className="flex items-center justify-center h-full">
+                  <div className="text-center">
+                    <div className="w-8 h-8 border-3 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">Loading executions...</p>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* Executions Table */}
+                  <div className="mb-4">
+                    <ExecutionListTable
+                      executions={executions}
+                      selectedExecution={selectedExecution}
+                      onSelectExecution={setSelectedExecution}
+                      onLoadMore={() => {}}
+                      isLoading={footerLoading}
+                      hasMore={false}
+                    />
+                  </div>
+
+                  {/* Selected Execution Details */}
+                  {selectedExecution && (
+                    <div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+                      <h3 className="font-semibold text-sm text-gray-800 dark:text-gray-200 mb-3">
+                        Execution Details
+                      </h3>
+                      <div className="space-y-2 text-xs">
+                        <div>
+                          <p className="text-gray-600 dark:text-gray-400">Status:</p>
+                          <p className="text-gray-800 dark:text-gray-200">
+                            {getStatusLabel(selectedExecution.status)}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-gray-600 dark:text-gray-400">Started:</p>
+                          <p className="text-gray-800 dark:text-gray-200">
+                            {formatDate(selectedExecution.startAt)}
+                          </p>
+                        </div>
+                        {selectedExecution.error && (
+                          <div className="bg-red-50 dark:bg-red-900/20 p-2 rounded text-red-700 dark:text-red-300">
+                            <p className="font-semibold">Error:</p>
+                            <p>{selectedExecution.error}</p>
+                          </div>
+                        )}
+                        <div>
+                          <p className="text-gray-600 dark:text-gray-400">Nodes executed:</p>
+                          <p className="text-gray-800 dark:text-gray-200">
+                            {selectedExecution.nodeExecutions?.length || 0}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Add padding to page if footer is expanded */}
+      {isExpanded && <div style={{ height: '60vh', marginTop: '3.5rem' }} />}
+    </>
+  );
+}
diff --git a/apps/web/app/lib/api.ts b/apps/web/app/lib/api.ts
index c20312f..d9b17e4 100644
--- a/apps/web/app/lib/api.ts
+++ b/apps/web/app/lib/api.ts
@@ -146,5 +146,21 @@ export const api = {
       const errorMessage = res.data?.data?.error || res.data?.message || "Execution failed";
       throw new Error(errorMessage);
     }
+  },
+  executions: {
+    // Fetch execution logs for a workflow
+    getWorkflowLogs: async (workflowId: string, skip: number = 0, take: number = 20) => {
+      const res = await axios.get(`${BACKEND_URL}/user/workflow/logs/${workflowId}`, {
+        params: { skip, take },
+        withCredentials: true,
+        headers: { "Content-Type": "application/json" },
+      });
+      
+      if (res.data?.data) {
+        return res.data.data;
+      }
+      
+      throw new Error(res.data?.message || "Failed to fetch execution logs");
+    }
   }
 };
diff --git a/apps/web/app/lib/errorHelpers.ts b/apps/web/app/lib/errorHelpers.ts
new file mode 100644
index 0000000..14f4bb3
--- /dev/null
+++ b/apps/web/app/lib/errorHelpers.ts
@@ -0,0 +1,122 @@
+// Error formatting helpers for naive user consumption
+
+export const formatErrorMessage = (error: string | null | undefined): string => {
+  if (!error) return '—';
+
+  try {
+    // Remove common technical jargon and stack traces
+    let message = error
+      .replace(/Error: /g, '')
+      .replace(/TypeError: /g, '')
+      .replace(/ReferenceError: /g, '')
+      .replace(/SyntaxError: /g, '')
+      .replace(/at \w+.*:\d+:\d+/g, '')
+      .replace(/\n.*$/gs, '')
+      .trim();
+
+    // If error starts with a backtick, it's likely JSON or code, don't modify
+    if (message.startsWith('`')) {
+      return message.slice(1, -1);
+    }
+
+    // Truncate very long errors to be user-friendly
+    if (message.length > 200) {
+      message = message.substring(0, 200) + '...';
+    }
+
+    return message || 'Unknown error occurred';
+  } catch {
+    return String(error).substring(0, 200);
+  }
+};
+
+export const getErrorSeverity = (error: string | null | undefined): 'critical' | 'warning' | 'info' => {
+  if (!error) return 'info';
+
+  const errorLower = error.toLowerCase();
+
+  // Critical errors
+  if (
+    errorLower.includes('fail') ||
+    errorLower.includes('error') ||
+    errorLower.includes('fatal') ||
+    errorLower.includes('crash') ||
+    errorLower.includes('exception')
+  ) {
+    return 'critical';
+  }
+
+  // Warnings
+  if (
+    errorLower.includes('warn') ||
+    errorLower.includes('timeout') ||
+    errorLower.includes('retry') ||
+    errorLower.includes('deprecated') ||
+    errorLower.includes('connection')
+  ) {
+    return 'warning';
+  }
+
+  return 'info';
+};
+
+export interface ErrorContext {
+  level: 'workflow' | 'node';
+  nodeId?: string;
+  nodeName?: string;
+  message: string;
+  severity: 'critical' | 'warning' | 'info';
+}
+
+export const extractErrorContext = (
+  workflowError: string | null | undefined,
+  nodeErrors: Array<{ nodeId: string; nodeName?: string; error: string | null }> = []
+): ErrorContext[] => {
+  const errors: ErrorContext[] = [];
+
+  // Add workflow-level error if present
+  if (workflowError) {
+    errors.push({
+      level: 'workflow',
+      message: formatErrorMessage(workflowError),
+      severity: getErrorSeverity(workflowError),
+    });
+  }
+
+  // Add node-level errors if present
+  for (const nodeError of nodeErrors) {
+    if (nodeError.error) {
+      errors.push({
+        level: 'node',
+        nodeId: nodeError.nodeId,
+        nodeName: nodeError.nodeName,
+        message: formatErrorMessage(nodeError.error),
+        severity: getErrorSeverity(nodeError.error),
+      });
+    }
+  }
+
+  return errors;
+};
+
+export const getSeverityColor = (severity: 'critical' | 'warning' | 'info'): string => {
+  switch (severity) {
+    case 'critical':
+      return 'text-red-700 dark:text-red-400';
+    case 'warning':
+      return 'text-yellow-700 dark:text-yellow-400';
+    case 'info':
+      return 'text-blue-700 dark:text-blue-400';
+  }
+};
+
+export const getSeverityIcon = (severity: 'critical' | 'warning' | 'info'): string => {
+  switch (severity) {
+    case 'critical':
+      return '⚠️';
+    case 'warning':
+      return '⚡';
+    case 'info':
+      return 'ℹ️';
+  }
+};
diff --git a/apps/web/app/lib/formatters.ts b/apps/web/app/lib/formatters.ts
new file mode 100644
index 0000000..aac56ba
--- /dev/null
+++ b/apps/web/app/lib/formatters.ts
@@ -0,0 +1,157 @@
+// Utility formatters for execution history display
+
+export const formatDate = (date: Date | string | undefined): string => {
+  if (!date) return '—';
+  
+  try {
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    
+    if (isNaN(dateObj.getTime())) {
+      return '—';
+    }
+
+    return dateObj.toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: true,
+    });
+  } catch {
+    return '—';
+  }
+};
+
+export const formatDuration = (
+  startDate: Date | string | undefined,
+  endDate: Date | string | undefined
+): string => {
+  if (!startDate || !endDate) return '—';
+
+  try {
+    const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
+    const end = typeof endDate === 'string' ? new Date(endDate) : endDate;
+
+    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+      return '—';
+    }
+
+    const diffMs = Math.max(0, end.getTime() - start.getTime());
+    const totalSeconds = Math.floor(diffMs / 1000);
+
+    if (totalSeconds === 0) {
+      return '0s';
+    }
+
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    const parts: string[] = [];
+
+    if (hours > 0) {
+      parts.push(`${hours}h`);
+    }
+    if (minutes > 0) {
+      parts.push(`${minutes}m`);
+    }
+    if (seconds > 0 || parts.length === 0) {
+      parts.push(`${seconds}s`);
+    }
+
+    return parts.join(' ');
+  } catch {
+    return '—';
+  }
+};
+
+export const getStatusColor = (status: string | undefined): string => {
+  if (!status) {
+    return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+  }
+
+  const normalizedStatus = status.trim();
+
+  switch (normalizedStatus) {
+    case 'Completed':
+      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+    case 'Failed':
+      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+    case 'InProgress':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+    case 'Pending':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+    case 'ReConnecting':
+      return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200';
+    case 'Start':
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+  }
+};
+
+export const getStatusLabel = (status: string | undefined): string => {
+  if (!status) return 'Unknown';
+
+  const normalizedStatus = status.trim();
+
+  switch (normalizedStatus) {
+    case 'Start':
+      return 'Started';
+    case 'Pending':
+      return 'Pending';
+    case 'InProgress':
+      return 'In Progress';
+    case 'ReConnecting':
+      return 'Reconnecting';
+    case 'Failed':
+      return 'Failed';
+    case 'Completed':
+      return 'Completed';
+    default:
+      return status;
+  }
+};
+
+export const formatJson = (data: any): string => {
+  if (data === null || data === undefined) return 'null';
+
+  try {
+    return JSON.stringify(data, null, 2);
+  } catch {
+    return String(data);
+  }
+};
+
+export const parseJsonSafe = (str: string): any => {
+  if (!str || typeof str !== 'string') {
+    return null;
+  }
+
+  try {
+    return JSON.parse(str);
+  } catch {
+    return null;
+  }
+};
+
+export const getStatusIcon = (status: string): string => {
+  switch (status) {
+    case 'Completed':
+      return '✓';
+    case 'Failed':
+      return '✕';
+    case 'InProgress':
+      return '⟳';
+    case 'Pending':
+      return '⋯';
+    case 'ReConnecting':
+      return '↻';
+    case 'Start':
+      return '●';
+    default:
+      return '○';
+  }
+};
diff --git a/apps/web/app/types/execution.types.ts b/apps/web/app/types/execution.types.ts
new file mode 100644
index 0000000..621329e
--- /dev/null
+++ b/apps/web/app/types/execution.types.ts
@@ -0,0 +1,69 @@
+/**
+ * Execution Types
+ * Type definitions for workflow execution logs and node executions
+ */
+
+/**
+ * Valid workflow status values
+ */
+export type Status = 'Start' | 'Pending' | 'InProgress' | 'ReConnecting' | 'Failed' | 'Completed';
+
+/**
+ * Execution error details
+ */
+export interface ExecutionError {
+  message: string;
+  code?: string;
+  details?: Record<string, unknown>;
+}
+
+/**
+ * Node information included with node execution
+ */
+export interface NodeInfo {
+  id: string;
+  name: string;
+  config: Record<string, unknown>;
+  type: string; // From AvailableNode.type
+}
+
+/**
+ * Node execution log - represents a single node's execution in a workflow
+ */
+export interface NodeExecutionLog {
+  id: string;
+  nodeId: string;
+  workflowExecId: string;
+  status: Status;
+  startedAt: string; // ISO 8601 DateTime
+  completedAt: string | null; // ISO 8601 DateTime or null
+  inputData: Record<string, unknown> | null;
+  outputData: Record<string, unknown> | null;
+  error: string | null;
+  retries: number;
+  isTest: boolean;
+  node: NodeInfo;
+}
+
+/**
+ * Workflow execution log - represents a complete workflow execution with all node executions
+ */
+export interface WorkflowExecutionLog {
+  id: string;
+  workflowId: string;
+  status: Status;
+  startAt: string; // ISO 8601 DateTime
+  completedAt: string | null; // ISO 8601 DateTime or null
+  error: string | null;
+  metadata: Record<string, unknown>;
+  nodeExecutions: NodeExecutionLog[];
+}
+
+/**
+ * Response format for GET /user/workflow/logs/:workflowId
+ */
+export interface WorkflowExecutionResponse {
+  success: boolean;
+  data: WorkflowExecutionLog | null;
+  message?: string;
+}
diff --git a/apps/web/app/workflows/[id]/page.tsx b/apps/web/app/workflows/[id]/page.tsx
index 9f3f5ac..95299e0 100644
--- a/apps/web/app/workflows/[id]/page.tsx
+++ b/apps/web/app/workflows/[id]/page.tsx
@@ -28,6 +28,7 @@ import { setNodeOutput, setNodeLoading, selectAllOutputs } from "@/store/slices/
 import { resolveConfigVariables } from "@repo/common/zod";
 import { SidebarProvider } from "@workspace/ui/components/sidebar";
 import { AppSidebar } from "@/app/components/ui/app-sidebar";
+import ExecutionHistoryFooter from "@/app/components/ExecutionHistoryFooter";
 export default function WorkflowCanvas() {
   const params = useParams();
   const workflowId = params.id as string;
@@ -905,6 +906,11 @@ export default function WorkflowCanvas() {
         onClose={() => setActionOpen(false)}
         onSelectAction={handleActionSelection}
       />
+
+      <ExecutionHistoryFooter
+        workflowId={workflowId}
+        onExecutionFetch={() => {}}
+      />
     </div>
   );
 }
diff --git a/apps/web/store/root-reducer.ts b/apps/web/store/root-reducer.ts
index ade7410..5058f61 100644
--- a/apps/web/store/root-reducer.ts
+++ b/apps/web/store/root-reducer.ts
@@ -2,12 +2,15 @@ import { combineReducers } from "@reduxjs/toolkit";
 import { userReducer } from "./slices/userSlice";
 import { workflowReducer } from "./slices/workflowSlice";
 import { nodeOutputReducer, NodeOutputState } from "./slices/nodeOutputSlice";
+import executionReducer from "./slices/executionSlice";
+import type { ExecutionState } from "./slices/executionSlice";
 
 // Re-export types for use in types.ts
-export type { NodeOutputState };
+export type { NodeOutputState, ExecutionState };
 
 export const rootReducer = combineReducers({
     user: userReducer,
     workflow: workflowReducer,
-    nodeOutput: nodeOutputReducer
+    nodeOutput: nodeOutputReducer,
+    execution: executionReducer
 });
\ No newline at end of file
diff --git a/apps/web/store/slices/executionSlice.ts b/apps/web/store/slices/executionSlice.ts
new file mode 100644
index 0000000..4c6d2ef
--- /dev/null
+++ b/apps/web/store/slices/executionSlice.ts
@@ -0,0 +1,123 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { WorkflowExecutionLog } from "@/app/types/execution.types";
+
+export interface ExecutionState {
+  executions: WorkflowExecutionLog[];
+  selectedExecution: WorkflowExecutionLog | null;
+  isLoading: boolean;
+  error: string | null;
+  isFooterExpanded: boolean;
+  hasMore: boolean;
+  skip: number;
+  take: number;
+}
+
+const initialState: ExecutionState = {
+  executions: [],
+  selectedExecution: null,
+  isLoading: false,
+  error: null,
+  isFooterExpanded: false,
+  hasMore: true,
+  skip: 0,
+  take: 20,
+};
+
+export const executionSlice = createSlice({
+  name: "execution",
+  initialState,
+  reducers: {
+    // Set full execution list (replace)
+    setExecutions: (state, action: PayloadAction<WorkflowExecutionLog[]>) => {
+      state.executions = action.payload;
+    },
+
+    // Append more executions (lazy load)
+    appendExecutions: (state, action: PayloadAction<WorkflowExecutionLog[]>) => {
+      state.executions = [...state.executions, ...action.payload];
+    },
+
+    // Select an execution
+    selectExecution: (state, action: PayloadAction<WorkflowExecutionLog>) => {
+      state.selectedExecution = action.payload;
+    },
+
+    // Deselect current execution
+    clearSelectedExecution: (state) => {
+      state.selectedExecution = null;
+    },
+
+    // Toggle footer expanded state
+    setIsFooterExpanded: (state, action: PayloadAction<boolean>) => {
+      state.isFooterExpanded = action.payload;
+      // Persist to localStorage
+      if (typeof window !== "undefined") {
+        localStorage.setItem(
+          "executionFooterExpanded",
+          JSON.stringify(action.payload)
+        );
+      }
+    },
+
+    // Set loading state
+    setIsLoading: (state, action: PayloadAction<boolean>) => {
+      state.isLoading = action.payload;
+    },
+
+    // Set error
+    setError: (state, action: PayloadAction<string | null>) => {
+      state.error = action.payload;
+    },
+
+    // Set if more data available
+    setHasMore: (state, action: PayloadAction<boolean>) => {
+      state.hasMore = action.payload;
+    },
+
+    // Reset pagination
+    resetPagination: (state) => {
+      state.skip = 0;
+      state.executions = [];
+    },
+
+    // Increment skip by take amount
+    incrementSkip: (state) => {
+      state.skip += state.take;
+    },
+
+    // Initialize from localStorage
+    initializeFromStorage: (state) => {
+      if (typeof window !== "undefined") {
+        const expanded = localStorage.getItem("executionFooterExpanded");
+        if (expanded !== null) {
+          state.isFooterExpanded = JSON.parse(expanded);
+        }
+      }
+    },
+
+    // Clear all execution data
+    clearExecutions: (state) => {
+      state.executions = [];
+      state.selectedExecution = null;
+      state.skip = 0;
+      state.hasMore = true;
+    },
+  },
+});
+
+export const {
+  setExecutions,
+  appendExecutions,
+  selectExecution,
+  clearSelectedExecution,
+  setIsFooterExpanded,
+  setIsLoading,
+  setError,
+  setHasMore,
+  resetPagination,
+  incrementSkip,
+  initializeFromStorage,
+  clearExecutions,
+} = executionSlice.actions;
+
+export default executionSlice.reducer;
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
index 48fb472..461ae26 100644
--- a/packages/common/src/index.ts
+++ b/packages/common/src/index.ts
@@ -74,6 +74,52 @@ export const workflowUpdateSchema = z.object({
   edges : z.any().optional(),
   workflowId : z.string()
 })
+
+// Execution Logs Schemas - for GET /user/workflow/logs/:workflowId
+export const ExecutionStatusEnum = z.enum(['Start', 'Pending', 'InProgress', 'ReConnecting', 'Failed', 'Completed']);
+
+export const NodeExecutionSchema = z.object({
+  id: z.string(),
+  nodeId: z.string(),
+  workflowExecId: z.string(),
+  status: ExecutionStatusEnum,
+  startedAt: z.string().or(z.date()),
+  completedAt: z.string().or(z.date()).nullable().optional(),
+  inputData: z.any().nullable().optional(),
+  outputData: z.any().nullable().optional(),
+  error: z.string().nullable().optional(),
+  retries: z.number().default(0),
+  isTest: z.boolean().default(false),
+  node: z.object({
+    id: z.string(),
+    name: z.string(),
+    config: z.any(),
+    AvailableNode: z.object({
+      id: z.string(),
+      name: z.string(),
+      type: z.string(),
+      description: z.string().optional(),
+      icon: z.string().optional(),
+    }).optional(),
+  }).optional(),
+});
+
+export const WorkflowExecutionSchema = z.object({
+  id: z.string(),
+  workflowId: z.string(),
+  status: ExecutionStatusEnum,
+  startAt: z.string().or(z.date()),
+  completedAt: z.string().or(z.date()).nullable().optional(),
+  error: z.string().nullable().optional(),
+  metadata: z.any().optional(),
+  nodeExecutions: z.array(NodeExecutionSchema).optional(),
+});
+
+export const WorkflowExecutionResponseSchema = z.object({
+  message: z.string(),
+  data: z.array(WorkflowExecutionSchema),
+});
+
 export enum statusCodes {
   OK = 200,
   CREATED = 201,
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index babf97c..2a424f4 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -119,6 +119,7 @@ model NodeExecution {
   outputData        Json?
   error             String?
   retries           Int               @default(0)
+  isTest            Boolean           @default(false)
   workflowExecId    String
   status            WorkflowStatus
   node              Node              @relation(fields: [nodeId], references: [id])