diff --git a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy-form.service.ts b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy-form.service.ts
index 8899df679..df4a08164 100644
--- a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy-form.service.ts
+++ b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy-form.service.ts
@@ -19,26 +19,35 @@ import { Injectable } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { CirculationPolicy } from './circulation-policy';
 import { ApiService } from '@rero/ng-core';
-import { AppConfigService } from '../../../service/app-config.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class CirculationPolicyFormService {
 
-  private form;
+  /**
+   * Current form
+   */
+  private _form: any;
 
+  /**
+   * Constructor
+   * @param _apiService - ApiService
+   * @param _fb - FormBuilder
+   */
   constructor(
-    private apiService: ApiService,
-    private fb: FormBuilder,
-    private appConfigService: AppConfigService
+    private _apiService: ApiService,
+    private _fb: FormBuilder
   ) {
-    this.build();
-    this.validators();
+    this._build();
+    this._observeFormControls();
   }
 
+  /** Poulate the form
+   * @param circulation - circulation policy used to populate the form
+   */
   public populate(circulation: CirculationPolicy) {
-    this.form.patchValue({
+    this._form.patchValue({
       name: circulation.name,
       description: circulation.description,
       allow_checkout: circulation.allow_checkout,
@@ -46,26 +55,35 @@ export class CirculationPolicyFormService {
       number_of_days_after_due_date: circulation.number_of_days_after_due_date,
       number_of_days_before_due_date: circulation.number_of_days_before_due_date,
       allow_requests: circulation.allow_requests,
+      allow_renewals: !(circulation.number_renewals === null),
       number_renewals: circulation.number_renewals,
       renewal_duration: circulation.renewal_duration,
+      loan_expiry_notice: !(circulation.number_of_days_before_due_date === null),
+      send_first_reminder: !(circulation.number_of_days_after_due_date === null),
       reminder_fee_amount: circulation.reminder_fee_amount,
       policy_library_level: circulation.policy_library_level,
       is_default: circulation.is_default,
-      settings: this.unserializeSettings(circulation.settings)
+      settings: this._unserializeSettings(circulation.settings)
     });
     if ('libraries' in circulation) {
-      this.form.get('libraries').setValue(
-        this.unserializeLibraries(circulation.libraries)
+      this._form.get('libraries').setValue(
+        this._unserializeLibraries(circulation.libraries)
       );
     }
   }
 
+  /**
+   * Get form
+   */
   public getForm() {
-    return this.form;
+    return this._form;
   }
 
-  private build() {
-    this.form = this.fb.group({
+  /**
+   * Build form
+   */
+  private _build() {
+    this._form = this._fb.group({
       name: [null, [
         Validators.required,
         Validators.minLength(2)
@@ -73,13 +91,39 @@ export class CirculationPolicyFormService {
       description: [],
       allow_requests: [true],
       allow_checkout: [true],
-      checkout_duration: [7],
-      number_of_days_after_due_date: [5],
-      number_of_days_before_due_date: [5],
+      checkout_duration: [7, [
+        Validators.required,
+        Validators.min(0),
+        Validators.pattern(/^[0-9]+([0-9]*)?$/)
+      ]],
+      number_of_days_after_due_date: [5, [
+        Validators.required,
+        Validators.min(1),
+        Validators.pattern(/^[1-9]+([0-9]*)?$/)
+      ]],
+      number_of_days_before_due_date: [5, [
+        Validators.required,
+        Validators.min(0),
+        Validators.pattern(/^[0-9]+([0-9]*)?$/)
+      ]],
       allow_renewals: [true],
-      number_renewals: [0],
-      renewal_duration: [null],
-      reminder_fee_amount: [0],
+      number_renewals: [0, [
+        Validators.required,
+        Validators.min(0),
+        Validators.pattern(/^[0-9]+([0-9]*)?$/)
+      ]],
+      renewal_duration: [null, [
+        Validators.required,
+        Validators.min(1),
+        Validators.pattern(/^[1-9]+([0-9]*)?$/)
+      ]],
+      reminder_fee_amount: [2, [
+        Validators.required,
+        Validators.min(0),
+        Validators.pattern(/^[0-9]+(\.[0-9]{1,2})?$/)
+      ]],
+      loan_expiry_notice: [true],
+      send_first_reminder: [true],
       policy_library_level: [false],
       is_default: [],
       libraries: [],
@@ -87,80 +131,77 @@ export class CirculationPolicyFormService {
     });
   }
 
-  private validators() {
-    const checkoutDurationControl = this.getControlByFieldName('checkout_duration');
-    const numberRenewalsControl = this.getControlByFieldName('number_renewals');
-    const daysAfterControl = this.getControlByFieldName('number_of_days_after_due_date');
-    const daysBeforeControl = this.getControlByFieldName('number_of_days_before_due_date');
-    const overdueAmountControl = this.getControlByFieldName('reminder_fee_amount');
-    this.form.get('allow_checkout').valueChanges.subscribe(checkout => {
+  /**
+   * Observe control forms: hide or display them according to what is checked
+   */
+  private _observeFormControls() {
+    const allowCheckoutFormControls = [
+      this._form.get('checkout_duration'),
+      this._form.get('number_renewals'),
+      this._form.get('number_of_days_after_due_date'),
+      this._form.get('number_of_days_before_due_date'),
+      this._form.get('reminder_fee_amount')
+    ];
+    const allowRenewalsFormControls = [
+      this._form.get('number_renewals'),
+      this._form.get('renewal_duration')
+    ];
+    const sendFirstReminderFormControls = [
+      this._form.get('number_of_days_after_due_date'),
+      this._form.get('reminder_fee_amount')
+    ];
+    const loanExpiryNoticeFormControl = this._form.get('number_of_days_before_due_date');
+    this._form.get('allow_checkout').valueChanges.subscribe((checkout: boolean) => {
       if (checkout) {
-        checkoutDurationControl.setValidators([
-          Validators.required,
-          Validators.min(1)
-        ]);
-        daysAfterControl.setValidators([
-          Validators.required,
-          Validators.min(1)
-        ]);
-        daysBeforeControl.setValidators([
-          Validators.required,
-          Validators.min(1)
-        ]);
-        overdueAmountControl.setValidators([
-          Validators.required,
-          Validators.min(0)
-        ]);
+        allowCheckoutFormControls.forEach((formControl: any) => formControl.enable());
       } else {
-        checkoutDurationControl.clearValidators();
-        numberRenewalsControl.clearValidators();
-        daysAfterControl.clearValidators();
-        daysBeforeControl.clearValidators();
-        overdueAmountControl.clearValidators();
+        allowCheckoutFormControls.forEach((formControl: any) => formControl.disable());
       }
     });
-    this.form.get('allow_renewals').valueChanges.subscribe(renewals => {
+    this._form.get('allow_renewals').valueChanges.subscribe((renewals: boolean) => {
       if (renewals) {
-        numberRenewalsControl.setValidators([
-          Validators.required,
-          Validators.min(0)
-        ]);
+        allowRenewalsFormControls.forEach((formControl: any) => formControl.enable());
+      } else {
+        allowRenewalsFormControls.forEach((formControl: any) => formControl.disable());
+      }
+    });
+    this._form.get('loan_expiry_notice').valueChanges.subscribe((notice: boolean) => {
+      if (notice) {
+        loanExpiryNoticeFormControl.enable();
       } else {
-        numberRenewalsControl.clearValidators();
+        loanExpiryNoticeFormControl.disable();
       }
     });
-    const renewalDuration = this.getControlByFieldName('renewal_duration');
-    numberRenewalsControl.valueChanges.subscribe(renewals => {
-      if (renewals > 0) {
-        renewalDuration.setValidators([
-          Validators.required,
-          Validators.min(1)
-        ]);
+    this._form.get('send_first_reminder').valueChanges.subscribe((reminder: boolean) => {
+      if (reminder) {
+        sendFirstReminderFormControls.forEach((formControl: any) => formControl.enable());
       } else {
-        renewalDuration.clearValidators();
+        sendFirstReminderFormControls.forEach((formControl: any) => formControl.disable());
       }
     });
   }
 
   getControlByFieldName(fieldName: string) {
-    return this.form.get(fieldName);
+    return this._form.get(fieldName);
   }
 
   getValues() {
-    const formValues = this.form.value;
+    const formValues = this._form.value;
     // delete calculate field before returns values of form
     formValues.allow_renewals = null;
-    formValues.libraries = this.serializeLibraries(formValues.libraries);
-    formValues.settings = this.serializeSettings(formValues.settings);
+    formValues.loan_expiry_notice = null;
+    formValues.send_first_reminder = null;
+    formValues.libraries = this._serializeLibraries(formValues.libraries);
+    formValues.settings = this._serializeSettings(formValues.settings);
     return formValues;
   }
 
-  private unserializeLibraries(libraries) {
+  private _unserializeLibraries(libraries: any) {
     const ulibraries = [];
     const librariesRegex = new RegExp(
-      this.apiService.getRefEndpoint('libraries', '(.+)$')
+      this._apiService.getRefEndpoint('libraries', '(.+)$')
     );
-    libraries.forEach(element => {
+    libraries.forEach((element: any) => {
       ulibraries.push(
         element.$ref.match(librariesRegex)[1]
       );
@@ -168,25 +209,25 @@ export class CirculationPolicyFormService {
     return ulibraries;
   }
 
-  private serializeLibraries(libraries) {
+  private _serializeLibraries(libraries: any) {
     const slibraries = [];
-    libraries.forEach(element => {
+    libraries.forEach((element: any) => {
       slibraries.push({
-        $ref: this.apiService.getRefEndpoint('libraries', element)
+        $ref: this._apiService.getRefEndpoint('libraries', element)
       });
     });
     return slibraries;
   }
 
-  private unserializeSettings(settings) {
+  private _unserializeSettings(settings: any) {
     const itemTypeRegex = new RegExp(
-      this.apiService.getRefEndpoint('item_types', '(.+)$')
+      this._apiService.getRefEndpoint('item_types', '(.+)$')
     );
     const patronTypeRegex = new RegExp(
-      this.apiService.getRefEndpoint('patron_types', '(.+)$')
+      this._apiService.getRefEndpoint('patron_types', '(.+)$')
     );
     const mapping = [];
-    settings.forEach(element => {
+    settings.forEach((element: any) => {
       const pkey = 'p' + element.patron_type.$ref.match(patronTypeRegex)[1];
       if (!(pkey in mapping)) {
         mapping[pkey] = [];
@@ -196,16 +237,16 @@ export class CirculationPolicyFormService {
     return mapping;
   }
 
-  private serializeSettings(settings) {
+  private _serializeSettings(settings: any) {
     const mapping = [];
     Object.keys(settings).forEach(key => {
-      settings[key].forEach(element => {
+      settings[key].forEach((element: any) => {
         mapping.push({
           patron_type: {
-            $ref: this.apiService.getRefEndpoint('patron_types', key.substr(1))
+            $ref: this._apiService.getRefEndpoint('patron_types', key.substr(1))
           },
           item_type: {
-            $ref: this.apiService.getRefEndpoint('item_types', element.substr(1))
+            $ref: this._apiService.getRefEndpoint('item_types', element.substr(1))
           }
         });
       });
diff --git a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy.ts b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy.ts
index 92ea9528d..70981456d 100644
--- a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy.ts
+++ b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy.ts
@@ -42,20 +42,21 @@ export class CirculationPolicy {
   settings: Array<any> = [];
 
   constructor(obj?: any) {
-    this.setDefault();
     if (obj) {
       this.update(obj);
+    } else {
+      this.setDefault();
     }
   }
 
   setDefault() {
-    this.allow_requests = true;
-    this.allow_checkout = true;
-    this.checkout_duration = 7;
-    this.number_of_days_after_due_date = 5;
-    this.number_of_days_before_due_date = 5;
-    this.number_renewals = 0;
-    this.reminder_fee_amount = 0;
+    this.allow_requests = this.getDefaultAllowRequests();
+    this.allow_checkout = this.getDefaultAllowCheckout();
+    this.checkout_duration = this.getDefaultCheckoutDuration();
+    this.number_of_days_after_due_date = this.getDefaultNumberOfDaysAfterDueDate();
+    this.number_of_days_before_due_date = this.getNumberOfDaysBeforeDueDate();
+    this.number_renewals = this.getDefaultNumberOfRenewals();
+    this.reminder_fee_amount = this.getDefaultReminderFeeAmount();
     this.policy_library_level = false;
     this.is_default = false;
     this.organisation = {
@@ -65,7 +66,35 @@ export class CirculationPolicy {
     this.settings = [];
   }
 
-  update(obj) {
+  update(obj: any) {
     Object.assign(this, obj);
   }
+
+  public getDefaultAllowRequests() {
+    return true;
+  }
+
+  public getDefaultAllowCheckout() {
+    return true;
+  }
+
+  public getDefaultCheckoutDuration() {
+    return 7;
+  }
+
+  public getDefaultNumberOfDaysAfterDueDate(){
+    return 5;
+  }
+
+  public getNumberOfDaysBeforeDueDate() {
+    return 5;
+  }
+
+  public getDefaultNumberOfRenewals() {
+    return 0;
+  }
+
+  public getDefaultReminderFeeAmount() {
+    return 2;
+  }
 }
diff --git a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.html b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.html
index e49da7497..280194683 100644
--- a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.html
+++ b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.html
@@ -19,23 +19,37 @@
   Loading…
 </div>
 
-<div *ngIf="circulationForm && librariesOrg">
-  <h1 translate>Circulation Policy</h1>
+<div class="main-content position-relative" *ngIf="circulationForm && librariesOrg">
   <form [formGroup]="circulationForm" (ngSubmit)="onSubmit()" class="mt-4">
-    <div class="form-group row">
+    <div class="sticky">
+      <h1 translate>Circulation policy</h1>
+      <div class="my-3 mr-0">
+        <div class="actions">
+          <button id="cipo-cancel-button" class="btn btn-sm btn-outline-danger" (click)="onCancel($event)">
+            <i class="fa fa-times"></i>
+            {{ 'Cancel' | translate }}
+          </button>
+          <button id="cipo-save-button" type="submit" class="btn btn-sm btn-primary ml-1" [disabled]="circulationForm.invalid">
+            <i class="fa fa-save"></i>
+            {{ 'Save' | translate }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="form-group row pt-3">
       <label for="name" class="col-sm-2 col-form-label required" translate>Name</label>
       <div class="col-sm-10">
         <input class="form-control" id="name" formControlName="name"
           placeholder="{{ 'Please insert a name' | translate }}" required>
         <div *ngIf="name.invalid && (name.dirty || name.touched)" class="text-danger pt-1">
-          <div *ngIf="name.errors.required" translate>
-            Name is required.
+          <div id="cipo-name-required" *ngIf="name.errors.required" translate>
+            This field is required.
           </div>
-          <div *ngIf="name.errors.minlength" translate>
-            Name must be at least 2 characters long.
+          <div id="cipo-name-length" *ngIf="name.errors.minlength" translate>
+            This field must be at least 2 characters long.
           </div>
-          <div *ngIf="name.errors.alreadyTakenMessage" translate>
-            Name is already taken.
+          <div id="cipo-name-unique" *ngIf="name.errors.alreadyTaken" translate>
+            This name is already taken.
           </div>
         </div>
       </div>
@@ -49,11 +63,11 @@ <h1 translate>Circulation Policy</h1>
 
     <!-- start: circulation settings section !-->
     <fieldset class="mt-4">
-      <div class="row">
-        <legend translate>Circulation settings</legend>
-        <div class="col-sm-12 pt-4">
+      <div class="card">
+        <div class="card-header"translate>Circulation settings</div>
+        <div class="card-body">
           <div class="form-group">
-            <div class="row">
+            <div class="row mb-3">
               <div class="col-sm-4">
                 <div class='form-group'>
                   <div class="custom-control custom-switch">
@@ -62,7 +76,6 @@ <h1 translate>Circulation Policy</h1>
                       class="custom-control-input"
                       type="checkbox"
                       id="is_pickup"
-                      (click)="allowCheckoutCheckbox($event.target.checked)"
                       [checked]="allow_checkout.value"
                     >
                     <label
@@ -74,18 +87,21 @@ <h1 translate>Circulation Policy</h1>
                   </div>
                 </div>
               </div>
-              <div class="col-sm-8">
-                <div class="form-group row" *ngIf="allow_checkout.value">
+              <div class="col-sm-8 border rounded pt-3" *ngIf="allow_checkout.value">
+                <div class="form-group row">
                   <label for="checkoutDuration" class="col-sm-4 col-form-label required" translate>Checkout duration</label>
                   <div class="col-sm-4">
                     <input type="number" class="form-control" id="checkoutDuration" formControlName="checkout_duration">
                     <div *ngIf="checkout_duration.invalid && (checkout_duration.dirty || checkout_duration.touched)"
                       class="text-danger pt-1">
-                      <div *ngIf="checkout_duration.errors.required" translate>
-                        Checkout duration is required.
+                      <div id="cipo-checkout-duration-required" *ngIf="checkout_duration.errors.required" translate>
+                        This field is required.
+                      </div>
+                      <div id="cipo-checkout-duration-value" *ngIf="checkout_duration.errors.min" translate>
+                        This field must be greater than or equal to 0.
                       </div>
-                      <div *ngIf="checkout_duration.errors.min" translate>
-                        Must be greater than 0
+                      <div id="cipo-reminder-fee-pattern" *ngIf="checkout_duration.errors.pattern" translate>
+                        This field must be an integer.
                       </div>
                     </div>
                   </div>
@@ -101,7 +117,6 @@ <h1 translate>Circulation Policy</h1>
                       class="custom-control-input"
                       type="checkbox"
                       id="renewals"
-                      (click)="allowRenewalsCheckbox($event.target.checked)"
                       [checked]="allow_renewals.value"
                     >
                     <label
@@ -113,19 +128,21 @@ <h1 translate>Circulation Policy</h1>
                   </div>
                 </div>
               </div>
-              <div class="col-sm-8">
-                <div class="form-group row" *ngIf="allow_checkout.value && allow_renewals.value">
+              <div class="border rounded pt-3 col-sm-8" *ngIf="allow_checkout.value && allow_renewals.value">
+                <div class="form-group row">
                   <label for="numberRenewals" class="col-sm-4 col-form-label required" translate>Number of renewals</label>
                   <div class="col-sm-4">
-                    <input type="number" class="form-control" id="numberRenewals" formControlName="number_renewals"
-                      (blur)="numberRenewalsCheck()">
+                    <input type="number" class="form-control" id="numberRenewals" formControlName="number_renewals">
                     <div *ngIf="number_renewals.invalid && (number_renewals.dirty || number_renewals.touched)"
                       class="text-danger pt-1">
-                      <div *ngIf="number_renewals.errors.required" translate>
-                        Checkout duration is required.
+                      <div id="cipo-number-renewals-required" *ngIf="number_renewals.errors.required" translate>
+                        This field is required.
                       </div>
-                      <div *ngIf="number_renewals.errors.min" translate>
-                        Must be greater than 0
+                      <div id="cipo-number-renewals-value" *ngIf="number_renewals.errors.min" translate>
+                        This field must be greater than 0
+                      </div>
+                      <div id="cipo-reminder-fee-pattern" *ngIf="number_renewals.errors.pattern" translate>
+                        This field must be an integer.
                       </div>
                     </div>
                   </div>
@@ -137,11 +154,14 @@ <h1 translate>Circulation Policy</h1>
                     <input type="number" class="form-control" id="renewalDuration" formControlName="renewal_duration">
                     <div *ngIf="renewal_duration.invalid && (renewal_duration.dirty || renewal_duration.touched)"
                       class="text-danger pt-1">
-                      <div *ngIf="renewal_duration.errors.required" translate>
-                        Renewal duration is required.
+                      <div id="cipo-renewal-duration-required" *ngIf="renewal_duration.errors.required" translate>
+                        This field is required.
+                      </div>
+                      <div id="cipo-renewal-duration-value" *ngIf="renewal_duration.errors.min" translate>
+                        This field must be greater than 0
                       </div>
-                      <div *ngIf="renewal_duration.errors.min" translate>
-                        Must be greater than 0
+                      <div id="cipo-reminder-fee-pattern" *ngIf="renewal_duration.errors.pattern" translate>
+                        This field must be an integer.
                       </div>
                     </div>
                   </div>
@@ -177,57 +197,112 @@ <h1 translate>Circulation Policy</h1>
 
     <!-- start: notifications and fees section !-->
     <fieldset class="mt-4" *ngIf="allow_checkout.value">
-      <div class="row">
-        <legend translate>Notifications and fees</legend>
-        <div class="col-sm-12 pt-4">
-          <div class="form-group row" *ngIf="allow_checkout.value">
-            <label for="daysAfterControl" class="col-sm-2 col-form-label required" translate>First reminder days</label>
+      <div class="card">
+        <div class="card-header" translate>Notifications and fees</div>
+        <div class="card-body">
+          <!-- Sent loan expiry notice-->
+          <div class="form-group row">
             <div class="col-sm-4">
-              <input type="number" class="form-control" id="daysAfterControl"
-                formControlName="number_of_days_after_due_date">
-              <div
-                *ngIf="number_of_days_after_due_date.invalid && (number_of_days_after_due_date.dirty || number_of_days_after_due_date.touched)"
-                class="text-danger pt-1">
-                <div *ngIf="number_of_days_after_due_date.errors.required" translate>
-                  First reminder days is required.
+              <div class='form-group'>
+                <div class="custom-control custom-switch">
+                  <input
+                    formControlName="loan_expiry_notice"
+                    class="custom-control-input"
+                    type="checkbox"
+                    id="loan_expiry_notice"
+                    [checked]="loan_expiry_notice.value">
+                  <label class="custom-control-label" for="loan_expiry_notice" translate>
+                    Send a loan expiry notice
+                  </label>
                 </div>
-                <div *ngIf="number_of_days_after_due_date.errors.min" translate>
-                  First reminder days must be greater than 0.
+              </div>
+            </div>
+            <div class="col-sm-8 border rounded pt-3" *ngIf="loan_expiry_notice.value">
+              <div class="form-group row">
+                <label class="col-sm-6 col-form-label text-right" for="daysBeforeControl" translate>
+                  Sending how many days before the due date
+                </label>
+                <input type="number" class="form-control col-sm-3" id="daysBeforeControl"
+                  formControlName="number_of_days_before_due_date">
+                <div
+                  *ngIf="number_of_days_before_due_date.invalid && (number_of_days_before_due_date.dirty || number_of_days_before_due_date.touched)"
+                  class="text-danger pt-1 offset-sm-6">
+                  <div id="cipo-expiry-notice-required" *ngIf="number_of_days_before_due_date.errors.required" translate>
+                    This field is required.
+                  </div>
+                  <div id="cipo-expiry-notice-value" *ngIf="number_of_days_before_due_date.errors.min" translate>
+                    This field must be greater than or equal to 0.
+                  </div>
+                  <div id="cipo-reminder-fee-pattern" *ngIf="number_of_days_before_due_date.errors.pattern" translate>
+                    This field must be an integer.
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="form-group row" *ngIf="allow_checkout.value">
-            <label for="daysBeforeControl" class="col-sm-2 col-form-label required" translate>Days before due date</label>
+          <!-- Send first reminder-->
+          <div class="form-group row">
             <div class="col-sm-4">
-              <input type="number" class="form-control" id="daysBeforeControl"
-                formControlName="number_of_days_before_due_date">
-              <div
-                *ngIf="number_of_days_before_due_date.invalid && (number_of_days_before_due_date.dirty || number_of_days_before_due_date.touched)"
-                class="text-danger pt-1">
-                <div *ngIf="number_of_days_before_due_date.errors.required" translate>
-                  Days before due date is required.
-                </div>
-                <div *ngIf="number_of_days_before_due_date.errors.min" translate>
-                  Days before due date must be greater or equal to 0.
+              <div class='form-group'>
+                <div class="custom-control custom-switch">
+                  <input
+                    formControlName="send_first_reminder"
+                    class="custom-control-input"
+                    type="checkbox"
+                    id="send_first_reminder"
+                    [checked]="send_first_reminder.value">
+                  <label class="custom-control-label" for="send_first_reminder" translate>
+                    Send a first reminder
+                  </label>
                 </div>
               </div>
             </div>
-          </div>
-
-          <div class="form-group row" *ngIf="allow_checkout.value">
-            <label for="overdueAmount" class="col-sm-2 col-form-label required">{{ 'Fees' | translate }}
-              ({{ currency }})</label>
-            <div class="col-sm-4">
-              <input type="number" class="form-control" id="overdueAmount" formControlName="reminder_fee_amount">
-              <div *ngIf="reminder_fee_amount.invalid && (reminder_fee_amount.dirty || reminder_fee_amount.touched)"
-                class="text-danger pt-1">
-                <div *ngIf="reminder_fee_amount.errors.required" translate>
-                  Overdue amount is required.
+            <div class="col-sm-8 border rounded pt-3" *ngIf="send_first_reminder.value">
+              <div class="form-group row">
+                <label class="col-sm-6 col-form-label text-right" for="daysAfterControl" translate>
+                  Sending how many days after the due date
+                </label>
+                <input
+                  type="number"
+                  class="form-control required col-sm-3"
+                  id="daysAfterControl"
+                  formControlName="number_of_days_after_due_date">
+                <div
+                  *ngIf="number_of_days_after_due_date.invalid && (number_of_days_after_due_date.dirty || number_of_days_after_due_date.touched)"
+                  class="text-danger pt-1 offset-sm-6">
+                  <div id="cipo-first-reminder-required" *ngIf="number_of_days_after_due_date.errors.required" translate>
+                    This field is required.
+                  </div>
+                  <div id="cipo-first-reminder-value" *ngIf="number_of_days_after_due_date.errors.min" translate>
+                    This field must be greater than 0.
+                  </div>
+                  <div id="cipo-reminder-fee-pattern" *ngIf="number_of_days_after_due_date.errors.pattern" translate>
+                    This field must be an integer.
+                  </div>
                 </div>
-                <div *ngIf="reminder_fee_amount.errors.min" translate>
-                  Overdue amount must be great than 0.
+              </div>
+              <div class="form-group row" *ngIf="allow_checkout.value">
+                <label for="overdueAmount" class="col-sm-6 col-form-label required text-right" translate>Fees</label>
+                <div class="col-sm-3 p-0">
+                  <div class="input-group">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text">{{ currency }}</span>
+                    </div>
+                    <input type="number" class="form-control" id="overdueAmount" formControlName="reminder_fee_amount">
+                  </div>
                 </div>
+                <div *ngIf="reminder_fee_amount.invalid && (reminder_fee_amount.dirty || reminder_fee_amount.touched)"
+                    class="text-danger pt-1 offset-sm-6">
+                    <div id="cipo-reminder-fee-required" *ngIf="reminder_fee_amount.errors.required" translate>
+                      This field is required.
+                    </div>
+                    <div id="cipo-reminder-fee-required" *ngIf="reminder_fee_amount.errors.min" translate>
+                      This field must be greater than 0.
+                    </div>
+                    <div id="cipo-reminder-fee-pattern" *ngIf="reminder_fee_amount.errors.pattern" translate>
+                      This field must not have more than 2 decimals.
+                    </div>
+                  </div>
               </div>
             </div>
           </div>
@@ -237,78 +312,69 @@ <h1 translate>Circulation Policy</h1>
     <!-- end: notifications and fees section !-->
 
     <!-- start: application section !-->
-    <fieldset class="mt-4">
-      <div class="row">
-        <legend translate>Application</legend>
-        <div class="col-sm-12">
-          <div *ngIf="is_default.value === false">
-            <!-- start: library -->
-            <div class="form-group row">
-              <label for="policyLibraryLevel" class="col-sm-2 col-form-label required" translate>Level</label>
-              <div class="col-sm-10">
-                <div class="form-check-inline">
-                  <label class="form-check-label">
-                    <input type="radio" class="form-check-input" formControlName="policy_library_level" [value]=false
-                      (click)="policyLevelEvent(false)"> {{ 'Organisation' | translate }}
-                  </label>
-                </div>
-                <div class="form-check-inline">
-                  <label class="form-check-label">
-                    <input type="radio" class="form-check-input" formControlName="policy_library_level" [value]=true
-                      (click)="policyLevelEvent(true)"> {{ 'Library' | translate }}
-                  </label>
-                </div>
+    <fieldset class="mt-4" *ngIf="is_default.value === false">
+      <div class="card">
+        <div class="card-header" translate>Application</div>
+        <div class="card-body">
+          <!-- start: library -->
+          <div class="form-group row">
+            <label for="policyLibraryLevel" class="col-sm-2 col-form-label required" translate>Level</label>
+            <div class="col-sm-10">
+              <div class="form-check-inline">
+                <label class="form-check-label">
+                  <input id="policy-level-org" type="radio" class="form-check-input" formControlName="policy_library_level" [value]=false
+                    (click)="policyLevelEvent(false)"> {{ 'Organisation' | translate }}
+                </label>
+              </div>
+              <div class="form-check-inline">
+                <label class="form-check-label">
+                  <input id="policy-level-lib" type="radio" class="form-check-input" formControlName="policy_library_level" [value]=true
+                    (click)="policyLevelEvent(true)"> {{ 'Library' | translate }}
+                </label>
               </div>
             </div>
-            <div class="form-group row" *ngIf="policy_library_level.value == true">
-              <label for="policyLibrary" class="col-sm-2 col-form-label">&nbsp;</label>
-              <div class="col-sm-10">
-                <div *ngFor="let library of librariesOrg">
-                  <input type="checkbox" value="{{ library.id }}" [checked]="libraryCheck(library.id)"
-                    (click)="libraryClickEvent($event.target.checked, library.id)">
-                  {{ library.name }}
-                </div>
+          </div>
+          <div class="form-group row" *ngIf="policy_library_level.value == true">
+            <label for="policyLibrary" class="col-sm-2 col-form-label">&nbsp;</label>
+            <div class="col-sm-10">
+              <div *ngFor="let library of librariesOrg">
+                <input type="checkbox" value="{{ library.id }}" [checked]="libraryCheck(library.id)"
+                  (click)="libraryClickEvent($event.target.checked, library.id)">
+                {{ library.name }}
               </div>
             </div>
-            <!-- end: library -->
+          </div>
+          <!-- end: library -->
 
-            <!-- start: settings -->
-            <div class="form-group row">
-              <label for="policySettings" class="col-sm-2 col-form-label required" translate>Applies to patron types</label>
-              <div class="col-sm-10">
-                <div *ngFor="let patronType of patronTypes()">
-                  <input type="checkbox" class="mr-1" [checked]="isPatronTypeChecked(patronType.id)"
-                    [disabled]="isPatronTypeDisabled(patronType.id)"
-                    [indeterminate]="isPatronTypeDisabled(patronType.id)"
-                    (click)="patronTypeClickEvent($event.target.checked, patronType.id)"> <span
-                    [ngClass]="isPatronTypeDisabled(patronType.id) ? 'text-muted' : ''">{{ patronType.name }}</span>
-                  <div *ngIf="isPatronTypeChecked(patronType.id)" class="ml-3">
-                    <span translate>Circulation categories</span>:
-                    <ul class="d-inline list-inline mb-0">
-                      <li class="list-inline-item" *ngFor="let itemType of itemTypes()">
-                        <input class="mr-1" type="checkbox" [checked]="isItemTypeChecked(patronType.id, itemType.id)"
-                          [disabled]="isItemTypeDisabled(patronType.id, itemType.id)"
-                          [indeterminate]="isItemTypeDisabled(patronType.id, itemType.id)"
-                          (click)="itemTypeClickEvent($event.target.checked, patronType.id, itemType.id)"> <span
-                          [ngClass]="isItemTypeDisabled(patronType.id, itemType.id) ? 'text-muted' : ''">{{ itemType.name }}</span>
-                      </li>
-                    </ul>
-                  </div>
+          <!-- start: settings -->
+          <div class="form-group row">
+            <label for="policySettings" class="col-sm-2 col-form-label required" translate>Applies to patron types</label>
+            <div class="col-sm-10">
+              <div *ngFor="let patronType of patronTypes()">
+                <input id="ptty-{{patronType.id}}" type="checkbox" class="mr-1" [checked]="isPatronTypeChecked(patronType.id)"
+                  [disabled]="isPatronTypeDisabled(patronType.id)"
+                  [indeterminate]="isPatronTypeDisabled(patronType.id)"
+                  (click)="patronTypeClickEvent($event.target.checked, patronType.id)"> <span
+                  [ngClass]="isPatronTypeDisabled(patronType.id) ? 'text-muted' : ''">{{ patronType.name }}</span>
+                <div *ngIf="isPatronTypeChecked(patronType.id)" class="ml-3">
+                  <span translate>Circulation categories</span>:
+                  <ul class="d-inline list-inline mb-0">
+                    <li class="list-inline-item" *ngFor="let itemType of itemTypes()">
+                      <input id="ptty-{{patronType.id}}-itty-{{itemType.id}}"class="mr-1" type="checkbox" [checked]="isItemTypeChecked(patronType.id, itemType.id)"
+                        [disabled]="isItemTypeDisabled(patronType.id, itemType.id)"
+                        [indeterminate]="isItemTypeDisabled(patronType.id, itemType.id)"
+                        (click)="itemTypeClickEvent($event.target.checked, patronType.id, itemType.id)"> <span
+                        [ngClass]="isItemTypeDisabled(patronType.id, itemType.id) ? 'text-muted' : ''">{{ itemType.name }}</span>
+                    </li>
+                  </ul>
                 </div>
               </div>
             </div>
-            <!-- end: settings -->
           </div>
+          <!-- end: settings -->
         </div>
       </div>
     </fieldset>
     <!-- end: application section !-->
-
-    <div class="clearfix">
-      <div class="btn-group float-right" role="group" aria-label="Form Button">
-        <button class="btn btn-warning" (click)="onCancel($event)" translate>Cancel</button>
-        <button type="submit" class="btn btn-success" [disabled]="circulationForm.invalid" translate>Save</button>
-      </div>
-    </div>
   </form>
 </div>
diff --git a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.scss b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.scss
new file mode 100644
index 000000000..c889d1818
--- /dev/null
+++ b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.scss
@@ -0,0 +1,38 @@
+/* You can add global styles to this file, and also import other style files */
+/*
+ * RERO ILS UI
+ * Copyright (C) 2020 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/mixins";
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/bootstrap';
+
+.sticky {
+  @supports (position: sticky) {
+    position: sticky;
+    top: 0rem;
+    z-index: 500;
+    background: white;
+    height: 100%;
+  }
+  border-bottom: 1px solid #ccc;
+  }
+  .actions {
+    position: absolute;
+    right: 2rem;
+    top: 0.75rem;
+}
diff --git a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.ts b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.ts
index b3dd2a312..cc4cebd82 100644
--- a/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.ts
+++ b/projects/admin/src/app/record/custom-editor/circulation-settings/circulation-policy/circulation-policy.component.ts
@@ -15,10 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Location } from '@angular/common';
+import { Location, getCurrencySymbol } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ApiService, RecordService, UniqueValidator } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { CirculationMappingService } from '../circulation-mapping.service';
@@ -30,20 +30,34 @@ import { CirculationPolicyService } from '../circulation-policy.service';
 @Component({
   selector: 'admin-circulation-settings-circulation-policy',
   templateUrl: './circulation-policy.component.html',
-  styles: []
+  styleUrls: [ './circulation-policy.component.scss']
 })
 export class CirculationPolicyComponent implements OnInit {
 
-  private circulationPolicy: CirculationPolicy;
+  /** Circulation policy */
+  private _circulationPolicy: CirculationPolicy;
 
+  /** Circulation form */
   public circulationForm: FormGroup;
 
+  /** Libraries of current organisation */
   public librariesOrg = [];
 
-  public organisation;
+  /** Current organisation */
+  public organisation: any;
 
+  /**
+   * Constructor
+   * @param route - AcivatedRoute
+   * @param circulationPolicyService - CirculationPolicyService
+   * @param circulationPolicyForm - CirculationPolicyFormService
+   * @param userService - UserService
+   * @param circulationMapping - CirculationMappingService
+   * @param apiService - ApiService
+   * @param recordService - RecordService
+   * @param location - Location
+   */
   constructor(
-    private router: Router,
     private route: ActivatedRoute,
     private circulationPolicyService: CirculationPolicyService,
     private circulationPolicyForm: CirculationPolicyFormService,
@@ -54,6 +68,7 @@ export class CirculationPolicyComponent implements OnInit {
     private location: Location
     ) { }
 
+    /** On init hook */
     ngOnInit() {
       const user = this.userService.user;
       if (user) {
@@ -63,7 +78,7 @@ export class CirculationPolicyComponent implements OnInit {
           .loadOrCreateCirculationPolicy(pid)
           .subscribe((circulation: CirculationPolicy) => {
             circulation.organisation.$ref = this.apiService.getRefEndpoint('organisations', user.library.organisation.pid);
-            this.circulationPolicy = circulation;
+            this._circulationPolicy = circulation;
             // Load organisation
             this.recordService.getRecord('organisations', user.library.organisation.pid)
             .subscribe(data => this.organisation = data.metadata);
@@ -74,12 +89,12 @@ export class CirculationPolicyComponent implements OnInit {
                 this.circulationMapping.setPolicyLevel(circulation.policy_library_level);
                 this.recordService.getRecords('libraries', '', 1, RecordService.MAX_REST_RESULTS_SIZE)
                 .subscribe((libraries: any) => {
-                  libraries.hits.hits.forEach(library => {
+                  libraries.hits.hits.forEach((library: any) => {
                     this.librariesOrg.push({
                       id: library.metadata.pid,
                       name: library.metadata.name
                     });
-                    this.circulationPolicyForm.populate(this.circulationPolicy);
+                    this.circulationPolicyForm.populate(this._circulationPolicy);
                     this.circulationForm = this.circulationPolicyForm.getForm();
                     this.circulationForm.controls.name.setAsyncValidators([
                       UniqueValidator.createValidator(
@@ -97,31 +112,10 @@ export class CirculationPolicyComponent implements OnInit {
         }
       }
 
-      allowCheckoutCheckbox(checkbox: boolean) {
-        if (!this.allow_checkout.value) {
-          this.checkout_duration.setValue(null);
-          this.allow_renewals.setValue(false);
-          this.number_renewals.setValue(null);
-          this.renewal_duration.setValue(null);
-          this.number_of_days_after_due_date.setValue(null);
-          this.number_of_days_before_due_date.setValue(null);
-          this.reminder_fee_amount.setValue(null);
-        }
-      }
-
-      allowRenewalsCheckbox(checkbox: boolean) {
-        if (!this.allow_renewals.value) {
-          this.number_renewals.setValue(null);
-          this.renewal_duration.setValue(null);
-        }
-      }
-
-      numberRenewalsCheck() {
-        if (this.number_renewals.value < 1) {
-          this.renewal_duration.setValue(null);
-        }
-      }
-
+      /**
+       * Display the settings and the libraries according to the cipo level
+       * @param level - cipo level
+       */
       policyLevelEvent(level: boolean) {
         this.circulationMapping.setPolicyLevel(level);
         this.getField('settings').setValue([]);
@@ -130,11 +124,22 @@ export class CirculationPolicyComponent implements OnInit {
         }
       }
 
+      /**
+       * Check if the library is linked to the cipo
+       * @param libraryPid - library pid
+       *
+       * @returns true or false
+       */
       libraryCheck(libraryPid: string) {
         const librariesControl = this.getField('libraries');
         return librariesControl.value.indexOf(libraryPid) >= 0;
       }
 
+      /**
+       * Adds or remove the library to the list if its checked or not
+       * @param checkbox - is checked or not
+       * @param libraryId - library id
+       */
       libraryClickEvent(checkbox: boolean, libraryId: string) {
         const values = this.getField('libraries').value;
         if (checkbox) {
@@ -149,19 +154,35 @@ export class CirculationPolicyComponent implements OnInit {
         }
       }
 
+      /**
+       * Get patron types list
+       */
       patronTypes() {
         return this.circulationMapping.getPatronTypes();
       }
 
+      /**
+       * Is patron type checked
+       * @param patronTypeId - patron type id
+       */
       isPatronTypeChecked(patronTypeId: string) {
         const settingsControl = this.getField('settings');
         return patronTypeId in settingsControl.value;
       }
 
+      /**
+       * Is patron type disabled
+       * @param patronTypeId - patron type id
+       */
       isPatronTypeDisabled(patronTypeId: string) {
         return this.circulationMapping.isPatronTypeDisabled(patronTypeId);
       }
 
+      /**
+       * Add or remove patron type in settings if it's checked or not
+       * @param checkbox - is checked or not
+       * @param patronTypeId - patron type id
+       */
       patronTypeClickEvent(checkbox: boolean, patronTypeId: string) {
         const settings = this.getField('settings').value;
         if (checkbox) {
@@ -173,15 +194,28 @@ export class CirculationPolicyComponent implements OnInit {
         }
       }
 
+      /**
+       * Get item types list
+       */
       itemTypes() {
         return this.circulationMapping.getItemTypes();
       }
 
+      /**
+       * Control if item type is checked
+       * @param patronTypeId - patron type id
+       * @param itemTypeId - item type id
+       */
       isItemTypeChecked(patronTypeId: string, itemTypeId: string) {
         const settingsControl = this.getField('settings');
         return settingsControl.value[patronTypeId].indexOf(itemTypeId) > -1;
       }
 
+      /**
+       * Check if item type is disabled
+       * @param patronTypeId - patron type id
+       * @param itemTypeId - item type id
+       */
       isItemTypeDisabled(patronTypeId: string, itemTypeId: string) {
         return this.circulationMapping.isItemTypeDisabled(
           patronTypeId,
@@ -189,6 +223,12 @@ export class CirculationPolicyComponent implements OnInit {
           );
       }
 
+      /**
+       * Adds or remove item type link to patron type if it's checked or not
+       * @param checkbox - is checked or not
+       * @param patronTypeId - patron type id
+       * @param itemTypeId - item type id
+       */
       itemTypeClickEvent(
         checkbox: boolean,
         patronTypeId: string,
@@ -202,26 +242,37 @@ export class CirculationPolicyComponent implements OnInit {
             const index = values[patronTypeId].indexOf(itemTypeId);
             values[patronTypeId].splice(index, 1);
           }
-          if (values[patronTypeId].length === 0) {
-            delete values[patronTypeId];
-          }
       }
 
+      /**
+       * Submit form
+       */
       onSubmit() {
-        this.circulationPolicy.update(this.circulationPolicyForm.getValues());
-        this.circulationPolicyService.save(this.circulationPolicy);
+        this.circulationPolicyService.save({
+          $schema: this._circulationPolicy.$schema,
+          pid: this._circulationPolicy.pid,
+          organisation: this._circulationPolicy.organisation,
+          ...this.circulationPolicyForm.getValues()});
       }
 
-      onCancel(event) {
+      /**
+       * Cancel form and go back to previous page
+       * @param event - click event
+       */
+      onCancel(event: any) {
         event.preventDefault();
         this.location.back();
       }
 
+      /**
+       * Get field by name
+       * @param field - field name
+       */
       getField(field: string) {
         return this.circulationPolicyForm.getControlByFieldName(field);
       }
 
-      /* Control Fields */
+      /* Get form controls to use them in template */
       get name() {
         return this.getField('name');
       }
@@ -256,7 +307,13 @@ export class CirculationPolicyComponent implements OnInit {
         return this.getField('reminder_fee_amount');
       }
       get currency() {
-        return this.organisation.default_currency;
+        return getCurrencySymbol(this.organisation.default_currency, 'wide');
+      }
+      get loan_expiry_notice() {
+        return this.getField('loan_expiry_notice');
+      }
+      get send_first_reminder() {
+        return this.getField('send_first_reminder');
       }
       get policy_library_level() {
         return this.getField('policy_library_level');
diff --git a/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.html b/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.html
index 20101d01c..1ee10a4cc 100644
--- a/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.html
@@ -22,148 +22,135 @@ <h1 class="mb-3">{{ data.name | translate }}</h1>
     <section class="m-2 p-2">
       <!-- NAME -->
       <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Name' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Name</dt>
+        <dd id="cipo-name" class="col-sm-7 col-md-8 mb-0">
           {{ data.name }}
         </dd>
       </dl>
       <!-- DESCRIPTION -->
-      <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Description' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
+      <dl *ngIf="data.description" class="row mb-0">
+        <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Description</dt>
+        <dd id="cipo-description" class="col-sm-7 col-md-8 mb-0">
           {{ data.description }}
         </dd>
       </dl>
       <!-- LEVEL -->
       <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Level' | translate }}:
-        </dt>
+        <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Level</dt>
         <ng-container *ngIf="data.policy_library_level; then thenBlock else elseBlock"></ng-container>
         <ng-template #thenBlock>
-          <dd class="col-sm-7 col-md-8 mb-0" translate>
+          <dd id="cipo-level" class="col-sm-7 col-md-8 mb-0" translate>
             Library
           </dd>
         </ng-template>
         <ng-template #elseBlock>
-          <dd class="col-sm-7 col-md-8 mb-0" translate>
+          <dd id="cipo-level" class="col-sm-7 col-md-8 mb-0" translate>
             Organisation
           </dd>
         </ng-template>
       </dl>
     </section>
     <!-- CIRCULATION SETTINGS -->
-    <section class="m-2 p-2">
-      <h3 translate>Circulation settings</h3>
-      <!-- ALLOW CHECKOUT -->
-      <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Allow checkout' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          <ng-container *ngIf="data.allow_checkout; then thenCheckoutBlock else elseCheckoutBlock">
-          </ng-container>
-          <ng-template #thenCheckoutBlock>
-            <i class="fa fa-check text-success" aria-hidden="true"></i>
-          </ng-template>
-          <ng-template #elseCheckoutBlock>
-            <i class="fa fa-times text-danger" aria-hidden="true"></i>
-          </ng-template>
-        </dd>
-      </dl>
-      <!-- ALLOW REQUESTS -->
-      <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Allow requests' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          <ng-container *ngIf="data.allow_requests; then thenRequestBlock else elseRequestBlock"></ng-container>
-          <ng-template #thenRequestBlock>
-            <i class="fa fa-check  text-success" aria-hidden="true"></i>
-          </ng-template>
-          <ng-template #elseRequestBlock>
-            <i class="fa fa-times text-danger" aria-hidden="true"></i>
-          </ng-template>
-        </dd>
-      </dl>
-      <!-- IS DEFAULT -->
-      <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Is default' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          <ng-container *ngIf="data.is_default; then thenDefaultBlock else elseDefaultBlock"></ng-container>
-          <ng-template #thenDefaultBlock>
-            <i class="fa fa-check  text-success" aria-hidden="true"></i>
-          </ng-template>
-          <ng-template #elseDefaultBlock>
-            <i class="fa fa-times text-danger" aria-hidden="true"></i>
-          </ng-template>
-        </dd>
-      </dl>
-      <!-- CHECKOUT DURATION -->
-      <dl class="row mb-0" *ngIf="data.renewal_duration">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Checkout duration' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ data.checkout_duration }}
-        </dd>
-      </dl>
-      <!-- NUMBER OF RENEWALS -->
-      <dl class="row mb-0" *ngIf="data.number_renewals">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Number of renewals' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ data.number_renewals }}
-        </dd>
-      </dl>
-      <!-- RENEWAL DURATION -->
-      <dl class="row mb-0" *ngIf="data.renewal_duration">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Renewal duration' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ data.renewal_duration }}
-        </dd>
-      </dl>
+    <section class="card mt-4">
+      <div class="card-header"x>
+        <b translate>Circulation settings</b>
+      </div>
+      <div class="card-body">
+        <!-- ALLOW CHECKOUT -->
+        <dl class="row mb-0">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Allow checkout</dt>
+          <dd class="col-sm-7 col-md-8 mb-0">
+            <ng-container *ngIf="data.allow_checkout; then thenCheckoutBlock else elseCheckoutBlock">
+            </ng-container>
+            <ng-template #thenCheckoutBlock>
+              <i id="cipo-allow-checkout" class="fa fa-check text-success" aria-hidden="true"></i>
+            </ng-template>
+            <ng-template #elseCheckoutBlock>
+              <i id="cipo-allow-checkout" class="fa fa-times text-danger" aria-hidden="true"></i>
+            </ng-template>
+          </dd>
+        </dl>
+        <!-- CHECKOUT DURATION -->
+        <dl class="row mb-0" *ngIf="data.checkout_duration || data.checkout_duration >= 0">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Checkout duration</dt>
+          <dd id="cipo-checkout-duration" class="col-sm-7 col-md-8 mb-0">
+            {{ data.checkout_duration }}
+          </dd>
+        </dl>
+        <!-- NUMBER OF RENEWALS -->
+        <dl class="row mb-0" *ngIf="data.number_renewals">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Number of renewals</dt>
+          <dd id="cipo-cnumber-renewals" class="col-sm-7 col-md-8 mb-0">
+            {{ data.number_renewals }}
+          </dd>
+        </dl>
+        <!-- RENEWAL DURATION -->
+        <dl class="row mb-0" *ngIf="data.renewal_duration">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Renewal duration</dt>
+          <dd id="cipo-renewal-duration" class="col-sm-7 col-md-8 mb-0">
+            {{ data.renewal_duration }}
+          </dd>
+        </dl>
+        <!-- ALLOW REQUESTS -->
+        <dl class="row mb-0">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Allow requests</dt>
+          <dd class="col-sm-7 col-md-8 mb-0">
+            <ng-container *ngIf="data.allow_requests; then thenRequestBlock else elseRequestBlock"></ng-container>
+            <ng-template #thenRequestBlock>
+              <i id="cipo-allow-request" class="fa fa-check  text-success" aria-hidden="true"></i>
+            </ng-template>
+            <ng-template #elseRequestBlock>
+              <i id="cipo-allow-request" class="fa fa-times text-danger" aria-hidden="true"></i>
+            </ng-template>
+          </dd>
+        </dl>
+        <!-- IS DEFAULT -->
+        <dl class="row mb-0">
+          <dt
+          class="col-sm-3 offset-sm-2 offset-md-0 label-title"
+          title="{{ 'This circulation policy is applied by default, if no other circulation policy is defined ?' | translate }}"
+          translate>Is default</dt>
+          <dd class="col-sm-7 col-md-8 mb-0">
+            <ng-container *ngIf="data.is_default; then thenDefaultBlock else elseDefaultBlock"></ng-container>
+            <ng-template #thenDefaultBlock>
+              <i id="cipo-is-default" class="fa fa-check  text-success" aria-hidden="true"></i>
+            </ng-template>
+            <ng-template #elseDefaultBlock>
+              <i id="cipo-is-default" class="fa fa-times text-danger" aria-hidden="true"></i>
+            </ng-template>
+          </dd>
+        </dl>
+      </div>
     </section>
     <!-- NOTIFICATION AND FEES -->
-    <section class="m-2 p-2" *ngIf="data.number_of_days_after_due_date &&
-        data.number_of_days_before_due_date  && data.reminder_fee_amount">
-      <h3 translate>Notifications and fees</h3>
-      <!-- DAYS AFTER DUE DATE -->
-      <dl class="row mb-0" *ngIf="data.number_of_days_after_due_date">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Number of days after due date' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ data.number_of_days_after_due_date }}
-        </dd>
-      </dl>
-      <!-- DAYS BEFORE DUE DATE -->
-      <dl class="row mb-0" *ngIf="data.number_of_days_before_due_date">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Number of days before due date' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ data.number_of_days_before_due_date }}
-        </dd>
-      </dl>
-      <!-- REMINDER FEE AMOUNT -->
-      <dl class="row mb-0" *ngIf="data.reminder_fee_amount">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0">
-          {{ 'Reminder fee amount' | translate }}:
-        </dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ data.reminder_fee_amount }}
-        </dd>
-      </dl>
+    <section class="card mt-4" *ngIf="data.number_of_days_after_due_date ||
+        data.number_of_days_before_due_date || data.reminder_fee_amount">
+      <div class="card-header">
+        <b translate>Notifications and fees</b>
+      </div>
+      <div class="card-body">
+        <!-- DAYS AFTER DUE DATE -->
+        <dl class="row mb-0" *ngIf="data.number_of_days_after_due_date">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Number of days after due date</dt>
+          <dd id="cipo-after-due-date" class="col-sm-7 col-md-8 mb-0">
+            {{ data.number_of_days_after_due_date }}
+          </dd>
+        </dl>
+        <!-- DAYS BEFORE DUE DATE -->
+        <dl class="row mb-0" *ngIf="data.number_of_days_before_due_date">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Number of days before due date</dt>
+          <dd id="cipo-before-due-date" class="col-sm-7 col-md-8 mb-0">
+            {{ data.number_of_days_before_due_date }}
+          </dd>
+        </dl>
+        <!-- REMINDER FEE AMOUNT -->
+        <dl class="row mb-0" *ngIf="data.reminder_fee_amount">
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Reminder fee amount</dt>
+          <dd id="cipo-first-reminder-fee-amount" class="col-sm-7 col-md-8 mb-0">
+            {{ data.reminder_fee_amount }}
+          </dd>
+        </dl>
+      </div>
     </section>
     <!-- APPLICATION -->
     <section class="m-2 p-2" *ngIf="record.metadata.settings">
@@ -177,19 +164,19 @@ <h3 translate>Application</h3>
             </tr>
             <tr>
               <th scope="col" *ngFor="let itemType of itemTypes" class="text-center">
-                {{ itemType | getRecord: 'item_types' : 'field' : 'name' | async }}
+                <span id="itty-{{itemType}}">{{ itemType | getRecord: 'item_types' : 'field' : 'name' | async }}</span>
               </th>
             </tr>
           </thead>
           <tbody>
             <tr *ngFor="let setting of settings | keyvalue; let i = index">
-              <th scope="row" class="table-light">
+              <th id="ptty-{{setting.key}}" scope="row" class="table-light">
                 {{ setting.key | getRecord: 'patron_types' : 'field' : 'name' | async }}
               </th>
               <td *ngFor="let itemType of itemTypes" class="text-center">
                 <span *ngFor="let currentItemType of setting.value">
                   <span *ngIf="itemType == currentItemType">
-                    <i class="fa fa-check  text-success" aria-hidden="true"></i>
+                    <i id="ptty-{{setting.key}}-itty-{{currentItemType}}" class="fa fa-check  text-success" aria-hidden="true"></i>
                   </span>
                 </span>
               </td>