diff --git a/src/app/item-page/orcid-page/orcid-sync/orcid-setting.component.html b/src/app/item-page/orcid-page/orcid-sync/orcid-setting.component.html
index 793e7570ed..563ddba699 100644
--- a/src/app/item-page/orcid-page/orcid-sync/orcid-setting.component.html
+++ b/src/app/item-page/orcid-page/orcid-sync/orcid-setting.component.html
@@ -4,71 +4,85 @@
       <ng-template ngbPanelContent>
         <div class="container">
           <form #f="ngForm" (ngSubmit)="onSubmit(f.form)">
-            <div class="row alert alert-info">
+            <ds-alert [type]="'alert-info'">
               {{ 'person.page.orcid.synchronization-mode-message' | translate}}
-            </div>
-            <div class="row">
-              <div class="card m-2 p-0 col-md">
-                <div class="card-header">{{ 'person.page.orcid.synchronization-mode'| translate }}</div>
-                <div class="card-body">
-                  <div class="container">
-                    <div class="form-group row">
-                      <label for="syncMode">{{ 'person.page.orcid.synchronization-mode.label'| translate }}</label>
-                      <select class="form-control" [(ngModel)]="currentSyncMode" name="syncMode" id="syncMode" required>
-                        <option *ngFor="let syncMode of syncModes" [value]="syncMode.value">{{ syncMode.label | translate }}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="card m-2 col-md p-0">
-                <div class="card-header">{{ 'person.page.orcid.publications-preferences'| translate }}</div>
-                <div class="card-body">
-                  <div class="m-3">
-                    <div class="form-group" >
-                      <div *ngFor="let option of syncPublicationOptions" class="row form-check">
-                        <input type="radio" [(ngModel)]="currentSyncPublications"
-                          name="syncPublications" id="publicationOption_{{option.value}}" [value]="option.value" required >
-                        <label for="publicationOption_{{option.value}}" class="ml-2">{{option.label | translate}}</label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card m-2 col-md p-0">
-                <div class="card-header">{{ 'person.page.orcid.funding-preferences'| translate }}</div>
-                <div class="card-body">
-                  <div class="m-3">
-                    <div class="form-group" >
-                      <div *ngFor="let option of syncFundingOptions" class="row form-check">
-                        <input type="radio" [(ngModel)]="currentSyncFundings"
-                          name="syncFundings" id="fundingOption_{{option.value}}" [value]="option.value" required >
-                        <label for="fundingOption_{{option.value}}" class="ml-2">{{option.label | translate}}</label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card m-2 col-md p-0">
-                <div class="card-header">{{ 'person.page.orcid.profile-preferences'| translate }}</div>
-                <div class="card-body">
-                  <div class="m-3">
-                    <div class="form-group" >
-                      <div *ngFor="let option of syncProfileOptions" class="row form-check">
-                        <input type="checkbox" [(ngModel)]="option.checked"
-                          name="syncProfile_{{option.value}}" id="profileOption_{{option.value}}" [value]="option.value" >
-                        <label for="profileOption_{{option.value}}" class="ml-2">{{option.label | translate}}</label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="row">
+            </ds-alert>
+            <div class="row mb-3">
               <div class="col-md">
-                <button type="submit" class="btn btn-primary float-right m-2">
+                <div class="card">
+                  <div class="card-header">{{ 'person.page.orcid.synchronization-mode'| translate }}</div>
+                  <div class="card-body">
+                    <div class="container">
+                      <div class="form-group row">
+                        <label for="syncMode">{{ 'person.page.orcid.synchronization-mode.label'| translate }}</label>
+                        <select class="form-control" [(ngModel)]="currentSyncMode" name="syncMode" id="syncMode"
+                                required>
+                          <option *ngFor="let syncMode of syncModes"
+                                  [value]="syncMode.value">{{ syncMode.label | translate }}</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="row mb-3">
+              <div class="col-md">
+                <div class="card">
+                  <div class="card-header">{{ 'person.page.orcid.publications-preferences'| translate }}</div>
+                  <div class="card-body">
+                    <div class="m-3">
+                      <div class="form-group">
+                        <div *ngFor="let option of syncPublicationOptions" class="row form-check">
+                          <input type="radio" [(ngModel)]="currentSyncPublications"
+                                 name="syncPublications" id="publicationOption_{{option.value}}" [value]="option.value"
+                                 required>
+                          <label for="publicationOption_{{option.value}}"
+                                 class="ml-2">{{option.label | translate}}</label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md">
+                <div class="card">
+                  <div class="card-header">{{ 'person.page.orcid.funding-preferences'| translate }}</div>
+                  <div class="card-body">
+                    <div class="m-3">
+                      <div class="form-group">
+                        <div *ngFor="let option of syncFundingOptions" class="row form-check">
+                          <input type="radio" [(ngModel)]="currentSyncFunding"
+                                 name="syncFundings" id="fundingOption_{{option.value}}" [value]="option.value"
+                                 required>
+                          <label for="fundingOption_{{option.value}}" class="ml-2">{{option.label | translate}}</label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md">
+                <div class="card">
+                  <div class="card-header">{{ 'person.page.orcid.profile-preferences'| translate }}</div>
+                  <div class="card-body">
+                    <div class="m-3">
+                      <div class="form-group">
+                        <div *ngFor="let option of syncProfileOptions" class="row form-check">
+                          <input type="checkbox" [(ngModel)]="option.checked"
+                                 name="syncProfile_{{option.value}}" id="profileOption_{{option.value}}"
+                                 [value]="option.value">
+                          <label for="profileOption_{{option.value}}" class="ml-2">{{option.label | translate}}</label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col">
+                <button type="submit" class="btn btn-primary float-right">
                   <i class="fas fa-edit"></i>
                   {{ 'person.page.orcid.save.preference.changes' | translate }}
                 </button>
