diff --git a/components/news.tsx b/components/news.tsx
index cbb7d8e..006fa43 100644
--- a/components/news.tsx
+++ b/components/news.tsx
@@ -5,13 +5,12 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { RefreshCw } from "lucide-react";
 import { useSession } from "next-auth/react";
-import { formatDistance } from 'date-fns';
-import { fr } from 'date-fns/locale';
 
 interface NewsItem {
   id: number;
   title: string;
-  date: string;
+  displayDate: string;
+  timestamp: string;
   source: string;
   description: string | null;
   category: string | null;
@@ -53,24 +52,11 @@ export function News() {
     }
   }, [status]);
 
-  const formatDate = (dateString: string) => {
-    try {
-      const date = new Date(dateString);
-      return formatDistance(date, new Date(), {
-        addSuffix: true,
-        locale: fr
-      });
-    } catch (err) {
-      console.error('Error formatting date:', err);
-      return dateString;
-    }
-  };
-
   if (status === 'loading' || loading) {
     return (
-      <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
-        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
-          <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
+      <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
+        <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0 border-b border-gray-100">
+          <CardTitle className="text-xl font-bold">News</CardTitle>
         </CardHeader>
         <CardContent className="p-6">
           <div className="flex items-center justify-center">
@@ -82,9 +68,9 @@ export function News() {
   }
 
   return (
-    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
-      <CardHeader className="flex flex-row items-center justify-between pb-2 space-x-4 border-b border-gray-100">
-        <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
+    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
+      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0 border-b border-gray-100">
+        <CardTitle className="text-xl font-bold">News</CardTitle>
         <Button
           variant="ghost"
           size="icon"
@@ -95,36 +81,46 @@ export function News() {
           <RefreshCw className="h-4 w-4" />
         </Button>
       </CardHeader>
-      <CardContent className="p-3">
+      <CardContent className="p-0">
         {error ? (
-          <p className="text-center text-red-500">{error}</p>
+          <p className="text-center text-red-500 p-4">{error}</p>
         ) : (
-          <div className="space-y-2 max-h-[220px] overflow-y-auto">
+          <div className="divide-y divide-gray-100">
             {news.length === 0 ? (
-              <p className="text-center text-gray-500">No news available</p>
+              <p className="text-center text-gray-500 p-4">No news available</p>
             ) : (
               news.map((item) => (
                 <div
                   key={item.id}
-                  className="p-2 hover:bg-gray-50/50 rounded-lg transition-colors cursor-pointer"
+                  className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
                   onClick={() => window.open(item.url, '_blank')}
                 >
-                  <div className="flex items-center justify-between mb-1">
-                    <span className="text-sm text-gray-500">{formatDate(item.date)}</span>
+                  <div className="flex items-start justify-between gap-x-2 mb-1">
+                    <div className="flex-1">
+                      <h3 className="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
+                        {item.title}
+                      </h3>
+                      {item.description && (
+                        <p className="text-sm text-gray-500 line-clamp-2 mb-2">
+                          {item.description}
+                        </p>
+                      )}
+                      <div className="flex items-center gap-x-2 text-xs text-gray-500">
+                        <span>{item.displayDate}</span>
+                        {item.source && (
+                          <>
+                            <span>•</span>
+                            <span className="text-gray-400">{item.source}</span>
+                          </>
+                        )}
+                      </div>
+                    </div>
                     {item.category && (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
+                      <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 whitespace-nowrap">
                         {item.category}
                       </span>
                     )}
                   </div>
-                  <h3 className="text-sm font-medium text-gray-800 line-clamp-2" title={item.title}>
-                    {item.title}
-                  </h3>
-                  {item.description && (
-                    <p className="text-xs text-gray-500 mt-1 line-clamp-2" title={item.description}>
-                      {item.description}
-                    </p>
-                  )}
                 </div>
               ))
             )}