diff --git a/components/news.tsx b/components/news.tsx
index a468684..356c5d2 100644
--- a/components/news.tsx
+++ b/components/news.tsx
@@ -54,7 +54,7 @@ export function News() {
 
   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-[calc(100vh-20rem)]">
+      <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>
         </CardHeader>
@@ -68,7 +68,7 @@ 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-[calc(100vh-20rem)]">
+    <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>
         <Button
@@ -81,7 +81,7 @@ export function News() {
           <RefreshCw className="h-4 w-4" />
         </Button>
       </CardHeader>
-      <CardContent className="p-0 overflow-auto" style={{ height: 'calc(100% - 57px)' }}>
+      <CardContent className="p-0 overflow-auto" style={{ height: 'calc(32rem - 57px)' }}>
         {error ? (
           <p className="text-center text-red-500 p-4">{error}</p>
         ) : (
@@ -92,28 +92,24 @@ export function News() {
               news.map((item) => (
                 <div
                   key={item.id}
-                  className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
+                  className="px-4 py-3 hover:bg-gray-50 transition-colors cursor-pointer"
                   onClick={() => window.open(item.url, '_blank')}
                 >
-                  <div className="flex items-start justify-between gap-x-2">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className="text-sm text-gray-500">{item.displayDate}</span>
-                        {item.category && (
-                          <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-0.5 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-900 line-clamp-2 mb-1">
-                        {item.title}
-                      </h3>
-                      {item.description && (
-                        <p className="text-sm text-gray-500 line-clamp-2">
-                          {item.description}
-                        </p>
-                      )}
-                    </div>
+                  <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>
+                    {item.category && (
+                      <span className="text-sm font-medium text-blue-600">
+                        {item.category}
+                      </span>
+                    )}
                   </div>
                 </div>
               ))