diff --git a/src/Pages/CommunityHolidays.jsx b/src/Pages/CommunityHolidays.jsx
index e211f61..bf826f4 100644
--- a/src/Pages/CommunityHolidays.jsx
+++ b/src/Pages/CommunityHolidays.jsx
@@ -19,11 +19,9 @@ export default function Holidays() {
   ];
 
   useEffect(() => {
-    // Simulate API call since we can't use environment variables
     setLoading(true);
     setError("");
-
-    // Mock data for demonstration
+    // Mock data only
     const mockHolidays = [
       {
         name: "New Year's Day",
@@ -56,7 +54,6 @@ export default function Holidays() {
         description: "Christian holiday celebrating the birth of Jesus Christ"
       }
     ];
-
     setTimeout(() => {
       setHolidays(mockHolidays);
       setLoading(false);
@@ -69,7 +66,7 @@ export default function Holidays() {
       weekday: 'long', 
       year: 'numeric', 
       month: 'long', 
-      day: 'numeric' 
+      day: 'numeric'
     });
   };
 
@@ -84,30 +81,31 @@ export default function Holidays() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50/30 via-white to-emerald-50/40 p-6">
-      <div className="max-w-7xl mx-auto space-y-8">
+    <div className="min-h-screen bg-gradient-to-br from-green-50/40 via-white to-emerald-50/60 dark:from-emerald-950 dark:via-gray-900 dark:to-green-950 p-6">
+      <div className="max-w-7xl mx-auto space-y-10">
         {/* Header */}
-        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
-          <div className="flex items-center gap-4">
-            <div className="bg-gradient-to-br from-green-500 to-emerald-600 p-4 rounded-3xl shadow-lg">
-              <Calendar className="w-8 h-8 text-white" />
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-7">
+          <div className="flex items-center gap-5">
+            <div className="bg-gradient-to-br from-emerald-500 to-green-600 p-5 rounded-[2rem] shadow-lg">
+              <Calendar className="w-9 h-9 text-white" />
             </div>
             <div>
-              <h1 className="text-4xl font-bold bg-gradient-to-r from-green-700 to-emerald-700 bg-clip-text text-transparent">
+              <h1 className="text-4xl sm:text-5xl font-extrabold bg-gradient-to-r from-emerald-700 via-green-700 to-emerald-500 bg-clip-text text-transparent mb-1 tracking-tighter">
                 Holidays {year}
               </h1>
-              <p className="text-gray-600 mt-1">Discover celebrations around the world</p>
+              <p className="text-green-800/80 dark:text-emerald-200/80 font-medium">
+                Discover celebrations around the world
+              </p>
             </div>
           </div>
-
           {/* Country Selector */}
           <div className="relative group">
-            <div className="flex items-center gap-3 bg-white/80 backdrop-blur-sm border-2 border-green-200/50 rounded-2xl px-4 py-3 shadow-lg hover:shadow-xl transition-all duration-300 hover:border-green-300">
-              <Globe className="w-5 h-5 text-green-600" />
+            <div className="flex items-center gap-3 bg-white/90 dark:bg-emerald-950/70 backdrop-blur border-2 border-emerald-100/60 dark:border-emerald-800/60 rounded-2xl px-5 py-3 shadow-lg hover:shadow-emerald-100/30 transition hover:border-emerald-400">
+              <Globe className="w-5 h-5 text-emerald-500" />
               <select
                 value={country}
                 onChange={(e) => setCountry(e.target.value)}
-                className="bg-transparent outline-none text-gray-700 font-semibold cursor-pointer"
+                className="bg-transparent outline-none text-emerald-800 dark:text-emerald-100 font-bold cursor-pointer"
               >
                 {countries.map(c => (
                   <option key={c.code} value={c.code}>
@@ -115,7 +113,7 @@ export default function Holidays() {
                   </option>
                 ))}
               </select>
-              <MapPin className="w-4 h-4 text-green-500" />
+              <MapPin className="w-4 h-4 text-emerald-400" />
             </div>
           </div>
         </div>
@@ -124,10 +122,10 @@ export default function Holidays() {
         {loading && (
           <div className="flex flex-col items-center justify-center py-20">
             <div className="relative">
-              <Loader2 className="w-12 h-12 animate-spin text-green-500" />
-              <div className="absolute inset-0 w-12 h-12 border-4 border-green-200 rounded-full animate-pulse"></div>
+              <Loader2 className="w-14 h-14 animate-spin text-emerald-500" />
+              <div className="absolute inset-0 w-14 h-14 border-4 border-emerald-200 rounded-full animate-pulse"></div>
             </div>
-            <p className="mt-4 text-gray-600 font-medium">Discovering holidays...</p>
+            <p className="mt-4 text-green-900/80 dark:text-emerald-200 font-medium text-xl">Discovering holidays...</p>
           </div>
         )}
 
@@ -136,79 +134,70 @@ export default function Holidays() {
           <div className="p-6 rounded-2xl border-2 border-red-200 bg-gradient-to-r from-red-50 to-pink-50 backdrop-blur-sm">
             <div className="flex items-center gap-3">
               <AlertCircle className="w-6 h-6 text-red-600" />
-              <p className="text-red-700 font-medium">{error}</p>
+              <p className="text-red-700 font-semibold">{error}</p>
             </div>
           </div>
         )}
 
         {/* Holidays Grid */}
         {!loading && !error && (
-          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">
             {holidays.length === 0 ? (
               <div className="col-span-full flex flex-col items-center justify-center py-20">
-                <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
-                  <Calendar className="w-12 h-12 text-gray-400" />
+                <div className="w-24 h-24 bg-emerald-50 dark:bg-emerald-900/30 rounded-full flex items-center justify-center mb-5">
+                  <Calendar className="w-12 h-12 text-emerald-400" />
                 </div>
-                <p className="text-gray-500 text-lg font-medium">No holidays found for {year}</p>
-                <p className="text-gray-400 text-sm mt-1">Try selecting a different country</p>
+                <p className="text-emerald-700 dark:text-emerald-200 text-lg font-medium">No holidays found for {year}</p>
+                <p className="text-emerald-500/70 dark:text-emerald-300 mt-2">Try selecting a different country</p>
               </div>
             ) : (
               holidays.map((holiday, idx) => {
                 const isToday = holiday.date.iso === today;
                 const isPast = new Date(holiday.date.iso) < new Date(today);
-                
                 return (
                   <div
                     key={idx}
-                    className={`group relative overflow-hidden rounded-3xl border-2 p-6 shadow-lg transition-all duration-300 hover:shadow-2xl hover:scale-105 bg-gradient-to-br backdrop-blur-sm ${
-                      isToday 
-                        ? "from-green-100 to-emerald-100 border-green-400 shadow-green-200" 
+                    className={`group relative overflow-hidden rounded-3xl border-2 p-7 shadow-xl bg-gradient-to-br duration-300 transition-all hover:shadow-emerald-100/40 hover:scale-[1.025] hover:border-emerald-400
+                      ${isToday
+                        ? "from-green-100 to-emerald-100 border-emerald-400 shadow-emerald-200"
                         : isPast
-                        ? "from-gray-50 to-gray-100 border-gray-200"
-                        : "from-white to-green-50/30 border-green-200/50 hover:border-green-300"
-                    }`}
+                        ? "from-gray-100 to-gray-50 border-gray-200 shadow"
+                        : "from-white to-green-50/40 border-emerald-200/60"}
+                    `}
                   >
-                    {/* Date Badge */}
-                    <div className={`absolute top-4 right-4 w-16 h-16 rounded-2xl flex flex-col items-center justify-center text-white font-bold shadow-lg ${
-                      isToday ? "bg-gradient-to-br from-green-500 to-green-600" : "bg-gradient-to-br from-emerald-400 to-green-500"
-                    }`}>
+                    {/* Date badge */}
+                    <div className={`absolute top-6 right-6 w-16 h-16 rounded-2xl flex flex-col items-center justify-center text-white font-extrabold tracking-tight shadow-lg
+                      ${isToday
+                        ? "bg-gradient-to-br from-emerald-500 to-green-600"
+                        : "bg-gradient-to-br from-emerald-300 to-green-400"}
+                    `}>
                       <span className="text-xs">{getMonthFromDate(holiday.date.iso)}</span>
-                      <span className="text-lg">{getDayFromDate(holiday.date.iso)}</span>
+                      <span className="text-2xl">{getDayFromDate(holiday.date.iso)}</span>
                     </div>
 
-                    {/* Today Badge */}
+                    {/* TODAY badge */}
                     {isToday && (
-                      <div className="absolute top-4 left-4 flex items-center gap-1 px-3 py-1 bg-green-600 text-white text-xs font-bold rounded-full animate-pulse">
+                      <div className="absolute top-6 left-6 flex items-center gap-2 px-3 py-1 bg-emerald-600 text-white text-xs font-bold rounded-full animate-pulse shadow shadow-emerald-400">
                         <Sparkles className="w-3 h-3" />
                         Today!
                       </div>
                     )}
 
                     {/* Holiday Info */}
-                    <div className="space-y-3 mt-4">
-                      <h3 className={`text-xl font-bold leading-tight ${
-                        isPast ? "text-gray-600" : "text-gray-800"
-                      }`}>
+                    <div className="mt-5 space-y-3">
+                      <h3 className={`text-xl font-extrabold leading-tight ${isPast ? "text-gray-500" : "text-emerald-900 dark:text-emerald-100"}`}>
                         {holiday.name}
                       </h3>
-                      
-                      <p className={`text-sm font-medium ${
-                        isPast ? "text-gray-500" : "text-green-700"
-                      }`}>
+                      <p className={`text-sm font-semibold ${isPast ? "text-gray-500" : "text-emerald-700 dark:text-emerald-300"}`}>
                         {formatDate(holiday.date.iso)}
                       </p>
-                      
                       {holiday.description && (
-                        <p className={`text-sm leading-relaxed ${
-                          isPast ? "text-gray-500" : "text-gray-600"
-                        }`}>
-                          {holiday.description}
-                        </p>
+                        <p className={`text-base ${isPast ? "text-gray-400" : "text-emerald-800 dark:text-emerald-200"}`}>{holiday.description}</p>
                       )}
                     </div>
 
-                    {/* Decorative Elements */}
-                    <div className="absolute -bottom-4 -right-4 w-24 h-24 bg-gradient-to-br from-green-200/20 to-emerald-200/20 rounded-full blur-xl group-hover:scale-150 transition-transform duration-500"></div>
+                    {/* Decorative orb */}
+                    <div className="absolute -bottom-4 -right-4 w-28 h-24 bg-gradient-to-br from-green-200/10 to-emerald-200/10 rounded-full blur-xl group-hover:scale-125 transition-transform duration-400"></div>
                   </div>
                 );
               })
@@ -218,4 +207,4 @@ export default function Holidays() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}