diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts
index c83035d6..5a3b196b 100644
--- a/src/app/features/administration/administration.module.ts
+++ b/src/app/features/administration/administration.module.ts
@@ -17,6 +17,7 @@ import { KindSelectComponent } from './form/kind-select/kind-select.component';
 import { BaseConfigComponent } from './form/base-config/base-config.component';
 import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
 import { CalendarModule } from 'primeng';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
 	declarations: [
@@ -40,6 +41,7 @@ import { CalendarModule } from 'primeng';
 		FormsModule,
 		TranslateModule.forChild({ extend: true }),
 		DateValueAccessorModule,
+		DragDropModule,
 	],
 })
 export class AdministrationModule {}
diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
index 09e87034..1b4716bf 100644
--- a/src/app/features/administration/form/date-select/date-select.component.html
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -1,199 +1,215 @@
 <div class="date-selection">
 	<!--	<form [formGroup]="form">-->
 	<!--	interval-->
-
-	<!--	<section *ngIf="showDateInterval" class="date-interval form-row">-->
-	<!--		<button-->
-	<!--			(click)="showDateInterval = !showDateInterval"-->
-	<!--			[ngClass]="{ active: showDateInterval }"-->
-	<!--			class="btn btn&#45;&#45;primary"-->
-	<!--			id="toggle_interval_button"-->
-	<!--		>-->
-	<!--			<i class="fa fa-clock-o" aria-hidden="true"></i>-->
-	<!--			{{ 'dates.add_interval' | translate }}-->
-	<!--		</button>-->
-	<!--		<h2>{{ 'dates.add_interval' | translate }}</h2>-->
-	<!--		<div class="columns">-->
-	<!--			<div class="column">-->
-	<!--				{{ 'dates.interval_propose' | translate }}-->
-	<!--			</div>-->
-	<!--			<div class="column">-->
-	<!--				<label for="start_interval" class="hidden">start</label>-->
-	<!--				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />-->
-	<!--			</div>-->
-	<!--		</div>-->
-	<!--		<div class="columns">-->
-	<!--			<div class="column">-->
-	<!--				{{ 'dates.interval_span' | translate }}-->
-	<!--			</div>-->
-	<!--			<div class="column">-->
-	<!--				<label for="end_interval" class="hidden">end</label>-->
-	<!--				<input id="end_interval" formControlName="endDateInterval" type="date" />-->
-	<!--			</div>-->
-	<!--		</div>-->
-	<!--		<button (click)="addIntervalOfDates()" class="btn btn-block btn&#45;&#45;primary">-->
-	<!--			<i class="fa fa-plus" aria-hidden="true"></i>-->
-	<!--			{{ 'dates.interval_button' | translate }}-->
-	<!--			{{ intervalDays }}-->
-	<!--			{{ 'dates.interval_button_dates' | translate }}-->
-	<!--		</button>-->
-	<!--	</section>-->
+	<button
+		(click)="showDateInterval = !showDateInterval"
+		[ngClass]="{ active: showDateInterval }"
+		class="btn btn--primary"
+		id="toggle_interval_button"
+	>
+		<i class="fa fa-clock-o" aria-hidden="true"></i>
+		<span>
+			{{ 'dates.add_interval' | translate }}
+		</span>
+	</button>
+	<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
+		<h2>{{ 'dates.add_interval' | translate }}</h2>
+		<div class="columns">
+			<div class="column">
+				{{ 'dates.interval_propose' | translate }}
+			</div>
+			<div class="column">
+				<label for="start_interval" class="hidden">start</label>
+				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
+			</div>
+		</div>
+		<div class="columns">
+			<div class="column">
+				{{ 'dates.interval_span' | translate }}
+			</div>
+			<div class="column">
+				<label for="end_interval" class="hidden">end</label>
+				<input id="end_interval" formControlName="endDateInterval" type="date" />
+			</div>
+		</div>
+		<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
+			<i class="fa fa-plus" aria-hidden="true"></i>
+			{{ 'dates.interval_button' | translate }}
+			{{ intervalDays }}
+			{{ 'dates.interval_button_dates' | translate }}
+		</button>
+	</fieldset>
 
 	<!--	</form>-->
 	<div class="dates-list">
-		<div class="title">
-			<span class="count-dates">
-				{{ timeList.length }}
-			</span>
-			<span class="count-dates-txt">
-				{{ 'dates.count_time' | translate }}
-				(pour chaque jour)
-			</span>
-		</div>
-		<div class="actions">
-			<button
-				class="btn"
-				[class.is-primary]="form.value.configuration.hasSeveralHours"
-				(click)="
-					form.patchValue({ configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours } })
-				"
-			>
-				<i class="fa fa-clock-o"></i>
+		<div class="range-container is-boxed">
+			<div class="actions columns">
+				<div class="column">
+					<button
+						class="btn"
+						[class.is-primary]="form.value.configuration.hasSeveralHours"
+						(click)="
+							form.patchValue({
+								configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
+							})
+						"
+					>
+						<i class="fa fa-clock-o"></i>
 
