diff --git a/components/observatory/observatory-map.tsx b/components/observatory/observatory-map.tsx
index 487ee70f..19ef4339 100644
--- a/components/observatory/observatory-map.tsx
+++ b/components/observatory/observatory-map.tsx
@@ -47,15 +47,15 @@ export function ObservatoryMap({
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     
     // Draw world map background (simplified)
-    ctx.fillStyle = '#e0e0e0';
+    ctx.fillStyle = '#f5f5f5';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     
     // Draw grid lines for better visualization
-    ctx.strokeStyle = '#ffffff';
-    ctx.lineWidth = 0.5;
+    ctx.strokeStyle = '#e5e5e5';
+    ctx.lineWidth = 1;
     
     // Horizontal grid lines
-    for (let y = 0; y < canvas.height; y += 30) {
+    for (let y = 0; y < canvas.height; y += 40) {
       ctx.beginPath();
       ctx.moveTo(0, y);
       ctx.lineTo(canvas.width, y);
@@ -63,7 +63,7 @@ export function ObservatoryMap({
     }
     
     // Vertical grid lines
-    for (let x = 0; x < canvas.width; x += 30) {
+    for (let x = 0; x < canvas.width; x += 40) {
       ctx.beginPath();
       ctx.moveTo(x, 0);
       ctx.lineTo(x, canvas.height);
@@ -73,26 +73,30 @@ export function ObservatoryMap({
     // Draw country markers (in random positions)
     countries.forEach((country, index) => {
       // Generate random positions (in a real app, we would use actual coordinates)
-      const x = (index * 50 + 100) % (canvas.width - 50);
-      const y = 50 + Math.floor(index / 5) * 50;
+      const x = (index * 60 + 100) % (canvas.width - 80);
+      const y = 60 + Math.floor(index / 4) * 70;
       
       // Draw marker
       ctx.beginPath();
-      ctx.arc(x, y, country.count > 5 ? 10 : (country.count > 2 ? 7 : 5), 0, Math.PI * 2);
+      ctx.arc(x, y, country.count > 5 ? 8 : (country.count > 2 ? 6 : 4), 0, Math.PI * 2);
       
       // Highlight selected country
       if (selectedCountry === country.name) {
         ctx.fillStyle = '#3b82f6';
+        ctx.strokeStyle = '#2563eb';
       } else {
-        ctx.fillStyle = '#ef4444';
+        ctx.fillStyle = '#f87171';
+        ctx.strokeStyle = '#ef4444';
       }
       
       ctx.fill();
+      ctx.lineWidth = 1;
+      ctx.stroke();
       
       // Draw country name
-      ctx.fillStyle = '#000000';
-      ctx.font = '12px Arial';
-      ctx.fillText(country.name, x + 12, y + 4);
+      ctx.fillStyle = '#374151';
+      ctx.font = '12px Inter, system-ui, sans-serif';
+      ctx.fillText(country.name, x + 14, y + 4);
       
       // Store coordinates for click detection
       country.x = x;
@@ -130,14 +134,14 @@ export function ObservatoryMap({
   }, [countries, selectedCountry, onCountrySelect]);
   
   return (
-    <div className="w-full h-full bg-gray-100 rounded-lg relative">
+    <div className="w-full h-full bg-gray-50 relative">
       <canvas 
         ref={canvasRef} 
-        className="w-full h-full rounded-lg"
+        className="w-full h-full"
       />
       {countries.length === 0 && (
         <div className="absolute inset-0 flex items-center justify-center">
-          <p className="text-gray-500">No countries detected in the news</p>
+          <p className="text-gray-400 text-center">No countries detected in the news</p>
         </div>
       )}
     </div>
diff --git a/components/observatory/observatory-view.tsx b/components/observatory/observatory-view.tsx
index ebe3d8be..3c668890 100644
--- a/components/observatory/observatory-view.tsx
+++ b/components/observatory/observatory-view.tsx
@@ -56,7 +56,8 @@ export function ObservatoryView() {
     // In a real app, we would use NLP or a more sophisticated technique
     const countries = [
       'France', 'USA', 'Canada', 'UK', 'Germany', 'Japan', 'China', 
-      'India', 'Brazil', 'Australia', 'Russia', 'Italy', 'Spain'
+      'India', 'Brazil', 'Australia', 'Russia', 'Italy', 'Spain',
+      'Sudan', 'New York', 'United Nations'
     ];
     
     const result: Record<string, NewsItem[]> = {};
@@ -115,118 +116,112 @@ export function ObservatoryView() {
   const countries = Object.keys(countriesMap);
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="flex flex-col space-y-6">
-        <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg">
-          <CardHeader className="pb-2 border-b border-gray-100">
-            <div className="flex justify-between items-center">
-              <CardTitle className="text-2xl font-semibold text-gray-800 flex items-center gap-2">
-                <Globe className="h-6 w-6 text-gray-600" />
-                News Observatory
-              </CardTitle>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={fetchNews}
-                className="h-8 px-2 rounded-full"
-              >
-                <RefreshCw className="h-4 w-4 mr-2" />
-                Refresh
-              </Button>
-            </div>
-          </CardHeader>
-        </Card>
+    <div className="container mx-auto px-4 py-2">
+      {/* Header */}
+      <div className="flex items-center justify-between bg-white rounded-lg shadow px-4 py-3 mb-4">
+        <h1 className="text-xl font-medium flex items-center gap-2">
+          <Globe className="h-5 w-5 text-gray-600" />
+          News Observatory
+        </h1>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={fetchNews}
+          className="flex items-center"
+        >
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* News Feed Section */}
-          <div className="lg:col-span-2">
-            <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
-              <CardHeader className="pb-2 border-b border-gray-100">
-                <CardTitle className="text-lg font-semibold text-gray-800">
-                  {selectedCountry ? `News about ${selectedCountry}` : 'Latest News'}
-                  <span className="text-sm font-normal ml-2 text-gray-500">
-                    ({filteredNews.length} articles)
-                  </span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="p-4">
-                <div className="space-y-4 max-h-[calc(100vh-20rem)] overflow-y-auto pr-2">
-                  {filteredNews.length === 0 ? (
-                    <p className="text-gray-500 text-center py-10">No news available</p>
-                  ) : (
-                    filteredNews.map(item => (
+      {/* Main Content */}
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
+        {/* News Feed Section - Narrower */}
+        <div className="lg:col-span-2">
+          <Card className="bg-white shadow border-0 rounded-lg overflow-hidden">
+            <CardHeader className="px-4 py-3 border-b border-gray-100 bg-white">
+              <CardTitle className="text-lg font-medium">
+                {selectedCountry ? `News about ${selectedCountry}` : 'Latest News'}
+                <span className="text-sm font-normal ml-2 text-gray-500">
+                  ({filteredNews.length} articles)
+                </span>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
+                {filteredNews.length === 0 ? (
+                  <p className="text-gray-500 text-center py-10">No news available</p>
+                ) : (
+                  <div className="divide-y divide-gray-100">
+                    {filteredNews.map(item => (
                       <div
                         key={item.id}
-                        className="p-4 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200"
+                        className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
                         onClick={() => window.open(item.url, '_blank')}
                       >
-                        <div className="flex flex-col gap-1">
-                          <div className="flex items-center justify-between text-xs">
-                            <span className="text-gray-500">{item.displayDate}</span>
-                            <span className="text-gray-500">{item.source}</span>
-                          </div>
-                          <h3 className="text-md font-medium text-gray-800" title={item.title}>
-                            {item.title}
-                          </h3>
-                          <p className="text-sm text-gray-600 mt-1">
-                            {item.description}
-                          </p>
+                        <div className="flex items-center justify-between text-xs text-gray-500 mb-1">
+                          <span>{item.displayDate}</span>
+                          <span>{item.source}</span>
                         </div>
+                        <h3 className="text-base font-medium text-gray-800 mb-1">
+                          {item.title}
+                        </h3>
+                        <p className="text-sm text-gray-600 line-clamp-2">
+                          {item.description}
+                        </p>
                       </div>
-                    ))
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
 
-          {/* Map Section */}
-          <div className="lg:col-span-1">
-            <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
-              <CardHeader className="pb-2 border-b border-gray-100">
-                <CardTitle className="text-lg font-semibold text-gray-800">
-                  World Map
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="p-4">
-                {/* Map Placeholder */}
-                <div 
-                  className="bg-gray-100 rounded-lg h-[300px] mb-4"
-                >
-                  <ObservatoryMap 
-                    countries={Object.entries(countriesMap).map(([name, items]) => ({
-                      name,
-                      count: items.length
-                    }))}
-                    onCountrySelect={handleCountrySelect}
-                    selectedCountry={selectedCountry}
-                  />
-                </div>
+        {/* Map Section - Wider */}
+        <div className="lg:col-span-3">
+          <Card className="bg-white shadow border-0 rounded-lg overflow-hidden">
+            <CardHeader className="px-4 py-3 border-b border-gray-100 bg-white">
+              <CardTitle className="text-lg font-medium">
+                World Map
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              {/* Map Container */}
+              <div className="h-[500px]">
+                <ObservatoryMap 
+                  countries={Object.entries(countriesMap).map(([name, items]) => ({
+                    name,
+                    count: items.length
+                  }))}
+                  onCountrySelect={handleCountrySelect}
+                  selectedCountry={selectedCountry}
+                />
+              </div>
 
-                {/* Countries List */}
-                <div className="mt-4">
-                  <h4 className="text-md font-medium mb-2">Mentioned Countries:</h4>
-                  {countries.length === 0 ? (
-                    <p className="text-gray-500">No countries detected</p>
-                  ) : (
-                    <div className="flex flex-wrap gap-2">
-                      {countries.map(country => (
-                        <Button
-                          key={country}
-                          variant={selectedCountry === country ? "default" : "outline"}
-                          size="sm"
-                          onClick={() => handleCountrySelect(country)}
-                          className="text-xs"
-                        >
-                          {country} ({countriesMap[country].length})
-                        </Button>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
+              {/* Countries List */}
+              <div className="px-4 py-3 border-t border-gray-100">
+                <h4 className="text-sm font-medium mb-2">Mentioned Countries:</h4>
+                {countries.length === 0 ? (
+                  <p className="text-sm text-gray-500">No countries detected</p>
+                ) : (
+                  <div className="flex flex-wrap gap-2">
+                    {countries.map(country => (
+                      <Button
+                        key={country}
+                        variant={selectedCountry === country ? "default" : "outline"}
+                        size="sm"
+                        onClick={() => handleCountrySelect(country)}
+                        className="text-xs"
+                      >
+                        {country} ({countriesMap[country].length})
+                      </Button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </div>
     </div>