diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index e2df294c3..2d4298a36 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -11,6 +11,7 @@
 @import "./simonweb_pickr.css";
 
 @import "./google-sign-in.css";
+@import "./date-picker-dark-mode.css";
 
 @layer components {
   .pcr-app{
@@ -186,4 +187,4 @@
   opacity: 0;
   pointer-events: none;
   position: absolute;
-}
\ No newline at end of file
+}
diff --git a/app/assets/tailwind/date-picker-dark-mode.css b/app/assets/tailwind/date-picker-dark-mode.css
new file mode 100644
index 000000000..2cf082882
--- /dev/null
+++ b/app/assets/tailwind/date-picker-dark-mode.css
@@ -0,0 +1,12 @@
+/* 
+  Fix for date input calendar picker icon visibility in dark mode.
+  
+  The native browser calendar picker icon is typically dark, making it 
+  invisible on dark backgrounds. This rule inverts the icon color in 
+  dark mode to ensure proper visibility.
+*/
+
+[data-theme=dark] input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+  cursor: pointer;
+}
diff --git a/app/views/settings/llm_usages/show.html.erb b/app/views/settings/llm_usages/show.html.erb
index 91e565cd3..556284c8a 100644
--- a/app/views/settings/llm_usages/show.html.erb
+++ b/app/views/settings/llm_usages/show.html.erb
@@ -9,13 +9,13 @@
     <%= form_with url: settings_llm_usage_path, method: :get, class: "flex gap-4 items-end" do |f| %>
       <div>
         <%= f.label :start_date, "Start Date", class: "block text-sm font-medium text-primary mb-1" %>
-        <%= f.date_field :start_date, value: @start_date, class: "rounded-lg border border-primary px-3 py-2 text-sm" %>
+        <%= f.date_field :start_date, value: @start_date, class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary" %>
       </div>
       <div>
         <%= f.label :end_date, "End Date", class: "block text-sm font-medium text-primary mb-1" %>
-        <%= f.date_field :end_date, value: @end_date, class: "rounded-lg border border-primary px-3 py-2 text-sm" %>
+        <%= f.date_field :end_date, value: @end_date, class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary" %>
       </div>
-      <%= f.submit "Filter", class: "rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800" %>
+      <%= render DS::Button.new(variant: :secondary, size: :md, type: "submit", text: "Filter") %>
     <% end %>
   </div>