diff --git a/packages/core/src/components/date-picker/date-picker.scss b/packages/core/src/components/date-picker/date-picker.scss
index 7e6c047f601..ad8ca2aa2b2 100644
--- a/packages/core/src/components/date-picker/date-picker.scss
+++ b/packages/core/src/components/date-picker/date-picker.scss
@@ -12,6 +12,9 @@
 
 :host {
   @include ix-component;
+  display: block;
+  position: relative;
+  width: 22rem;
 
   .header {
     display: flex;
diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx
index df13a8e9318..c76c4e5428e 100644
--- a/packages/core/src/components/date-picker/date-picker.tsx
+++ b/packages/core/src/components/date-picker/date-picker.tsx
@@ -32,7 +32,7 @@ export type DateTimeCorners = DateTimeCardCorners;
 
 @Component({
   tag: 'ix-date-picker',
-  styleUrl: 'date-picker.scss',
+  styleUrl: './date-picker.scss',
   shadow: true,
 })
 export class DatePicker {
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png
index c49f963c9cb..9ef30175e09 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png
index e4dd133d8d4..f371256e51a 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png
index 637c44ec87d..3e52ca1f5ae 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png
index 22906a3657c..8c2909e076d 100644
Binary files a/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-picker/date-picker.e2e.ts-snapshots/date-picker-range-1-chromium---theme-classic-light-linux.png differ