diff --git a/AppImage/components/system-logs.tsx b/AppImage/components/system-logs.tsx
index 7001c0d..7c2930f 100644
--- a/AppImage/components/system-logs.tsx
+++ b/AppImage/components/system-logs.tsx
@@ -176,15 +176,37 @@ export function SystemLogs() {
     if (dateRange?.from && dateRange?.to) {
       console.log("[v0] Applying date range:", dateRange)
       setIsCalendarOpen(false)
+      setLoading(true)
       const logsRes = await fetchSystemLogs()
       console.log("[v0] Fetched logs for date range:", logsRes.length)
       setLogs(logsRes)
+      setLoading(false)
     }
   }
 
   const fetchSystemLogs = async (): Promise<SystemLog[]> => {
     try {
-      const apiUrl = getApiUrl("/api/logs")
+      let apiUrl = getApiUrl("/api/logs")
+
+      const params = new URLSearchParams()
+
+      if (dateFilter === "custom" && dateRange?.from && dateRange?.to) {
+        const fromDate = format(dateRange.from, "yyyy-MM-dd")
+        const toDate = format(dateRange.to, "yyyy-MM-dd")
+        params.append("from_date", fromDate)
+        params.append("to_date", toDate)
+        console.log("[v0] Fetching logs with custom date range:", fromDate, "to", toDate)
+      } else if (dateFilter !== "now") {
+        const daysAgo = Number.parseInt(dateFilter)
+        params.append("since_days", daysAgo.toString())
+        console.log("[v0] Fetching logs from", daysAgo, "days ago")
+      }
+
+      if (params.toString()) {
+        apiUrl += `?${params.toString()}`
+      }
+
+      console.log("[v0] Fetching logs from:", apiUrl)
 
       const response = await fetch(apiUrl, {
         method: "GET",
@@ -647,7 +669,7 @@ export function SystemLogs() {
                 </Select>
 
                 {dateFilter === "custom" && (
-                  <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
+                  <Popover open={isCalendarOpen && activeTab === "logs"} onOpenChange={setIsCalendarOpen}>
                     <PopoverTrigger asChild>
                       <Button
                         variant="outline"
diff --git a/AppImage/components/ui/calendar.tsx b/AppImage/components/ui/calendar.tsx
index c2b7046..0b66666 100644
--- a/AppImage/components/ui/calendar.tsx
+++ b/AppImage/components/ui/calendar.tsx
@@ -27,11 +27,10 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
         table: "w-full border-collapse space-y-1",
-        head_row: "grid grid-cols-7 gap-0",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem] flex items-center justify-center h-9",
-        row: "grid grid-cols-7 gap-0 w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-primary/20 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
         day_range_end: "day-range-end",
         day_selected:
@@ -40,7 +39,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         day_outside:
           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
         day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-primary/20 aria-selected:text-foreground",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames,
       }}