diff --git a/components/flow.tsx b/components/flow.tsx
index 5c402f19..5570923b 100644
--- a/components/flow.tsx
+++ b/components/flow.tsx
@@ -9,11 +9,9 @@ interface Task {
   id: string;
   headline: string;
   projectName: string;
-  projectId: number;
   status: string;
   dueDate: string | null;
   milestone: string | null;
-  details: string | null;
 }
 
 export function Flow() {
@@ -44,27 +42,7 @@ export function Flow() {
 
       const data = await response.json();
       if (data.tasks && Array.isArray(data.tasks)) {
-        // Sort tasks by due date (overdue first)
-        const sortedTasks = data.tasks.sort((a: Task, b: Task) => {
-          // If a task has no due date, put it at the end
-          if (!a.dueDate) return 1;
-          if (!b.dueDate) return -1;
-          
-          const dateA = new Date(a.dueDate);
-          const dateB = new Date(b.dueDate);
-          const now = new Date();
-          
-          // If one task is overdue and the other isn't, put overdue first
-          const aOverdue = dateA < now;
-          const bOverdue = dateB < now;
-          if (aOverdue && !bOverdue) return -1;
-          if (!aOverdue && bOverdue) return 1;
-          
-          // Otherwise sort by due date
-          return dateA.getTime() - dateB.getTime();
-        });
-        
-        setTasks(sortedTasks);
+        setTasks(data.tasks);
       } else {
         setTasks([]);
       }
@@ -93,10 +71,8 @@ export function Flow() {
         return 'bg-blue-100 text-blue-800';
       case 'in_progress':
         return 'bg-yellow-100 text-yellow-800';
-      case 'completed':
+      case 'done':
         return 'bg-green-100 text-green-800';
-      case 'overdue':
-        return 'bg-red-100 text-red-800';
       default:
         return 'bg-gray-100 text-gray-800';
     }
@@ -112,15 +88,6 @@ export function Flow() {
     });
   };
 
-  // Group tasks by project, maintaining the sorted order
-  const tasksByProject = tasks.reduce((acc, task) => {
-    if (!acc[task.projectName]) {
-      acc[task.projectName] = [];
-    }
-    acc[task.projectName].push(task);
-    return acc;
-  }, {} as Record<string, Task[]>);
-
   return (
     <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
       <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -145,34 +112,32 @@ export function Flow() {
         ) : tasks.length === 0 ? (
           <div className="text-center text-sm text-gray-500">No tasks found</div>
         ) : (
-          <div className="space-y-4">
-            {Object.entries(tasksByProject).map(([projectName, projectTasks]) => (
-              <div key={projectName} className="space-y-2">
-                <h3 className="font-medium text-sm text-gray-700">{projectName}</h3>
-                <div className="space-y-3">
-                  {projectTasks.map((task) => {
-                    const dueDate = task.dueDate ? new Date(task.dueDate) : null;
-                    const isOverdue = dueDate && dueDate < new Date();
-                    
-                    return (
-                      <div key={task.id} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
-                        <div className="flex-1">
-                          <div className="font-medium text-gray-900">{task.headline}</div>
-                          {task.milestone && (
-                            <div className="text-xs text-gray-500 mt-1">
-                              {task.milestone}
-                            </div>
-                          )}
-                          <div className="text-xs text-gray-500 mt-1">
-                            {formatDate(task.dueDate)}
-                          </div>
-                        </div>
-                        <div className={`ml-4 px-2 py-1 rounded text-xs ${getStatusClass(isOverdue ? 'overdue' : task.status)}`}>
-                          {isOverdue ? 'OVERDUE' : task.status.toUpperCase()}
-                        </div>
+          <div className="space-y-6">
+            {tasks.map((task) => (
+              <div key={task.id} className="border rounded-lg p-4 bg-white shadow-sm">
+                <div className="flex items-start justify-between">
+                  <div className="space-y-1">
+                    <div className="text-sm font-medium text-gray-600">{task.projectName}</div>
+                    <div className="text-base font-medium text-blue-600 hover:text-blue-800">
+                      {task.headline}
+                    </div>
+                    <div className="flex items-center space-x-3 text-sm text-gray-500">
+                      <div className="flex items-center space-x-1">
+                        <span className="w-4 h-4">🗓️</span>
+                        <span>{formatDate(task.dueDate)}</span>
                       </div>
-                    );
-                  })}
+                      {task.milestone && (
+                        <div className="flex items-center space-x-1">
+                          <span className="px-2 py-1 rounded-full bg-gray-100">
+                            {task.milestone}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusClass(task.status)}`}>
+                    {task.status.toUpperCase()}
+                  </div>
                 </div>
               </div>
             ))}