diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/PopoverPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/PopoverPage.java
index 372a52b..aa62ac9 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/components/PopoverPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/PopoverPage.java
@@ -5,7 +5,7 @@ package atlantafx.sampler.page.components;
 import atlantafx.base.controls.Calendar;
 import atlantafx.base.controls.Popover;
 import atlantafx.base.controls.Popover.ArrowLocation;
-import atlantafx.base.theme.Styles;
+import atlantafx.base.theme.Tweaks;
 import atlantafx.base.util.BBCodeParser;
 import atlantafx.sampler.page.ExampleBox;
 import atlantafx.sampler.page.OutlinePage;
@@ -51,16 +51,6 @@ public final class PopoverPage extends OutlinePage {
     }
 
     private ExampleBox usageExample() {
-        var dataClass = """
-            .popover .date-picker-popup {
-              -color-date-border: transparent;
-              -color-date-bg: transparent;
-              -color-date-day-bg: transparent;
-              -color-date-month-year-bg: transparent;
-              -color-date-day-bg-hover: -color-bg-subtle;
-            }
-            """;
-
         //snippet_1:start
         var textFlow = new TextFlow(new Text(
             FAKER.lorem().sentence(30)
@@ -79,12 +69,7 @@ public final class PopoverPage extends OutlinePage {
         // ~
         var cal = new Calendar();
         cal.setValue(LocalDate.now(ZoneId.systemDefault()));
-        // -color-date-border: transparent;
-        // -color-date-bg: transparent;
-        // -color-date-day-bg: transparent;
-        // -color-date-month-year-bg: transparent;
-        // -color-date-day-bg-hover: -color-bg-subtle;
-        cal.getStylesheets().add(Styles.toDataURI(dataClass));
+        cal.getStyleClass().add(Tweaks.EDGE_TO_EDGE);
 
         var pop2 = new Popover(cal);
         pop2.setHeaderAlwaysVisible(false);
diff --git a/sampler/src/main/resources/atlantafx/sampler/assets/fxml/blueprints/calendar.fxml b/sampler/src/main/resources/atlantafx/sampler/assets/fxml/blueprints/calendar.fxml
index 8f888de..083aefc 100644
--- a/sampler/src/main/resources/atlantafx/sampler/assets/fxml/blueprints/calendar.fxml
+++ b/sampler/src/main/resources/atlantafx/sampler/assets/fxml/blueprints/calendar.fxml
@@ -57,7 +57,7 @@
       <Separator orientation="VERTICAL" prefHeight="200.0" styleClass="large" />
       <VBox alignment="TOP_CENTER" spacing="10.0">
          <children>
-            <Calendar prefWidth="400.0" showWeekNumbers="true" VBox.vgrow="NEVER" />
+            <Calendar prefWidth="400.0" showWeekNumbers="true" VBox.vgrow="NEVER" styleClass="edge-to-edge" />
             <Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" styleClass="flat">
                <graphic>
                   <Label maxWidth="1.7976931348623157E308" styleClass="danger" text="Remove due date" />
diff --git a/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/page/_showcase.scss b/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/page/_showcase.scss
index 31381b5..c447c15 100644
--- a/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/page/_showcase.scss
+++ b/sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/page/_showcase.scss
@@ -54,10 +54,6 @@
     -fx-background-radius: 10px;
   }
 
-  .date-picker-popup {
-    -color-date-border: transparent;
-  }
-
   .no-border {
     -fx-background-insets: 0;
   }
diff --git a/styles/src/components/_date-picker.scss b/styles/src/components/_date-picker.scss
index e50527e..9b11f09 100755
--- a/styles/src/components/_date-picker.scss
+++ b/styles/src/components/_date-picker.scss
@@ -252,6 +252,12 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
   }
 }
 
+.edge-to-edge>.calendar.date-picker-popup {
+  -fx-background-color: -color-date-bg;
+  -fx-background-insets: 0;
+  -fx-background-radius: 0;
+}
+
 .date-picker-popup>.calendar-grid>.selected,
 .date-picker-popup>.calendar-grid>.selected>.secondary-text,
 .date-picker-popup>.calendar-grid>.previous-month.selected,