diff --git a/components/news.tsx b/components/news.tsx
index 30734a4..5070aae 100644
--- a/components/news.tsx
+++ b/components/news.tsx
@@ -106,16 +106,19 @@ export function News() {
               news.map((item) => (
                 <div
                   key={item.id}
-                  className="flex items-center justify-between p-1.5 hover:bg-gray-50 cursor-pointer"
+                  className="p-2 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100"
                   onClick={() => window.open(item.url, '_blank')}
                 >
-                  <div className="flex flex-col min-w-0">
-                    <h3 className="text-sm text-blue-600 truncate" title={item.title}>
+                  <div className="flex flex-col gap-1">
+                    <div className="flex items-center justify-between text-xs">
+                      <span className="text-gray-500">{formatDate(item.date)}</span>
+                    </div>
+                    <h3 className="text-sm font-medium text-gray-800 line-clamp-2" title={item.title}>
                       {item.title}
                     </h3>
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs text-gray-500">{formatDate(item.date)}</span>
-                    </div>
+                    <p className="text-xs text-gray-500 line-clamp-2" title={item.description}>
+                      {item.description}
+                    </p>
                   </div>
                 </div>
               ))