diff --git a/app/api/news/route.ts b/app/api/news/route.ts
index 18df599..51f6812 100644
--- a/app/api/news/route.ts
+++ b/app/api/news/route.ts
@@ -3,6 +3,16 @@ import { NextResponse } from 'next/server';
 // FastAPI server configuration
 const API_URL = 'http://172.16.0.104:8000';
 
+// Helper function to clean HTML content
+function cleanHtmlContent(text: string): string {
+  if (!text) return '';
+  return text
+    .replace(/<[^>]*>/g, '') // Remove HTML tags
+    .replace(/&nbsp;/g, ' ') // Replace &nbsp; with space
+    .replace(/\s+/g, ' ') // Replace multiple spaces with single space
+    .trim();
+}
+
 // Helper function to format time
 function formatDateTime(dateStr: string): { displayDate: string, timestamp: string } {
   try {
@@ -31,15 +41,18 @@ function formatDateTime(dateStr: string): { displayDate: string, timestamp: stri
 
 // Helper function to truncate text
 function truncateText(text: string, maxLength: number): string {
-  if (!text || text.length <= maxLength) return text;
-  const lastSpace = text.lastIndexOf(' ', maxLength);
-  const truncated = text.substring(0, lastSpace > 0 ? lastSpace : maxLength).trim();
+  if (!text) return '';
+  const cleaned = cleanHtmlContent(text);
+  if (cleaned.length <= maxLength) return cleaned;
+  
+  const lastSpace = cleaned.lastIndexOf(' ', maxLength);
+  const truncated = cleaned.substring(0, lastSpace > 0 ? lastSpace : maxLength).trim();
   return truncated.replace(/[.,!?]$/, '') + '...';
 }
 
 // Helper function to format category
-function formatCategory(category: string): string {
-  if (!category) return null; // Return null to match the interface
+function formatCategory(category: string): string | null {
+  if (!category) return null;
   const categoryMap: { [key: string]: string } = {
     'GLOBAL ISSUES - WORLD AFFAIRS': 'WORLD',
     'UN NEWS - GLOBAL NEWS': 'UN NEWS',
@@ -94,8 +107,8 @@ export async function GET() {
       const { displayDate, timestamp } = formatDateTime(article.date);
       return {
         id: article.id,
-        title: truncateText(article.title, 70),
-        description: article.description ? truncateText(article.description, 100) : null,
+        title: truncateText(article.title, 100), // Increased length for better titles
+        description: article.description ? truncateText(article.description, 150) : null, // Increased length for better descriptions
         displayDate,
         timestamp,
         source: formatSource(article.source),
diff --git a/components/news.tsx b/components/news.tsx
index cbb7d8e..39b9ad4 100644
--- a/components/news.tsx
+++ b/components/news.tsx
@@ -99,29 +99,29 @@ export function News() {
         {error ? (
           <p className="text-center text-red-500">{error}</p>
         ) : (
-          <div className="space-y-2 max-h-[220px] overflow-y-auto">
+          <div className="space-y-2 max-h-[220px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
             {news.length === 0 ? (
               <p className="text-center text-gray-500">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-2 hover:bg-gray-50/50 rounded-lg transition-colors cursor-pointer border border-gray-100 shadow-sm"
                   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>
+                    <span className="text-xs text-gray-500">{formatDate(item.date)}</span>
                     {item.category && (
                       <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}>
+                  <h3 className="text-sm font-medium text-gray-800 mb-1 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}>
+                    <p className="text-xs text-gray-500 line-clamp-2" title={item.description}>
                       {item.description}
                     </p>
                   )}