diff --git a/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html b/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html
index c9ef03334394a5ecd582161b29c182bfc003cf06..058a3436597d907b0bd124cf97099e29d7d9171f 100644
--- a/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html
+++ b/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html
@@ -59,7 +59,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="openingDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #openingDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #openingDateDatepicker
+    ></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field>
@@ -71,7 +73,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="closingDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #closingDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #closingDateDatepicker
+    ></mat-datepicker>
   </mat-form-field>
 
   <mat-checkbox [formControlName]="formDefinition.isEmpty">{{'admin.organizationalUnit.form.isEmpty' | translate }}</mat-checkbox>
diff --git a/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.ts b/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.ts
index 2c0d14b8e616a8fe7f38c77c011b72dbeb06185f..e2c283126942056a4bda57f75014614f4f85dc07 100644
--- a/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.ts
+++ b/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.ts
@@ -16,6 +16,7 @@ import {OrganizationalUnitExtended} from "@deposit/models/organizational-unit-ex
 import {SharedAbstractFormPresentational} from "@shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational";
 import {LocalModelAttributeEnum} from "@shared/enums/model-attribute.enum";
 import {BaseFormDefinition} from "@shared/models/base-form-definition.model";
+import {BreakpointService} from "@shared/services/breakpoint.service";
 import _ from "lodash";
 import {
   DateUtil,
@@ -45,7 +46,8 @@ export class AdminOrgunitFormPresentational extends SharedAbstractFormPresentati
   listPreservationPolicies: PreservationPolicy[];
 
   constructor(protected readonly _changeDetectorRef: ChangeDetectorRef,
-              private readonly _fb: FormBuilder) {
+              private readonly _fb: FormBuilder,
+              public readonly breakpointService: BreakpointService) {
     super(_changeDetectorRef);
   }
 
diff --git a/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html b/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html
index 6e9a5c2a3b1b5ab80a83a3114ae9b548ebccb1b3..df7490ae363d5798a4291aa7312678c71c2f851c 100644
--- a/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html
+++ b/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html
@@ -72,7 +72,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="publicationDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #publicationDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #publicationDateDatepicker
+    ></mat-datepicker>
     <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
   </mat-form-field>
 
@@ -91,7 +93,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="collectionBeginDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #collectionBeginDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #collectionBeginDatepicker
+    ></mat-datepicker>
     <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
   </mat-form-field>
 
@@ -110,7 +114,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="collectionEndDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #collectionEndDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #collectionEndDatepicker
+    ></mat-datepicker>
     <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
   </mat-form-field>
 
diff --git a/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.ts b/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.ts
index cfebdbb3bc8ae62b2469a27433a8f3cfb6768b2e..11958d48bc86ee1767c3820b629c3e46b1280768 100644
--- a/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.ts
+++ b/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.ts
@@ -24,6 +24,7 @@ import {SharedAbstractFormPresentational} from "@app/shared/components/presentat
 import {LocalModelAttributeEnum} from "@app/shared/enums/model-attribute.enum";
 import {BaseFormDefinition} from "@app/shared/models/base-form-definition.model";
 import {DepositPersonDialog} from "@deposit/components/dialogs/deposit-person/deposit-person.dialog";
+import {BreakpointService} from "@shared/services/breakpoint.service";
 import _ from "lodash";
 import {
   distinctUntilChanged,
@@ -78,7 +79,8 @@ export class DepositFormPresentational extends SharedAbstractFormPresentational<
 
   constructor(protected readonly _changeDetectorRef: ChangeDetectorRef,
               private readonly _fb: FormBuilder,
-              private readonly dialog: MatDialog) {
+              private readonly dialog: MatDialog,
+              public readonly breakpointService: BreakpointService) {
     super(_changeDetectorRef);
   }
 
diff --git a/src/app/features/home/components/presentationals/home-archive-form/home-archive-detail-presentational.component.scss b/src/app/features/home/components/presentationals/home-archive-form/home-archive-detail-presentational.component.scss
index 8a4ffa66315aee548445d88dfa6f11f38809d7f4..74083918550f575fbb4926ef306370c4d95235d3 100644
--- a/src/app/features/home/components/presentationals/home-archive-form/home-archive-detail-presentational.component.scss
+++ b/src/app/features/home/components/presentationals/home-archive-form/home-archive-detail-presentational.component.scss
@@ -51,5 +51,5 @@ dd {
 .code {
   font-family: monospace;
   white-space: pre-line;
-  padding-top: 0px;
+  padding-top: 0;
 }
diff --git a/src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.html b/src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.html
index c4d3af7710e61a9c54fe171dee0e2cf3d2d4cae4..ae65e187c8412afcb2fc3c3ef5ed440e3eb0d144 100644
--- a/src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.html
+++ b/src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.html
@@ -31,7 +31,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="openingDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #openingDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #openingDateDatepicker
+    ></mat-datepicker>
   </mat-form-field>
 
   <mat-form-field>
@@ -43,7 +45,9 @@
     <mat-datepicker-toggle matSuffix
                            [for]="closingDateDatepicker"
     ></mat-datepicker-toggle>
-    <mat-datepicker #closingDateDatepicker></mat-datepicker>
+    <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+                    #closingDateDatepicker
+    ></mat-datepicker>
   </mat-form-field>
 
   <mat-checkbox [formControlName]="formDefinition.isEmpty">{{'organizationalUnit.isEmpty' | translate }}</mat-checkbox>
diff --git a/src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.ts b/src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.ts
index 55535de55f4f74275578e5c14ecfaf910fd06067..6629cafb88259c7f091c6d44e1660ef6f0aaaffc 100644
--- a/src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.ts
+++ b/src/app/features/organizational-unit/components/presentationals/orgunit-form/orgunit-form.presentational.ts
@@ -15,6 +15,7 @@ import {
 } from "@app/generated-api";
 import {SharedAbstractFormPresentational} from "@app/shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational";
 import {BaseFormDefinition} from "@app/shared/models/base-form-definition.model";
+import {BreakpointService} from "@shared/services/breakpoint.service";
 import {
   DateUtil,
   PropertyName,
@@ -37,7 +38,8 @@ export class OrgunitFormPresentational extends SharedAbstractFormPresentational<
   listPreservationPolicies: PreservationPolicy[];
 
   constructor(protected readonly _changeDetectorRef: ChangeDetectorRef,
-              private readonly _fb: FormBuilder) {
+              private readonly _fb: FormBuilder,
+              public readonly breakpointService: BreakpointService) {
     super(_changeDetectorRef);
   }
 
diff --git a/src/app/shared/services/breakpoint.service.ts b/src/app/shared/services/breakpoint.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db1acb8e83a153cfb378a1379a6a5a6eeb08cce4
--- /dev/null
+++ b/src/app/shared/services/breakpoint.service.ts
@@ -0,0 +1,19 @@
+import {BreakpointObserver} from "@angular/cdk/layout";
+import {Injectable} from "@angular/core";
+import {environment} from "../../../environments/environment";
+
+@Injectable({
+  providedIn: "root",
+})
+export class BreakpointService {
+  constructor(private breakpointObserver: BreakpointObserver) {
+  }
+
+  isSmallerThanMd(): boolean {
+    return this.breakpointObserver.isMatched(`(max-width: ${environment.breakpointMd})`);
+  }
+
+  isSmallerThanSm(): boolean {
+    return this.breakpointObserver.isMatched(`(max-width: ${environment.breakpointSm})`);
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7a7cb9862806ec04580014d2016ed668c819b29b..0d5bfe63fe265cfea5bb726a5227fcdee806c97d 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,3 +1,4 @@
+import {LayoutModule} from "@angular/cdk/layout";
 import {TextFieldModule} from "@angular/cdk/text-field";
 import {CommonModule} from "@angular/common";
 import {NgModule} from "@angular/core";
@@ -34,6 +35,7 @@ import {SharedHistoryDialog} from "@shared/components/dialogs/shared-history/sha
 import {SharedButtonStatusHistoryPresentational} from "@shared/components/presentationals/shared-button-status-history/shared-button-status-history.presentational";
 import {SharedPersonForm} from "@shared/components/presentationals/shared-person-form/shared-person-form";
 import {DatetimePipe} from "@shared/pipes/datetime.pipe";
+import {BreakpointService} from "@shared/services/breakpoint.service";
 import {CanDeactivateGuard} from "@shared/services/can-deactivate-guard.service";
 import {TableModule} from "primeng/table";
 import {SolidifyFrontendModule} from "solidify-frontend";
@@ -60,7 +62,10 @@ const pipes = [
   FileSizePipe,
   DatetimePipe,
 ];
-const services = [CanDeactivateGuard];
+const services = [
+  CanDeactivateGuard,
+  BreakpointService,
+];
 const modules = [
   CommonModule,
   FormsModule,
@@ -71,6 +76,7 @@ const modules = [
   TranslateModule,
   SolidifyFrontendModule,
   TextFieldModule,
+  LayoutModule,
 ];
 
 @NgModule({
diff --git a/src/environments/environment.defaults.model.ts b/src/environments/environment.defaults.model.ts
index bc59095b62c21615ddf09992ccc795292a23297b..06e208a7219b380fce77bc57949443acf8e7b66d 100644
--- a/src/environments/environment.defaults.model.ts
+++ b/src/environments/environment.defaults.model.ts
@@ -22,6 +22,12 @@ export interface DlcmEnvironment extends DefaultSolidifyEnvironment {
   // OAuth2 properties
   tokenInMemoryStorage: boolean;
 
+  // Breakpoints
+  breakpointXs: string;
+  breakpointSm: string;
+  breakpointMd: string;
+  breakpointLg: string;
+
   // Others
   modalHeight: string;
   modalWidth: string;
diff --git a/src/environments/environment.defaults.ts b/src/environments/environment.defaults.ts
index dc377abfacdc1e1143ae1456310a3916c2d2255c..13c29cfa80cbd1b436cf5be6a92aef2d80f9d7c7 100644
--- a/src/environments/environment.defaults.ts
+++ b/src/environments/environment.defaults.ts
@@ -45,6 +45,12 @@ export const defaultEnvironment: DlcmEnvironment = {
   sendAccessToken: true,
   tokenInMemoryStorage: true,
 
+  // Breakpoint
+  breakpointXs: "0em",
+  breakpointSm: "36em",
+  breakpointMd: "62em",
+  breakpointLg: "85em",
+
   // Others
   defaultNotificationErrorDurationInSeconds: 5,
   defaultNotificationSuccessDurationInSeconds: 3,