diff --git a/dashboard/src/components/dashboard/DateTime.jsx b/dashboard/src/components/dashboard/DateTime.jsx
index 648c154..ffc07c8 100644
--- a/dashboard/src/components/dashboard/DateTime.jsx
+++ b/dashboard/src/components/dashboard/DateTime.jsx
@@ -122,35 +122,37 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
     if (!weatherCode) return <CircleAlert className="w-12 h-12 text-red-500" />;
     const code = parseInt(weatherCode, 10);
     const iconProps = small ? "w-8 h-8" : "w-12 h-12";
+    const isNight = currentTime.getHours() >= 18 || currentTime.getHours() < 6;
+    
     switch (true) {
       case code >= 200 && code < 300:
-        return <CloudLightning className={cn(iconProps, "text-gray-700")} />;
+        return <CloudLightning className={cn(iconProps, "text-yellow-300")} />;
       case code >= 300 && code < 500:
-        return <CloudDrizzle className={cn(iconProps, "text-blue-600")} />;
+        return <CloudDrizzle className={cn(iconProps, "text-blue-300")} />;
       case code >= 500 && code < 600:
-        return <CloudRain className={cn(iconProps, "text-blue-600")} />;
+        return <CloudRain className={cn(iconProps, "text-blue-300")} />;
       case code >= 600 && code < 700:
-        return <CloudSnow className={cn(iconProps, "text-blue-400")} />;
+        return <CloudSnow className={cn(iconProps, "text-blue-200")} />;
       case code >= 700 && code < 721:
-        return <CloudFog className={cn(iconProps, "text-gray-600")} />;
+        return <CloudFog className={cn(iconProps, "text-gray-300")} />;
       case code === 721:
-        return <Haze className={cn(iconProps, "text-gray-700")} />;
+        return <Haze className={cn(iconProps, "text-gray-300")} />;
       case code >= 722 && code < 781:
-        return <CloudFog className={cn(iconProps, "text-gray-600")} />;
+        return <CloudFog className={cn(iconProps, "text-gray-300")} />;
       case code === 781:
-        return <Tornado className={cn(iconProps, "text-gray-700")} />;
+        return <Tornado className={cn(iconProps, "text-gray-300")} />;
       case code === 800:
         return currentTime.getHours() >= 6 && currentTime.getHours() < 18 ? (
-          <Sun className={cn(iconProps, "text-yellow-700")} />
+          <Sun className={cn(iconProps, "text-yellow-300")} />
         ) : (
-          <Moon className={cn(iconProps, "text-gray-500")} />
+          <Moon className={cn(iconProps, "text-gray-300")} />
         );
       case code >= 800 && code < 803:
-        return <CloudSun className={cn(iconProps, "text-gray-600")} />;
+        return <CloudSun className={cn(iconProps, isNight ? "text-gray-300" : "text-gray-200")} />;
       case code >= 803:
-        return <Cloud className={cn(iconProps, "text-gray-200")} />;
+        return <Cloud className={cn(iconProps, "text-gray-300")} />;
       default:
-        return <CircleAlert className={cn(iconProps, "text-red-700")} />;
+        return <CircleAlert className={cn(iconProps, "text-red-500")} />;
     }
   };
 
@@ -159,66 +161,68 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
     
     // Thunderstorm (200-299)
     if (code >= 200 && code < 300) {
-      return "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-800";
+      return "bg-gradient-to-br from-slate-900 to-purple-800";
     }
     
     // Drizzle (300-399)
     if (code >= 300 && code < 400) {
-      return "bg-gradient-to-br from-slate-700 via-blue-800 to-slate-700";
+      return "bg-gradient-to-br from-slate-800 to-blue-800";
     }
     
     // Rain (500-599)
     if (code >= 500 && code < 600) {
-      return "bg-gradient-to-br from-slate-800 via-blue-900 to-slate-700";
+      return "bg-gradient-to-br from-slate-800 to-blue-800";
     }
     
     // Snow (600-699)
     if (code >= 600 && code < 700) {
-      return "bg-gradient-to-br from-slate-200 via-blue-100 to-slate-100";
+      return "bg-gradient-to-br from-slate-700 to-blue-800";
     }
     
     // Atmosphere (700-799: mist, smoke, haze, fog, etc.)
     if (code >= 700 && code < 800) {
-      return "bg-gradient-to-br from-slate-600 via-slate-500 to-slate-400";
+      return "bg-gradient-to-br from-slate-700 to-slate-500";
     }
     
     // Clear (800)
     if (code === 800) {
       if (isNight) {
-        return "bg-gradient-to-br from-slate-900 via-blue-950 to-slate-800";
+        return "bg-gradient-to-br from-slate-900 to-blue-900";
       }
-      return "bg-gradient-to-br from-sky-400 via-blue-400 to-sky-500";
+      return "bg-gradient-to-br from-blue-600 to-sky-400";
     }
     
     // Clouds (801-804)
     if (code > 800) {
       if (isNight) {
-        return "bg-gradient-to-br from-slate-800 via-slate-700 to-slate-600";
+        return "bg-gradient-to-br from-slate-800 to-slate-600";
       }
-      return "bg-gradient-to-br from-slate-400 via-slate-500 to-slate-400";
+      return "bg-gradient-to-br from-slate-600 to-slate-400";
     }
     
     // Default fallback
