diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d3daad7..8c20bcf 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Dashboard } from '@/components/dashboard/Dashboard';
 import { PromptActivity } from '@/components/prompts/PromptActivity';
+import { TaskFlowDemo } from '@/components/taskflow/TaskFlowDemo';
 import { Login } from '@/components/auth/Login';
 import { AuthGuard } from '@/components/auth/AuthGuard';
 
@@ -36,6 +37,14 @@ function App() {
               </AuthGuard>
             } 
           />
+          <Route 
+            path="/taskflow" 
+            element={
+              <AuthGuard fallback={<Login />}>
+                <TaskFlowDemo />
+              </AuthGuard>
+            } 
+          />
         </Routes>
       </Router>
     </QueryClientProvider>
diff --git a/frontend/src/components/dashboard/Dashboard.tsx b/frontend/src/components/dashboard/Dashboard.tsx
index 22bc0e3..db9077b 100644
--- a/frontend/src/components/dashboard/Dashboard.tsx
+++ b/frontend/src/components/dashboard/Dashboard.tsx
@@ -1,14 +1,41 @@
 import { Layout } from '@/components/layout/Layout';
 import { PromptsList } from '@/components/prompts/PromptsList';
 import { ConnectionsList } from '@/components/connections/ConnectionsList';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
 import { useAuth } from '@/hooks/useAuth';
