diff --git a/src/app/shared/mocks/external-source.service.mock.ts b/src/app/shared/mocks/external-source.service.mock.ts
new file mode 100644
index 0000000000..80e40512c5
--- /dev/null
+++ b/src/app/shared/mocks/external-source.service.mock.ts
@@ -0,0 +1,12 @@
+// import { ExternalSourceService } from '../../core/data/external-source.service';
+
+/**
+ * Mock for [[ExternalSourceService]]
+ */
+/*export function getMockExternalSourceService():
+ExternalSourceService {
+  return jasmine.createSpyObj('ExternalSourceService', {
+    getAllExternalSources: jasmine.createSpy('getAllExternalSources'),
+    getExternalSourceEntries: jasmine.createSpy('getExternalSourceEntries'),
+  });
+}*/
diff --git a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html
new file mode 100644
index 0000000000..29f1804f1f
--- /dev/null
+++ b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html
@@ -0,0 +1,39 @@
+<div class="modal-header">
+  <h2>{{'submission.import-external.preview.title' | translate}}</h2>
+  <button type="button" class="close"
+          (click)="closeMetadataModal()" aria-label="Close">
+      <span aria-hidden="true">×</span>
+  </button>
+</div>
+<div class="modal-body">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+        <p>{{'submission.import-external.preview.subtitle' | translate}}</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <hr>
+      </div>
+    </div>
+    <div *ngFor="let metadata of metadataList" class="row">
+      <div class="col-md-12">
+        <strong>{{metadata.key}}</strong>
+        <p>{{metadata.value.value}}</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <hr>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12 text-right">
+        <a class="btn btn-success" (click)="import()" role="button">
+          <i class="fa fa-file-import" aria-hidden="true"></i> {{'submission.import-external.preview.button.import' | translate}}
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.scss b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.scss
new file mode 100644
index 0000000000..1a70081367
--- /dev/null
+++ b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.scss
@@ -0,0 +1,3 @@
+.close:focus {
+  outline: none !important;
+}
diff --git a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.ts b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.ts
new file mode 100644
index 0000000000..de86bba3b1
--- /dev/null
+++ b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.ts
@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal, NgbModalRef, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ExternalSourceEntry } from '../../../core/shared/external-source-entry.model';
+import { MetadataValue } from '../../../core/shared/metadata.models';
+import { Metadata } from '../../../core/shared/metadata.utils';
+
+/**
+ * This component display a preview of an external source item.
+ */
+@Component({
+  selector: 'ds-submission-import-external-preview',
+  styleUrls: ['./submission-import-external-preview.component.scss'],
+  templateUrl: './submission-import-external-preview.component.html'
+})
+export class SubmissionImportExternalPreviewComponent implements OnInit {
+  /**
+   * The external source entry
+   */
+  public externalSourceEntry: ExternalSourceEntry;
+  /**
+   * The entry metadata list
+   */
+  public metadataList: Array<{ key: string, value: MetadataValue }>;
+  /**
+   * The modal for the entry preview
+   */
+  modalRef: NgbModalRef;
+
+  /**
+   * Initialize the component variables.
+   * @param {NgbActiveModal} activeModal
+   */
+  constructor(
+    private activeModal: NgbActiveModal,
+    private modalService: NgbModal
+  ) { }
+
+  /**
+   * Metadata initialization for HTML display.
+   */
+  ngOnInit(): void {
+    this.metadataList = [];
+    const metadataKeys = Object.keys(this.externalSourceEntry.metadata);
+    metadataKeys.forEach((key) => {
+      this.metadataList.push({
+        key: key,
+        value: Metadata.first(this.externalSourceEntry.metadata, key)
+      });
+    })
+  }
+
+  /**
+   * Closes the modal.
+   */
+  public closeMetadataModal(): void {
+    this.activeModal.dismiss(false);
+  }
+
+  /**
+   * Start the import of an entry by opening up an import modal window.
+   * @param entry The entry to import
+   */
+  public import(entry): void {
+    this.modalRef = this.modalService.open(SubmissionImportExternalPreviewComponent, {
+      size: 'lg',
+    });
+    const modalComp = this.modalRef.componentInstance;
+    modalComp.externalSourceEntry = entry;
+  }
+}
diff --git a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.spec.ts b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.spec.ts
new file mode 100644
index 0000000000..66ce798ed9
--- /dev/null
+++ b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.spec.ts
@@ -0,0 +1,91 @@
+// import { Component, NO_ERRORS_SCHEMA, ChangeDetectorRef } from '@angular/core';
+// import { async, TestBed, ComponentFixture, inject } from '@angular/core/testing';
+// import { TranslateModule } from '@ngx-translate/core';
+// import { SubmissionImportExternalSearchbarComponent } from './submission-import-external-searchbar.component';
+// import { ExternalSourceService } from '../../../core/data/external-source.service';
+// import { createTestComponent } from '../../../shared/testing/utils.test';
+// import { getMockExternalSourceService } from '../../../shared/mocks/external-source.service.mock';
+// import { SubmissionModule } from '../../submission.module';
+
+/*describe('SubmissionImportExternalSearchbarComponent test suite', () => {
+  let comp: SubmissionImportExternalSearchbarComponent;
+  let compAsAny: any;
+  let fixture: ComponentFixture<SubmissionImportExternalSearchbarComponent>;
+
+  beforeEach(async (() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SubmissionModule,
+        TranslateModule.forRoot(),
+      ],
+      declarations: [
+        SubmissionImportExternalSearchbarComponent,
+        TestComponent,
+      ],
+      providers: [
+        { provide: ExternalSourceService, useClass: getMockExternalSourceService },
+        ChangeDetectorRef,
+        SubmissionImportExternalSearchbarComponent
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents().then();
+  }));
+
+  // First test to check the correct component creation
+  describe('', () => {
+    let testComp: TestComponent;
+    let testFixture: ComponentFixture<TestComponent>;
+
+    // synchronous beforeEach
+    beforeEach(() => {
+      const html = `
+        <ds-submission-import-external-searchbar></ds-submission-import-external-searchbar>`;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    afterEach(() => {
+      testFixture.destroy();
+    });
+
+    it('should create SubmissionImportExternalSearchbarComponent', inject([SubmissionImportExternalSearchbarComponent], (app: SubmissionImportExternalSearchbarComponent) => {
+      expect(app).toBeDefined();
+    }));
+  });*/
+
+  /*describe('', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SubmissionImportExternalSearchbarComponent);
+      comp = fixture.componentInstance;
+      compAsAny = comp;
+      // compAsAny.externalService.getAllExternalSources.and.returnValue(observableOf([
+
+      // ]));
+    });
+
+    afterEach(() => {
+      fixture.destroy();
+      comp = null;
+      compAsAny = null;
+    });
+
+    it('Should init component properly', () => {
+      comp.ngOnInit();
+      fixture.detectChanges();
+
+      expect(comp.selectedElement)
+      expect(compAsAny.pageInfo)
+      expect(comp.sourceList)
+    });
+  });*/
+/*
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+}*/
diff --git a/src/app/submission/import-external/submission-import-external.component.spec.ts b/src/app/submission/import-external/submission-import-external.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2