diff --git a/components/observatory/observatory-view.tsx b/components/observatory/observatory-view.tsx
index 870c6434..ed8a6053 100644
--- a/components/observatory/observatory-view.tsx
+++ b/components/observatory/observatory-view.tsx
@@ -213,20 +213,20 @@ export function ObservatoryView() {
   const countriesMap = extractCountries(news);
 
   return (
-    <div className="w-full h-screen bg-[#f5f4ef] flex flex-col">
+    <div className="w-full h-screen bg-gray-50 flex flex-col">
       {/* Title */}
       <div className="w-full bg-white py-4 px-6 border-b border-gray-200 shadow-sm">
-        <h1 className="text-2xl font-bold text-gray-800 text-center">Observatoire de La Paix et du Vivre-Ensemble</h1>
+        <h1 className="text-2xl font-bold text-gray-800">Observatoire de La Paix et du Vivre-Ensemble</h1>
       </div>
       
       {/* Main Content */}
-      <div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-hidden">
+      <div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-auto">
         {/* News Feed Section */}
         <div className="h-full overflow-hidden">
-          <div className="bg-white rounded-lg shadow-md h-full flex flex-col">
-            <div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
+            <div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
               <div className="flex items-center justify-between">
-                <h2 className="text-lg font-medium">
+                <h2 className="text-lg font-semibold text-gray-800">
                   Latest News
                   <span className="text-sm font-normal ml-2 text-gray-500">
                     ({filteredNews.length} articles)
@@ -237,22 +237,22 @@ export function ObservatoryView() {
                     )}
                   </span>
                 </h2>
-                <div className="flex gap-1">
+                <div className="flex gap-2">
                   <Button 
                     variant="outline" 
                     size="sm" 
                     onClick={() => setUseAccumulatedNews(!useAccumulatedNews)} 
-                    className="h-8 px-2 text-xs"
+                    className="h-8 px-3 text-xs"
                   >
                     {useAccumulatedNews 
                       ? `Showing All (${accumulatedNews.length})` 
                       : `Showing Latest (${news.length})`}
                   </Button>
                   <Button 
-                    variant="ghost" 
+                    variant="outline" 
                     size="sm" 
                     onClick={() => invalidateCache()} 
-                    className="h-8 px-2 text-xs"
+                    className="h-8 px-3 text-xs"
                     aria-label="Purge cache"
                   >
                     Purge Cache
@@ -285,18 +285,18 @@ export function ObservatoryView() {
                         rel="noopener noreferrer"
                         className="block hover:bg-gray-50 transition-colors"
                       >
-                        <div className="p-4">
-                          <div className="flex justify-between items-start mb-1">
+                        <div className="px-6 py-4">
+                          <div className="flex justify-between items-start mb-2">
                             <h3 className="font-medium text-gray-900 flex-grow">{item.title}</h3>
                             <span className="text-xs text-gray-500 whitespace-nowrap ml-2">{item.displayDate}</span>
                           </div>
                           
-                          <div className="flex justify-between items-center mb-1">
+                          <div className="flex justify-between items-center mb-2">
                             <span className="text-xs font-medium text-gray-500">{item.source}</span>
                             {item.category && <span className="text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{item.category}</span>}
                           </div>
                           
-                          <p className="text-sm text-gray-600 mt-1 line-clamp-2">{item.description}</p>
+                          <p className="text-sm text-gray-600 mt-2 line-clamp-2">{item.description}</p>
                         </div>
                       </a>
                     </li>
@@ -309,10 +309,10 @@ export function ObservatoryView() {
 
         {/* Map Section */}
         <div className="h-full overflow-hidden">
-          <div className="bg-white rounded-lg shadow-md h-full flex flex-col">
-            <div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
+            <div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
               <div className="flex justify-between items-center">
-                <h2 className="text-lg font-medium">
+                <h2 className="text-lg font-semibold text-gray-800">
                   World Map
                   {selectedCountry && (
                     <span className="text-sm font-normal ml-2 text-gray-500">
@@ -320,12 +320,12 @@ export function ObservatoryView() {
                     </span>
                   )}
                 </h2>
-                <div className="flex gap-1">
+                <div className="flex gap-2">
                   <Button 
-                    variant="ghost" 
+                    variant="outline" 
                     size="sm" 
                     onClick={() => setSelectedCountry(null)}
-                    className="h-8 px-2 text-xs"
+                    className="h-8 px-3 text-xs"
                     disabled={!selectedCountry}
                   >
                     Clear Selection