diff --git a/Cargo.lock b/Cargo.lock
index f06c91f..19491e1 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -740,6 +740,15 @@ dependencies = [
  "zeroize",
 ]
 
+[[package]]
+name = "codee"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "af40247be877a1e3353fb406aa27ab3ef4bd3ff18cef91e75e667bfa3fde701d"
+dependencies = [
+ "thiserror",
+]
+
 [[package]]
 name = "collection_literals"
 version = "1.0.1"
@@ -1554,6 +1563,7 @@ dependencies = [
  "itertools 0.12.1",
  "leptos",
  "leptos-chartistry",
+ "leptos-use 0.11.4",
  "leptos_meta",
  "leptos_router",
  "nostr-sdk",
@@ -2551,7 +2561,7 @@ checksum = "b52022d33b753a78de85db8a7a8ac41a03706fc4624445f0c20a1007510dc9a2"
 dependencies = [
  "chrono",
  "leptos",
- "leptos-use",
+ "leptos-use 0.10.10",
  "log",
  "web-sys",
 ]
@@ -2579,6 +2589,30 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "leptos-use"
+version = "0.11.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5dee762dddb74278ff09b3242e27a4eddbf0b614b3918bc538634fc0fca117bb"
+dependencies = [
+ "async-trait",
+ "cfg-if",
+ "codee",
+ "cookie",
+ "default-struct-builder",
+ "futures-util",
+ "gloo-timers 0.3.0",
+ "gloo-utils",
+ "js-sys",
+ "lazy_static",
+ "leptos",
+ "paste",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "leptos_config"
 version = "0.6.13"
diff --git a/fmo_frontend/Cargo.toml b/fmo_frontend/Cargo.toml
index 7fc2bd0..fc04bd2 100644
--- a/fmo_frontend/Cargo.toml
+++ b/fmo_frontend/Cargo.toml
@@ -14,6 +14,7 @@ leptos = { version = "0.6", features = ["csr"] }
 leptos-chartistry = "0.1.6"
 leptos_meta = { version = "=0.6.1", features = ["csr"] }
 leptos_router = { version = "0.6.13", features = ["csr"] }
+leptos-use = { version = "0.11.4" }
 nostr-sdk = {version = "0.34.0", features = ["nip07"]}
 num-format = "0.4.4"
 reqwest = { version = "0.12.5", default-features = false, features = [ "json" ] }
diff --git a/fmo_frontend/src/components/federation/activity.rs b/fmo_frontend/src/components/federation/activity.rs
index 0676957..27b6268 100644
--- a/fmo_frontend/src/components/federation/activity.rs
+++ b/fmo_frontend/src/components/federation/activity.rs
@@ -13,6 +13,7 @@ use leptos::{
     SignalSet, SignalUpdate,
 };
 use leptos_chartistry::*;
+use leptos_use::use_preferred_dark;
 
 use crate::components::alert::{Alert, AlertLevel};
 use crate::util::AsBitcoin;
@@ -123,17 +124,22 @@ pub fn ChartInner(data: BTreeMap<NaiveDate, FederationActivity>) -> impl IntoVie
                         </label>
                     </div>
                 </Show>
-                <select
-                    on:change=move |ev| {
-                        let new_value = event_target_value(&ev);
-                        set_chart_type.set(new_value.parse().unwrap());
-                    }
-
-                    prop:value=move || chart_type.get().to_string()
+                <div
+                    class="max-w-sm"
                 >
-                    <option value="Volume">"Volume"</option>
-                    <option value="Transactions">"Transactions"</option>
-                </select>
+                    <select
+                        class="bg-gray-50 border border-gray-300 text-gray-900 mb-6 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                        on:change=move |ev| {
+                            let new_value = event_target_value(&ev);
+                            set_chart_type.set(new_value.parse().unwrap());
+                        }
+
+                        prop:value=move || chart_type.get().to_string()
+                    >
+                        <option value="Volume">"Volume"</option>
+                        <option value="Transactions">"Transactions"</option>
+                    </select>
+                </div>
             </div>
 
             {move || {
@@ -157,65 +163,83 @@ pub fn ChartInner(data: BTreeMap<NaiveDate, FederationActivity>) -> impl IntoVie
 
 #[component]
 fn VolumeChart(data: Vec<(DateTime<Utc>, f64)>) -> impl IntoView {
+    let prefers_dark = use_preferred_dark();
     view! {
-        <Chart
-            // Sets the width and height
-            aspect_ratio=AspectRatio::from_env_width(300.0)
+        <div style=move || {
+            if prefers_dark.get() {
+                "fill: white"
+            } else {
+                "fill: black"
+            }
+        }>
+            <Chart
+                // Sets the width and height
+                aspect_ratio=AspectRatio::from_env_width(300.0)
 
-            // Decorate our chart
-            top=RotatedLabel::middle("Federation Activity")
-            left=TickLabels::aligned_floats()
-            bottom=TickLabels::from_generator(Timestamps::from_period(Period::Month))
-            inner=[
-                AxisMarker::left_edge().into_inner(),
-                AxisMarker::bottom_edge().into_inner(),
-                XGridLine::default().into_inner(),
-                YGridLine::default().into_inner(),
-            ]
+                // Decorate our chart
+                top=RotatedLabel::middle("Federation Activity")
+                left=TickLabels::aligned_floats()
+                bottom=TickLabels::from_generator(Timestamps::from_period(Period::Month))
+                inner=[
+                    AxisMarker::left_edge().into_inner(),
+                    AxisMarker::bottom_edge().into_inner(),
+                    XGridLine::default().into_inner(),
+                    YGridLine::default().into_inner(),
+                ]
 
-            // Describe the data
-            series=Series::new(|data: &(DateTime<Utc>, f64)| data.0)
-                .line(
-                    Line::new(|data: &(DateTime<Utc>, f64)| data.1)
-                        .with_name("Volume")
-                        .with_interpolation(Interpolation::Linear),
-                )
+                // Describe the data
+                series=Series::new(|data: &(DateTime<Utc>, f64)| data.0)
+                    .line(
+                        Line::new(|data: &(DateTime<Utc>, f64)| data.1)
+                            .with_name("Volume")
+                            .with_interpolation(Interpolation::Linear),
+                    )
 
-            data=move || data.clone()
-        />
+                data=move || data.clone()
+            />
+        </div>
     }
 }
 
 #[component]
 fn TransactionsChart(data: Vec<(DateTime<Utc>, f64)>) -> impl IntoView {
+    let prefers_dark = use_preferred_dark();
     view! {
-        <Chart
-            // Sets the width and height
-            aspect_ratio=AspectRatio::from_env_width(300.0)
+        <div style=move || {
+            if prefers_dark.get() {
+                "fill: white"
+            } else {
+                "fill: black"
+            }
+        }>
+            <Chart
+                // Sets the width and height
+                aspect_ratio=AspectRatio::from_env_width(300.0)
 
-            // Decorate our chart
-            top=RotatedLabel::middle("Federation Activity")
-            left=TickLabels::aligned_floats()
-            bottom=TickLabels::from_generator(Timestamps::from_period(Period::Month))
-            inner=[
-                AxisMarker::left_edge().into_inner(),
-                AxisMarker::bottom_edge().into_inner(),
-                XGridLine::default().into_inner(),
-                YGridLine::default().into_inner(),
-                XGuideLine::over_data().into_inner(),
-                YGuideLine::over_mouse().into_inner(),
-            ]
+                // Decorate our chart
+                top=RotatedLabel::middle("Federation Activity")
+                left=TickLabels::aligned_floats()
+                bottom=TickLabels::from_generator(Timestamps::from_period(Period::Month))
+                inner=[
+                    AxisMarker::left_edge().into_inner(),
+                    AxisMarker::bottom_edge().into_inner(),
+                    XGridLine::default().into_inner(),
+                    YGridLine::default().into_inner(),
+                    XGuideLine::over_data().into_inner(),
+                    YGuideLine::over_mouse().into_inner(),
+                ]
 
-            // Describe the data
-            series=Series::new(|data: &(DateTime<Utc>, f64)| data.0)
-                .line(
-                    Line::new(|data: &(DateTime<Utc>, f64)| data.1)
-                        .with_name("Transactions")
-                        .with_interpolation(Interpolation::Linear),
-                )
+                // Describe the data
+                series=Series::new(|data: &(DateTime<Utc>, f64)| data.0)
+                    .line(
+                        Line::new(|data: &(DateTime<Utc>, f64)| data.1)
+                            .with_name("Transactions")
+                            .with_interpolation(Interpolation::Linear),
+                    )
 
-            data=move || data.clone()
-        />
+                data=move || data.clone()
+            />
+        </div>
     }
 }