diff --git a/frontend/src/components/HomeComponents/Tasks/ReportChart.tsx b/frontend/src/components/HomeComponents/Tasks/ReportChart.tsx
index 8bb1db4c..5009815a 100644
--- a/frontend/src/components/HomeComponents/Tasks/ReportChart.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/ReportChart.tsx
@@ -39,10 +39,12 @@ export const ReportChart: React.FC<ReportChartProps> = ({
   return (
     <div
       id={chartId}
-      className="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+      className="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
     >
       <div className="flex justify-between items-center mb-4">
-        <h3 className="text-center text-xl text-white flex-1">{title}</h3>
+        <h3 className="text-center text-xl text-black dark:text-white flex-1">
+          {title}
+        </h3>
         <div className="flex gap-2">
           <Button
             variant="ghost"
@@ -50,9 +52,9 @@ export const ReportChart: React.FC<ReportChartProps> = ({
             onClick={handleCSVExport}
             disabled={isExporting}
             title="Download as CSV"
-            className="h-8 w-8 hover:bg-gray-700"
+            className="h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
           >
-            <FileText className="h-4 w-4 text-gray-400 hover:text-white" />
+            <FileText className="h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1" />
           </Button>
           <Button
             variant="ghost"
@@ -60,12 +62,12 @@ export const ReportChart: React.FC<ReportChartProps> = ({
             onClick={handlePNGExport}
             disabled={isExporting}
             title="Download as PNG"
-            className="h-8 w-8 hover:bg-gray-700"
+            className="h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
           >
             {isExporting ? (
               <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
             ) : (
-              <Image className="h-4 w-4 text-gray-400 hover:text-white" />
+              <Image className="h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white" />
             )}
           </Button>
         </div>
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index d5b0df33..7229bfc2 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -1163,6 +1163,7 @@ export const Tasks = (
                           </div>
                           <DialogFooter>
                             <Button
+                              className="dark:bg-white/5 bg-black hover:bg-black text-white"
                               variant="secondary"
                               onClick={() => setIsAddTaskOpen(false)}
                             >
@@ -1274,7 +1275,7 @@ export const Tasks = (
                                       task.status === 'pending' &&
                                       isOverdue(task.due)
                                         ? 'bg-red-600/80 text-white'
-                                        : ''
+                                        : 'dark:text-white text-black'
                                     }`}
                                   >
                                     {task.id}
@@ -2405,7 +2406,9 @@ export const Tasks = (
                                   </Dialog>
                                 ) : null}
                                 <DialogClose asChild>
-                                  <Button className="bg-white">Close</Button>
+                                  <Button className="dark:bg-white bg-black ">
+                                    Close
+                                  </Button>
                                 </DialogClose>
                               </DialogFooter>
                             </DialogContent>
@@ -2437,7 +2440,7 @@ export const Tasks = (
                         onChange={(e) =>
                           handleTasksPerPageChange(parseInt(e.target.value, 10))
                         }
-                        className="border rounded-md px-2 py-1 bg-black text-white h-10 text-sm"
+                        className="border border[1px] rounded-md px-2 py-1 bg-white dark:bg-black text-black dark:text-white h-10 text-sm"
                       >
                         <option value="5">5</option>
                         <option value="10">10</option>
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/__snapshots__/ReportChart.test.tsx.snap b/frontend/src/components/HomeComponents/Tasks/__tests__/__snapshots__/ReportChart.test.tsx.snap
index 73c3949a..21d170d2 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/__snapshots__/ReportChart.test.tsx.snap
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/__snapshots__/ReportChart.test.tsx.snap
@@ -3,14 +3,14 @@
 exports[`ReportChart Component using Snapshot renders correctly with one data entry: one data entry 1`] = `
 <DocumentFragment>
   <div
-    class="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+    class="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
     id="chart-1"
   >
     <div
       class="flex justify-between items-center mb-4"
     >
       <h3
-        class="text-center text-xl text-white flex-1"
+        class="text-center text-xl text-black dark:text-white flex-1"
       >
         One project
       </h3>
@@ -18,11 +18,11 @@ exports[`ReportChart Component using Snapshot renders correctly with one data en
         class="flex gap-2"
       >
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+          class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
           title="Download as CSV"
         >
           <svg
-            class="lucide lucide-file-text h-4 w-4 text-gray-400 hover:text-white"
+            class="lucide lucide-file-text h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -60,11 +60,11 @@ exports[`ReportChart Component using Snapshot renders correctly with one data en
           </svg>
         </button>
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+          class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
           title="Download as PNG"
         >
           <svg
-            class="lucide lucide-image h-4 w-4 text-gray-400 hover:text-white"
+            class="lucide lucide-image h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -137,14 +137,14 @@ exports[`ReportChart Component using Snapshot renders correctly with one data en
 exports[`ReportChart Component using Snapshot renders correctly with several data entries: several data entries 1`] = `
 <DocumentFragment>
   <div
-    class="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+    class="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
     id="chart-2"
   >
     <div
       class="flex justify-between items-center mb-4"
     >
       <h3
-        class="text-center text-xl text-white flex-1"
+        class="text-center text-xl text-black dark:text-white flex-1"
       >
         Multiple projects
       </h3>
@@ -152,11 +152,11 @@ exports[`ReportChart Component using Snapshot renders correctly with several dat
         class="flex gap-2"
       >
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+          class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
           title="Download as CSV"
         >
           <svg
-            class="lucide lucide-file-text h-4 w-4 text-gray-400 hover:text-white"
+            class="lucide lucide-file-text h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -194,11 +194,11 @@ exports[`ReportChart Component using Snapshot renders correctly with several dat
           </svg>
         </button>
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+          class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
           title="Download as PNG"
         >
           <svg
-            class="lucide lucide-image h-4 w-4 text-gray-400 hover:text-white"
+            class="lucide lucide-image h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white"
             fill="none"
             height="24"
             stroke="currentColor"
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/__snapshots__/ReportView.test.tsx.snap b/frontend/src/components/HomeComponents/Tasks/__tests__/__snapshots__/ReportView.test.tsx.snap
index eca12e37..1d9df42e 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/__snapshots__/ReportView.test.tsx.snap
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/__snapshots__/ReportView.test.tsx.snap
@@ -6,14 +6,14 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
     class="flex flex-wrap gap-4 justify-center mt-10"
   >
     <div
-      class="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+      class="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
       id="daily-report-chart"
     >
       <div
         class="flex justify-between items-center mb-4"
       >
         <h3
-          class="text-center text-xl text-white flex-1"
+          class="text-center text-xl text-black dark:text-white flex-1"
         >
           Daily Report
         </h3>
@@ -21,11 +21,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
           class="flex gap-2"
         >
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as CSV"
           >
             <svg
-              class="lucide lucide-file-text h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-file-text h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -63,11 +63,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
             </svg>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as PNG"
           >
             <svg
-              class="lucide lucide-image h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-image h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -157,14 +157,14 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
       </div>
     </div>
     <div
-      class="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+      class="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
       id="weekly-report-chart"
     >
       <div
         class="flex justify-between items-center mb-4"
       >
         <h3
-          class="text-center text-xl text-white flex-1"
+          class="text-center text-xl text-black dark:text-white flex-1"
         >
           Weekly Report
         </h3>
@@ -172,11 +172,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
           class="flex gap-2"
         >
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as CSV"
           >
             <svg
-              class="lucide lucide-file-text h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-file-text h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -214,11 +214,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
             </svg>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as PNG"
           >
             <svg
-              class="lucide lucide-image h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-image h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -308,14 +308,14 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
       </div>
     </div>
     <div
-      class="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+      class="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
       id="monthly-report-chart"
     >
       <div
         class="flex justify-between items-center mb-4"
       >
         <h3
-          class="text-center text-xl text-white flex-1"
+          class="text-center text-xl text-black dark:text-white flex-1"
         >
           Monthly Report
         </h3>
@@ -323,11 +323,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
           class="flex gap-2"
         >
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as CSV"
           >
             <svg
-              class="lucide lucide-file-text h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-file-text h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -365,11 +365,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only one ta
             </svg>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as PNG"
           >
             <svg
-              class="lucide lucide-image h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-image h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -468,14 +468,14 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
     class="flex flex-wrap gap-4 justify-center mt-10"
   >
     <div
-      class="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+      class="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
       id="daily-report-chart"
     >
       <div
         class="flex justify-between items-center mb-4"
       >
         <h3
-          class="text-center text-xl text-white flex-1"
+          class="text-center text-xl text-black dark:text-white flex-1"
         >
           Daily Report
         </h3>
@@ -483,11 +483,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
           class="flex gap-2"
         >
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as CSV"
           >
             <svg
-              class="lucide lucide-file-text h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-file-text h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -525,11 +525,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
             </svg>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as PNG"
           >
             <svg
-              class="lucide lucide-image h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-image h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -619,14 +619,14 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
       </div>
     </div>
     <div
-      class="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+      class="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
       id="weekly-report-chart"
     >
       <div
         class="flex justify-between items-center mb-4"
       >
         <h3
-          class="text-center text-xl text-white flex-1"
+          class="text-center text-xl text-black dark:text-white flex-1"
         >
           Weekly Report
         </h3>
@@ -634,11 +634,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
           class="flex gap-2"
         >
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as CSV"
           >
             <svg
-              class="lucide lucide-file-text h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-file-text h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -676,11 +676,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
             </svg>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as PNG"
           >
             <svg
-              class="lucide lucide-image h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-image h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -770,14 +770,14 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
       </div>
     </div>
     <div
-      class="flex-1 min-w-[300px] p-4 bg-[#1c1c1c] rounded-lg h-[350px] relative"
+      class="flex-1 min-w-[300px] p-4 border border[1px] bg-black/15 dark:bg-[#1c1c1c] rounded-lg h-[350px] relative"
       id="monthly-report-chart"
     >
       <div
         class="flex justify-between items-center mb-4"
       >
         <h3
-          class="text-center text-xl text-white flex-1"
+          class="text-center text-xl text-black dark:text-white flex-1"
         >
           Monthly Report
         </h3>
@@ -785,11 +785,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
           class="flex gap-2"
         >
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as CSV"
           >
             <svg
-              class="lucide lucide-file-text h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-file-text h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white m-1"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -827,11 +827,11 @@ exports[`ReportsView Component using Snapshot renders correctly with only severa
             </svg>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-gray-700"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-8 w-8 hover:bg-transparent dark:hover:bg-gray-700"
             title="Download as PNG"
           >
             <svg
-              class="lucide lucide-image h-4 w-4 text-gray-400 hover:text-white"
+              class="lucide lucide-image h-4 w-4 text-black dark:text-gray-400 dark:hover:text-white"
               fill="none"
               height="24"
               stroke="currentColor"