+import { useNavigate } from 'react-router-dom';
+import { Workflow } from 'lucide-react';
 
 export function Dashboard() {
   const { data: user } = useAuth();
+  const navigate = useNavigate();
+
+  const handleTaskFlowDemo = () => {
+    navigate('/taskflow');
+  };
 
   return (
     <Layout user={user}>
       <div className="space-y-8">
+        {/* Quick Actions */}
+        <Card>
+          <CardHeader>
+            <CardTitle>🚀 Quick Actions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex gap-4">
+              <Button 
+                onClick={handleTaskFlowDemo}
+                className="flex items-center gap-2"
+              >
+                <Workflow className="h-4 w-4" />
+                View TaskFlow Demo
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
         <PromptsList />
         <ConnectionsList />
       </div>
diff --git a/frontend/src/components/taskflow/TaskFlow.tsx b/frontend/src/components/taskflow/TaskFlow.tsx
new file mode 100644
index 0000000..f9c763f
--- /dev/null
+++ b/frontend/src/components/taskflow/TaskFlow.tsx
@@ -0,0 +1,222 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { 
+  CheckCircle, 
+  XCircle, 
+  Loader2, 
+  Clock, 
+  Play,
+  Pause
+} from 'lucide-react';
+import { useState } from 'react';
+
+export interface TaskStep {
+  id: string;
+  title: string;
+  description?: string;
+  status: 'pending' | 'running' | 'completed' | 'error' | 'paused';
+  duration?: number;
+  startTime?: string;
+  endTime?: string;
+  output?: string;
+  dependencies?: string[];
+}
+
+export interface TaskFlowProps {
+  title: string;
+  description?: string;
+  steps: TaskStep[];
+  onStepAction?: (stepId: string, action: 'run' | 'pause' | 'retry') => void;
+  onFlowAction?: (action: 'start' | 'pause' | 'stop' | 'retry') => void;
+  isRunning?: boolean;
+  className?: string;
+}
+
+export function TaskFlow({ 
+  title, 
+  description, 
+  steps, 
+  onStepAction,
+  onFlowAction,
+  isRunning = false,
+  className = ""
+}: TaskFlowProps) {
+  const [expandedStep, setExpandedStep] = useState<string | null>(null);
+
+  const getStatusIcon = (status: TaskStep['status']) => {
+    switch (status) {
+      case 'completed':
+        return <CheckCircle className="h-5 w-5 text-green-600" />;
+      case 'error':
+        return <XCircle className="h-5 w-5 text-red-600" />;
+      case 'running':
+        return <Loader2 className="h-5 w-5 animate-spin text-blue-600" />;
+      case 'paused':
+        return <Pause className="h-5 w-5 text-yellow-600" />;
+      default:
+        return <Clock className="h-5 w-5 text-gray-400" />;
+    }
+  };
+
+  const getStatusBadgeVariant = (status: TaskStep['status']) => {
+    switch (status) {
+      case 'completed':
+        return 'default';
+      case 'error':
+        return 'destructive';
+      case 'running':
+        return 'secondary';
+      case 'paused':
+        return 'secondary';
+      default:
+        return 'outline';
+    }
+  };
+
+  const getOverallStatus = () => {
+    if (steps.some(step => step.status === 'error')) return 'error';
+    if (steps.some(step => step.status === 'running')) return 'running';
+    if (steps.some(step => step.status === 'paused')) return 'paused';
+    if (steps.every(step => step.status === 'completed')) return 'completed';
+    return 'pending';
+  };
+
+  const getCompletedSteps = () => steps.filter(step => step.status === 'completed').length;
+  const totalSteps = steps.length;
+  const progressPercentage = totalSteps > 0 ? (getCompletedSteps() / totalSteps) * 100 : 0;
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              🔄 {title}
+              <Badge variant={getStatusBadgeVariant(getOverallStatus())}>
+                {getOverallStatus()}
+              </Badge>
+            </CardTitle>
+            {description && (
+              <p className="text-sm text-muted-foreground mt-1">{description}</p>
+            )}
+            <div className="flex items-center gap-4 mt-2">
+              <span className="text-sm text-muted-foreground">
+                Progress: {getCompletedSteps()}/{totalSteps} steps
+              </span>
+              <div className="flex-1 bg-gray-200 rounded-full h-2 max-w-xs">
+                <div 
+                  className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                  style={{ width: `${progressPercentage}%` }}
+                />
+              </div>
+            </div>
+          </div>
+          {onFlowAction && (
+            <div className="flex gap-2">
+              {!isRunning ? (
+                <Button 
+                  size="sm" 
+                  onClick={() => onFlowAction('start')}
+                  className="flex items-center gap-1"
+                >
+                  <Play className="h-4 w-4" />
+                  Start
+                </Button>
+              ) : (
+                <Button 
+                  size="sm" 
+                  variant="outline"
+                  onClick={() => onFlowAction('pause')}
+                  className="flex items-center gap-1"
+                >
+                  <Pause className="h-4 w-4" />
+                  Pause
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {steps.map((step, index) => (
+            <div key={step.id} className="relative">
+              {/* Connection line */}
+              {index < steps.length - 1 && (
+                <div className="absolute left-6 top-12 w-0.5 h-8 bg-gray-200" />
+              )}
+              
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0 mt-1">
+                  {getStatusIcon(step.status)}
+                </div>
+                
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-medium">{step.title}</h3>
+                      <Badge variant={getStatusBadgeVariant(step.status)}>
+                        {step.status}
+                      </Badge>
+                    </div>
+                    
+                    <div className="flex items-center gap-2">
+                      {step.duration && (
+                        <span className="text-xs text-muted-foreground">
+                          {step.duration}ms
+                        </span>
+                      )}
+                      {onStepAction && step.status === 'error' && (
+                        <Button 
+                          size="sm" 
+                          variant="outline"
+                          onClick={() => onStepAction(step.id, 'retry')}
+                        >
+                          Retry
+                        </Button>
+                      )}
+                      {step.output && (
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => setExpandedStep(
+                            expandedStep === step.id ? null : step.id
+                          )}
+                        >
+                          {expandedStep === step.id ? 'Hide' : 'Show'} Details
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                  
+                  {step.description && (
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {step.description}
+                    </p>
+                  )}
+                  
+                  {step.startTime && (
+                    <div className="flex items-center gap-4 mt-1 text-xs text-muted-foreground">
+                      <span>Started: {new Date(step.startTime).toLocaleTimeString()}</span>
+                      {step.endTime && (
+                        <span>Ended: {new Date(step.endTime).toLocaleTimeString()}</span>
+                      )}
+                    </div>
+                  )}
+                  
+                  {expandedStep === step.id && step.output && (
+                    <div className="mt-3 p-3 bg-muted rounded-lg">
+                      <h4 className="text-sm font-medium mb-2">Output:</h4>
+                      <pre className="text-xs whitespace-pre-wrap">{step.output}</pre>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/taskflow/TaskFlowDemo.tsx b/frontend/src/components/taskflow/TaskFlowDemo.tsx
new file mode 100644
index 0000000..5ad8daf
--- /dev/null
+++ b/frontend/src/components/taskflow/TaskFlowDemo.tsx
@@ -0,0 +1,150 @@
+import { Layout } from '@/components/layout/Layout';
+import { TaskFlow } from '@/components/taskflow';
+import type { TaskStep } from '@/components/taskflow';
+import { useDashboardData } from '@/hooks/api';
+import { useState } from 'react';
+
+export function TaskFlowDemo() {
+  const { data: dashboardData } = useDashboardData();
+  const [isRunning, setIsRunning] = useState(false);
+  const [steps, setSteps] = useState<TaskStep[]>([
+    {
+      id: 'step-1',
+      title: 'Initialize Repository',
+      description: 'Clone the repository and set up the workspace',
+      status: 'completed',
+      duration: 1200,
+      startTime: '2024-01-15T10:00:00Z',
+      endTime: '2024-01-15T10:00:01Z',
+      output: 'Repository cloned successfully to /workspace/project'
+    },
+    {
+      id: 'step-2',
+      title: 'Analyze Code Structure',
+      description: 'Scan codebase and identify patterns',
+      status: 'completed',
+      duration: 3400,
+      startTime: '2024-01-15T10:00:02Z',
+      endTime: '2024-01-15T10:00:05Z',
+      output: 'Found 24 files, 3 main modules, TypeScript project with React frontend'
+    },
+    {
+      id: 'step-3',
+      title: 'Generate Implementation Plan',
+      description: 'Create detailed plan for the requested changes',
+      status: 'running',
+      startTime: '2024-01-15T10:00:06Z'
+    },
+    {
+      id: 'step-4',
+      title: 'Implement Changes',
+      description: 'Apply the necessary code modifications',
+      status: 'pending',
+      dependencies: ['step-3']
+    },
+    {
+      id: 'step-5',
+      title: 'Run Tests',
+      description: 'Execute test suite to verify changes',
+      status: 'pending',
+      dependencies: ['step-4']
+    },
+    {
+      id: 'step-6',
+      title: 'Create Pull Request',
+      description: 'Commit changes and create PR',
+      status: 'pending',
+      dependencies: ['step-5']
+    }
+  ]);
+
+  const handleStepAction = (stepId: string, action: string) => {
+    console.log(`Step action: ${action} on step ${stepId}`);
+    if (action === 'retry') {
+      setSteps(prevSteps => 
+        prevSteps.map(step => 
+          step.id === stepId 
+            ? { ...step, status: 'pending' as const }
+            : step
+        )
+      );
+    }
+  };
+
+  const handleFlowAction = (action: string) => {
+    console.log(`Flow action: ${action}`);
+    setIsRunning(action === 'start');
+    
+    if (action === 'start') {
+      // Simulate workflow progression
+      setTimeout(() => {
+        setSteps(prevSteps => 
+          prevSteps.map(step => 
+            step.id === 'step-3'
+              ? { 
+                  ...step, 
+                  status: 'completed' as const,
+                  endTime: new Date().toISOString(),
+                  duration: 2100,
+                  output: 'Implementation plan generated:\n1. Create TaskFlow component\n2. Add routing\n3. Update tests'
+                }
+              : step.id === 'step-4'
+              ? { ...step, status: 'running' as const, startTime: new Date().toISOString() }
+              : step
+          )
+        );
+      }, 2000);
+    }
+  };
+
+  return (
+    <Layout user={dashboardData?.user}>
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold">🔄 TaskFlow Demo</h1>
+          <p className="text-muted-foreground mt-2">
+            Interactive demonstration of the TaskFlow component for visualizing AI agent workflows
+          </p>
+        </div>
+
+        <TaskFlow
+          title="AI Code Implementation Workflow"
+          description="Automated workflow for implementing the requested TaskFlow component"
+          steps={steps}
+          onStepAction={handleStepAction}
+          onFlowAction={handleFlowAction}
+          isRunning={isRunning}
+        />
+
+        <TaskFlow
+          title="Jira Issue Creation Workflow"
+          description="Sample workflow showing Jira integration steps"
+          steps={[
+            {
+              id: 'jira-1',
+              title: 'Authenticate with Jira',
+              description: 'Verify credentials and establish connection',
+              status: 'completed',
+              duration: 800
+            },
+            {
+              id: 'jira-2', 
+              title: 'Validate Project',
+              description: 'Check if project key exists and user has permissions',
+              status: 'completed',
+              duration: 450
+            },
+            {
+              id: 'jira-3',
+              title: 'Create Issue',
+              description: 'Submit new issue with provided details',
+              status: 'error',
+              output: 'Error: Field "Epic Link" is required but not provided'
+            }
+          ]}
+          onStepAction={handleStepAction}
+        />
+      </div>
+    </Layout>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/taskflow/index.ts b/frontend/src/components/taskflow/index.ts
new file mode 100644
index 0000000..243bed8
--- /dev/null
+++ b/frontend/src/components/taskflow/index.ts
@@ -0,0 +1,2 @@
+export { TaskFlow } from './TaskFlow';
+export type { TaskStep, TaskFlowProps } from './TaskFlow';
\ No newline at end of file