diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
index 7c36ff0..3d5ec86 100644
--- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
+++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html
@@ -33,501 +33,506 @@
     </div>
     <form [ngrxFormState]="gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async">
       <div>
-        <div class="section">
-          <label class="heading">{{ 'GridFailure.SubTitle1' | translate }}</label>
+        <app-expandable [showBodyInitially]="true">
+          <label header>{{ 'GridFailure.SubTitle1' | translate }}</label>
+          <div class="expandable-content" body>
+            <!-- failureClassificationId (temporär) -->
+            <div class="form-group row">
+              <label for="failureClassificationId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.FailureClassificationId' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="failureClassificationId"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassificationId']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
 
-          <!-- failureClassificationId (temporär) -->
-          <div class="form-group row">
-            <label for="failureClassificationId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.FailureClassificationId' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="failureClassificationId"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassificationId']"
-                autocomplete="off"
-              />
+            <!-- failureClassification -->
+            <div class="form-group row">
+              <label for="failureClassification" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureClassification' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="failureClassification"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassification']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- failureTypeId temporär -->
+            <div class="form-group row">
+              <label for="failureTypeId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.FailureTypeId' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="failureTypeId"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureTypeId']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- failureType -->
+            <div class="form-group row">
+              <label for="failureType" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureType' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="failureType"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureType']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- responsibility -->
+            <div class="form-group row">
+              <label for="responsibility" class="col-sm-2 col-form-label">{{ 'GridFailure.Responsibility' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="responsibility"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['responsibility']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- internExtern -->
+            <div class="form-group row">
+              <label for="internExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.InternExtern' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="internExtern"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internExtern']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- statusInternId (temporär) -->
+            <div class="form-group row">
+              <label for="statusInternId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.StatusInternId' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="statusInternId"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusInternId']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- statusIntern -->
+            <div class="form-group row">
+              <label for="statusIntern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusIntern' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="statusIntern"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusIntern']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- statusExternId (temporär) -->
+            <div class="form-group row">
+              <label for="statusExternId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.StatusExternId' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="statusExternId"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExternId']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- statusExtern -->
+            <div class="form-group row">
+              <label for="statusExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusExtern' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="statusExtern"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExtern']"
+                  autocomplete="off"
+                />
+              </div>
             </div>
           </div>
+        </app-expandable>
 
-          <!-- failureClassification -->
-          <div class="form-group row">
-            <label for="failureClassification" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureClassification' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="failureClassification"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassification']"
-                autocomplete="off"
-              />
+        <app-expandable [showBodyInitially]="true">
+          <label header>{{ 'GridFailure.SubTitle2' | translate }}</label>
+          <div class="expandable-content" body>
+            <!-- branchId temporär -->
+            <div class="form-group row">
+              <label for="branchId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.BranchId' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="branchId"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branchId']"
+                  autocomplete="off"
+                />
+              </div>
             </div>
-          </div>
 
-          <!-- failureTypeId temporär -->
-          <div class="form-group row">
-            <label for="failureTypeId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.FailureTypeId' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="failureTypeId"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureTypeId']"
-                autocomplete="off"
-              />
+            <!-- branch -->
+            <div class="form-group row">
+              <label for="branch" class="col-sm-2 col-form-label">{{ 'GridFailure.Branch' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="branch"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branch']"
+                  autocomplete="off"
+                />
+              </div>
             </div>
-          </div>
 
-          <!-- failureType -->
-          <div class="form-group row">
-            <label for="failureType" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureType' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="failureType"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureType']"
-                autocomplete="off"
-              />
+            <!-- voltageLevel -->
+            <div class="form-group row">
+              <label for="voltageLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.VoltageLevel' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="voltageLevel"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['voltageLevel']"
+                  autocomplete="off"
+                />
+              </div>
             </div>
-          </div>
 
-          <!-- responsibility -->
-          <div class="form-group row">
-            <label for="responsibility" class="col-sm-2 col-form-label">{{ 'GridFailure.Responsibility' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="responsibility"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['responsibility']"
-                autocomplete="off"
-              />
+            <!-- pressureLevel -->
+            <div class="form-group row">
+              <label for="pressureLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.PressureLevel' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="pressureLevel"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['pressureLevel']"
+                  autocomplete="off"
+                />
+              </div>
             </div>
-          </div>
 
-          <!-- internExtern -->
-          <div class="form-group row">
-            <label for="internExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.InternExtern' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="internExtern"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internExtern']"
-                autocomplete="off"
-              />
+            <div class="form-group row">
+              <label for="failureBegin" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureBegin' | translate }}</label>
+              <div class="input-group col-sm-4">
+                <div class="input-group-prepend">
+                  <app-date-time-picker
+                    (dateTimeEvent)="setGridFailureDateTime($event, 'failureBegin')"
+                    [dateString]="failureBeginDateTime"
+                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+                  ></app-date-time-picker>
+                </div>
+
+                <input
+                  required
+                  class="form-control editable"
+                  type="text"
+                  placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
+                  id="failureBegin"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureBegin']"
+                  [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
+                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+                  readonly
+                />
+                <div class="input-group-append">
+                  <button
+                    class="btn btn-outline-primary calendar"
+                    (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureBegin)"
+                    type="button"
+                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+                  >
+                    <em class="fa fa-times-circle" aria-hidden="true"></em>
+                  </button>
+                </div>
+              </div>
             </div>
-          </div>
 
-          <!-- statusInternId (temporär) -->
-          <div class="form-group row">
-            <label for="statusInternId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.StatusInternId' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="statusInternId"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusInternId']"
-                autocomplete="off"
-              />
+            <!-- failureEndPlanned -->
+            <div class="form-group row">
+              <label for="failureEndPlanned" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndPlanned' | translate }}</label>
+              <div class="input-group col-sm-4">
+                <div class="input-group-prepend">
+                  <app-date-time-picker
+                    (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndPlanned')"
+                    [dateString]="failureEndPlannedDateTime"
+                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+                  ></app-date-time-picker>
+                </div>
+
+                <input
+                  class="form-control editable"
+                  type="text"
+                  placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
+                  id="failureEndPlanned"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndPlanned']"
+                  [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
+                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+                  readonly
+                />
+                <div class="input-group-append">
+                  <button
+                    class="btn btn-outline-primary calendar"
+                    (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndPlanned)"
+                    type="button"
+                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+                  >
+                    <em class="fa fa-times-circle" aria-hidden="true"></em>
+                  </button>
+                </div>
+              </div>
             </div>
-          </div>
 
-          <!-- statusIntern -->
-          <div class="form-group row">
-            <label for="statusIntern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusIntern' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="statusIntern"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusIntern']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- statusExternId (temporär) -->
-          <div class="form-group row">
-            <label for="statusExternId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.StatusExternId' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="statusExternId"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExternId']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- statusExtern -->
-          <div class="form-group row">
-            <label for="statusExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusExtern' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="statusExtern"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExtern']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div class="section">
-          <label class="heading">{{ 'GridFailure.SubTitle2' | translate }}</label>
-
-          <!-- branchId temporär -->
-          <div class="form-group row">
-            <label for="branchId" class="col-sm-2 col-form-label">{{ 'GridFailureTemp.BranchId' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="branchId"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branchId']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- branch -->
-          <div class="form-group row">
-            <label for="branch" class="col-sm-2 col-form-label">{{ 'GridFailure.Branch' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="branch"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branch']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- voltageLevel -->
-          <div class="form-group row">
-            <label for="voltageLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.VoltageLevel' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="voltageLevel"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['voltageLevel']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- pressureLevel -->
-          <div class="form-group row">
-            <label for="pressureLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.PressureLevel' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="pressureLevel"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['pressureLevel']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- failureBegin -->
-          <div class="form-group row">
-            <label for="failureBegin" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureBegin' | translate }}</label>
-            <div class="input-group col-sm-4">
-              <div class="input-group-prepend">
+            <!-- failureEndResupplied -->
+            <div class="form-group row">
+              <label for="failureEndResupplied" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndResupplied' | translate }}</label>
+              <div class="input-group col-sm-4">
                 <app-date-time-picker
-                  (dateTimeEvent)="setGridFailureDateTime($event, 'failureBegin')"
-                  [dateString]="failureBeginDateTime"
+                  (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndResupplied')"
+                  [dateString]="failureEndResuppliedDateTime"
                   [disabled]="!gridFailureDetailsSandbox.saveEnabled"
                   [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                 ></app-date-time-picker>
-              </div>
-
-              <input
-                required
-                class="form-control editable"
-                type="text"
-                placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
-                id="failureBegin"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureBegin']"
-                [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
-                [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
-                readonly
-              />
-              <div class="input-group-append">
-                <button
-                  class="btn btn-outline-primary calendar"
-                  (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureBegin)"
-                  type="button"
-                  [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+                <input
+                  class="form-control editable"
+                  type="text"
+                  placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
+                  id="failureEndResupplied"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndResupplied']"
+                  [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
                   [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
-                >
-                  <em class="fa fa-times-circle" aria-hidden="true"></em>
-                </button>
+                  readonly
+                />
+                <div class="input-group-append">
+                  <button
+                    class="btn btn-outline-primary calendar"
+                    (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndResupplied)"
+                    type="button"
+                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
+                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
+                  >
+                    <em class="fa fa-times-circle" aria-hidden="true"></em>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- probableReason -->
+            <div class="form-group row">
+              <label for="probableReason" class="col-sm-2 col-form-label">{{ 'GridFailure.ProbableReason' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="probableReason"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['probableReason']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- internalRemark -->
+            <div class="form-group row">
+              <label for="internalRemark" class="col-sm-2 col-form-label">{{ 'GridFailure.InternalRemark' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="internalRemark"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internalRemark']"
+                  autocomplete="off"
+                />
               </div>
             </div>
           </div>
+        </app-expandable>
 
-          <!-- failureEndPlanned -->
-          <div class="form-group row">
-            <label for="failureEndPlanned" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndPlanned' | translate }}</label>
-            <div class="input-group col-sm-4">
-              <div class="input-group-prepend">
-                <app-date-time-picker
-                  (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndPlanned')"
-                  [dateString]="failureEndPlannedDateTime"
-                  [disabled]="!gridFailureDetailsSandbox.saveEnabled"
-                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
-                ></app-date-time-picker>
+        <app-expandable [showBodyInitially]="true">
+          <label header>{{ 'GridFailure.SubTitle3' | translate }}</label>
+
+          <div class="expandable-content" body>
+            <!-- postcode -->
+            <div class="form-group row">
+              <label for="postcode" class="col-sm-2 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="postcode"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['postcode']"
+                  autocomplete="off"
+                />
               </div>
+            </div>
 
-              <input
-                class="form-control editable"
-                type="text"
-                placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
-                id="failureEndPlanned"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndPlanned']"
-                [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
-                [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
-                readonly
-              />
-              <div class="input-group-append">
-                <button
-                  class="btn btn-outline-primary calendar"
-                  (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndPlanned)"
-                  type="button"
-                  [disabled]="!gridFailureDetailsSandbox.saveEnabled"
-                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
-                >
-                  <em class="fa fa-times-circle" aria-hidden="true"></em>
-                </button>
+            <!-- city -->
+            <div class="form-group row">
+              <label for="city" class="col-sm-2 col-form-label">{{ 'GridFailure.City' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="city"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['city']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- district -->
+            <div class="form-group row">
+              <label for="district" class="col-sm-2 col-form-label">{{ 'GridFailure.District' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="district"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['district']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- street -->
+            <div class="form-group row">
+              <label for="street" class="col-sm-2 col-form-label">{{ 'GridFailure.Street' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="street"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['street']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- housenumber -->
+            <div class="form-group row">
+              <label for="housenumber" class="col-sm-2 col-form-label">{{ 'GridFailure.Housenumber' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="housenumber"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['housenumber']"
+                  autocomplete="off"
+                />
               </div>
             </div>
           </div>
+        </app-expandable>
 
-          <!-- failureEndResupplied -->
-          <div class="form-group row">
-            <label for="failureEndResupplied" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndResupplied' | translate }}</label>
-            <div class="input-group col-sm-4">
-              <app-date-time-picker
-                (dateTimeEvent)="setGridFailureDateTime($event, 'failureEndResupplied')"
-                [dateString]="failureEndResuppliedDateTime"
-                [disabled]="!gridFailureDetailsSandbox.saveEnabled"
-                [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
-              ></app-date-time-picker>
-              <input
-                class="form-control editable"
-                type="text"
-                placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
-                id="failureEndResupplied"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndResupplied']"
-                [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
-                [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
-                readonly
-              />
-              <div class="input-group-append">
-                <button
-                  class="btn btn-outline-primary calendar"
-                  (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndResupplied)"
-                  type="button"
-                  [disabled]="!gridFailureDetailsSandbox.saveEnabled"
-                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
-                >
-                  <em class="fa fa-times-circle" aria-hidden="true"></em>
-                </button>
+        <app-expandable [showBodyInitially]="true">
+          <label header>{{ 'GridFailure.SubTitle4' | translate }}</label>
+          <div class="expandable-content" body>
+            <!-- stationDescription -->
+            <div class="form-group row">
+              <label for="stationDescription" class="col-sm-2 col-form-label">{{ 'GridFailure.StationDescription' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="stationDescription"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationDescription']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- stationCoords -->
+            <div class="form-group row">
+              <label for="stationCoords" class="col-sm-2 col-form-label">{{ 'GridFailure.StationCoords' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="stationCoords"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationCoords']"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
+
+            <!-- radius -->
+            <div class="form-group row">
+              <label for="radius" class="col-sm-2 col-form-label">{{ 'GridFailure.Radius' | translate }}</label>
+              <div class="col-sm-4">
+                <input
+                  required
+                  type="text"
+                  maxlength="255"
+                  class="form-control"
+                  id="radius"
+                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['radius']"
+                  autocomplete="off"
+                />
               </div>
             </div>
           </div>
-
-          <!-- probableReason -->
-          <div class="form-group row">
-            <label for="probableReason" class="col-sm-2 col-form-label">{{ 'GridFailure.ProbableReason' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="probableReason"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['probableReason']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- internalRemark -->
-          <div class="form-group row">
-            <label for="internalRemark" class="col-sm-2 col-form-label">{{ 'GridFailure.InternalRemark' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="internalRemark"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internalRemark']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div class="section">
-          <label class="heading">{{ 'GridFailure.SubTitle3' | translate }}</label>
-          <!-- postcode -->
-          <div class="form-group row">
-            <label for="postcode" class="col-sm-2 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="postcode"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['postcode']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- city -->
-          <div class="form-group row">
-            <label for="city" class="col-sm-2 col-form-label">{{ 'GridFailure.City' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="city"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['city']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- district -->
-          <div class="form-group row">
-            <label for="district" class="col-sm-2 col-form-label">{{ 'GridFailure.District' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="district"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['district']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- street -->
-          <div class="form-group row">
-            <label for="street" class="col-sm-2 col-form-label">{{ 'GridFailure.Street' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="street"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['street']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- housenumber -->
-          <div class="form-group row">
-            <label for="housenumber" class="col-sm-2 col-form-label">{{ 'GridFailure.Housenumber' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="housenumber"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['housenumber']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div class="section">
-          <label class="heading">{{ 'GridFailure.SubTitle4' | translate }}</label>
-
-          <!-- stationDescription -->
-          <div class="form-group row">
-            <label for="stationDescription" class="col-sm-2 col-form-label">{{ 'GridFailure.StationDescription' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="stationDescription"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationDescription']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- stationCoords -->
-          <div class="form-group row">
-            <label for="stationCoords" class="col-sm-2 col-form-label">{{ 'GridFailure.StationCoords' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="stationCoords"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationCoords']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-
-          <!-- radius -->
-          <div class="form-group row">
-            <label for="radius" class="col-sm-2 col-form-label">{{ 'GridFailure.Radius' | translate }}</label>
-            <div class="col-sm-4">
-              <input
-                required
-                type="text"
-                maxlength="255"
-                class="form-control"
-                id="radius"
-                [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['radius']"
-                autocomplete="off"
-              />
-            </div>
-          </div>
-        </div>
+        </app-expandable>
 
         <!-- buttons -->
         <div class="row justify-content-between">
@@ -535,12 +540,12 @@
             <button
               *ngIf="gridFailureDetailsSandbox.saveEnabled"
               type="button"
-              class="btn btn-success person-buttons"
+              class="btn btn-success person-buttons div-button"
               (click)="gridFailureDetailsSandbox.saveGridFailure()"
             >
               {{ 'SaveBtn' | translate }}
             </button>
-            <button type="button" class="btn btn-primary person-buttons cancel-button" (click)="gridFailureDetailsSandbox.cancel()">
+            <button type="button" class="btn btn-primary person-buttons div-button" (click)="gridFailureDetailsSandbox.cancel()">
               {{ 'CancelBtn' | translate }}
             </button>
           </div>
diff --git a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
index 8840f19..bea6bf8 100644
--- a/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
+++ b/projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.scss
@@ -43,7 +43,7 @@
   padding-left: 16px;
   width: 247px;
 }
-.cancel-button {
+.div-button {
   margin-left: 15px;
 }
 .editable {
@@ -57,3 +57,7 @@
 .isDisabled {
   background-color: rgb(233, 236, 239);
 }
+
+.expandable-content {
+  padding: 20px 0px 20px 35px;
+}
diff --git a/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.html b/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.html
index d952ee5..9e44f45 100644
--- a/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.html
+++ b/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.html
@@ -12,17 +12,17 @@
 ********************************************************************************/ -->
 <div class="panel panel-default" style="width:100%;">
   <div class="panel-heading">
-    <h4 class="panel-title">
-      <a data-toggle="collapse">
-        <em *ngIf="isExpandedStatus" class="fa fa-chevron-up" aria-hidden="true"></em>
-        <em *ngIf="!isExpandedStatus" class="fa fa-chevron-down" aria-hidden="true"></em>
-      </a>
-      <a data-toggle="collapse" href="#{{ collapseId }}" (click)="isExpandedStatus = !isExpandedStatus">
+    <a data-toggle="collapse" style="width: 100%;" href="#{{ collapseId }}" (click)="isExpandedStatus = !isExpandedStatus">
+      <h4 class="panel-title">
+        <span>
+          <em class="fa" [ngClass]="isExpandedStatus ? 'fa-chevron-up' : 'fa-chevron-down'"></em>
+        </span>
+
         <ng-content select="[header]"></ng-content>
-      </a>
-    </h4>
+      </h4>
+    </a>
   </div>
-  <div *ngIf="isExpandedStatus" id="{{ collapseId }}" class="collapse5 panel-collapse collapse in" [ngClass]="{ in: !isStatusCollapsed }">
+  <div id="{{ collapseId }}" class="collapse5 {{ showBody }} panel-collapse collapse in">
     <ng-content class="bodyContent" select="[body]"></ng-content>
   </div>
 </div>
diff --git a/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.ts b/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.ts
index 56dbe03..daefb8f 100644
--- a/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.ts
+++ b/projects/grid-failure-information-app/src/app/shared/components/expandable/expandable.component.ts
@@ -11,21 +11,32 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 import { Component } from '@angular/core';
+import { OnInit, Input } from '@angular/core';
 
 @Component({
   selector: 'app-expandable',
   templateUrl: './expandable.component.html',
   styleUrls: ['./expandable.component.scss'],
 })
-export class ExpandableComponent {
+export class ExpandableComponent implements OnInit {
+  @Input()
+  public showBodyInitially: boolean = false;
+
   static count: number = 0;
 
-  public isStatusCollapsed = true;
   public isExpandedStatus = false;
   public collapseId: string = null;
+  public showBody: string = null;
 
   constructor() {
     this.collapseId = 'collapse' + ExpandableComponent.count;
     ExpandableComponent.count++;
   }
+
+  ngOnInit() {
+    if (this.showBodyInitially) {
+      this.showBody = 'show';
+      this.isExpandedStatus = true;
+    }
+  }
 }
diff --git a/proxy.conf-integration.json b/proxy.conf-integration.json
index 4539591..a45f017 100644
--- a/proxy.conf-integration.json
+++ b/proxy.conf-integration.json
@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://entdockergss:9166/",
+    "target": "http://entdockergss:9165/",
     "secure": false,
     "pathRewrite": {
       "^/api": ""