diff --git a/app/(admin)/adminDashboard/dashlayout.tsx b/app/(admin)/adminDashboard/dashlayout.tsx
index 5fb5f1d..94655b5 100644
--- a/app/(admin)/adminDashboard/dashlayout.tsx
+++ b/app/(admin)/adminDashboard/dashlayout.tsx
@@ -19,7 +19,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
 
             <div className="main-content">
                 {/* This is where your page content will be injected */}
-                <div className="p-6 space-y-4 min-h-screen">
+                <div className="p-6 space-y-4 min-h-screen dark:bg-rtgray-900">
                     {children}
                 </div>
             </div>
diff --git a/app/(admin)/adminDashboard/page.tsx b/app/(admin)/adminDashboard/page.tsx
index 2cd5ad4..e0c3ab7 100644
--- a/app/(admin)/adminDashboard/page.tsx
+++ b/app/(admin)/adminDashboard/page.tsx
@@ -167,7 +167,7 @@ const AdminDashboard = () => {
   return (
     <DashboardLayout>
       <div className="px-6 space-y-6">
-        <h1 className="text-lg font-semibold">Admin Dashboard</h1>
+        <h1 className="text-lg font-semibold dark:text-white">Admin Dashboard</h1>
 
         <div className="grid md:grid-cols-2 gap-6">
           <div className="space-y-4">
diff --git a/components/dashboards/EnergyLineChart.tsx b/components/dashboards/EnergyLineChart.tsx
index e8e1eb3..944dc37 100644
--- a/components/dashboards/EnergyLineChart.tsx
+++ b/components/dashboards/EnergyLineChart.tsx
@@ -14,6 +14,10 @@ import {
   endOfYear,
 } from 'date-fns';
 import { fetchPowerTimeseries, fetchForecast } from '@/app/utils/api';
+import { color } from 'html2canvas/dist/types/css/types/color';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import './datepicker-dark.css'; // custom dark mode styles
 
 ChartJS.register(zoomPlugin);
 
@@ -81,6 +85,22 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [forecast, setForecast] = useState<TimeSeriesEntry[]>([]);
 
+  function useIsDarkMode() {
+  const [isDark, setIsDark] = useState(() =>
+    typeof document !== 'undefined'
+      ? document.body.classList.contains('dark')
+      : false
+  );
+
+  useEffect(() => {
+    const check = () => setIsDark(document.body.classList.contains('dark'));
+    const observer = new MutationObserver(check);
+    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  return isDark;
+}
 
   useEffect(() => {
     const now = new Date();
@@ -200,6 +220,11 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
   const maxValue = allValues.length > 0 ? Math.max(...allValues) : 0;
   const yAxisSuggestedMax = maxValue * 1.15;
 
+  const isDark = useIsDarkMode();
+
+const axisColor = isDark ? '#fff' : '#222';
+
+
   const data = {
     labels: filteredLabels.map(formatLabel),
     datasets: [
@@ -235,7 +260,12 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
-      legend: { position: 'top' as const },
+    legend: {
+      position: 'top',
+      labels: {
+        color: axisColor, // legend text color
+      },
+    },
       zoom: {
         zoom: {
           wheel: { enabled: true },
@@ -244,12 +274,22 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
         },
         pan: { enabled: true, mode: 'x' as const },
       },
-      tooltip: { enabled: true, mode: 'index' as const, intersect: false },
+      tooltip: {
+      enabled: true,
+      mode: 'index',
+      intersect: false,
+      backgroundColor: isDark ? '#232b3e' : '#fff',
+      titleColor: axisColor,
+      bodyColor: axisColor,
+      borderColor: isDark ? '#444' : '#ccc',
+      borderWidth: 1,
+    },
     },
     scales: {
       x: {
         title: {
           display: true,
+          color: axisColor,
           text:
             viewMode === 'day'
               ? 'Time (HH:MM)'
@@ -260,8 +300,11 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
               : viewMode === 'monthly'
               ? 'Month'
               : 'Year',
-          font: { weight: 'bold' as const },
+          font: { weight: 'normal' as const },
         },
+        ticks: {
+        color: axisColor,
+      },
       },
       y: {
         beginAtZero: true,
@@ -269,9 +312,14 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
         title: {
           display: true,
           text: 'Power (kW)',
-          font: { weight: 'bold' as const },
+          color: axisColor,
+          font: { weight: 'normal' as const },
         },
+        ticks: {
+        color: axisColor,
       },
+      },
+      
     },
   } as const;
 
@@ -280,7 +328,7 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
   };
 
   return (
-    <div className="bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light">
+    <div className="bg-white p-4 rounded-lg shadow-md dark:bg-rtgray-800 dark:text-white-light">
       <div className="h-98 w-full">
         <div className="flex justify-between items-center mb-2">
           <h2 className="text-lg font-bold dark:text-white-light">Energy Consumption & Generation</h2>
@@ -289,20 +337,20 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
           </button>
         </div>
 
-        <div className="mb-4 flex gap-4 items-center">
+        <div className="mb-4 flex gap-4 items-center dark:text-white">
           {viewMode === 'day' && (
             <label className="font-medium">
               Date:{' '}
-              <input
-                type="date"
-                value={selectedDate.toISOString().split('T')[0]}
-                onChange={(e) => setSelectedDate(new Date(e.target.value))}
-                className="border rounded p-1"
+              <DatePicker
+                selected={selectedDate}
+                onChange={(date) => setSelectedDate(date!)}
+                dateFormat="dd/MM/yyyy"  // ✅ sets correct format
+                className="dark:bg-rtgray-700 dark:text-white bg-white border border-rounded text-black p-1 rounded"
               />
             </label>
           )}
 
-          <label className="font-medium">
+          <label className="font-medium ">
             From:{' '}
             <select
               value={startIndex}
@@ -310,14 +358,14 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
                 const val = Number(e.target.value);
                 setStartIndex(val <= endIndex ? val : endIndex);
               }}
-              className="border rounded p-1"
+              className="dark:bg-rtgray-700 border dark:border-rtgray-700 rounded p-1"
             >
               {allTimes.map((label, idx) => (
                 <option key={idx} value={idx}>{formatLabel(label)}</option>
               ))}
             </select>
           </label>
-          <label className="font-medium">
+          <label className="font-medium ">
             To:{' '}
             <select
               value={endIndex}
@@ -325,7 +373,7 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
                 const val = Number(e.target.value);
                 setEndIndex(val >= startIndex ? val : startIndex);
               }}
-              className="border rounded p-1"
+              className="dark:bg-rtgray-700 border dark:border-rtgray-700 rounded p-1"
             >
               {allTimes.map((label, idx) => (
                 <option key={idx} value={idx}>{formatLabel(label)}</option>
@@ -337,7 +385,7 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
             <select
               value={viewMode}
               onChange={(e) => setViewMode(e.target.value as typeof viewMode)}
-              className="border rounded p-1"
+              className="dark:bg-rtgray-700 border dark:border-rtgray-700 rounded p-1"
             >
               <option value="day">Day</option>
               <option value="daily">Daily</option>
diff --git a/components/dashboards/KPIStatus.tsx b/components/dashboards/KPIStatus.tsx
index 8791e1a..9dade91 100644
--- a/components/dashboards/KPIStatus.tsx
+++ b/components/dashboards/KPIStatus.tsx
@@ -17,7 +17,6 @@ interface MonthlyKPI {
   load_factor: number | null;
 }
 
-
 const KPI_Table: React.FC<KPI_TableProps> = ({ siteId, month }) => {
   const [kpiData, setKpiData] = useState<MonthlyKPI | null>(null);
   const [loading, setLoading] = useState(false);
@@ -81,22 +80,21 @@ const data = [
   { kpi: 'Load Factor', value: `${load_factor.toFixed(2)} kW` }, // ✅ added
 ];
 
-
   return (
     <div>
-      <h2 className="text-lg font-bold mb-2">Monthly KPI</h2>
-      <table className="min-h-[275px] w-full border-collapse border border-gray-700 text-black bg-white">
+      <h2 className="text-lg font-bold mb-2 dark:text-white">Monthly KPI</h2>
+      <table className="min-h-[275px] w-full border-collapse border border-gray-300 dark:border-rtgray-700 text-black dark:text-white bg-white dark:bg-rtgray-700">
         <thead>
-          <tr className="bg-gray-800 text-black">
-            <th className="border border-gray-700 p-3 text-left">KPI</th>
-            <th className="border border-gray-700 p-3 text-left">Value</th>
+          <tr className="bg-rtgray-100 dark:bg-rtgray-800 text-black dark:text-white">
+            <th className="border border-rtgray-300 dark:border-rtgray-700 p-3 text-left dark:bg-rtgray-900">KPI</th>
+            <th className="border border-rtgray-300 dark:border-rtgray-700 p-3 text-left dark:bg-rtgray-900">Value</th>
           </tr>
         </thead>
         <tbody>
           {data.map((row) => (
-            <tr key={row.kpi}>
-              <td className="border border-gray-700 p-2.5">{row.kpi}</td>
-              <td className="border border-gray-700 p-2.5">{row.value}</td>
+            <tr key={row.kpi} className="even:bg-rtgray-50 dark:even:bg-rtgray-800">
+              <td className="border border-rtgray-300 dark:border-rtgray-700 p-2.5">{row.kpi}</td>
+              <td className="border border-rtgray-300 dark:border-rtgray-700 p-2.5">{row.value}</td>
             </tr>
           ))}
         </tbody>
diff --git a/components/dashboards/MonthlyBarChart.tsx b/components/dashboards/MonthlyBarChart.tsx
index 4b41dcd..7c23505 100644
--- a/components/dashboards/MonthlyBarChart.tsx
+++ b/components/dashboards/MonthlyBarChart.tsx
@@ -11,6 +11,7 @@ import {
 import { format } from 'date-fns';
 import { fetchPowerTimeseries } from '@/app/utils/api';
 
+
 interface MonthlyBarChartProps {
   siteId: string;
 }
@@ -39,8 +40,7 @@ const groupTimeSeries = (
   }));
 };
 
-const consumptionColor = '#003049';
-const generationColor = '#669bbc';
+
 
 const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteId }) => {
   const [chartData, setChartData] = useState<
@@ -48,6 +48,32 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteId }) => {
   >([]);
   const [loading, setLoading] = useState(true);
 
+  function useIsDarkMode() {
+  const [isDark, setIsDark] = useState(() =>
+    typeof document !== 'undefined'
+      ? document.body.classList.contains('dark')
+      : false
+  );
+
+  useEffect(() => {
+    const check = () => setIsDark(document.body.classList.contains('dark'));
+    check();
+
+    // Listen for class changes on <body>
+    const observer = new MutationObserver(check);
+    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return isDark;
+}
+
+const isDark = useIsDarkMode();
+
+const consumptionColor = isDark ? '#ba8e23' : '#003049'; 
+const generationColor = isDark ? '#fcd913' : '#669bbc';  
+
   useEffect(() => {
     if (!siteId) return;
 
@@ -100,7 +126,7 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteId }) => {
 
   if (loading || !siteId || chartData.length === 0) {
     return (
-      <div className="bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light">
+      <div className="bg-white p-4 rounded-lg shadow-md dark:bg-rtgray-800 dark:text-white-light">
         <div className="flex justify-between items-center mb-2">
           <h2 className="text-lg font-bold pb-3">Monthly Energy Yield</h2>
         </div>
@@ -114,7 +140,7 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteId }) => {
   }
 
   return (
-    <div className="bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light">
+    <div className="bg-white p-4 rounded-lg shadow-md dark:bg-rtgray-800 dark:text-white-light">
       <div className="flex justify-between items-center mb-2">
         <h2 className="text-lg font-bold pb-3">Monthly Energy Yield</h2>
       </div>
@@ -122,13 +148,38 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteId }) => {
       <div className="lg:h-[22.6vw] h-[290px] w-full pt-10">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart data={chartData}>
-            <XAxis dataKey="month" tick={{ fontSize: 10 }} />
-            <YAxis tick={{ fontSize: 10 }} />
+            <XAxis
+              dataKey="month"
+              tick={{ fontSize: 10, fill: isDark ? '#fff' : '#222' }}
+              axisLine={{ stroke: isDark ? '#fff' : '#222' }}
+              tickLine={{ stroke: isDark ? '#fff' : '#222' }}
+            />
+            <YAxis
+              tick={{ fontSize: 10, fill: isDark ? '#fff' : '#222' }}
+              axisLine={{ stroke: isDark ? '#fff' : '#222' }}
+              tickLine={{ stroke: isDark ? '#fff' : '#222' }}
+            />
             <Tooltip
               formatter={(value: number) => [`${value.toFixed(2)} kWh`]}
               labelFormatter={(label) => `${label}`}
+              contentStyle={{
+                background: isDark ? '#232b3e' : '#fff',
+                color: isDark ? '#fff' : '#222',
+                border: isDark ? '1px solid #444' : '1px solid #ccc',
+              }}
+              labelStyle={{
+                color: isDark ? '#fff' : '#222',
+              }}
+              cursor={{
+                fill: isDark ? '#808080' : '#e0e7ef', // dark mode bg, light mode bg
+                fillOpacity: isDark ? 0.6 : 0.3,      // adjust opacity as you like
+              }}
+            />
+            <Legend
+              wrapperStyle={{
+                color: isDark ? '#fff' : '#222',
+              }}
             />
-            <Legend />
             <Bar dataKey="consumption" fill={consumptionColor} name="Consumption (kWh)" />
             <Bar dataKey="generation" fill={generationColor} name="Generation (kWh)" />
           </BarChart>
diff --git a/components/dashboards/SiteSelector.tsx b/components/dashboards/SiteSelector.tsx
index 5dd6502..a8f0544 100644
--- a/components/dashboards/SiteSelector.tsx
+++ b/components/dashboards/SiteSelector.tsx
@@ -8,10 +8,10 @@ type SiteSelectorProps = {
 const SiteSelector = ({ selectedSite, setSelectedSite }: SiteSelectorProps) => {
   return (
     <div className="flex flex-col ">
-      <label htmlFor="site" className="font-semibold text-lg">Select Site:</label>
+      <label htmlFor="site" className="font-semibold text-lg dark:text-white">Select Site:</label>
       <select
         id="site"
-        className="border p-2 rounded"
+        className="border p-2 rounded dark:text-white dark:bg-rtgray-800 dark:border-rtgray-700"
         value={selectedSite}
         onChange={(e) => setSelectedSite(e.target.value as SiteName)}
       >
diff --git a/components/dashboards/SiteStatus.tsx b/components/dashboards/SiteStatus.tsx
index e711807..fb252a6 100644
--- a/components/dashboards/SiteStatus.tsx
+++ b/components/dashboards/SiteStatus.tsx
@@ -105,12 +105,12 @@ const SiteStatus = ({
     };
 
     return (
-        <div className="bg-white p-4 rounded-lg shadow-md space-y-2 dark:bg-gray-800 dark:text-white-light">
+        <div className="bg-white p-4 rounded-lg shadow-md space-y-2 dark:bg-rtgray-800 dark:text-white-light">
             <h2 className="text-xl font-semibold mb-3">Site Details</h2>
 
             {/* Status */}
             <div className="flex justify-between items-center text-base">
-                <p className="text-gray-600 dark:text-gray-400 font-medium">Status:</p>
+                <p className="text-gray-600 dark:text-white/85 font-medium">Status:</p>
                 <p className={`font-semibold ${
                     statusMap[selectedSite] === 'Active' ? 'text-green-500' :
                     statusMap[selectedSite] === 'Inactive' ? 'text-orange-500' :
@@ -122,31 +122,31 @@ const SiteStatus = ({
 
             {/* Site ID */}
             <div className="flex justify-between items-center text-base">
-                <p className="text-gray-600 dark:text-gray-400 font-medium">Site ID:</p>
+                <p className="text-gray-600 dark:text-white/85 font-medium">Site ID:</p>
                 <p className="font-medium">{siteId}</p>
             </div>
 
             {/* Location */}
             <div className="flex justify-between items-center text-base">
-                <p className="text-gray-600 dark:text-gray-400 font-medium">Location:</p>
+                <p className="text-gray-600 dark:text-white/85 font-medium">Location:</p>
                 <p className="font-medium">{location}</p>
             </div>
 
             {/* Inverter Provider */}
             <div className="flex justify-between items-center text-base">
-                <p className="text-gray-600 dark:text-gray-400 font-medium">Inverter Provider:</p>
+                <p className="text-gray-600 dark:text-white/85 font-medium">Inverter Provider:</p>
                 <p className="font-medium">{inverterProvider}</p>
             </div>
 
             {/* Emergency Contact */}
             <div className="flex justify-between items-center text-base">
-                <p className="text-gray-600 dark:text-gray-400 font-medium">Emergency Contact:</p>
+                <p className="text-gray-600 dark:text-white/85 font-medium">Emergency Contact:</p>
                 <p className="font-medium">{emergencyContact}</p>
             </div>
 
             {/* Last Sync */}
             <div className="flex justify-between items-center text-base">
-                <p className="text-gray-600 dark:text-gray-400 font-medium">Last Sync:</p>
+                <p className="text-gray-600 dark:text-white/85 font-medium">Last Sync:</p>
                 <p className="font-medium">{lastSyncTimestamp}</p>
             </div>
 
diff --git a/components/dashboards/datepicker-dark.css b/components/dashboards/datepicker-dark.css
new file mode 100644
index 0000000..3e4f21f
--- /dev/null
+++ b/components/dashboards/datepicker-dark.css
@@ -0,0 +1,77 @@
+/* ========== LIGHT MODE (Default) ========== */
+.react-datepicker {
+  background-color: #ffffff;  /* white bg */
+  color: #111827;             /* dark gray text */
+  border: 1px solid #d1d5db;  /* light gray border */
+}
+
+.react-datepicker__header {
+  background-color: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+  color: #111827;
+}
+
+.react-datepicker__day,
+.react-datepicker__day-name,
+.react-datepicker__current-month {
+  color: #111827;
+}
+
+.react-datepicker__navigation-icon::before {
+  border-color: #111827;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--keyboard-selected {
+  background-color: #3b82f6; /* blue highlight */
+  color: #ffffff;
+}
+
+.react-datepicker__day:hover {
+  background-color: #e5e7eb;
+  color: #111827;
+}
+
+.react-datepicker__day--disabled {
+  color: #9ca3af;
+}
+
+/* ========== DARK MODE (Wrap in `.dark`) ========== */
+.dark .react-datepicker {
+  background-color: #141624;
+  color: #ffffff;
+  border: 1px solid #374151;
+}
+
+.dark .react-datepicker__header {
+  background-color: #080912;
+  border-bottom: 1px solid #4b5563;
+  color: #ffffff;
+}
+
+.dark .react-datepicker__day,
+.dark .react-datepicker__day-name,
+.dark .react-datepicker__current-month {
+  color: #ffffff;
+}
+
+.dark .react-datepicker__navigation-icon::before {
+  border-color: #ffffff;
+}
+
+.dark .react-datepicker__day--selected,
+.dark .react-datepicker__day--keyboard-selected {
+  background-color: #fcd913;
+  color: #000000;
+}
+
+.dark .react-datepicker__day:hover {
+  background-color: #374151;
+  color: #ffffff;
+}
+
+.dark .react-datepicker__day--disabled {
+  color: #555;
+}
+
+
diff --git a/components/layouts/sidebar.tsx b/components/layouts/sidebar.tsx
index 956199a..2623518 100644
--- a/components/layouts/sidebar.tsx
+++ b/components/layouts/sidebar.tsx
@@ -84,7 +84,7 @@ const Sidebar = () => {
                     </div>
                     <PerfectScrollbar className="relative h-[calc(100vh-80px)] ">
                         <ul className="relative space-y-0.5 p-4 py-0 font-md">
-                            <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
+                            <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08] dark:text-white dark:active:text-white">
                                 <IconMinus className="hidden h-5 w-4 flex-none" />
                                 <span>Customer</span>
                             </h2>
@@ -92,7 +92,7 @@ const Sidebar = () => {
                                 <Link href="#" className="nav-link group">
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Dashboard</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white dark:active:text-white">Dashboard</span>
                                     </div>
                                 </Link>
                             </li>
@@ -100,7 +100,7 @@ const Sidebar = () => {
                                 <Link href="#" className="nav-link group">
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Sites</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white dark:active:text-white">Sites</span>
                                     </div>
                                 </Link>
                             </li>
@@ -108,7 +108,7 @@ const Sidebar = () => {
                                 <button type="button" className={`nav-link group w-full`} onClick={() => toggleMenu('setting')}>
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Setting</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white dark:active:text-white">Setting</span>
                                     </div>
 
                                     <div className={currentMenu !== 'setting' ? '-rotate-90 rtl:rotate-90' : ''}>
@@ -128,7 +128,7 @@ const Sidebar = () => {
 
 
 
-                            <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
+                            <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:text-white dark:bg-opacity-[0.08] dark:active:text-white">
                                 <IconMinus className="hidden h-5 w-4 flex-none" />
                                 <span>Admin</span>
                             </h2>
@@ -136,7 +136,7 @@ const Sidebar = () => {
                                 <Link href="/adminDashboard" className="nav-link group">
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Dashboard</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white dark:active:text-white">Dashboard</span>
                                     </div>
                                 </Link>
                             </li>
@@ -144,7 +144,7 @@ const Sidebar = () => {
                                 <Link href="/sites" className="nav-link group">
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Sites</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Sites</span>
                                     </div>
                                 </Link>
                             </li>
@@ -152,11 +152,11 @@ const Sidebar = () => {
                                 <Link href="#" className="nav-link group">
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Devices</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Devices</span>
                                     </div>
                                 </Link>
                             </li>
-                            <h2 className="-mx-4 mb-1 flex items-center px-7 py-3 font-extrabold uppercase dark:bg-opacity-[0.08]">
+                            <h2 className="-mx-4 mb-1 flex items-center px-7 py-3 font-extrabold uppercase dark:bg-opacity-[0.08] dark:group-hover:text-white dark:text-white">
                                 <IconMinus className="hidden h-5 w-4 flex-none" />
                                 <span>Providers</span>
                             </h2>
@@ -164,7 +164,7 @@ const Sidebar = () => {
                                 <Link href="#" className="nav-link group">
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Solis</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Solis</span>
                                     </div>
                                 </Link>
                             </li>
@@ -172,7 +172,7 @@ const Sidebar = () => {
                                 <Link href="#" className="nav-link group">
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Huawei</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Huawei</span>
                                     </div>
                                 </Link>
                             </li>
@@ -181,7 +181,7 @@ const Sidebar = () => {
                                 <button type="button" className={`${currentMenu === 'sungrow' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('sungrow')}>
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Sungrow</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Sungrow</span>
                                     </div>
 
                                     <div className={currentMenu !== 'component' ? '-rotate-90 rtl:rotate-90' : ''}>
@@ -190,7 +190,7 @@ const Sidebar = () => {
                                 </button>
 
                                 <AnimateHeight duration={300} height={currentMenu === 'sungrow' ? 'auto' : 0}>
-                                    <ul className="sub-menu text-gray-500">
+                                    <ul className="sub-menu text-gray-500 dark:text-white/90">
                                         <li>
                                             <Link href="/sungrow/plant">Plant</Link>
                                         </li>
@@ -208,7 +208,7 @@ const Sidebar = () => {
                                 <Link href="#" className="nav-link group">
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">CSI</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">CSI</span>
                                     </div>
                                 </Link>
                             </li>
@@ -217,7 +217,7 @@ const Sidebar = () => {
                                 <button type="button" className={`${currentMenu === 'chint' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('chint')}>
                                     <div className="flex items-center">
                                         <IconMenuComponents className="shrink-0 group-hover:!text-primary" />
-                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Chint</span>
+                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Chint</span>
                                     </div>
 
                                     <div className={currentMenu !== 'component' ? '-rotate-90 rtl:rotate-90' : ''}>
@@ -226,7 +226,7 @@ const Sidebar = () => {
                                 </button>
 
                                 <AnimateHeight duration={300} height={currentMenu === 'chint' ? 'auto' : 0}>
-                                    <ul className="sub-menu text-gray-500">
+                                    <ul className="sub-menu text-gray-500 dark:text-white/90">
                                         <li>
                                             <Link href="/chint/sites">Sites</Link>
                                         </li>
diff --git a/package-lock.json b/package-lock.json
index 3e8657c..ee87714 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
                 "react-animate-height": "^3.1.0",
                 "react-apexcharts": "^1.7.0",
                 "react-chartjs-2": "^5.3.0",
+                "react-datepicker": "^8.4.0",
                 "react-dom": "18.2.0",
                 "react-hot-toast": "^2.5.2",
                 "react-i18next": "^12.1.5",
@@ -334,6 +335,59 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+            "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/utils": "^0.2.10"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
+            "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/core": "^1.7.3",
+                "@floating-ui/utils": "^0.2.10"
+            }
+        },
+        "node_modules/@floating-ui/react": {
+            "version": "0.27.15",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.15.tgz",
+            "integrity": "sha512-0LGxhBi3BB1DwuSNQAmuaSuertFzNAerlMdPbotjTVnvPtdOs7CkrHLaev5NIXemhzDXNC0tFzuseut7cWA5mw==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/react-dom": "^2.1.5",
+                "@floating-ui/utils": "^0.2.10",
+                "tabbable": "^6.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=17.0.0",
+                "react-dom": ">=17.0.0"
+            }
+        },
+        "node_modules/@floating-ui/react-dom": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.5.tgz",
+            "integrity": "sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/dom": "^1.7.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.2.10",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+            "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+            "license": "MIT"
+        },
         "node_modules/@headlessui/react": {
             "version": "1.7.8",
             "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.8.tgz",
@@ -5005,6 +5059,21 @@
                 "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
             }
         },
+        "node_modules/react-datepicker": {
+            "version": "8.4.0",
+            "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.4.0.tgz",
+            "integrity": "sha512-6nPDnj8vektWCIOy9ArS3avus9Ndsyz5XgFCJ7nBxXASSpBdSL6lG9jzNNmViPOAOPh6T5oJyGaXuMirBLECag==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/react": "^0.27.3",
+                "clsx": "^2.1.1",
+                "date-fns": "^4.1.0"
+            },
+            "peerDependencies": {
+                "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+                "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+            }
+        },
         "node_modules/react-dom": {
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5750,6 +5819,12 @@
                 "url": "https://opencollective.com/unts"
             }
         },
+        "node_modules/tabbable": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+            "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+            "license": "MIT"
+        },
         "node_modules/tailwindcss": {
             "version": "3.4.1",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
@@ -6535,6 +6610,46 @@
                 "strip-json-comments": "^3.1.1"
             }
         },
+        "@floating-ui/core": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+            "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+            "requires": {
+                "@floating-ui/utils": "^0.2.10"
+            }
+        },
+        "@floating-ui/dom": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
+            "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
+            "requires": {
+                "@floating-ui/core": "^1.7.3",
+                "@floating-ui/utils": "^0.2.10"
+            }
+        },
+        "@floating-ui/react": {
+            "version": "0.27.15",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.15.tgz",
+            "integrity": "sha512-0LGxhBi3BB1DwuSNQAmuaSuertFzNAerlMdPbotjTVnvPtdOs7CkrHLaev5NIXemhzDXNC0tFzuseut7cWA5mw==",
+            "requires": {
+                "@floating-ui/react-dom": "^2.1.5",
+                "@floating-ui/utils": "^0.2.10",
+                "tabbable": "^6.0.0"
+            }
+        },
+        "@floating-ui/react-dom": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.5.tgz",
+            "integrity": "sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==",
+            "requires": {
+                "@floating-ui/dom": "^1.7.3"
+            }
+        },
+        "@floating-ui/utils": {
+            "version": "0.2.10",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+            "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
+        },
         "@headlessui/react": {
             "version": "1.7.8",
             "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.8.tgz",
@@ -9765,6 +9880,16 @@
             "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
             "requires": {}
         },
+        "react-datepicker": {
+            "version": "8.4.0",
+            "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.4.0.tgz",
+            "integrity": "sha512-6nPDnj8vektWCIOy9ArS3avus9Ndsyz5XgFCJ7nBxXASSpBdSL6lG9jzNNmViPOAOPh6T5oJyGaXuMirBLECag==",
+            "requires": {
+                "@floating-ui/react": "^0.27.3",
+                "clsx": "^2.1.1",
+                "date-fns": "^4.1.0"
+            }
+        },
         "react-dom": {
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -10260,6 +10385,11 @@
                 "tslib": "^2.4.0"
             }
         },
+        "tabbable": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+            "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+        },
         "tailwindcss": {
             "version": "3.4.1",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
diff --git a/package.json b/package.json
index 4c21650..afb842a 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
         "react-animate-height": "^3.1.0",
         "react-apexcharts": "^1.7.0",
         "react-chartjs-2": "^5.3.0",
+        "react-datepicker": "^8.4.0",
         "react-dom": "18.2.0",
         "react-hot-toast": "^2.5.2",
         "react-i18next": "^12.1.5",
diff --git a/styles/tailwind.css b/styles/tailwind.css
index 4ede4f1..fb38dea 100644
--- a/styles/tailwind.css
+++ b/styles/tailwind.css
@@ -51,12 +51,12 @@
     }
     .sidebar .nav-item > button.active,
     .sidebar .nav-item > a.active {
-        @apply bg-[#000]/[0.08] text-black dark:bg-[#181f32] dark:text-white-dark;
+        @apply bg-[#000]/[0.08] text-black dark:bg-[#181f32] dark:text-white;
     }
 
     .sidebar .nav-item > button.active > div > span,
     .sidebar .nav-item > a.active > div > span {
-        @apply dark:!text-white-dark;
+        @apply dark:!text-white;
     }
 
     .sidebar ul.sub-menu li button,