diff --git a/app/api/news/route.ts b/app/api/news/route.ts
index 57af065..bb8e73c 100644
--- a/app/api/news/route.ts
+++ b/app/api/news/route.ts
@@ -88,20 +88,20 @@ export async function GET() {
     console.log('Connected to PostgreSQL database');
 
     const result = await client.query(
-      'SELECT * FROM news ORDER BY date DESC LIMIT 5'
+      'SELECT * FROM news ORDER BY date DESC LIMIT 10'
     );
 
     const formattedNews = result.rows.map(article => {
       const { displayDate, timestamp } = formatDateTime(article.date);
       return {
         id: article.id,
-        title: truncateText(article.title, 100),
-        description: truncateText(article.description, 150),
+        title: truncateText(article.title, 70),
+        description: truncateText(article.description, 100),
         displayDate,
         timestamp,
         source: formatSource(article.source),
         category: formatCategory(article.category),
-        url: article.url || '#',
+        url: article.url || '#'
       };
     });
 
@@ -109,17 +109,14 @@ export async function GET() {
     return NextResponse.json(formattedNews);
 
   } catch (error) {
-    console.error('Error in news API:', {
+    console.error('Database error:', {
       error: error instanceof Error ? error.message : 'Unknown error',
-      stack: error instanceof Error ? error.stack : undefined,
-      timestamp: new Date().toISOString(),
     });
     
     return NextResponse.json(
       { 
         error: 'Failed to fetch news',
-        details: error instanceof Error ? error.message : 'Unknown error',
-        timestamp: new Date().toISOString(),
+        details: error instanceof Error ? error.message : 'Unknown error'
       },
       { status: 500 }
     );
diff --git a/components/news.tsx b/components/news.tsx
index 356c5d2..cbb7d8e 100644
--- a/components/news.tsx
+++ b/components/news.tsx
@@ -5,12 +5,13 @@ 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;
-  displayDate: string;
-  timestamp: string;
+  date: string;
   source: string;
   description: string | null;
   category: string | null;
@@ -52,11 +53,24 @@ 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 max-h-[32rem]">
-        <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>
+      <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>
         </CardHeader>
         <CardContent className="p-6">
           <div className="flex items-center justify-center">
@@ -68,9 +82,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 max-h-[32rem]">
-      <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>
+    <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>
         <Button
           variant="ghost"
           size="icon"
@@ -81,36 +95,36 @@ export function News() {
           <RefreshCw className="h-4 w-4" />
         </Button>
       </CardHeader>
-      <CardContent className="p-0 overflow-auto" style={{ height: 'calc(32rem - 57px)' }}>
+      <CardContent className="p-3">
         {error ? (
-          <p className="text-center text-red-500 p-4">{error}</p>
+          <p className="text-center text-red-500">{error}</p>
         ) : (
-          <div className="divide-y divide-gray-100">
+          <div className="space-y-2 max-h-[220px] overflow-y-auto">
             {news.length === 0 ? (
-              <p className="text-center text-gray-500 p-4">No news available</p>
+              <p className="text-center text-gray-500">No news available</p>
             ) : (
               news.map((item) => (
                 <div
                   key={item.id}
-                  className="px-4 py-3 hover:bg-gray-50 transition-colors cursor-pointer"
+                  className="p-2 hover:bg-gray-50/50 rounded-lg transition-colors cursor-pointer"
                   onClick={() => window.open(item.url, '_blank')}
                 >
-                  <h3 className="text-sm font-medium text-gray-900 line-clamp-2 mb-1.5">
-                    {item.title}
-                  </h3>
-                  {item.description && (
-                    <p className="text-sm text-gray-600 line-clamp-2 mb-2">
-                      {item.description}
-                    </p>
-                  )}
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-gray-500">{item.displayDate}</span>
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-sm text-gray-500">{formatDate(item.date)}</span>
                     {item.category && (
-                      <span className="text-sm font-medium text-blue-600">
+                      <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
                         {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>
               ))
             )}