@@ -78,5 +92,5 @@
         </div>
       </ng-template>
     </ngb-panel>
-  </ngb-accordion>  
-</div>
\ No newline at end of file
+  </ngb-accordion>
+</div>
diff --git a/src/app/item-page/orcid-page/orcid-sync/orcid-setting.component.ts b/src/app/item-page/orcid-page/orcid-sync/orcid-setting.component.ts
index 2429ac2e43..74b96f8859 100644
--- a/src/app/item-page/orcid-page/orcid-sync/orcid-setting.component.ts
+++ b/src/app/item-page/orcid-page/orcid-sync/orcid-setting.component.ts
@@ -26,30 +26,57 @@ export class OrcidSettingComponent implements OnInit {
    */
   @Input() item: Item;
 
+  /**
+   * The prefix used for i18n keys
+   */
   messagePrefix = 'person.page.orcid';
 
+  /**
+   * The current synchronization mode
+   */
   currentSyncMode: string;
 
+  /**
+   * The current synchronization mode for publications
+   */
   currentSyncPublications: string;
 
-  currentSyncFundings: string;
+  /**
+   * The current synchronization mode for funding
+   */
+  currentSyncFunding: string;
 
+  /**
+   * The synchronization options
+   */
   syncModes: { value: string, label: string }[];
 
+  /**
+   * The synchronization options for publications
+   */
   syncPublicationOptions: { value: string, label: string }[];
 
-  syncFundingOptions: {value: string, label: string}[];
+  /**
+   * The synchronization options for funding
+   */
+  syncFundingOptions: { value: string, label: string }[];
 
+  /**
+   * The profile synchronization options
+   */
   syncProfileOptions: { value: string, label: string, checked: boolean }[];
 
 
   constructor(private researcherProfileService: ResearcherProfileService,
-    protected translateService: TranslateService,
-    private notificationsService: NotificationsService,
-    public authService: AuthService
+              protected translateService: TranslateService,
+              private notificationsService: NotificationsService,
+              public authService: AuthService
   ) {
   }
 
+  /**
+   * Init orcid settings form
+   */
   ngOnInit() {
     this.syncModes = [
       {
@@ -91,10 +118,15 @@ export class OrcidSettingComponent implements OnInit {
 
     this.currentSyncMode = this.getCurrentPreference('dspace.orcid.sync-mode', ['BATCH', 'MANUAL'], 'MANUAL');
     this.currentSyncPublications = this.getCurrentPreference('dspace.orcid.sync-publications', ['DISABLED', 'ALL'], 'DISABLED');
-    this.currentSyncFundings = this.getCurrentPreference('dspace.orcid.sync-fundings', ['DISABLED', 'ALL'], 'DISABLED');
+    this.currentSyncFunding = this.getCurrentPreference('dspace.orcid.sync-fundings', ['DISABLED', 'ALL'], 'DISABLED');
   }
 
-  onSubmit(form: FormGroup) {
+  /**
+   * Generate path operations to save orcid synchronization preferences
+   *
+   * @param form The form group
+   */
+  onSubmit(form: FormGroup): void {
     const operations: Operation[] = [];
     this.fillOperationsFor(operations, '/orcid/mode', form.value.syncMode);
     this.fillOperationsFor(operations, '/orcid/publications', form.value.syncPublications);
@@ -131,7 +163,27 @@ export class OrcidSettingComponent implements OnInit {
     });
   }
 
-  fillOperationsFor(operations: Operation[], path: string, currentValue: string) {
+  /**
+   * Retrieve setting saved in the item's metadata
+   *
+   * @param metadataField The metadata name that contains setting
+   * @param allowedValues The allowed values
+   * @param defaultValue  The default value
+   * @private
+   */
+  private getCurrentPreference(metadataField: string, allowedValues: string[], defaultValue: string): string {
+    const currentPreference = this.item.firstMetadataValue(metadataField);
+    return (currentPreference && allowedValues.includes(currentPreference)) ? currentPreference : defaultValue;
+  }
+
+  /**
+   * Generate a replace patch operation
+   *
+   * @param operations
+   * @param path
+   * @param currentValue
+   */
+  private fillOperationsFor(operations: Operation[], path: string, currentValue: string): void {
     operations.push({
       path: path,
       op: 'replace',
@@ -139,9 +191,4 @@ export class OrcidSettingComponent implements OnInit {
     });
   }
 
-  getCurrentPreference(metadataField: string, allowedValues: string[], defaultValue: string): string {
-    const currentPreference = this.item.firstMetadataValue(metadataField);
-    return (currentPreference && allowedValues.includes(currentPreference)) ? currentPreference : defaultValue;
-  }
-
 }