-				<span> horaires différentes à chaque jour </span>
-			</button>
-			<button
-				(click)="addTime()"
-				*ngIf="!form.value.configuration.hasSeveralHours"
-				class="btn btn--primary"
-				id="add_time_button"
-			>
-				<i class="fa fa-plus" aria-hidden="true"></i>
-				<span>
-					{{ 'dates.add_time' | translate }}
-				</span>
-			</button>
-			<button
-				(click)="removeAllTimes()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--warning"
-				id="remove_time_button"
-			>
-				<i class="fa fa-trash" aria-hidden="true"></i>
-				<span>
-					Aucune plage horaire
-				</span>
-			</button>
-			<button
-				(click)="resetTimes()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--warning"
-				id="reset_time_button"
-			>
-				<i class="fa fa-refresh" aria-hidden="true"></i>
-				<span>
-					réinitialiser
-				</span>
-			</button>
-		</div>
-
-		<!--					<div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
-		<!--						<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
-		<!--							<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
-		<!--								<label for="timeChoices_{{ id }}">-->
-		<!--									<i class="fa fa-clock-o" aria-hidden="true"></i>-->
-		<!--								</label>-->
-		<!--								<input-->
-		<!--									[(ngModel)]="time.literal"-->
-		<!--									name="timeChoices_{{ id }}"-->
-		<!--									type="text"-->
-		<!--									id="timeChoices_{{ id }}"-->
-		<!--								/>-->
-		<!--								<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
-		<!--									<i class="fa fa-times" aria-hidden="true"></i>-->
-		<!--								</button>-->
-		<!--							</div>-->
-		<!--						</div>-->
-		<!--					</div>-->
-		<hr />
-		<div class="columns">
-			<div class="column">
-				<!--				ajouter une date-->
-				<button class="btn btn--primary" (click)="addChoice()">
-					{{ 'dates.add' | translate }}
-				</button>
-			</div>
-			<div class="column">
-				<span class="count-dates title">
-					{{ dateList.length }}
-				</span>
-				<span>
-					{{ 'dates.count_dates' | translate }}
-				</span>
-			</div>
-		</div>
-
-		<div class="columns">
-			<div class="column">
-				<div *ngFor="let choice of dateList; index as id" class="date-choice">
-					{{ id }})
-					<input
-						[(ngModel)]="choice.date_object"
-						name="dateChoices_{{ id }}"
-						id="dateChoices_{{ id }}"
-						useValueAsDate
-						type="date"
-					/>
-					<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
-						<i class="fa fa-times" aria-hidden="true"></i>
+						<span> horaires différentes à chaque jour </span>
+					</button>
+				</div>
+				<div class="column">
+					<button
+						(click)="addTime()"
+						*ngIf="form.value.configuration.hasSeveralHours"
+						class="btn btn--primary"
+						id="add_time_button"
+					>
+						<i class="fa fa-plus" aria-hidden="true"></i>
+						<span>
+							{{ 'dates.add_time' | translate }}
+						</span>
 					</button>
 					<button
-						(click)="addTimeToDate(choice, id)"
-						*ngIf="'true' === allowSeveralHours"
-						class="btn btn--primary"
+						(click)="removeAllTimes()"
+						*ngIf="form.value.configuration.hasSeveralHours"
+						class="btn btn--warning"
+						id="remove_time_button"
 					>
-						{{ 'dates.add_time' | translate }}
+						<i class="fa fa-trash" aria-hidden="true"></i>
+						<span>
+							Aucune plage horaire
+						</span>
 					</button>
-					<div *ngIf="'true' === allowSeveralHours" class="several-times">
-						<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+					<button
+						(click)="resetTimes()"
+						*ngIf="form.value.configuration.hasSeveralHours"
+						class="btn btn--warning"
+						id="reset_time_button"
+					>
+						<i class="fa fa-refresh" aria-hidden="true"></i>
+						<span>
+							réinitialiser
+						</span>
+					</button>
+				</div>
+			</div>
+			<div class="range-time" *ngIf="form.value.configuration.hasSeveralHours">
+				<div class="title">
+					<span class="count-dates">
+						{{ timeList.length }}
+					</span>
+					<span class="count-dates-txt">
+						{{ 'dates.count_time' | translate }}
+						(pour chaque jour)
+					</span>
+				</div>
+				<div *ngIf="!form.value.configuration.hasSeveralHours" class="identical-dates">
+					<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+						<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
+							<label for="timeChoices_{{ id }}">
+								<i class="fa fa-clock-o" aria-hidden="true"></i>
+							</label>
 							<input