-    return "bg-gradient-to-br from-slate-700 via-slate-600 to-slate-500";
+    return "bg-gradient-to-br from-slate-700 to-slate-500";
   };
   
   const getTemperatureColor = (weatherCode, isNight) => {
     const code = parseInt(weatherCode, 10);
     
-    // Use dark text for light backgrounds
-    if (code >= 600 && code < 700) { // Snow
-      return "text-slate-900";
+    // Snow - dark background, light text
+    if (code >= 600 && code < 700) {
+      return "text-white";
     }
     
-    if (code === 800 && !isNight) { // Clear day
-      return "text-slate-900";
+    // Clear day - light background, dark text
+    if (code === 800 && !isNight) {
+      return "text-white";
     }
     
-    if (code > 800 && !isNight) { // Cloudy day
-      return "text-slate-900";
+    // Cloudy day - medium background, ensure contrast
+    if (code > 800 && !isNight) {
+      return "text-white";
     }
     
-    // Default to white text for all other (darker) backgrounds
+    // All other cases (darker backgrounds)
     return "text-white";
   };
 
@@ -236,213 +240,217 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
   };
 
   const WeatherDetails = () => (
-    <div className="space-y-4 p-3">
-   <div className="grid grid-cols-3 gap-2">
-      <Card className="p-2">
-        <div className="flex items-center gap-1">
-          <ThermometerSun className="w-5 h-5 text-orange-500" />
-          <div className="flex flex-col">
-            <span className="text-xs text-muted-foreground">High</span>
-            <span className="text-sm font-bold">{Math.round(weather.main.temp_max)}°F</span>
+    <div className="space-y-4 p-3 bg-gradient-to-br from-slate-800 to-slate-700">
+      <div className="grid grid-cols-3 gap-2">
+        <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm p-2">
+          <div className="flex items-center gap-1">
+            <ThermometerSun className="w-5 h-5 text-yellow-300" />
+            <div className="flex flex-col">
+              <span className="text-xs text-slate-300">High</span>
+              <span className="text-sm font-bold text-white">{Math.round(weather.main.temp_max)}°F</span>
+            </div>
           </div>
-        </div>
-      </Card>
-      
-      <Card className="p-2">
-        <div className="flex items-center gap-1">
-          <ThermometerSnowflake className="w-5 h-5 text-blue-500" />
-          <div className="flex flex-col">
-            <span className="text-xs text-muted-foreground">Low</span>
-            <span className="text-sm font-bold">{Math.round(weather.main.temp_min)}°F</span>
+        </Card>
+        
+        <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm p-2">
+          <div className="flex items-center gap-1">
+            <ThermometerSnowflake className="w-5 h-5 text-blue-300" />
+            <div className="flex flex-col">
+              <span className="text-xs text-slate-300">Low</span>
+              <span className="text-sm font-bold text-white">{Math.round(weather.main.temp_min)}°F</span>
+            </div>
           </div>
-        </div>
-      </Card>
+        </Card>
 
-      <Card className="p-2">
-        <div className="flex items-center gap-1">
-          <Droplets className="w-5 h-5 text-blue-400" />
-          <div className="flex flex-col">
-            <span className="text-xs text-muted-foreground">Humidity</span>
-            <span className="text-sm font-bold">{weather.main.humidity}%</span>
+        <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm p-2">
+          <div className="flex items-center gap-1">
+            <Droplets className="w-5 h-5 text-blue-300" />
+            <div className="flex flex-col">
+              <span className="text-xs text-slate-300">Humidity</span>
+              <span className="text-sm font-bold text-white">{weather.main.humidity}%</span>
+            </div>
           </div>
-        </div>
-      </Card>
+        </Card>
 
-      <Card className="p-2">
-        <div className="flex items-center gap-1">
-          <Wind className="w-5 h-5 text-gray-500" />
-          <div className="flex flex-col">
-            <span className="text-xs text-muted-foreground">Wind</span>
-            <span className="text-sm font-bold">{Math.round(weather.wind.speed)} mph</span>
+        <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm p-2">
+          <div className="flex items-center gap-1">
+            <Wind className="w-5 h-5 text-slate-300" />
+            <div className="flex flex-col">
+              <span className="text-xs text-slate-300">Wind</span>
+              <span className="text-sm font-bold text-white">{Math.round(weather.wind.speed)} mph</span>
+            </div>
           </div>
-        </div>
-      </Card>
+        </Card>
 
-      <Card className="p-2">
-        <div className="flex items-center gap-1">
-          <Sunrise className="w-5 h-5 text-yellow-500" />
-          <div className="flex flex-col">
-            <span className="text-xs text-muted-foreground">Sunrise</span>
-            <span className="text-sm font-bold">{formatTime(weather.sys?.sunrise)}</span>
+        <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm p-2">
+          <div className="flex items-center gap-1">
+            <Sunrise className="w-5 h-5 text-yellow-300" />
+            <div className="flex flex-col">
+              <span className="text-xs text-slate-300">Sunrise</span>
+              <span className="text-sm font-bold text-white">{formatTime(weather.sys?.sunrise)}</span>
+            </div>
           </div>
-        </div>
-      </Card>
+        </Card>
 
-      <Card className="p-2">
-        <div className="flex items-center gap-1">
-          <Sunset className="w-5 h-5 text-orange-400" />
-          <div className="flex flex-col">
-            <span className="text-xs text-muted-foreground">Sunset</span>
-            <span className="text-sm font-bold">{formatTime(weather.sys?.sunset)}</span>
+        <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm p-2">
+          <div className="flex items-center gap-1">
+            <Sunset className="w-5 h-5 text-orange-300" />
+            <div className="flex flex-col">
+              <span className="text-xs text-slate-300">Sunset</span>
+              <span className="text-sm font-bold text-white">{formatTime(weather.sys?.sunset)}</span>
+            </div>
           </div>
-        </div>
-      </Card>
-    </div>
-
-    {forecast && (
-      <div>
-        <div className="grid grid-cols-5 gap-2">
-          {forecast.map((day, index) => (
-            <Card key={index} className="p-2">
-              <div className="flex flex-col items-center gap-1">
-                <span className="text-sm font-medium">
-                  {new Date(day.dt * 1000).toLocaleDateString('en-US', { weekday: 'short' })}
-                </span>
-                {getWeatherIcon(day.weather[0].id, new Date(day.dt * 1000), true)}
-                <div className="flex justify-center gap-1 items-baseline w-full">
-                  <span className="text-sm font-medium">
-                    {Math.round(day.main.temp_max)}°
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {Math.round(day.main.temp_min)}°
-                  </span>
-                </div>
-                <div className="flex flex-col items-center gap-1 w-full pt-1">
-                  {day.rain?.['3h'] > 0 && (
-                    <div className="flex items-center gap-1">
-                      <CloudRain className="w-3 h-3 text-blue-400" />
-                      <span className="text-xs">{day.rain['3h'].toFixed(2)}"</span>
-                    </div>
-                  )}
-                  {day.snow?.['3h'] > 0 && (
-                    <div className="flex items-center gap-1">
-                      <CloudSnow className="w-3 h-3 text-blue-400" />
-                      <span className="text-xs">{day.snow['3h'].toFixed(2)}"</span>
-                    </div>
-                  )}
-                  {!day.rain?.['3h'] && !day.snow?.['3h'] && (
-                    <div className="flex items-center gap-1">
-                      <Umbrella className="w-3 h-3 text-gray-400" />
-                      <span className="text-xs">0"</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </Card>
-          ))}
-        </div>
+        </Card>
       </div>
-    )}
-  </div>
-);
 
-return (
-  <div className="flex flex-col items-center w-full transition-opacity duration-300 ${mounted ? 'opacity-100' : 'opacity-0'}">
-    {/* Time Display */}
-    <Card className="bg-gradient-to-br mb-[7px] from-slate-900 via-sky-800 to-cyan-800 dark:bg-slate-800 px-1 py-2 w-full hover:scale-[1.02] transition-transform duration-300">
-      <CardContent className="p-3 h-[106px] flex items-center">
-        <div className="flex justify-center items-baseline w-full">
-          <div className={`transition-opacity duration-200 ${isTimeChanging ? 'opacity-60' : 'opacity-100'}`}>
-            <span className="text-7xl font-bold text-white">{hours}</span>
-            <span className="text-7xl font-bold text-white">:</span>
-            <span className="text-7xl font-bold text-white">{minutes}</span>
-            <span className="text-xl font-medium text-white/90 ml-1">{ampm}</span>
+      {forecast && (
+        <div>
+          <div className="grid grid-cols-5 gap-2">
+            {forecast.map((day, index) => {
+              const forecastTime = new Date(day.dt * 1000);
+              const isNight = forecastTime.getHours() >= 18 || forecastTime.getHours() < 6;
+              return (
+                <Card 
+                  key={index} 
+                  className={cn(
+                    getWeatherBackground(day.weather[0].id, isNight),
+                    "p-2"
+                  )}
+                >
+                  <div className="flex flex-col items-center gap-1">
+                    <span className="text-sm font-medium text-white">
+                      {forecastTime.toLocaleDateString('en-US', { weekday: 'short' })}
+                    </span>
+                    {getWeatherIcon(day.weather[0].id, forecastTime, true)}
+                    <div className="flex justify-center gap-1 items-baseline w-full">
+                      <span className="text-sm font-medium text-white">
+                        {Math.round(day.main.temp_max)}°
+                      </span>
+                      <span className="text-xs text-slate-300">
+                        {Math.round(day.main.temp_min)}°
+                      </span>
+                    </div>
+                    <div className="flex flex-col items-center gap-1 w-full pt-1">
+                      {day.rain?.['3h'] > 0 && (
+                        <div className="flex items-center gap-1">
+                          <CloudRain className="w-3 h-3 text-blue-300" />
+                          <span className="text-xs text-white">{day.rain['3h'].toFixed(2)}"</span>
+                        </div>
+                      )}
+                      {day.snow?.['3h'] > 0 && (
+                        <div className="flex items-center gap-1">
+                          <CloudSnow className="w-3 h-3 text-blue-300" />
+                          <span className="text-xs text-white">{day.snow['3h'].toFixed(2)}"</span>
+                        </div>
+                      )}
+                      {!day.rain?.['3h'] && !day.snow?.['3h'] && (
+                        <div className="flex items-center gap-1">
+                          <Umbrella className="w-3 h-3 text-slate-300" />
+                          <span className="text-xs text-white">0"</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </Card>
+              );
+            })}
           </div>
         </div>
-      </CardContent>
-    </Card>
+      )}
+    </div>
+  );
 
-    {/* Date and Weather Display */}
-    <div className="h-[125px] mb-[6px] grid grid-cols-2 gap-2 w-full">
-      <Card className="h-full bg-gradient-to-br from-slate-900 via-violet-800 to-purple-800 flex items-center justify-center">
-        <CardContent className="h-full p-0">
-          <div className="flex flex-col items-center justify-center h-full">
-            <span className="text-7xl font-bold text-white">
-              {dateInfo.day}
-            </span>
-            <span className="text-sm font-bold text-white mt-2">
-              {dateInfo.weekday}
-            </span>
+  return (
+    <div className="flex flex-col items-center w-full transition-opacity duration-300 ${mounted ? 'opacity-100' : 'opacity-0'}">
+      {/* Time Display */}
+      <Card className="bg-gradient-to-br mb-[7px] from-indigo-900 to-blue-800 backdrop-blur-sm dark:bg-slate-800 px-1 py-2 w-full hover:scale-[1.02] transition-transform duration-300">
+        <CardContent className="p-3 h-[106px] flex items-center">
+          <div className="flex justify-center items-baseline w-full">
+            <div className={`transition-opacity duration-200 ${isTimeChanging ? 'opacity-60' : 'opacity-100'}`}>
+              <span className="text-6xl font-bold text-white">{hours}</span>
+              <span className="text-6xl font-bold text-white">:</span>
+              <span className="text-6xl font-bold text-white">{minutes}</span>
+              <span className="text-lg font-medium text-white/90 ml-1">{ampm}</span>
+            </div>
           </div>
         </CardContent>
       </Card>
 
-      {weather?.main && (
-        <Popover>
-          <PopoverTrigger asChild>
-            <Card className={cn(
-              getWeatherBackground(
-                weather.weather[0]?.id,
-                datetime.getHours() >= 18 || datetime.getHours() < 6
-              ),
-              "flex items-center justify-center cursor-pointer hover:brightness-110 transition-all relative"
-            )}>
-              <CardContent className="h-full p-3">
-                <div className="flex flex-col items-center">
-                  {getWeatherIcon(weather.weather[0]?.id, datetime)}
-                  <span className={cn(
-                    "text-3xl font-bold ml-1 mt-2",
-                    getTemperatureColor(
-                      weather.weather[0]?.id,
-                      datetime.getHours() >= 18 || datetime.getHours() < 6
-                    )
-                  )}>
-                    {Math.round(weather.main.temp)}°
-                  </span>
-                </div>
-              </CardContent>
-              {weather.alerts && (
-                <div className="absolute top-1 right-1">
-                  <AlertTriangle className="w-5 h-5 text-red-500" />
-                </div>
-              )}
-            </Card>
-          </PopoverTrigger>
-          <PopoverContent 
-            className="w-[450px]" 
-            align="start"
-            side="right"
-            sideOffset={10}
-            style={{ 
-              transform: `scale(${scaleFactor})`,
-              transformOrigin: 'left top'
-            }}
-          >
-            {weather.alerts && (
-              <Alert variant="warning" className="mb-3">
-                <AlertTriangle className="h-3 w-3" />
-                <AlertDescription className="text-xs">
-                  {weather.alerts[0].event}
-                </AlertDescription>
-              </Alert>
-            )}
-            <WeatherDetails />
-          </PopoverContent>
-        </Popover>
-      )}
-    </div>
+      {/* Date and Weather Display */}
+      <div className="h-[125px] mb-[6px] grid grid-cols-2 gap-2 w-full">
+        <Card className="h-full bg-gradient-to-br from-violet-900 to-purple-800 backdrop-blur-sm flex items-center justify-center">
+          <CardContent className="h-full p-0">
+            <div className="flex flex-col items-center justify-center h-full">
+              <span className="text-6xl font-bold text-white">
+                {dateInfo.day}
+              </span>
+              <span className="text-sm font-bold text-white mt-2">
+                {dateInfo.weekday}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
 
-    {/* Calendar Display */}
-    <Card className="w-full">
-      <CardContent className="p-0">
-        <CalendarComponent
-          selected={datetime}
-          className="w-full"
-        />
-      </CardContent>
-    </Card>
-  </div>
-);
+        {weather?.main && (
+          <Popover>
+            <PopoverTrigger asChild>
+              <Card className={cn(
+                getWeatherBackground(
+                  weather.weather[0]?.id,
+                  datetime.getHours() >= 18 || datetime.getHours() < 6
+                ),
+                "flex items-center justify-center cursor-pointer hover:brightness-110 transition-all relative backdrop-blur-sm"
+              )}>
+                <CardContent className="h-full p-3">
+                  <div className="flex flex-col items-center">
+                    {getWeatherIcon(weather.weather[0]?.id, datetime)}
+                    <span className="text-3xl font-bold ml-1 mt-2 text-white">
+                      {Math.round(weather.main.temp)}°
+                    </span>
+                  </div>
+                </CardContent>
+                {weather.alerts && (
+                  <div className="absolute top-1 right-1">
+                    <AlertTriangle className="w-5 h-5 text-red-500" />
+                  </div>
+                )}
+              </Card>
+            </PopoverTrigger>
+            <PopoverContent 
+              className="w-[450px] bg-gradient-to-br from-slate-800 to-slate-700 border-slate-600" 
+              align="start"
+              side="right"
+              sideOffset={10}
+              style={{ 
+                transform: `scale(${scaleFactor})`,
+                transformOrigin: 'left top'
+              }}
+            >
+              {weather.alerts && (
+                <Alert variant="warning" className="mb-3 bg-amber-900/50 border-amber-700">
+                  <AlertTriangle className="h-3 w-3 text-amber-500" />
+                  <AlertDescription className="text-xs text-amber-200">
+                    {weather.alerts[0].event}
+                  </AlertDescription>
+                </Alert>
+              )}
+              <WeatherDetails />
+            </PopoverContent>
+          </Popover>
+        )}
+      </div>
+
+      {/* Calendar Display */}
+      <Card className="w-full bg-white dark:bg-slate-800">
+        <CardContent className="p-0">
+          <CalendarComponent
+            selected={datetime}
+            className="w-full"
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default DateTimeWeatherDisplay;
\ No newline at end of file