diff --git a/src/vcf-date-range-picker-text-field.js b/src/vcf-date-range-picker-text-field.js
index e10946d..aa329ca 100644
--- a/src/vcf-date-range-picker-text-field.js
+++ b/src/vcf-date-range-picker-text-field.js
@@ -8,6 +8,10 @@ registerStyles(
         direction: ltr;
       }
 
+      :host(.dash) {
+        pointer-events: none;
+      }
+
       :host([dir="rtl"]) [part="value"]::placeholder {
         direction: rtl;
         text-align: left;
diff --git a/theme/material/vcf-date-range-month-calendar-styles.js b/theme/material/vcf-date-range-month-calendar-styles.js
index b936181..8430153 100644
--- a/theme/material/vcf-date-range-month-calendar-styles.js
+++ b/theme/material/vcf-date-range-month-calendar-styles.js
@@ -3,7 +3,7 @@ import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 
 registerStyles(
-  'vaadin-month-calendar',
+  'vcf-date-range-month-calendar',
   css`
       :host {
         color: var(--material-body-text-color);
diff --git a/theme/material/vcf-date-range-picker-overlay-styles.js b/theme/material/vcf-date-range-picker-overlay-styles.js
index cc31607..16a6771 100644
--- a/theme/material/vcf-date-range-picker-overlay-styles.js
+++ b/theme/material/vcf-date-range-picker-overlay-styles.js
@@ -19,7 +19,7 @@ registerStyles(
       }
 
       :host(:not([fullscreen])) [part="overlay"] {
-        width: 360px;
+        width: 500px;
         max-height: 500px;
         border-radius: 0 4px 4px;
       }
@@ -33,7 +33,7 @@ registerStyles(
       }
 
       :host(:not([fullscreen])[show-week-numbers]) [part="overlay"] {
-        width: 396px;
+        width: 536px;
       }
 
       [part="content"] {
diff --git a/theme/material/vcf-date-range-picker-styles.js b/theme/material/vcf-date-range-picker-styles.js
index 7bdd12e..3c6e90d 100644
--- a/theme/material/vcf-date-range-picker-styles.js
+++ b/theme/material/vcf-date-range-picker-styles.js
@@ -16,6 +16,12 @@ registerStyles(
         content: var(--material-icons-clear);
       }
 
+      [part="dash"] {
+        width: 13px;
+        align-self: baseline;
+        flex-grow: 1;
+      }
+
       [part="toggle-button"]::before {
         content: var(--material-icons-calendar);
       }
diff --git a/theme/material/vcf-date-range-picker-text-field.js b/theme/material/vcf-date-range-picker-text-field.js
index c93e1de..7218180 100644
--- a/theme/material/vcf-date-range-picker-text-field.js
+++ b/theme/material/vcf-date-range-picker-text-field.js
@@ -1,2 +1,2 @@
-import '../../../vaadin-text-field/theme/material/vaadin-text-field.js'
+import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js'
 import '../../src/vcf-date-range-picker-text-field.js'
\ No newline at end of file
diff --git a/theme/material/vcf-date-range-picker.js b/theme/material/vcf-date-range-picker.js
index aefd8a7..a824483 100644
--- a/theme/material/vcf-date-range-picker.js
+++ b/theme/material/vcf-date-range-picker.js
@@ -1,6 +1,6 @@
 import './vcf-date-range-picker-overlay-styles.js';
 import './vcf-date-range-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
+import './vcf-date-range-month-calendar-styles.js';
 import './vcf-date-range-picker-styles.js';
 import './vcf-date-range-picker-text-field.js';
 import '../../src/vcf-date-range-picker.js';
\ No newline at end of file