-								[(ngModel)]="timeItem.literal"
-								name="dateTime_{{ id }}_Choices_{{ idTime }}"
-								id="dateTime_{{ id }}_Choices_{{ idTime }}"
+								[(ngModel)]="time.literal"
+								name="timeChoices_{{ id }}"
 								type="text"
+								id="timeChoices_{{ id }}"
 							/>
-							<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+							<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
 								<i class="fa fa-times" aria-hidden="true"></i>
 							</button>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="column calendar-column">
-				<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
-					plage de jours
-				</button>
+		</div>
 
-				<button
-					class="btn"
-					(click)="selectionKind = 'multiple'"
-					[class.is-primary]="selectionKind == 'multiple'"
-				>
-					jours séparés
-				</button>
-				<button class="btn" (click)="setDefaultDatesForInterval()">
-					réinitialiser</button
-				><button class="btn" (click)="dateCalendarEnum = [today]">
-					vider
-				</button>
-				<div class="text-center">
-					<br />
-					<p-calendar
-						[(ngModel)]="dateCalendarEnum"
-						[locale]="'calendar_widget' | translate"
-						[inline]="true"
-						[selectionMode]="selectionKind"
-					></p-calendar>
+		<hr />
+		<div class="main-box is-boxed">
+			<div class="columns">
+				<div class="column">
+					<!--				ajouter une date-->
+					<button class="btn btn--primary" (click)="addChoice()">
+						{{ 'dates.add' | translate }}
+					</button>
+				</div>
+				<div class="column">
+					<span class="count-dates title">
+						{{ dateList.length }}
+					</span>
+					<span>
+						{{ 'dates.count_dates' | translate }}
+					</span>
+				</div>
+			</div>
+
+			<div class="columns">
+				<div class="column">
+					<h2>Dates</h2>
+					<div *ngFor="let choice of dateList; index as id" class="date-choice">
+						{{ id }})
+						<input
+							[(ngModel)]="choice.date_object"
+							name="dateChoices_{{ id }}"
+							id="dateChoices_{{ id }}"
+							useValueAsDate
+							type="date"
+						/>
+						<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+							<i class="fa fa-times" aria-hidden="true"></i>
+						</button>
+						<button
+							(click)="addTimeToDate(choice, id)"
+							*ngIf="form.value.configuration.hasSeveralHours"
+							class="btn btn--primary"
+						>
+							{{ 'dates.add_time' | translate }}
+						</button>
+						<div *ngIf="form.value.configuration.hasSeveralHours" class="several-times">
+							plage horaire distincte
+							<br />
+							<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+								<input
+									[(ngModel)]="timeItem.literal"
+									name="dateTime_{{ id }}_Choices_{{ idTime }}"
+									id="dateTime_{{ id }}_Choices_{{ idTime }}"
+									type="text"
+								/>
+								<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+									<i class="fa fa-times" aria-hidden="true"></i>
+								</button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="column calendar-column">
+					<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
+						plage de jours
+					</button>
+
+					<button
+						class="btn"
+						(click)="selectionKind = 'multiple'"
+						[class.is-primary]="selectionKind == 'multiple'"
+					>
+						jours séparés
+					</button>
+					<button class="btn" (click)="setDefaultDatesForInterval()">
+						réinitialiser</button
+					><button class="btn" (click)="dateCalendarEnum = [today]">
+						vider
+					</button>
+					<div class="text-center">
+						<br />
+						<p-calendar
+							[(ngModel)]="dateCalendarEnum"
+							[locale]="'calendar_widget' | translate"
+							[inline]="true"
+							[selectionMode]="selectionKind"
+						></p-calendar>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss
index 29f803f3..9dc786a0 100644
--- a/src/app/features/administration/form/date-select/date-select.component.scss
+++ b/src/app/features/administration/form/date-select/date-select.component.scss
@@ -5,4 +5,9 @@
 	.btn + .btn {
 		margin-left: 1em;
 	}
+	.is-boxed {
+		border: 1px solid #ddd;
+		padding: 1em;
+		margin: 1em 0;
+	}
 }
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index c8ffb356..93255f31 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -83,7 +83,7 @@ export class FormComponent implements OnInit {
 				allowComments: [true, [Validators.required]],
 				password: [this.uuidService.getUUID(), [Validators.required]],
 				dateCreated: [creationDate, [Validators.required]],
-				hasSeveralHours: [false, [Validators.required]],
+				hasSeveralHours: [true, [Validators.required]],
 				hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
 			}),
 			startDateInterval: ['', [Validators.required]],