diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index c408fa2..5ed4452 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -199,7 +199,7 @@ export default function PublicDashboardPage() {
   if (isPasswordProtected && !data) {
     return (
       <div className="min-h-screen flex items-center justify-center px-4">
-        <div className="max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 shadow-lg">
+        <div className="max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 shadow-lg transition-shadow duration-300">
           <div className="text-center mb-6">
              <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mx-auto mb-4 text-brand-orange">
               <ZapIcon className="w-6 h-6" />
diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index fa2fbae..3695f52 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -225,7 +225,7 @@ export default function FunnelReportPage() {
                       const data = payload[0].payload;
                       return (
                         <div
-                          className="p-3 rounded-xl shadow-lg border"
+                          className="p-3 rounded-xl shadow-lg border transition-shadow duration-300"
                           style={{
                             backgroundColor: chartColors.tooltipBg,
                             borderColor: chartColors.tooltipBorder,
diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index cc652e0..e572ebf 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -189,7 +189,7 @@ function StatusBarTooltip({
       className="fixed z-50 pointer-events-none"
       style={{ left: position.x, top: position.y - 10, transform: 'translate(-50%, -100%)' }}
     >
-      <div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg px-3 py-2.5 text-xs min-w-40">
+      <div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg transition-shadow duration-300 px-3 py-2.5 text-xs min-w-40">
         <div className="font-semibold text-neutral-900 dark:text-white mb-1.5">{formattedDate}</div>
         {stat && stat.total_checks > 0 ? (
           <div className="space-y-1">
@@ -305,7 +305,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
     if (!active || !payload?.length) return null
     return (
       <div
-        className="rounded-xl px-3 py-2 text-xs shadow-lg border"
+        className="rounded-xl px-3 py-2 text-xs shadow-lg border transition-shadow duration-300"
         style={{
           background: colors.tooltipBg,
           borderColor: colors.tooltipBorder,
@@ -955,7 +955,7 @@ function MonitorForm({
               </svg>
             </button>
             {showProtocolDropdown && (
-              <div className="absolute top-full left-0 mt-1 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg z-10 min-w-[100px]">
+              <div className="absolute top-full left-0 mt-1 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg transition-shadow duration-300 z-10 min-w-[100px]">
                 <button
                   type="button"
                   onClick={() => handleProtocolChange('https://')}
diff --git a/components/OfflineBanner.tsx b/components/OfflineBanner.tsx
index 98ef2ea..bca7c20 100644
--- a/components/OfflineBanner.tsx
+++ b/components/OfflineBanner.tsx
@@ -6,7 +6,7 @@ export function OfflineBanner({ isOnline }: { isOnline: boolean }) {
   if (isOnline) return null;
 
   return (
-    <div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md">
+    <div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md transition-shadow duration-300">
       <FiWifiOff className="w-4 h-4 shrink-0" />
       <span>You are currently offline. Changes may not be saved.</span>
     </div>
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index f53b2c8..a593fd4 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -127,7 +127,7 @@ function ChartTooltip({
 
   return (
     <div
-      className="rounded-lg border px-4 py-3 shadow-lg"
+      className="rounded-lg border px-4 py-3 shadow-lg transition-shadow duration-300"
       style={{
         backgroundColor: colors.tooltipBg,
         borderColor: colors.tooltipBorder,