diff --git a/components/flow.tsx b/components/flow.tsx
index 737e90f2..4a6b2a42 100644
--- a/components/flow.tsx
+++ b/components/flow.tsx
@@ -3,7 +3,8 @@
 import { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { RefreshCw } from "lucide-react";
+import { RefreshCw, Folder } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 
 interface Task {
   id: number;
@@ -130,57 +131,54 @@ export function Flow() {
   }, []);
 
   return (
-    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
+    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/50 backdrop-blur-sm">
       <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <CardTitle className="text-lg font-medium">My ToDos</CardTitle>
-        <Button
-          variant="ghost"
-          size="icon"
+        <CardTitle className="text-xl font-bold">Flow</CardTitle>
+        <Button 
+          variant="ghost" 
+          size="icon" 
           onClick={() => fetchTasks(true)}
-          disabled={refreshing}
-          className={refreshing ? 'animate-spin' : ''}
+          className="h-8 w-8 p-0 hover:bg-gray-100 rounded-full"
         >
           <RefreshCw className="h-4 w-4" />
         </Button>
       </CardHeader>
-      <CardContent>
+      <CardContent className="space-y-4">
         {loading ? (
           <div className="flex items-center justify-center py-4">
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
           </div>
         ) : error ? (
-          <div className="text-center text-sm text-red-500">{error}</div>
+          <div className="text-sm text-red-500">{error}</div>
         ) : tasks.length === 0 ? (
-          <div className="text-center text-sm text-gray-500">No tasks assigned to you</div>
+          <div className="text-sm text-muted-foreground text-center">No tasks found</div>
         ) : (
-          <div className="space-y-2">
+          <div className="space-y-3">
             {tasks.map((task) => (
               <div 
-                key={task.id} 
-                className="p-3 rounded-lg bg-white/50 backdrop-blur-sm hover:bg-white/60 transition-colors border border-gray-200"
+                key={task.id}
+                className="p-4 rounded-lg border border-gray-100 hover:border-gray-200 transition-all duration-200 bg-white/70"
               >
-                <div className="flex items-start gap-3">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <h3 className="text-sm font-medium text-blue-600 hover:text-blue-800 truncate" title={task.headline}>
-                        {task.headline}
-                      </h3>
-                      <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusColor(task.status)} text-white`}>
-                        {getStatusLabel(task.status)}
-                      </span>
-                    </div>
-                    <div className="mt-1 flex items-center gap-2 text-xs text-gray-500">
-                      {task.projectName && (
-                        <span className="inline-flex items-center">
-                          <span className="mr-1">📁</span> {task.projectName}
-                        </span>
-                      )}
-                      {task.dateToFinish && task.dateToFinish !== '0000-00-00 00:00:00' && (
-                        <span className="inline-flex items-center">
-                          <span className="mr-1">📅</span> {formatDate(task.dateToFinish)}
-                        </span>
-                      )}
+                <div className="space-y-2.5">
+                  <a 
+                    href={`https://agilite.slm-lab.net/tickets/showTicket/${task.id}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:text-blue-700 font-medium block text-base"
+                  >
+                    {task.headline}
+                  </a>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center text-gray-500">
+                      <Folder className="h-4 w-4 mr-1.5 opacity-70" />
+                      <span className="text-sm font-medium">{task.projectName}</span>
                     </div>
+                    <Badge 
+                      variant="secondary" 
+                      className="text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200"
+                    >
+                      Unknown
+                    </Badge>
                   </div>
                 </div>
               </div>