diff --git a/src/main/frontend/prefers-color-scheme.js b/src/main/frontend/prefers-color-scheme.js
new file mode 100644
index 0000000..61db7da
--- /dev/null
+++ b/src/main/frontend/prefers-color-scheme.js
@@ -0,0 +1,12 @@
+window.applyTheme = () => {
+    const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "";
+    document.documentElement.setAttribute("theme", theme);
+};
+window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener('change', function () {
+        window.applyTheme()
+    });
+window.applyTheme();
\ No newline at end of file
diff --git a/src/main/java/org/kickerelo/kickerelo/layout/KickerAppLayout.java b/src/main/java/org/kickerelo/kickerelo/layout/KickerAppLayout.java
index 16218bd..675edad 100644
--- a/src/main/java/org/kickerelo/kickerelo/layout/KickerAppLayout.java
+++ b/src/main/java/org/kickerelo/kickerelo/layout/KickerAppLayout.java
@@ -2,6 +2,7 @@ package org.kickerelo.kickerelo.layout;
 
 import com.vaadin.flow.component.applayout.AppLayout;
 import com.vaadin.flow.component.applayout.DrawerToggle;
+import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.html.H1;
 import com.vaadin.flow.component.orderedlayout.Scroller;
 import com.vaadin.flow.component.sidenav.SideNav;
@@ -14,6 +15,7 @@ import com.vaadin.flow.theme.lumo.LumoUtility;
 import org.kickerelo.kickerelo.views.*;
 
 @Layout
+@JsModule("prefers-color-scheme.js")
 public class KickerAppLayout extends AppLayout {
 
     public KickerAppLayout() {
diff --git a/src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java b/src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java
index b81cc79..d2b772b 100644
--- a/src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java
+++ b/src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java
@@ -7,6 +7,8 @@ import com.github.appreciated.apexcharts.config.builder.YAxisBuilder;
 import com.github.appreciated.apexcharts.config.chart.Type;
 import com.github.appreciated.apexcharts.config.chart.builder.ZoomBuilder;
 import com.github.appreciated.apexcharts.config.chart.zoom.ZoomType;
+import com.github.appreciated.apexcharts.config.xaxis.Labels;
+import com.github.appreciated.apexcharts.config.xaxis.labels.Style;
 import com.github.appreciated.apexcharts.config.yaxis.Title;
 import com.github.appreciated.apexcharts.helper.Series;
 import org.kickerelo.kickerelo.data.Spieler;
@@ -17,12 +19,20 @@ import java.util.List;
 
 public class Chart1vs1 extends ApexChartsBuilder {
     public Chart1vs1(List<Spieler> l) {
+        Style style = new Style();
+        style.setColors(List.of("#80C3FC"));
+        Labels labels = new Labels();
+        labels.setRotate(270d);
+        labels.setShow(true);
+        labels.setRotateAlways(false);
+        labels.setStyle(style);
         withChart(ChartBuilder.get().withType(Type.SCATTER)
                 .withZoom(ZoomBuilder.get().withEnabled(true).withType(ZoomType.XY).build()).build())
                 .withSeries(new Series<>("ELO",
                         l.stream().sorted(new Spieler1vs1EloComparator()).map(Spieler::getElo1vs1).toArray()
                         ))
-                .withXaxis(XAxisBuilder.get().withCategories(l.stream().sorted(new Spieler1vs1EloComparator()).map(Spieler::getName).toList()).build())
+                .withXaxis(XAxisBuilder.get().withCategories(l.stream().sorted(new Spieler1vs1EloComparator())
+                        .map(Spieler::getName).toList()).withLabels(labels).build())
                 .withYaxis(YAxisBuilder.get().build());
     }
 }